CSS3文本格式

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 自定義對齊位置
發佈了40 篇原創文章 · 獲贊 20 · 訪問量 1684
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章