总结一下CSS文本样式属性
font-family
设置字体
font-size
设置文字大小
color
文字颜色
font-weight
文字粗细
—normal默认值不加粗 bold加粗
font-style
文字样式
—normal默认值 正常值 oblique倾斜 italic斜体
text-align
-设置元素内文本的水平对齐方式
-text-align:left(左对齐)|right(右对齐)|center(居中对齐)|justify(两端对齐)
注:text-align属性仅对块级元素生效,解决方法:在元素外嵌套块级元素
-text-align属性可继承父元素属性
-margin:0 auto 容器居中显示
line-height
设置元素中文本行高
语法line-height:长度值丨百分比
1.不同的字体大小,需要设置不同的行高
2.em和%与字体大小有关系,行高值=字体大小*em/%
3.浏览器有默认行高,不同浏览器默认行高不一样
4.行高是可以继承的,继承的是计算后的值,不是直接把em或%的值继承过来
text-indent
首行缩进
vertical-align
(在行内元素和单元格内才起作用)
| baseline (基线对齐)
| middle(中线对齐)
| sub(下标) | super (上标)
| top(行元素顶端对齐) | bottom(行元素底端对齐)
| text-top(文字顶端对齐) | text-bottom(文字底端对齐)
| 长度 | 百分比 (+上移 -下移)(百分比是基于父级元素行高进行移动)
垂直居中
1、对单行文字:line-height设为height大小(行高计算的是包含文字本身的高度加上文字上下两部分的间距。因为文字自身显示的特点,行高的间距两部分间距是相等的,所以当单行文本内容在一个盒子里面设置的行高值等于父元素高度值 ,除去文字本身的高度,上下两边的间距值一样,所以在盒子里面就垂直居中显示了)
2、对多行文字: 父级元素添加display:table,块级元素添加display:table-cell
注:因为vetical-algin仅对行级元素生效
word-spacing
设置元素内单词之间间距,单词的判断以空格为准
2.letter-spacing:设置元素内字母之间间距
3.text-transfron:设置元素内文本的大小写
text-transfron
capitaliza | uppercase | lowercase | none
注:capitaliza首字母大写 | uppercase字母大写 | lowercase字母小写 | none没有任何设置效果
text-decoration
underline | overline | line-though | blink | none
注:underline上划线 | overline下划线 | line-though贯穿线 | blink闪烁效果 none没有任何效果|