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