CSS文本样式总结

总结一下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没有任何效果|

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值