一、CSS文本属性
1. 文本颜色color
h2 {
color: blue;
}
/* 十六进制表示颜色,开发最常用 */
h1 {
color: #ad6b6b;
}
/* rgb形式 */
/* 取值0-255 */
p {
color: rgb(255, 0, 0);
}
2. 对齐文本text-align
设置文本的水平对齐方式,给块级元素加,设置块级元素里面的文本和行内块的对齐方式
/* text-align对齐文本:left左对齐、center居中对齐、right右对齐 */
/* 居中只能给块级元素加,使里面的行内元素和文本居中,加在行内元素上无效 */
p {
color: rgb(255, 0, 0);
text-align: center;
}
3. 装饰文本text-decoration
a {
/* 给a链接取消下划线 */
text-decoration: none;
}
div {
/* 下划线 */
text-decoration: underline;
/*删除线*/
text-decoration: line-through;
/*上划线*/
text-decoration: overline;
}
4.4 文本缩进text-indent
通常用于首行缩进。
em 是一个相对单位,就是当前元素(font-size) 1 个文字的大小, 如果当前元素没有设置大小,则会按照父元 素的 1 个文字大小
p {
/* em是一个相对单位,就是当前元素的1个文字大小 */
text-indent: 2em;
}
h3 {
text-indent: 10px;
}
5. 行间距line-height
行高是基线到基线的距离,一般测量顶线到顶线的距离。
行高等于盒子高度时,文字垂直居中原理:
1.文字默认有顶线,中线,基线,底线。各线之间的距离相等。
2.行高=上距离 + 内容高度 + 下距离。
3.上间距=下间距=(行高-字体size)/2
4.行高等于盒子高度,文字会被挤到中间,垂直居中。
行高大于盒子高度时,文字上间距变大,文字会偏下。
行高小于盒子高度时,文字上边距变小,文字会偏上。
h3 {
text-indent: 10px;
}