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