CSS文字樣式

2021-08-14 09:38:03 字數 2164 閱讀 6943

字型:font-family

文字大小:font-size

文字顏色:color

文字粗細:font-weight

文字樣式:font-style

1、含空格和中文的字型名,用英文引號""括起

2、多個字型,用英文逗號,隔開

3、引號巢狀,外使用雙引號,內使用單引號

in英吋

cm厘公尺

mm公釐pt磅

pcpica

xx-small    9px

x-small

11px

small

13px

medium

16px

large

19px

x-large

23px

xx-large

28px

px         畫素

em/%

em和%都是針對父元素設定的字型大小

例子:p

.em    .em

父元素相對值em

相對值em的字型大小為2倍的p中的元素大小

相對值em的字型大小為150%的p中的元素大小

html中:

css中:font-weight

屬性值:400等用於normal      700等同於bold

normal

正常bold

加粗bolder

更粗lighter

更細100~900

html中:

css中:font-style

屬性值:

normal

正常italic

斜體,對於沒有斜體變數的特殊字型,將應用 oblique 

oblique

傾斜字型

font-variant

屬性值:

normal

正常small-caps

小型大寫字母

text-align:設定元素內文字的水平對齊方式(只對塊級元素有效)

屬性值:

left

right

center

justify

可以用於單元格

屬性值:

baseline

與基線對齊

sub下標

super

上標top

頂端對齊

text-top

與文字頂端對齊

middle

與中線對齊

bottom

底部對齊

text-bottom

與文字底部對齊

長度            例子:style="vertical-align:-15px;"

基於基線向下移動15畫素

百分比          例子:style="vertical-align:-100%;"

基於基線向下移動100%

技巧:當單行文字要垂直居中時,可以使用 line-height把值設為行高height一樣高!

屬性值:

長度值百分比

當使用px作為單位時:.text3行高不會隨著字型大小而改變

當使用em作為單位時:.text3行高值為30*1.3=39px,會自適應字型大小的改變

當使用%作為單位時:.text3行高值為30*100%=30px,會自適應字型大小的改變

當設定了乙個父元素的行高,會繼承給子元素,但是繼承的是計算後的值,不是直接把em或

%繼承過來!

例子:div

p說明:div中的行高為26px,而div中p的行高也為26px(不是39px)

word-spacing

設定元素內單詞之間間距(單詞的判斷以空格為準)

letter-spacing

設定元素內字母之間間距(每個字母間的間距)

text-transform          設定元素內文字的大小寫

capitalize|uppercase|lowercase|none

(首字母大寫|字母大寫|字母小寫|沒有任何效果)

text-decoration

設定元素內文字的裝飾

underline|overline|line-through|blink|none

(下劃線|上劃線|貫穿線|閃爍效果|沒有任何效果)

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