第8章CSS常用樣式屬性主講教師：朱鐵櫻《Web前端開發》8.1字體（1）font-size:字號大小font-size屬性用于設置字號，該屬性的屬性值可以為px值、百分數、倍率值等。單位說明em倍率單位，指相對當前文本的倍率。pxpx單位，是網頁設計中常用的單位。%百分比單位，指相對于當前文本的百分比。8.1字體（2）font-family:字體font-family屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等。CSS樣式示例代碼p{font-family:"微軟雅黑";}font-family屬性可以同時指定多個字體，各字體之間以逗號隔開。8.1字體（2）font-family:字體使用font-family設置字體時，需要注意的事項如下。各種字體之間必須使用英文逗號分隔。中文字體需要加英文引號，但英文字體不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。如果字體名中包含空格、#、$等符號，則該字體必須加英文引號。盡量使用計算機系統默認字體或服務器定義的字體，保證網頁中的文字在任何用戶的瀏覽器中都能正確顯示。8.1字體（3）font-weight:字體粗細font-weight屬性用于定義文字的粗細，其屬性值如下。屬性值描述normal默認屬性值。定義標準樣式的文字。bold定義粗體文字。bolder定義更粗的文字。lighter定義更細的文字。100~900（100的整數倍）定義由細到粗的文字。其中400等同于normal，700等同于bold，數值越大字體越粗。8.1字體（5）font-style:字體風格font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體。BABCABC默認值，瀏覽器會顯示標準的字體樣式。normal瀏覽器會顯示斜體的字體樣式。italic瀏覽器會顯示傾斜的字體樣式。oblique8.1字體（6）font:綜合設置字體樣式font屬性用于對字體樣式進行綜合設置。選擇器{font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;}font屬性的語法格式注意：必須按語法格式中的順序書寫，各個屬性以空格隔開。設置字體樣式屬性時，不需要設置的屬性可以省略，該屬性會自動取默認值，但必須保留font-size屬性和font-family屬性，否則font屬性將不起作用。8.1字體（7）@font-face規則@font-face用于定義服務器字體。通過@font-face規則，網頁設計師可以在用戶計算機未安裝字體時，使用任何喜歡的字體。B@font-face{ font-family:字體名稱; src:字體路徑;}@font-face規則定義服務器字體的基本語法格式font-family用于指定字體的名稱，該名稱可以隨意定義。src屬性用于指定字體文件的路徑。8.1字體（7）@font-face規則使用服務器字體的步驟B使用@font-face規則定義服務器字體。A下載字體，并存儲到相應的文件夾中。C對元素應用“font-family”字體樣式。8.2文本（1）color:文本顏色color屬性用于定義文本的顏色。顏色英文單詞例如，red、green、blue等。十六進制顏色值例如，#F00、#FF6600、#29D794等。RGB顏色值例如，紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。注意：如果使用RGB代碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%。8.2文本（2）letter-spacing:字間距letter-spacing屬性用于定義字間距，其屬性值可為不同單位的數值。例如，像素值單位px、倍率值單位em。（3）word-spacing:單詞間距word-spacing屬性用于定義英文單詞之間的間距，對中文字符無效。8.2文本（4）line-height:行間距line-height屬性用于設置行間距。8.2文本（5）text-transform:文本轉換text-transform屬性用于控制英文字符的大小寫轉換。capitalize首字母轉換為大寫none不進行轉換（默認值）lowercase全部字符轉換為小寫uppercase全部字符轉換為大寫8.2文本（6）text-decoration:文本裝飾text-decoration屬性用于設置文本的下畫線、上畫線、刪除線等裝飾效果。underline下畫線none沒有文本裝飾（正常文本默認值）line-through刪除線overline上畫線8.2文本（7）text-align:水平對齊方式text-align屬性用于設置文本內容的水平對齊，和HTML中的align對齊屬性類似。ABCABC左對齊，為屬性默認值。left右對齊。right居中對齊。center8.2文本（8）text-indent:首行縮進text-indent屬性用于設置首行文本的縮進，其屬性值可為不同單位的數值。像素值單位px、倍率值單位em、百分數單位%，通常使用倍率值單位em。設置首行縮進時，允許使用負值。8.2文本（9）text-shadow:陰影效果text-shadow是CSS3新增屬性，使用該屬性可以為頁面中的文本添加陰影效果。選擇器{text-shadow:h-shadowv-shadowblurcolor;}text-shadow的語法格式h-shadow用于設置水平陰影的距離。v-shadow用于設置垂直陰影的距離。blur用于設置模糊半徑。color用于設置陰影顏色。各屬性值之間使用空格分隔。注意：陰影的水平距離或垂直距離參數可以設為負值，但陰影的模糊半徑參數只能設置為正值，并且數值越大陰影向外模糊的范圍也就越大。8.2文本（10）text-overflow:標示對象內溢出文本text-overflow屬性為CSS3的新增屬性，該屬性用于處理溢出的文本。選擇器{text-overflow:屬性值;}text-overflow屬性的語法格式clip：修剪溢出文本，不顯示省略符號“…”。ellipsis：用省略符號“…”替代被修剪文本，省略符號插入的位置在最后一個字符處。text-overflow屬性的常用取值8.2文本8.3背景在CSS中，背景顏色使用background-color屬性來設置。background-color屬性的取值顏色的英文單詞十六進制顏色值RGB代碼8.3背景使用CSS中的background-image屬性可以為網頁設置背景圖像。例如：8.3背景默認情況下，背景圖像會自動向水平和豎直兩個方向平鋪。如果不希望圖像平鋪，或者只沿著一個方向平鋪，可以通過background-repeat屬性來控制background-repeat屬性的取值repeat：沿水平和豎直兩個方向平鋪（默認屬性值）。no-repeat：不平鋪（圖像位于元素的左上角，只顯示一次。repeat-x：只沿水平方向平鋪。repeat-y：只沿豎直方向平鋪。8.3背景8.3背景background-position屬性用于精確元素的位置。background-position屬性的基本語法格式background-position:屬性值1屬性值2;“屬性值2”表示背景圖像垂直位置。“屬性值1”表示背景圖像水平位置。8.3背景使用不同單位的數值屬性的取值最常用的是像素值，可以使用像素值直接設置圖像左上角在元素中的水平坐標和垂直坐標。使用方位名詞①水平方向值：left、center、right。②垂直方向值：top、center、bottom。使用百分比①0%0%：表示圖像左上角與元素的左上角對齊。②50%50%：表示圖像50%50%中心點與元素50%50%的中心點對齊。③20%30%：表示圖像20%30%的點與元素20%30%的點對齊。④100%100%：表示圖像右下角與元素的右下角對齊。8.3背景使用background-attachment屬性可以將背景圖像固定在瀏覽器窗口的某個位置。圖像隨頁面一起滾動（默認屬性值）圖像固定在屏幕上，不隨頁面滾動scrollfixed8.3背景在CSS3中，運用background-size屬性可以設置背景圖像的大小。background-size屬性的基本語法格式background-size:屬性值1屬性值2;屬性值1為必選屬性值，性值2為可選屬性值。8.3背景屬性值說明像素值設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會默認為auto。百分比以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會默認為auto。cover把背景圖像擴展至足夠大，使背景圖像完全覆蓋背景區域。背景圖像的某些部分可能無法顯示在背景定位區域中。contain按照某一邊，把背景圖像擴展至最大尺寸，背景圖像會完全顯示在區域中。屬性值可以是像素值、百分數或“cover”“contain”關鍵字，具體解釋如下。8.3背景在CSS中背景屬性也是一個復合屬性，可以將背景相關的樣式都綜合定義在一個復合屬性background中。使用background屬性綜合設置背景樣式的語法格式background:[background-color][background-image][background-repeat][background-attachment][background-position][backg