《CSS權威指南第三版》第六章 文字屬性的讀書筆記

2021-07-27 14:17:10 字數 3411 閱讀 1573

第6

章文字屬性

縮排和水平對齊

縮排文字

text

-indent

的值有、

、inherit

。具有繼承性。百分數針對的是父元素寬度。 p

所有段落首行縮排

3em。

用於塊級元素,無法用於行內元素。

可以設定負值,建議針對負縮排設定邊距。

p水平對齊

text=align

在css2.1

的值有left

、center

、right

、justify

、inherit

。具有繼承性。應用於塊級元素。

垂直對齊

行高line-height

的值有、、、

normal

、inherit

。具有繼承性。百分數是相對於元素的字型大小。

構造文字行

文字行中的每個元素都會生成乙個內容區,這由字型的大小確定。這個內容區則會生成乙個行內框,如果無其他因素,行內框完全等於內容區。

確定給定元素的行間距,只需將

line-height

的計算值減去

font-size

的計算值。 指定

line-height

值line-height

值預設通常是字型大小的

1.2倍。em、

ex和百分數值都相對於

font-size

計算。

行高和繼承

line-height

值從父元素繼承時,要從父元素計算而不是子元素。建議指定乙個數,由它設定縮放因子:

body

divp

縮放因子是繼承值而不是計算值。

垂直對齊文字

vertical-align

的值有baseline

(預設)、

sub、

super

、top

、text-top

、middle

、bottom

、text-bottom、、

、inherit

。無繼承性。應用於行內元素和表單元格。

基線對齊

vertical-align:baseline

要求乙個元素的基線與其父元素的基線對齊。

上標和下標

vertical-align:sub

宣告會使乙個元素變成下標。只降低元素的基線而不改變字型大小。

super

同理,公升高元素的基線。

底端對齊

vertical-align:bottom

將元素行內框的底端與行框的底端對齊。

vertical-align:text-bottom

是指行內文字的底端。

頂端對齊

vertical-align:top

和vertical-align:text-top

與底端對齊類似。

居中對齊

vertical-align:middle

往往應用於影象。會把行內元素框的中點與父元素基線上方

0.5ex

處的乙個點對齊。

百分數為vertical-align

設定百分數,會把元素的基線或替換元素的底邊

相對于父元素的基線

公升高或降低指定的量。指定的百分數要計算為該元素

line-height

的百分數,而

不是相對於其父元素的

line-height。

長度對齊

vertical-align

會把乙個元素公升高或降低指定的距離。正長度值是公升高,負長度值是降低。所有垂直對齊的元素都會影響行高。

字間隔和字母間隔

字間隔word-spacing

的值有、

normal

、inherit

。用於描述字

/單詞之間的間隔,具有繼承性。值分正負。

字母間隔

letter-spacing

的值有、

normal

、inherit

。用於描述字元或字母之間的間隔。具有繼承性。

間隔和對齊

word-spacing

的值可能受到

text-align

屬性值的影響。如果為

letter-spacing

指定長度值,字元間隔不會受

text-align

影響。

一般地,乙個元素的子元素會繼承該元素的計算值。

文字轉換

text-transform

的值有uppercase

、lowercase

、capitalize

、none

、inherit

。具有繼承性。

capitalize

只對每個單詞的首字母大寫。

文字裝飾

text-decoration

的值:

none

underline

下劃線,

overline

上劃線,

line-through

貫穿線,

blink

文字閃爍

inherit

注意,文字裝飾沒有繼承性,這可能使得文字的裝飾顯得怪異。

文字陰影

css2

包含文字陰影的支援,

css2.1

因為瀏覽器的支援問題沒有保留這個屬性。

text-shadow

無繼承性。格式形如:

text-shadow:green 5px 0.5pm 5px;

首先描述陰影顏色,第乙個數字是陰影向右偏移的長度(向左偏移是負數),第二個數字是陰影向下偏移的長度(向上偏移是負數),第三個數字可選,定義陰影的模糊半徑。

處理空白符

white-space

屬性可影響使用者**對源文件中的空格、換行和

tab字元的處理。 值有

normal

、nowrap

、pre

、pre-wrap

、pre-line

、inherit

。無繼承性。詳細的屬性行為:本書

p.162;h

ttp:

文字方向

direction

屬性的值有

ltr、

rtl、

inherit

。具有繼承性。

ltr:left to right

,rtl

:right to left。

unicode-bidi

屬性的值有

normal

、embed

、bidi-override

、inherit

。無繼承性。

CSS權威指南(第三版)

很早就買了這本書,之前都是斷斷續續地看,前段時間總算是花時間系統的把它看了一遍。嚴格的說是第二次才把這本書系統的看完,之前是因為很多知識點看不懂,所以沒有系統看。雖然這一次也有好多知識點沒有看懂。但是每一次看這本書總有不一樣的收穫,因為每一次你都在提高,我想這本書會一直陪伴著我。這本書講的非常通俗,...

Linux權威指南(第三版)讀書日誌

這是我第一次在csdn上寫東西,說來也怪,註冊也有一段時間了 但是並沒有想過要寫些什麼東西,或許曾經有過這樣的衝動,又或許被n多理由搪塞過去了,今天,我決定從頭開始,將學習中發現的問題與淺見寫出來,來應驗好記性不如爛筆頭這句話。從 寫起呢,最近對linux產生了非常濃厚的興趣,其實不是近期,從去年開...

CSS權威指南 第三版 第四章第五章6章

4.rgb指定顏色 rgb指定顏色方式為 p first line 其中 為顏色的指定樣式 0 100 數字為0 155 4.1為 指定 4.2長度單位 5.1使用通用總體系列 font family 加粗 font weight 讓字型變細 font size 百分數大小 任何字型大小表示方法都可...