前言:css的这些属性就是用于控制HTML样式的关键所在,所以学好这些样式也十分重要哦。
目录
一.css的字体属性
1.字体系列
css使用font-family属性定义文本的字体系类
语法:(以div标签为例)
div {
font-family: "Microseft Yahei" /*这里设置的字体样式为微软雅黑*/
}
也可以
div {
font-family: 微软雅黑 ;
}
中文英文都可以
注意:
- 一般情况下如果有空格隔开的多个单词组成的字体要加引号 如:“Microsoft Yahei”
- 浏览器默认微软雅黑
- 尽量使用系统自带字体,保证任何浏览器都能显示
常见的字体:(可以打开world找到里面的字体)
效果演示:
2.字号大小
css使用font-size属性定义字号大小
语法:
div {
font-size: 16px;
}
注:
- 属性值可以是任意正数
- px是我们常用的单位
- 浏览器一般默认16px
- 标题标签也可以指定其大小
效果展示:
警告:一定要跟单位!!!!
3.字体粗细
css使用font-weight属性设置文本字体的粗细
语法:
div {
font-weight: bold;
}
基本属性值:
属性值 | 描述 |
---|---|
normai | 默认值(不加粗) |
bold | 定义加粗 |
100-900 | 400同等于normal 700同等于bold |
注:
- 数字取100,200,300....等整数 数字后不跟单位
- 在实际开发中推荐使用数字
效果展示:
4.文字样式(字体倾斜)
css使用font-style属性设置文本的风格
语法:
div {
font-style: normal;
}
基本属性值:
属性值 | 作用 |
---|---|
normal | 默认字体样式 |
italic | 显示斜体 |
效果演示:
5.字体的复合属性
字体属性可以把以上文字样式综合起来写可以节约代码
顺序:
选择器: {
font-style
font-weight
font-size / line-height(行间距)
font-family
}
例如:
div {
font: normal 400 16px/18px "Microsoft Yahei"
}
注意:
- 使用font属性是必须严格按照上面的顺序书写,不能更改顺序,并且各个属性之间必须以空格隔开
- 不需要的属性可以省略(系统取默认值),但是必须保留font-size和font-family属性,否则font属性失效
效果展示:
6.字体属性的总结
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 常用单位px ,一定要记得跟单位 |
font-family | 字体 | 按照实际开发而定 |
font-weight | 粗细 | 加粗是bold或700 不加粗是normal或400 没单位 |
font-size | 样式 | 倾斜是italic 不倾斜是normal |
font | 连写 | 1.顺序不能改 2.字号和字体必须有 |