CSS(4) 文字布局

2021-06-07 20:48:33 字數 1636 閱讀 7426

文字:

可以控制字型,文字大小,文字顏色,文字粗細,斜體,下|中|頂劃線。

text-transform:首字母或全部首字母大寫.

font-family:控制字形,見另一blog

font-size: 控制字型

例如:p.f12

text-decoration: 實現underline(下劃線),overline(上劃線),line-through(從中間穿過),blink(不知道為什麼不管用),none(可用於清除link的下劃線效果。

段落:

水平對齊:text-align  , 常用於body中設定,而在內容如container中定義margin:auto,3px和witdh  完成內容居中

text-align 實現文字行的對齊方式;塊級元素或表元素居中通過適當設定左、右邊距來實現。

其中justify表示兩端對齊,需要使用者**確定兩端對齊如何拉公升。

text-align:center 與

您可能會認為 text-align:center 與 元素的作用一樣,但實際上二者大不相同。

不僅影響文字,還會把整個元素居中。text-align 不會控制元素的對齊,而只影響內部內容。元素本身不會從一段移到另一端,只是其中的文字受影響。

垂直對齊:vertical-align, 在使用總可能根據情況選擇具體方法,請參看另一篇專門講 對齊的blog

首字母下垂: float:left。 對於首字母設定其寬和高,並保證其首字母所在的span為 float:left, 正文不變,就可以實現首字母下垂,文字環繞效果

direction:

影響塊級元素中文字的方向(從左到有、從右到左)、表中列布局的方向、兩端對齊元素中最後一行

字間距和行間距: letter-spacing    line-height

word-spacing

代表英文單詞之間的間隔:設定正值就拉公升,設定負值就拉近

letter-spacing

代表字母或漢字之間的間隔

縮排文字: text-indent

1.只能對block元素設定,而不能對行內元素應用,如果想把乙個行內元素的第一行「縮排」,可以用左內邊距或外邊距創造這種效果

2. 設定負值

text-indent還可以設定為負值。利用這種技術,可以實現很多有趣的效果,比如「懸掛縮排」,即第一行懸掛在元素中餘下部分的左邊:p 不過在為text-indent設定負值時要當心,如果對乙個段落設定了負值,那麼首行的某些文字可能會超出瀏覽器視窗的左邊界。為了避免出現這種顯示問題,建議針對負縮排再設定乙個外邊距或一些內邊距:p

3. 設定為百分比text-indent:20%

4. 繼承: text-indent 屬性可以繼承

CSS 4 文字相關屬性

1.color文字顏色三種表示 英語單詞 但是範圍太小了,工作中用得不多 例子 color red 單詞 red紅,blue藍,green綠,yellow黃,pin rgb方式設定 比例的範圍 0 255 例子 color rgb 255,0,0 color rgb 100 0 0 都要是百分號才行...

css4種布局技巧 position

position static relative absolute fixed inherit absolute 絕對定位 脫離文件流的布局,遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素 postion不為static 否則為body文件本身。relative 相對定位 文件流的布局...

CSS(4) 媒介查詢,響應式布局, 彈性盒子布局

列印和螢幕顯示不同的字型和字型大小。media screen media print media screen,print 螢幕大於600px小於900px的視窗應該應用的樣式 media screen and min width 600px and max width 900px 判斷螢幕方向or...