CSS文本属性
1.文本颜色
- 属性名:color
- 作用:控制文字的颜色。
- 可选值:
- 颜色名
- rgb或rgba
- HEX或HEXA (十六进制)
- HSL或HSLA
开发中常用的是:rgb/rgba 或 HEX/HEXA (十六进制)。
-
举例:
div {
color: rgb(112,45,78);
}
2.文本间距
- 字母间距:letter-spacing
- 单词间距:word-spacing (通过空格识别词)
- 属性值为像素(px ),正值让间距增大,负值让间距缩小。
3. 文本修饰
-
属性名:text-decoration
-
作用:控制文本的各种装饰线。
-
可选值
- none : 无装饰线(常用)
- underline :下划线(常用)
- overline : 上划线
- line-through : 删除线
-
举例:
a {
text-decoration: none;
}
4 .文本缩进
-
属性名:text-indent
-
作用:控制文本首字母的缩进。
-
属性值:css中的长度单位,例如:px,em
-
举例:
div {
text-indent:2em;
}
5.文本对齐_水平
-
属性名:text-align 。
-
作用:控制文本的水平对齐方式。
-
常用值:
- l eft :左对齐(默认值)
- r ight :右对齐
- c enter :居中对齐
-
举例:
div {
text-align: center;
}
6.行高
- 属性名:line-height
- 作用:控制一行文字的高度。
- 可选值:
- normal :由浏览器根据文字大小决定的一个默认值。
- 像素(px)。
- 数字:参考自身font-size 的倍数(很常用)。
- 百分比:参考自身font-size 的百分比。
- 备注:
由于字体设计原因,文字在一行中,并不是绝对垂直居中,若一行中都是文字,不会太影响观感。
-
举例:
div {
line-height: 60px;
line-height: 1.5;
line-height: 150%;
} -
行高注意事项:
- line-height 过小会怎样?------ 文字产生重叠,且最小值是0,不能为负数。
- line-height 是可以继承的,且为了能更好的呈现文字,最好写数值。
- line-height 和height 是什么关系?
设置了height ,那么高度就是height 的值。
不设置height 的时候,会根据 line-height *行数 来计算高度。
- 应用场景:
- 对于多行文字:控制行与行之间的距离。
- 对于单行文字:让height 等于line-height ,可以实现文字垂直居中。
备注:由于字体设计原因,靠上述办法实现的居中,并不是绝对的垂直居中,但如果 一行中都是文字,不会太影响观感。
7. vertical-align
- 属性名:vertical-align 。
- 作用:用于指定同一行元素之间,或 表格单元格 内文字的 垂直对齐方式。
- 常用值:
- baseline (默认值):使元素的基线与父元素的基线对齐。
- top:使元素的顶部与其所在行的顶部对齐。
- middle :使元素的中部与父元素的基线加上父元素字母x的一半对齐。
- bottom :使元素的底部与其所在行的底部对齐。
特别注意:vertical-align 不能控制块元素。