字型樣式針對的是「文字本身」的形體效果,而文字樣式針對的是「整個段落」的排版效果。字型樣式注重個體,文字樣式注重整體。常見的文字樣式如下表。
屬性說明
text-indent
首行縮排
text-align
水平對齊
text-decoration
文字修飾
line-height
行高text-transform
大小寫轉換
letter-spacing、word-spacing
字母間距、詞間距
text-indent
p元素的首行是不會自動縮排的,因此我們在html中往往使用6個(空格)來實現首行縮排兩個字的空格。但是這種方式會導致冗餘**很多。因此使用text-indent屬性來定義p元素的首行縮排。
從明天起,做乙個幸福的人,喂馬,劈柴,周遊世界;從明天起,關心糧食和蔬菜,我有一所房子,面朝大海,春暖花開;從明天起,和每乙個親人通訊,告訴他們我的幸福。那幸福的閃電告訴我的,我將告訴每乙個人;給每一條河每一座山取乙個溫暖的名字。陌生人,我也為你祝福,願你有乙個燦爛的前程;願你有情人終成眷屬;願你在塵世獲的幸福;我也願面朝大海,春暖花開。
text-align
使用text-align屬性來控制文字在水平方向上的對齊方式。
text-align屬性值:
我愛學習
我愛學習
我愛學習
text-decoration
使用text-decoration屬性來定義文字的修飾效果(下劃線、中劃線、頂劃線)。text-decoration屬性取值有4個,如下表。
屬性值說明
none
去掉所有劃線效果
underline
下劃線line-through
中劃線overline
頂劃線在html中,可以使用s元素實現中劃線,用u元素實現下劃線。但是有了css之後,都是使用text-decoration屬性來實現。結構用html標籤,外觀一般都要用css。
我愛學習
我愛學習
我愛學習
line-height
可以使用line-height屬性來控制一行文字的高度。
我愛學習
我愛學習
我愛學習
text-transform
可以使用text-transform屬性來將文字進行大小寫轉換。text-transform屬性取值有4個,如下表。
屬性值說明
none
無轉換uppercase
轉換為大寫
lowercase
轉換為小寫
capitalize
只將每個英文單詞首字母大寫
study hard and make progress every day
study hard and make progress every day
study hard and make progress every day
letter-spacing
可以使用letter-spacing屬性來控制字與字之間的距離。每乙個中文漢字都被當作乙個「字」,而每乙個英文本母也被當作乙個「字」。
study hard and make progress every day.好好學習,天天向上
study hard and make progress every day.好好學習,天天向上
study hard and make progress every day.好好學習,天天向上
word-spacing
使用word-spacing屬性來定義兩個單詞之間的距離。一般來說,word-spacing只針對英文單詞而言。
study hard and make progress every day.好好學習,天天向上
study hard and make progress every day.好好學習,天天向上
study hard and make progress every day.好好學習,天天向上
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...