CSS笔记07-文本_文本行距输入负值的作用是-CSDN博客

本文链接：https://blog.csdn.net/a54288447/article/details/100326100

通过文本属性可以改变文本颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。

文本缩进

使用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字符的处理