- 字体大小
属性名:font-size
取值:数字+px
注意点:谷歌浏览器默认文字大小是16px 单位需要设置,否则无效
- 字体粗细
属性名:font-weight
取值:
关键字:
正常 | normal |
加粗 | bold |
纯数字:100~900的整百数:
正常 | 400 |
加粗 | 700 |
注意点:不是所有字体都提供了九中粗体,因此部分取值页面中无变化
实际开发中:正常、加粗两种取值使用最多。
字体和文本样式
属性名:font-style
取值:正常(默认值):normal
倾斜:italic
字体系列
属性名:font-family
系统 | 默认字体 |
Windows | 微软雅黑 |
macOS | 苹方 |
样式的层叠问题
如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效
字体font相关属性的连写
属性名:font(复合属性)
取值: font:style weight size family;
省略要求:只能省略前两个,如果省略了相当于设置了默认值
注意点:如果需要同时设置单独和连写形式,要么把单独的样式写在连写的下面,要么把单独写样式写在连写的里面。
文本缩进
属性名:text-indent
取值:数字+px 数字+em(推荐:1em = 当前标签的font-size的大小)
文本水平对齐方式
属性名:text-align
属性值 | 效果 |
left | 左对齐 |
center | 居中对齐 |
right | 右对齐 |
注意点:如果让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置
text-align:center能让哪些元素水平居中?
- 文本
- span标签,a标签
- input标签,img标签
注意点:如果需要让以上元素水平居中,text-align:center需要给以上父元素设置
文本修饰
属性名:text-decoration
属性值 | 效果 |
underline | 下划线(常用) |
line-through | 删除线(常用) |
overline | 上划线(几乎不用) |
none | 无装饰线(常用) |
注意:开发中会使用text-decoration:none;清楚a标签默认的下划线
行高
作用:控制一行的上下行间距
属性名:line-height
取值: 数字+px 倍数(当前标签font-size的倍数)
标签水平居中方法总结:margin:0 auto
可以通过margin:0 auto ;实现div、p、h(大盒子)水平居中
注意点:
1.如果要让div、p、h(大盒子)水平居中,直接给当前元素本身设置即可
2.margin:0 auto 一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度