Web前端開發(fā) 課件 第8章 CSS背景樣式VIP

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