font-family: "Times New Roman", Times, serif;
注意:字體名稱中包含多個單詞要用("")括起來。
字體顏色color:#cccccc(16進制)
color: rgb(0%, 100%, 0%) 或者 color: rbg(0, 255, 0)
rgb顏色,百分數(shù)表示0-255的一個數(shù)
修改字號font-size
font-szie后面可接keywords(關(guān)鍵字) px 百分比 em
px:即像素值,最為常用,默認文本的像素值為16px;
keywords: 總共有7個關(guān)鍵字,分別為 xx-large, x-large, large, medium, small x-small, xx-small。但是關(guān)鍵字不精確,而且也缺乏靈活性,因此較少使用。
百分比:由于字號是一種可以繼承的屬性,因此使用百分比有時要通過計算。比如: 瀏覽器一般默認的字號都為16px,那么你將一個元素的字號設(shè)置為100%,那么這個元素的字號就為16px,也就是說100%對應(yīng)16px,這是一個基準(zhǔn)。因此,如果要將該元素的字號變?yōu)?2px,那么,用百分比表示就是200%,即16 * 2。接下來,我們來看,如果有下面的結(jié)構(gòu):
<p> <!--字號為20px--> <span>文本</span> <!--字號為75%--></p>
由于span標(biāo)簽會繼承p標(biāo)簽的字號20px,因此,此時span的字號計算公式為20 * 0.75(也就是75%) = 15px。類似的結(jié)構(gòu)可以層層嵌套,只要計算一下就可以了。
em: 表示一個大寫M的高度。但是他的作用與百分比很相近,1em = 100%, .75em = 75%, 2em = 200%。
格式化詞語和字母斜體化 font-style
italic(斜體) normal(正常) oblique(和italic一樣)
粗體 font-weight
你可以選擇100-900之間的整百數(shù)(900超粗,100不可見),但是由于瀏覽器支持的原因,用的很少。一般normal(正常) bold(粗體)
大寫化
text-transform
uppercase(大寫) lowercase(小寫) capitalize(首字母大寫) none(不進行大小寫)
該屬性可以被繼承
小型大寫字母
font-variant: small-cap;
文本修飾
text-decoration
underline line-through overline none
字母間距和字間距
letter-spacing word-spacing
對于這些屬性,可以使用文本尺寸(px em 百分比) 正值代表擴大,負值為縮小。
行高
line-height
px em 百分比 縮放因子
要理解行高,首先要理解一些概念,可以參考這篇文章和里面的鏈接文章《深入理解css中的行高》
使用行高時要注意一些問題:
1 圖片會將整行的行框撐開,但是卻并不改變實際的行高
2 em和百分比是相對于文本的字號來計算的,比如文本字號為12px,而行高被設(shè)置為150%(1.5em),那么行高為12 * 1.5
3 行高可以被繼承,但是em和百分比繼承的是計算值,而縮放因子繼承的是本身。比如p標(biāo)簽的行高被設(shè)置為150%,里面文本字號為10px,那么p里面所有標(biāo)簽都將繼承15px的行高,而不是150%;但是縮放因子不同,如果p的縮放因子被設(shè)置為2,文本字號為10px,那么p里面所有后代標(biāo)簽都將繼承2這個值,而不是20px的行高
垂直對齊
vertical-align
baseline:基線對齊
top:頂端對齊
middle:中線對齊
bottom:底端對齊
text-top:文本頂端對齊
text-bottom:文本底端對齊
sub:下標(biāo)
super:上標(biāo)
em 百分比
具體可以參考《垂直對齊:vertical-align屬性》這篇文章
使用垂直對齊要注意:
1 瀏覽器的默認對齊方式為基線對齊,但是對于圖片沒有基線,故圖片的底端會和基線對齊
2 em和百分比值是相對于行高值來計算的,用來改變元素基線的高度,可正可負,正數(shù)是元素的基線升高,負數(shù)使元素的基線下降
3 設(shè)置處置對齊可影響行框高
4 這個屬性只是用與行內(nèi)元素,表單元素,以及圖片,表格單元格
文本對齊
text-align
left right center justify(兩端對齊)
文本縮進
text-indent
px em 百分比
使用文本縮進要注意:
1 px是精確值
2 em相對于當(dāng)前字號進行縮進
3 百分比不是相對于字號,而是相對于當(dāng)前元素的寬度值來計算
4 可以使用負數(shù)來實現(xiàn)負縮進
文本格式化有個快捷方法,就是只使用font屬性,但是該屬性中必須要有字號和字體屬性,同時也可以指定行高,具體做法是在字號的后面加上"/",然后加上行高值。而且這兩種屬性必須在最后,其他屬性可以以任意屬性出現(xiàn)。
給列表定義樣式
項目符號和數(shù)字
list-style-type
對于無序列表ul有3中項目符號可以選擇
disc(實心圓) square(方形) circle(空心圓)
對于有序列表,有6中數(shù)字可以選擇
decimal(十進制) decimal-leadingzero(十進制前置0) upper-alpha(大寫字母) lower-alpha(小寫字母) upper-roman(大寫羅馬) lower-roman(小寫羅馬)
用list-style-type:none 隱藏這些樣式
給項目符號和數(shù)字定位
list-style-position
outside:讓項目符號和數(shù)字出現(xiàn)在文本外
inside: 讓項目符號和數(shù)字出現(xiàn)在文本內(nèi)
注意:可以使用padding-left調(diào)整項目符號和數(shù)字的間距,但是這種情況只有使用list-style-position:outside才有效或者根本沒有使用list-style-position。
圖形項目符號
list-style-image
url(images/...jpg)
注意:外部樣式表中圖片的路徑是相對于樣式表,而不是相對于網(wǎng)頁
這種方法可能讓你并不能很好的控制圖片的位置,通常都會用到background-image,這會更好用
列表樣式有一個快捷樣式,list-style,它可以包含上面三種情況。
新聞熱點
疑難解答