通过文本属性可以改变文本颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。
文本缩进
使用text-indent属性可以实现文本缩进,所有块级元素的第一行都可以缩进一个给定的长度。甚至是负值。该属性可以被继承
p {
text-indent: 2em;
}
ps:如果首行有一个图像,该图像也会跟随该行的文本移动
使用负值可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边
p {
text-indent: -2em;
}
不过在对段落进行设置的时候,某些文本可能会有超出浏览器窗口的效果。为了避免这样。需要对负缩进设置一个外边距或一些内边距
p {
text-indent: -2em;
padding-left: 2em;
}
可以实现出类似这样的效果。
百分比缩进,会根据父元素的宽度进行百分比缩进
div {
width:500px;
}
p {
text-indent:20%;
}
<div>
<p>this is a paragragh</p>
</div>
</body>
上面父元素宽度为500px,缩进设置为20%。那么第一行就会缩进其父元素的20%。也就是100个像素。
水平对齐
使用text-align属性可以设置文本行之间的对齐方式。left、center、right
p {
text-align: center;
}
text-align:center和<CENTER>元素的作用是不一样的
<CENTER>不仅影响文本,还会把整个元素居中
text-align:center只会把元素中内容居中,而不会影响元素的位置
字间隔
使用word-spacing属性可以改变字之间的间隔,默认为0。可以使用一个正长度值或一个负长度值
p.spread {
word-spacing: 20px;
}
p.tight {
word-spacing:-0.5em;
}
<body>
<p class="spread">this is a paragraph</p>
<p class="tight">this is a paragraph</p>
</body>
字母间隔
使用letter-spacing属性可以修改字母之间的。其他与上面一样
p.spread {
letter-spacing: 20px;
}
p.tight {
letter-spacing:-0.5em;
}
字符转换
使用text-transform属性可以处理文本的大小写
none:保持不动。
uppercase:全大写
lowercase:全小写
capitalize:首字母大写
p.spread {
text-transform: capitalize;
}
文本装饰
使用text-decoration属性可以装饰文本,默认为none
none:关闭元素上所有文本装饰
underline:下划线
overline:上划线
line-through:贯穿线
blink:文本闪烁
h1 {
text-decoration: overline;
}
h2 {
text-decoration: underline;
}
h3 {
text-decoration: line-through;
}
h4 {
text-decoration: blink;
}
这个闪烁没看出来啥效果。。也不知道是不是我用的有问题。可以同时使用多个装饰,比如上划线和下划线
h5 {
text-decoration: underline overline;
}
文本方向
使用direction属性可以对块级元素设置文本方向,行内元素,只有unicode-bidi设置为embed或bidi-override时才会应用
ltr:从左到右
rtl:从右到左
inherit:继承父元素
h1 {
direction: rtl;
}
文本空白符
使用white-space属性会影响对HTML文档中空格、换行和tab字符的处理