天天看点

CSS基础笔记——文本样式

字体样式针对的是文字本身的形体效果,而文本样式针对的则是整个段落的排版效果

在CSS中,常见的文本样式如下

CSS基础笔记——文本样式

首行缩进:text-indent

p元素的首行是不会自动缩进的,所以我们可以使用text-indent属性来定义p元素的首行缩进

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字体样式</title>
        <style type="text/css">
            p{
                font-size: 14px;
                text-indent: 28px;
            }
        </style>
    </head>
    <body>
        <h3>《活着》</h3>
        <p>对自己的经历如此清楚,又能如此精彩地讲述自己。他是那种能够看到自己过去模样的人,他可以准确地看到自己年轻时走路的姿态,甚至可以看到自己是如何衰老的。这样的老人在乡间实在难以遇上,也许是困苦的生活损坏了他们的记忆,面对往事他们通常显得木纳,常常以不知所措的微笑搪塞过去。他们对自己的经历缺乏热情,仿佛回到了道听途说般的只记得零星几点,即便是这零星几点也都是自生之外的记忆,用一两句话表达了他们所认为的一切。</p>
    </body>
</html>
           

中文段落首行一般需要缩进两个字的空间。想要实现这个效果,text-indent值应该是font-size值的两倍

水平对齐:text-align

text-align的属性取值有三个:left、center、right分别对应左对齐(默认)、居中对齐、右对齐

text-align属性不仅对文本有效,对图片img元素也有效

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字体样式</title>
        <style type="text/css">
            p{
                font-size: 14px;
                text-indent: 28px;
                text-align: left;
            }
            h3{
                font-size: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h3>《活着》</h3>
        <p>对自己的经历如此清楚,又能如此精彩地讲述自己。他是那种能够看到自己过去模样的人,他可以准确地看到自己年轻时走路的姿态,甚至可以看到自己是如何衰老的。这样的老人在乡间实在难以遇上,也许是困苦的生活损坏了他们的记忆,面对往事他们通常显得木纳,常常以不知所措的微笑搪塞过去。他们对自己的经历缺乏热情,仿佛回到了道听途说般的只记得零星几点,即便是这零星几点也都是自生之外的记忆,用一两句话表达了他们所认为的一切。</p>
    </body>
</html>
           

文本修饰:text-decoration

在CSS中,我们可以使用text-decoration属性来定义文本的修饰效果(下划线、中划线、顶划线)

text-decoration属性取值有四个

CSS基础笔记——文本样式

我们都知道超链接(a元素)默认样式有下划线,那么我们就可以用text-decoration:none;去除掉超链接的下划线

大小写:text-transform

在CSS中,我们可以使用text-transform属性来将文本进行大小写转换。但是text-transform是针对英文而言的,因为中文不存在大小写之分

text-transform属性取值有四个

CSS基础笔记——文本样式

行高:line-height

在CSS中,我们可以使用line-height属性来控制一行文本的高度

line-height:像素值;
           

字间距:letter-spacing

在CSS中,我们可以使用letter-spacing属性来控制字与字之间的距离

letter-spacing:像素值;
           

词间距:word-spacing

在CSS中,我们可以使用word-spacing属性来定义两个单词之间的距离

word-spacing:像素值;
           

一般来说,word-spacing只针对英文单词而言