Css樣式 文字樣式詳解

2021-10-12 18:41:35 字數 1601 閱讀 9207

文字樣式包括所謂的文字縮排:text-indent

水平對齊:text-align:center;left;right

字間隔和字母間距、字元轉換:text-transform等

1.文字縮排:text-indent

**如下:

p

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

**如下:

p

2.text-indent 具有繼承屬性

**如下:

div#outer 

div#inner

p some text. some text. some text.

this is a paragragh.

這裡的p 首行縮排50px

2.水平對齊:text-align:center;left;right;

3.字間隔和字母間距: word-spacing屬性可以改變字(單詞)之間的標準間隔。其預設值 normal 與設定值為 0 是一樣的。

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

4.字元轉換:text-transform即大小寫 首字母 轉換。使用 text-transform 有兩方面的好處。首先,只需寫乙個簡單的規則來完成這個修改,而無需修改 h1 元素本身。其次,如果您以後決定將所有大小寫再切換為原來的大小寫,可以更容易地完成修改。

**如下:

none 沒有變化

uppercase 全大寫

lowercase 全小寫

capitalize 單詞首字母大寫

5.文字裝飾:text-decoration

描述none

預設。定義標準的文字。

underline

定義文字下的一條線。

overline

定義文字上的一條線。

line-through

定義穿過文字下的一條線。=

blink

定義閃爍的文字。

inherit

規定應該從父元素繼承 text-decoration 屬性的值。

**如下:

a:link a:visited

如果兩個不同的裝飾都與同一元素匹配,勝出規則的值會完全取代另乙個值。請考慮以下的規則:

**如下:

h2.stricken 

h2

對於給定的規則,所有 class 為 stricken 的 h2 元素都只有乙個貫穿線裝飾,而沒有下劃線和上劃線,因為 text-decoration 值會替換而不是累積起來。

6.處理空白格

white-space 屬性會影響到使用者**對源文件中的空格、換行和 tab 字元的處理。

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...