【技術等級】初級

【承接文章】《CSS字體屬性，詳解屬性用法，提升前端小白能力》

本文重點講解CSS技術中有關文本樣式的屬性以及這些屬性的取值。本文屬于前端開發的初級教程，适合于剛剛開始接觸CSS技術的學習者。

所謂文本，就是大段落的文字。當文字多到可以形成段落時，就會涉及到段落的一些樣式調整。例如段落的對齊方式、段落的首行縮進等。

被歸結為段落屬性的CSS樣式包括八個，小海老師将其分為兩組。

第一組有如下五個屬性：

• letter-spacing

• word-spacing

• text-decoration

• text-transform

• text-indent

第二組有如下三個屬性：

• text-align

• line-height

• vertical-align

本文小海老師先為大家講解第一組的5個屬性，後續的文章會緊接着為大家講解第二組的3個屬性。

CSS技術利用letter-spacing屬性來設置字符間距

該屬性可以有多種取值：

• normal，正常，表示字符間距采用系統定義的默認間距。

• 帶單位的長度值，指定字符間距的具體數值。

實例：.sty01{letter-spacing:20px;}

上述代碼定義了用戶自定義類sty01，該樣式設置字符間距為20像素。

二、設置單詞間距：

CSS技術利用word-spacing屬性來設置單詞間距

在頁面中，單詞是以空格作為依據的，每個空格之間被認定為一個單詞。所以也可以認為該屬性是用來調整句子中空格的距離的。

該屬性可以有多種取值：

• normal，正常，表示單詞間距采用系統定義的默認間距。

• 帶單位的長度值，指定單詞間距的具體數值。

實例：.sty02{word-spacing:20px;}

上述代碼定義了用戶自定義類sty02，該樣式設置單詞間距為20像素。

三、設置文本修飾：

CSS技術利用text-decoration屬性來設置文本修飾

該屬性可以有多種取值：

• none，文本沒有經過任何修飾。

• underline，下劃線修飾。

• overline，上劃線修飾。

• line-through，删除線修飾。

• blink，閃爍修飾（主流浏覽器不支持該效果）。

讓我們一同來看兩個下例子：

例1：結合虛類設定超級鍊接在鼠标經過時顯示下劃線效果。

a:link{font-size:12px;text-decoration:none;}

a:visited{font-size:12px;text-decoration:none;}

a:hover{font-size:12px;text-decoration:underline;}

a:active{font-size:12px;text-decoration:none;}

例2：結合虛類設定超級鍊接在鼠标經過時放大字号效果。

a:link{font-size:12px; }

a:visited{font-size:12px; }

a:hover{font-size:14px; }

a:active{font-size:12px; }

四、設置段落中西文的大小寫模式：

CSS技術利用text-transform屬性來設置西文的大小寫模式

該屬性可以有多種取值：

• none，段落中西文的大小寫模式不受CSS樣式的影響。

• uppercase，所有西文均為大寫模式。

• lowercase，所有西文均為小寫模式。

• capitalize，所有西文均為首字母大寫模式。

五、設置段落的首行縮進：

CSS技術利用text-indent屬性來設置段落的首行縮進

首行縮進是指：段落中的第一行與整個段落左側之間的距離，也就是我們俗稱的“每一段的第一行空兩個格”。

該屬性可以取值為：

• 帶有單位的長度值，一般首行縮進兩個字符，可設置為字号的2倍。

實例：設置段落的首行縮進為兩個字符的距離。

<p>段落内容……</p>

p{font-size:14px; text-indent:28px;}

文章預告

下一篇文章中，小海老師會為大家從細節上深入剖析text-align屬性以及塊級元素和内聯元素的使用。塊級元素與内聯元素在前端開發中的作用非常重要，我會用整整一篇文章的篇幅，為廣大Web前端愛好者們詳細講解這兩個概念。對于渴望在前端開發道路上前進的你一定不能錯過！

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的内容，可以私信我，我會免費将小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上也已經寫了有七八篇文章了。這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟着學下去，我們共同将前端開發的路努力堅持的走下去。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部