天天看點

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隻針對英文單詞而言