《CSS權威指南》學習記錄 文字屬性

2021-07-12 05:54:26 字數 4496 閱讀 6832

使用文字屬性,可以控制文字的顏色、字元間距,對齊文字,裝飾文字,對文字進行縮排等。

p

通過使用text-indent,可以將元素的第一行縮排乙個指定長度,甚至是負值。一般的,可以將其應用到所有塊級元素上,但不能應用到行內(inline)元素上,影象之類的替換元素也不行。不過,如果乙個塊級元素的首行中有乙個影象,它也會跟著其餘文字移動。

p

上述**可以實現段落的「懸掛縮排」,即第一行懸掛在餘下元素的左邊。設定內邊距的原因是防止向左超出瀏覽器的邊界。

text-indent可以使用所有長度單位(包括百分數)。

div

p

百分數要相對於縮排元素父元素的寬度。上例中,text-indent設為10%,所影響元素的第一行會縮排其父元素寬度的10%。

text-indent可以繼承。

text-align,它會影響乙個元素中文本行相互之間的對齊方式。它有4個關鍵字:left(左對齊),right(右對齊),center(**對齊),justify(兩端對齊)。只能應用於塊級元素上。可以繼承。text-align不會控制元素的對齊,只是影響其內部內容。

其中,center要通過設定元素的外邊距來實現。justify中,文字行的左右兩端都放在父元素的內邊界上,然後,通過調整字母和單詞之間的間隔實現每行的長度相等。要注意的是,實際上是由使用者**來決定兩端對齊文字如何拉伸。

行高

line-height是指文字行基線之間的距離,它確定了將各個元素框的高度增加或減少多少。實際上,line-height控制了行間距,line-height值和字型大小之差就是行間距。在應用到塊級元素時,它定義了元素文字基線之間的最小距離。

工作文字行

文字行中的每個元素都會生成乙個內容區,它的大小是由字型大小決定的,這個內容區會生成乙個行內框(inline box)。如果不存在其他因素,這個行內框就等於生成區。將line-height的值減去font-size的值(可能是負值),再除以2,分別應用到內容區的頂部和底部,結果就是行內框。可以包含最高行內框的頂端和最低行內框的底端的最小框就是行框。

指定line-height值

如果使用normal,使用者**會自己計算,結果通常是字型大小的1.2倍。em、ex、百分數都相對於元素的font-size值計算。可以使用長度單位。

行高和繼承

line-height從父元素繼承時,要根據父元素計算,而不是根據子元素計算。

body

divp

adasas

asasdasp>

div>如上例,則文字間會發生重疊。因為line-height為10px,而font-size為18px,相減的結果為負值。解決方案如下:

body

divp

通過指定乙個數來設定縮放因子,則各元素會根據自己的font-size計算line-height。

垂直對齊文字

vertical-align。只應用於行內元素和替換元素,不能繼承。接受8個關鍵字:baseline(預設值)、sub、super、bottom、text-bottom、middle、top、text-top。

1.基線對齊

baseline要求乙個元素的基線與其父元素的基線對齊。如果乙個垂直對齊元素沒有基線,則其底端和其父元素的基線對齊。

2.上標和下標

sub宣告會使元素變成下標,即其基線或底端(替換元素)相對于父元素的基線降低。super恰好相反。需要注意的是,上標或下標的文字大小不會改變。

3.底端對齊

bottom將元素行內框的底端與行框的底端對齊。text-bottom是指行內文字的底端,替換元素或其他任何非文字型別的元素都會忽略這個值。對於這些元素,將考慮乙個「預設框」,其由父元素的font-size得到,要對齊的元素的行內框的底端再與這個預設框的底端對齊。

4.頂端對齊

top的作用和bottom相反,類似的,text-top的作用也和text-bottom相反。對齊的具體位置取決於行內有哪些元素,它們有多高,以及父元素font-size的大小。

5.居中對齊

middle往往應用於影象。它把行內元素框的中點與父元素的基線上方0.5ex處的乙個點對齊,這裡的0.5ex是相對于父元素的font-size定義o(╯□╰)o(感覺沒必要這麼細緻吧~~)

6.百分數

使用百分數不能模仿影象的middle對齊。如果為vertical-align設定乙個百分數,會把元素的基線或底端相對于父元素的基線公升高或降低指定的量(指定的百分數要計算為該元素line-height的值,而不是相對於其父元素的line-height)。正百分數使元素公升高,負百分數使元素降低。

7.長度對齊

可以使用長度單位來公升高或降低元素。

需要注意的是,所有垂直對齊的元素都會影響行高,這意味著不會發生序列或重疊現象。

word-spacing接受正值或負值,可用任意長度單位,用於改變字之間的間隔。關於字的定義,暫且簡單地理解為「由非空白字元組成的串,並由某種空白符包圍。

p

letter-spacing與word-spacing類似,區別在於前者改變的是字母或字元之間的距離。可以用它來突出強調效果。

h1

text-transform,可接受的值有uppercase(將文字轉換成全大寫)、lowercase(全小寫)、capitalize(只對每個單詞的首字母大寫)、none(不變)。有繼承性。

text-decoration,可接受的值有:underline(下劃線)、overline(上劃線)、line-through(貫穿線)、blink(文字閃爍)、none(去掉所有文字裝飾)。無繼承性。

a

可以在乙個規則中結合多種裝飾:

a

要注意的是,如果用兩個不同的裝飾與同乙個元素相匹配,則勝出規則的值會完全替代另乙個值

h2

.try

h2

則所有class值為try的h2只有貫穿線,而沒有上劃線和下劃線。

規範指出,text-decoration沒有繼承性,但事實上子元素能夠「繼承」父元素的文字裝飾:

p

*********xspan>***p>

則會發現,span中的文字下也有下劃線,即使加一條規則:

span

你會發現,沒有任何改變。

有些瀏覽器會違反規範,去掉子元素中的文字裝飾,因為這是大多數創作人員所希望的。有一種方法可以「去掉」子元素中的文字裝飾:在乙個元素上使用文字裝飾意味著整個元素都有相同的顏色裝飾,即使子元素有不同的顏色,因此可以顯式宣告子元素的裝飾,使其與元素匹配:

p

span

則span中的文字下會有灰色的下劃線,「覆蓋」了父元素黑色的下劃線。

white-space會影響使用者**對文件中的空格、換行、tab字元的處理。無繼承性。

p

這個規則告訴瀏覽器按平常的做法去做:丟掉多餘的空白符,換行符會轉換成空格,且一行中多個空格的序列也會轉換成乙個空格。

p

則空白符不會被忽略,包括回車。

p

該規則會防止元素中的文字換行,除非使用*元素。

p

則文字中的空白符和換行符都會被保留。

p

則空白符序列會被合併,但換行符會被保留。

direction,可接受的值有:ltr,rtl。例如:

*:lang(ar),*:lang(he)

CSS文字屬性

一 可以被繼承的屬性 font size font family font weight font style line height color text align text indent 二 文字大小 屬性值為數值型,必須給屬性值加單位,屬性值為0時除外。單位可以是pt px em 9pt 1...

CSS 文字屬性

1 縮排文字 text indent 3em 段落首行縮排給定長度 只應用於塊級元素,無法將這個屬性應用與行內元素。影象之類的替換元素上也無法應用text indent屬性。可以繼承 如果要設定成負值,為了防止超出邊界,建議的寫法如下 p2 水平對齊 text align left center r...

css 文字屬性

字型顏色color 字元間距letter spacing 文字背景色background color 行間距line height 90 10px,0.3 對齊文字text align 文字修飾text decoration 取值 overline line through underline bl...