更新時間:2021-03-31 17:37:47 來源:動力節點 瀏覽1208次
CSS(層疊樣式表)不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS文本格式主要分為:文本顏色(color)、文本對齊方式、文本修飾、文本陰影、文本縮進、文本間距、字間距、文本空白處理、文本轉換。下面我們來逐一講解:
1.文本對齊方式:text-align屬性有四個值:left,center,right,justify(兩端對齊);屬性默認值為auto。
2.文本修飾:text-decoration 屬性用來設置或刪除文本的修飾。
主要是用來刪除超鏈接的下劃線,也可以使用其他值來設置文本的修飾;
text-decoration:overline,設置文本上劃線。
text-decoration:line-through; 設置文本中間劃線。
text-decoration:underline; 設置文本下劃線。
3.文本陰影:text-shadow: x y shadow color;
其中 x 是水平陰影的偏移值,
y 是垂直陰影的偏移值,
shadow 用于指定陰影的模糊值,即模糊效果的作用距離,不允許負值。
color 指定陰影的顏色。該屬性有兩個作用,產生陰影和模糊主體。
4.文本縮進:用來指定文本的首行縮進,允許為負值,如果值是負數,第一行則向左縮進。
CSS表示為:text-indent:2em,em 是相對文字大小的單位,1em 就是1個文字大小,2em 就是兩個文字大小。
5.文本間距:行高,也就是文本行的高度。例如:line-height:22px;
6.字間距:letter-spacing 和 word-spacing 這兩個屬性都可用來增加或減少文本間的空白,即字間距。
不同的是:
letter-spacing 屬性設置字符間距,而 word-spacing 屬性設置單詞間距。
注意:word-spacing 屬性對中文無效,因此在設置中文的字間距時請使用 letter-spacing 屬性。
letter-spacing 和 text-align:justify 是兩個沖突的屬性,不能同時使用;
text-align:justify 是設置內容根據寬度自動調整字間距,使各行的長度恰好相等,實現文本兩端對齊效果,
而 letter-spacing 是指定一個固定的字間距。
7.文本空白處理:white-space 屬性指定元素內的空白如何處理,默認值為 normal 空白會被瀏覽器忽略。
該屬性還有4個值:
nowrap 文本不會換行,禁止換行,文本會在同一行上繼續,直到遇到 <br> 標簽為止。
pre 空白會被瀏覽器保留,這種方式類似 HTML 中的 <pre> 標簽,用于定義預格式文本。
pre-wrap 指定保留空白符序列,但是正常地進行換行。
pre-line 指定合并空白符序列,但是保留換行符,并允許自動換行。
8.文本轉換:text-transform 屬性控制文本中的字母。
是用來指定在一個文本中的大寫和小寫字母,可用于將所有字句變成大寫或小寫字母,或每個單詞的首字母大寫。
text-transform:capitalize, 定義文本中的每個單詞以大寫字母開頭。
text-transform:uppercase,定義文本僅有大寫字母。
text-transform:lowercase,定義文本僅有小寫字母。
以上就是對CSS文本格式的非常詳細的講解,包含了CSS文本格式中的各個細分的細節。在本站的CSS教程中,對CSS布局和CSS屬性都有很好的講解,要學習CSS技術的小伙伴千萬不要錯過。
0基礎 0學費 15天面授
有基礎 直達就業
業余時間 高薪轉行
工作1~3年,加薪神器
工作3~5年,晉升架構
提交申請后,顧問老師會電話與您溝通安排學習