1.字體類型,大小和顏色
font-family :name //定義字體類型
font-size:xx-small //定義字體大小最小
color:[顏色值]定義顏色
實例設計
設計一個簡單的網頁h5
網頁效果如下·:
使用css修飾各個欄目的文本字體大小正文直接繼承body字體大小,因此不需要重複定義
2.粗體 斜線 下劃線
font-weight:normal(默認) == //定義字體粗細==
font-style:normal(默認)| italic(斜體)| oblique(表示斜體的字體)//定義傾斜
text-decoration:none || underline || blink || overline || line-through
//其中blink 表示閃爍效果; underline 表示下劃線效果;line-through 表示貫穿線效果;overline表示上劃線
實例設計:
設計多種下劃線的應用效果
3.變體和大小寫
1.font-variant: normal | small-caps(小型的大寫字母字體) //定義字體的變體效果
(font-variant 僅支持拉丁字體,中文沒有大小寫之分)
2.text-transform:none | capitalize | uppercase | lowercase //定義文字大小寫
其中none 爲默認值 , uppercase 表示把所有字母都大寫 ,lowercase表示所有字母都變成小寫
實例設計
使用 text-transform 設計單詞首字母大寫樣式
IE顯示
google顯示
4.文本格式
文本對齊
1.text-align //定義文本水平對齊方式
2.vertucal-align 定義文本垂直對齊用法如下:
屬性值 | 作用 |
---|---|
auto | 自動對齊 |
baseline | 默認值基線對齊 |
sub | 下標 |
super | 上標 |
top | 頂端對齊 |
text-top | 文本頂端對齊 |
middle | 居中對齊 |
bottom | 底端對齊 |
text-bottom | 文本底端對齊 |
lenght | 自定義對齊位置 |