CSS Day03 CSS樣式 文字

2021-07-09 11:19:54 字數 2902 閱讀 5869

css 文字屬性

通過文字屬性,您可以改變文字的顏色、字元間距,對齊文字,裝飾文字,對文字進行縮排,等等。

text-indent 屬性

規定文字塊中首行文字的縮排。

text-indent 屬性的三種形式

div

#inner //繼承

p //使用百分比值

p //數值

使用負值:

可以實現很多有趣的效果,比如「懸掛縮排」,即第一行懸掛在元素中餘下部分的左邊:

p

注意事項:

p 

//為 text-indent 設定負值時要當心,如果對乙個段落設定了負值,那麼首行的某些文字可能會超出瀏覽器視窗的左邊界。為了避免出現這種顯示問題,建議針對負縮排再設定乙個外邊距或一些內邊距:

text-align 屬性

值 justify

最後乙個水平對齊屬性是 justify,它會帶來自己的一些問題。

值 justify 可以使文字的兩端都對齊。在兩端對齊文字中,文字行的左右兩端都放在父元素的內邊界上。然後,調整單詞和字母間的間隔,使各行的長度恰好相等。您也許已經注意到了,兩端對齊文字在列印領域很常見。不過在 css 中,還需要多做些考慮。

要由使用者**(而不是 css)來確定兩端對齊文字如何拉伸,以填滿父元素左右邊界之間的空間。例如,有些瀏覽器可能只在單詞之間增加額外的空間,而另外一些瀏覽器可能會平均分布字母間的額外空間(不過 css 規範特別指出,如果 letter-spacing 屬性指定為乙個長度值,「使用者**不能進一步增加或減少字元間的空間」)。還有一些使用者**可能會減少某些行的空間,使文字擠得更緊密。所有這些做法都會影響元素的外觀,甚至改變其高度,這取決於使用者**的對齊選擇影響了多少文字行。

css 也沒有指定應當如何處理連字元(注1)。大多數兩端對齊文字都使用連字元將長單詞分開放在兩行上,從而縮小單詞之間的間隔,改善文字行的外觀。不過,由於 css 沒有定義連字元行為,使用者**不太可能自動加連字元。因此,在 css 中,兩端對齊文字看上去沒有列印出來好看,特別是元素可能太窄,以至於每行只能放下幾個單詞。當然,使用窄設計元素是可以的,不過要當心相應的缺點。

注1:css 中沒有說明如何處理連字元,因為不同的語言有不同的連字元規則。規範沒有嘗試去調和這樣一些很可能不完備的規則,而是乾脆不提這個問題。

word-spacing 屬性

可以改變字(單詞)之間的標準間隔。其預設值 normal 與設定值為 0 是一樣的。

letter-spacing 屬性letter-spacing 屬性與 word-spacing 的區別在於,字母間隔修改的是字元或字母之間的間隔。

text-transform 屬性

處理文字的大小寫,字元轉換屬性。這個屬性有 4 個值:

text-decoration 屬性

a //鏈結預設地會有下劃線。如果您希望去掉超連結的下劃線
a

:link

a:visited

//還可以在乙個規則中結合多種裝飾。如果希望所有超連結既有下劃線,又有上劃線

h2

.stricken

h2 //不過要注意的是,如果兩個不同的裝飾都與同一元素匹配,勝出規則的值會完全取代另乙個值。

對於給定的規則,所有 class 為 stricken 的 h2 元素都只有乙個貫穿線裝飾,而沒有下劃線和上劃線,因為 text-decoration 值會替換而不是累積起來。white-space 屬性會影響到使用者**對源文件中的空格、換行和 tab 字元的處理。

direction 屬性

影響塊級元素中文字的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最後一行的位置。

注釋:對於行內元素,只有當 unicode-bidi 屬性設定為 embed 或 bidi-override 時才會應用 direction 屬性。

direction 屬性有兩個值:ltr(預設) 和 rtl。

CSS樣式 文字樣式

文字擷取 employorganizalistctrl listtext 文字對齊方式 text align justify 文字超出固定高度 顯示滾動條 overflow scroll 顯示邊框 border 1px dashed ff6b6b 虛線 border top style 1px so...

CSS樣式 文字

css文字屬性可定義文字外觀。通過文字屬性,可以改變文字的顏色,字元間距,對齊文字,裝飾文字,對文字縮排 color aquamarine 顏色是繼承效果 text align center 文字對齊方式 text indent 2 em 首行文字縮排2個畫素 text transform capi...

CSS 文字樣式

left center right左中右 justify 兩端對齊 inherit 繼承 行高不夠時,行與行之間後重疊 數字px 數字em 數字 基於字型大小的百分比 數字 父元素的百分比 數字px 數字em 固定值預設為0 inherit繼承 normal 預設 數字px 固定值 可為負值 inh...