一.今日内容 CSS字体属性
1.字体外观
CSS使用font-family属性来定义文本的字体外观
注意点：
- 各种字体字体之间要用英文的逗号隔开
- 一般情况下如果字体的是由多个英文单词构成，那么就要用引号将字体名称引起来
- 尽量使用系统默认的字体，保证在任何用户的浏览器中都可以正常显示
- 字体大小
- 注意点：
- 不同的浏览器可能会有不同的默认字体大小，所以我们尽量给一个明确的字体大小的值，不要用默认大小。
- 一般情况下我们会在body标签中去设置整个页面的字体大小
- 例
- 字体样式
- css使用font-style来设置文本的风格
- 属性值：
- normal（默认值，浏览器会显示标准的字体样式）
- 注意点：
- 平时我们很少给文字添加斜体样式，通常情况下是给斜体标签（em、i）改为正常显示的字体（不倾斜）
- 例
- 字体粗细
- css使用font-weight属性来设置文本的粗细
- 常用数值：400代表正常字体大小，700代表加粗字体，注意：属性值后面不加像素单位
- 例
- 字体的复合属性
- 字体属性可以把上述的字体样式来综合书写，这样可以节约代码
- 注意点：
- 使用font属性时，不可以省略 font-size 和 font-family属性，否则font属性会失效
- font-style 和 font-weight是可以进行省略的，不写这两个属性，就会选择默认值来进行设置
- 使用font属性时，要严格按照固定的顺序来进行书写，不能更换顺序，各个属性之间要用空格隔开
CSS的文本属性
- 文本颜色
- CSS使用color属性来设置文本的颜色
- 属性值：
- 十六进制：#FF0000 等等（网页中设置颜色的主要方式）
- 例
- 文本对齐
- CSS里面使用text-align属性来设置文本的水平对齐方式
- 例
- 文本装饰
- CSS使用text-decoration来进行文本的装饰
- 属性值
- underline：下划线，a标签自己默认带着下划线
- 例
- 文本缩进
- CSS中使用text-indent属性来设置文本的缩进，通常在段落的首行使用。
- 属性值：
- 固定像素单位，可以给定指定单位，但是不够灵活，数值一般是正值
- 相对单位：1em 就是当前元素（font-size）的大小的1倍。如果当前元素没有设置大小，会按照父元素的文字大小进行缩进
- 例
- 行间距
- CSS中使用line-height来设置行间的距离（行高），可以控制文字行与行之间的距离，值可以写具体的像素值，也可以写倍数（经常在body中设置）
- 例
- 将行高设置为和当前元素的高度一致即可设置文本为垂直居中
- 控制文本达到边界是否换行
- 例
CSS的引入方式
- 行内样式表
- 直接在元素内部写style属性，将要设定的属性值写在style=后面
- 例
- 注意点：
- 开发中不常用，更多情况下还是使用外部样式表来进行样式书写
- 内部样式表
- 内部样式表是写到html页面内部的，在<head></head>标签中的<style></style>标签中书写
- 例
- 注意点：
- 通过这种方式虽然可以实现控制页面中结构的样式，但是没有完全实现结构和样式的分离
- 外部样式表
- 外部样式表是我们实际开发中最常用的，核心是将CSS代码单独放到css文件中，再将文件引入到html文件中进行使用
- 引入外部样式表的步骤
- 1、先创建一个css文件，在文件内书写css代码
- 2、在HTML页面使用<link>标签引入这个文件即可
- 通过引入一个css文件来间接的引入多个css文件
 
Emmet语法
- 这个语法可以帮助我们使用缩写来提高编写html/css的速度，VScode中已经将该语法进行了集成。
- 具体的语法使用如下：
- 1、直接输入标签 使用tab来自动补全
- 2、快速生成多个标签
- 3、生成父子级标签
- 4、生成兄弟级标签
- 5、快速生成带id属性或者class属性的标签
- 6、使用自增符号$, 来实现类名的区分
- 7、生成标签时可以直接写入内容
- 8、快速生成css代码
|
