|
一、今日学习内容： 一、CSS字体属性 1、字体外观 CSS使用font-family属性来定义字体外观 各种字体之间用英文逗号,隔开 一般情况下如果字体是由多个英文单词构成，那么久需要用引号将字体名称引起来 尽量使用系统默认的字体，保证任何用户的浏览器都可以正常显示 CSS里的Unicode字体 在CSS中设置字体名称时，直接写中文是可以的，但是在文件编码不匹配的情况下（GB2312、UTF-8等）会产生乱码的情况，在CSS中直接使用Unicode编码来表示字体可以避免这些问题 2、字体大小 CSS使用font-size来控制字体大小 注意点：使用px（像素单位）来控制字体大小 谷歌浏览器默认的字体大小是16px 不同的浏览器可能会有不同的默认字体，所以尽量给一个明确的字体大小的值，不要用默认大小 一般情况下载body标签中设置页面的字体大小 3、字体样式 CSS使用font-style来设置文本的风格 属性值：normal（默认值，浏览器会显示标准的字体样式） italic（浏览器会显示倾斜的字体样式） 注意点：平时很少给问你添加倾斜样式，通常情况下是给倾斜标签（em、i）改为正常显示的字体（不倾斜） 4、字体粗细 CSS使用font-weight属性来设置文本的粗细 400代表正常，700代表加粗，属性值后面不加像素单位 5、字体的复合属性 字体复合属性可以把上述字体样式综合书写，可以节约代码 注意点：使用font属性时，不可以省略font-size和font-family，否则属性会失效 font-style和font-weight是可以省略的，不写的话，就会选择默认值来进行设置 使用font属性时，要严格按照固定的顺序来进行书写，不能更换顺序，各个属性之间要用空格隔开 font:font-style font-weight font-size/line-height font-family 二、css的文本属性 1、文本颜色 CSS使用color来设置文本颜色 属性值：预定义的英文字母，如red、green等 十六进制：#F0000等（网页中设置颜色的主要方式 RGB代码：rgb（255,0,0） 2、文本对齐 CSS使用text-align属性来设置文本的水平对齐方式 属性值：right、center、left（默认值） 3、文本装饰 CSS使用text-decoration来进行文本的装饰 属性值：none：默认值，没有装饰线（最常用）（给a标签去掉下划线） underline：下划线，a标签默认带着下划线 overline：上划线，基本不用 line-through：删除线 4、文本缩进 CSS使用text-indent来设置文本缩进，通常在段落的首行使用 属性值：固定像素单位，可以给定指定单位，但是不够灵活，数值一般是正值 相对单位：1em是当前元素（font-size）大小的1倍，如果当前元素没有设置大小，会按照元素的文字大小进行缩进 5、行间距 CSS中使用line-height来设置行间的距离（行高），可以控制文字行与行之间的距离，值可以写具体的像素值，也可以写倍数（经常在body中设置） 将行高设置为当前元素高度一致即可设置文本为垂直居中 6、控制文本达到边界是否换行 属性：white-space normal：默认值，达到边界自动换行 nowrap：达到边界不换行 三、css的引入方式 1、行内样式表 直接在元素内部写style属性，将要设定的属性值写在style=后面 注意点：在双引号书写样式时，要符合CSS语法规范 开发中并不常用，更多情况下还是使用外部样式表来进行样式书写 2、内部样式表 是写到html页面内部的，在<head></head>标签中的<style></style>标签中书写 注意点：通过这种方式虽然可以实现控制页面中结构的样式，但是没有完全实现结构和样式的分离 练习的时候我们通常用内部样式表 3、外部样式表 是实际开发中最常用的，核心是将CSS代码单独放在CSS文件中，再将文件引入到html文件中进行使用 引入外部样式表的步骤 先创建一个CSS文件，在文件内书写CSS代码 在html页面使用<link>标签引入这个文件即可 通过引入一个CSS文件来间接引入多个CSS文件 四、Emment语法 这个语法可以帮助我们使用缩写来提高编写html/css的速度，VSCode中已经将该语法进行了集成 用法 1、直接输入标签名，再按tab键可以生成完整的标签 2、快速生成多个标签 p*5 3、生成父子级的标签 div>p 4、生成兄弟级的标签 div+p 5、快速生成带有id属性和属性值（#first）或者带有类和类名的标签（.last） （p.类名） 6、使用自增符号$来实现类名的区分 div.demo$*5 7、生成标签时可以写入内容 div{内容}*5 8、 快速生成CSS代码 在<table></table>中，使用tac来生成text-align:center; 二、今日问题：无 三、解决方案：无
| 
