《Web編程基礎(chǔ)》課件第3章 CSS樣式

目標(biāo)-1-了解CSS的特點及優(yōu)勢掌握CSS的基本語法及樣式規(guī)則掌握類選擇器和ID選擇器的定義方式掌握CSS選擇符的組合定義掌握CSS的繼承特性掌握樣式表的引用方式及優(yōu)先級掌握偽類及偽對象的使用方式掌握CSS樣式中常用的屬性設(shè)置CSS的概念CSS（CascadingStyleSheets，層疊樣式表）-2-單純使用HTML在排版和界面效果上具有局限性CSS解決了網(wǎng)頁界面排版的難題HTML的標(biāo)簽：定義網(wǎng)頁的內(nèi)容CSS：網(wǎng)頁內(nèi)容如何顯示樣式規(guī)則樣式規(guī)則樣式表由樣式規(guī)則組成，這些規(guī)則用于定義文檔的樣式，即告訴瀏覽器如何顯示文檔。樣式規(guī)則由三個部分構(gòu)成：選擇符（selector），屬性（properties）和屬性的取值（value）。

selector是選擇符，最普通的選擇符就是HTML標(biāo)簽的名稱。property1、property2和propertyN為屬性名；value是為對應(yīng)屬性名指定的值；每對屬性名/屬性值后一般要跟一個分號（括號內(nèi)只有一對名/值的情況除外）示例：3.1CSSBaseEG1.html-3-selector{property1：value;property2：value;......propertyN：value;}選擇符選擇符用于指定需要修飾的元素常用的選擇符主要有三類HTML選擇符ID選擇符類選擇符-4-HTML選擇符HTML選擇符

使用HTML標(biāo)簽作為選擇符，指定頁面中此類元素的樣式任何HTML標(biāo)簽都可以作為選擇符-5-P{text-indent:3em}Table{border:1pxsolidred}<p>標(biāo)簽的樣式<table>標(biāo)簽的樣式類選擇符類選擇符使用類選擇符，可以把相同的元素分類定義為不同的樣式示例：3.2ClassCssEG1.html也可以不指定HTML元素，直接用“.”加上類名稱，這樣可以使不同的元素共享同樣的樣式，提高了代碼的靈活度和復(fù)用度示例：3.3ClassCssEG2.html-6-selector.classname{property1：value;...}.classname{property1：value;...}ID選擇符ID選擇符

通過ID選擇符為某個單一元素定義單獨的樣式示例：3.4CSSBaseEG2.html-7-#IDName{property1：value;...}IDName指定元素的ID組合選擇符選擇符的組合當(dāng)有多個選擇符需要設(shè)置相同的屬性和屬性值時，可以用逗號將選擇符隔開進(jìn)行組合定義，即一次性設(shè)置多個選擇符的屬性和屬性值，這樣可以減少樣式重復(fù)定義示例：3.5SelectorGroupEG.html包含選擇符是另外一種形式的組合定義-8-selector1,selector2,...{property1：value;...}tablea{font-size:12px}table和a之間沒有通過逗號隔開，該樣式定義的是：在表格內(nèi)的鏈接的文字大小為12象素，而表格外的鏈接的文字仍為默認(rèn)大小樣式表的繼承樣式表的繼承是指內(nèi)部元素自動具有外部元素的樣式示例：3.6inherEG.html-9-<div><p> ABCD</p></div><p>元素為<div>元素的內(nèi)部元素，所以文字“ABCD”將使用<div>上規(guī)定的樣式。當(dāng)內(nèi)部元素與外部元素的統(tǒng)一樣式不一致時，將采用內(nèi)部樣式使用樣式表-1CSS的使用方式有以下幾種：內(nèi)嵌樣式（InlineStyle）內(nèi)部樣式表（InternalStyleSheet）外部樣式表（ExternalStyleSheet）

內(nèi)嵌樣式內(nèi)嵌樣式是指將CSS語句混合在HTML標(biāo)簽中使用的方式，CSS語句只對其所在的標(biāo)簽有效，內(nèi)嵌樣式通過所在標(biāo)簽的style屬性聲明示例代碼如下：-10-<h1style="color:green;font-size:38px;font-family:impact">CSS樣式</h1>使用樣式表-2內(nèi)部樣式表

內(nèi)部樣式表是指在HTML的<style>標(biāo)簽中聲明樣式的方式。內(nèi)部樣式表通過<style>標(biāo)簽聲明，只對所在的網(wǎng)頁有效示例：3.1CSSBaseEG1.html外部樣式表外部樣式表是指將CSS樣式表保存成一個獨立的文件，然后將該文件引用到網(wǎng)頁中的方式。樣式表文件名采用后綴“css”示例：3.7EsscssEG.html樣式表引入的優(yōu)先級當(dāng)在同一個網(wǎng)頁中同時使用多種方式引入CSS樣式時，樣式采用的優(yōu)先級從高到低依次是內(nèi)嵌→內(nèi)部→外部→瀏覽器缺省-11-這種方式適合于多個網(wǎng)頁需要引用大量相同的CSS樣式的情況。偽類偽類偽類通過在原有的樣式選擇符后添加偽類名稱來定義selector:選擇符pseudo-class:偽類名稱例如：表示<a>元素在鼠標(biāo)經(jīng)過時使用的樣式-12-selector:pseudo-class{property1:value;...}偽類用于指定元素在某種狀態(tài)下的樣式a:hover{color:red}使用偽類錨標(biāo)簽的偽類錨標(biāo)簽有四種狀態(tài)的偽類，分別為未被訪問前、鼠標(biāo)懸停時、被用戶激活時（鼠標(biāo)已點擊但未釋放）、被訪問過后。示例：3.8PseudoClassEG.html結(jié)合類選擇符將錨偽類和類選擇符結(jié)合使用，可以在同一個頁面做出多組不同的鏈接效果示例：3.9PseudoAndClassEG.html偽類名說明link設(shè)置對象在未被訪問前的樣式hover設(shè)置對象在其鼠標(biāo)懸停時的樣式active設(shè)置對象在被用戶激活（在鼠標(biāo)點擊與釋放之間）時的樣式visited設(shè)置對象在其鏈接地址已被訪問過時的樣式-13-偽對象偽對象與偽類的方式類似，偽對象通過對插入到文檔中的虛構(gòu)元素進(jìn)行觸發(fā)從而實現(xiàn)設(shè)定的樣式首行偽對象首行偽對象（first-line）設(shè)置對象內(nèi)的第一行的樣式示例：代碼3-10FirstLineEG.html首字母偽對象首字母偽對象（first-letter）設(shè)置對象內(nèi)第一個字母的樣式示例：代碼3-11FirstLetterEG.html-14-selector:first-line{property:value...}selector:first-letter{property:value...}偽對象用于設(shè)置元素某一部分的樣式CSS文本樣式屬性文本屬性文本屬性主要用于塊標(biāo)簽中文本的樣式設(shè)置，常用的屬性有縮進(jìn)、對齊方式、行高、文字和字母間隔、文本轉(zhuǎn)換和文本修飾等。示例：3.12TextCssEG.html文本屬性功能取值方式text-indent實現(xiàn)文本的縮進(jìn)長度（length）：可以用絕對單位（cm，mm，in，pt，pc）或者相對單位（em，ex，px）；百分比（%）：相對于父標(biāo)簽寬度的百分比text-align設(shè)置文本的對齊方式left：左對齊；center：居中對齊；right：右對齊；justify：兩端對齊line-height設(shè)置行高數(shù)字或百分比，具體可參考文本縮進(jìn)的取值方式word-spacing文字間隔，用來修改段落中文字之間的距離缺省值為0。word-spacing的值可以為負(fù)數(shù)。當(dāng)word-spacing的值為正數(shù)時，文字之間的間隔會增大，反之，word-spacing的值為負(fù)數(shù)時，文字間距就會減少letter-spacing字母間隔，控制字母或字符之間的間隔取值同文字間隔類似text-transform文本轉(zhuǎn)換，主要是對文本中字母大小寫的轉(zhuǎn)換uppercase：將整個文本變?yōu)榇髮?；lowercase：將整個文本變?yōu)樾?；capitalize：將整個文本的每個文字的首字母大寫text-decoration文本修飾，修飾強(qiáng)調(diào)段落中一些主要的文字none、underline（下劃線）、overline（上劃線）、line-through（刪除線）和blink（閃爍）-15-CSS文字樣式屬性文字屬性CSS中通過一系列的文字屬性來設(shè)置網(wǎng)頁中文字的顯示效果，主要包括文字字體、文字加粗、字號、文字樣式。示例：3.13FontCssEG.html文字屬性功能取值方式font-family設(shè)置文字字體文字字體取值可以為：宋體、ncursive、fantasy、serif等多種字體font-weight文字加粗normal：正常字體；bold：粗體；bolder：特粗體；lighter：細(xì)體font-size文字字號absolute-size：根據(jù)對象字體進(jìn)行調(diào)節(jié)；relative-size：相對于父對像中字體尺寸進(jìn)行相對調(diào)節(jié)；length：百分比。由浮點數(shù)字和單位標(biāo)識符組成的長度值，不可為負(fù)值。其百分比取值是基于父標(biāo)簽中字體的尺寸font-style文字樣式normal：正常的字體；italic：斜體；oblique：傾斜的字體-16-CSS背景樣式屬性背景屬性CSS中通過一系列的文字屬性來設(shè)置網(wǎng)頁中文字的顯示效果，主要包括文字字體、文字加粗、字號、文字樣式。示例：3.14BackGroundEG.html背景屬性功能取值方式background-color設(shè)置對象的背景顏色屬性的值為有效的色彩數(shù)值background-image設(shè)置背景圖片可以通過為url指定值來設(shè)定絕對或相對路徑指定網(wǎng)頁的背景圖像background-repeat背景重復(fù)，設(shè)置一個指定的背景圖象如何被重復(fù)repeat：背景圖像平鋪（有橫向和縱向兩種取值：repeat-x：圖象橫向重復(fù)；repeat-y：圖象縱向重復(fù)）；norepeat：背景圖像不平鋪background-attachment背景附加，設(shè)置指定的背景圖像是跟隨內(nèi)容滾動，還是固定不動scroll：背景圖像是隨內(nèi)容滾動；fixed：背景圖像固定即內(nèi)容滾動圖像不動background-position背景位置，確定背景的水平和垂直位置左對齊（left）、右對齊（right）、頂部（top）、底部（bottom）和值（自定義背景的起點位置，可對背景的位置做出精確的控制）background該屬性是復(fù)合屬性即上面幾個屬性的隨意組合，它用于設(shè)定對象的背景樣式該屬性的取值實際上對應(yīng)上面幾個具體屬性的取值-17-CSS定位樣式屬性定位屬性定位屬性主要從定位方式、層疊順序、與父標(biāo)簽的相對位置等三個方面來設(shè)置。示例：3.15PositionCssEG.html定位屬性功能取值方式position定位方式，設(shè)置對象的是否定位，以及定位的方式static：無特殊定位；relative：對象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置；absolute：將對象從文檔流中拖出，使用left，right，top，bottom等屬性進(jìn)行絕對定位z-index設(shè)置對象的層疊順序auto：遵循其父對象的定位；自定義數(shù)值：無單位的整數(shù)值，可為負(fù)值top、right、bottom、left父對象的相對位置auto：無特殊定位，自定義數(shù)值：由浮點數(shù)字和單位標(biāo)識符組成的長度值，或者百分?jǐn)?shù)。必須定義position屬性值為absolute或者relative此取值方可生效-18-如果兩個絕對定位對象的z-index具有同樣的值，那么將依據(jù)它們在HTML文檔中聲明的順序來決定其層疊順序。CSS邊框樣式屬性邊框?qū)傩赃吙驅(qū)傩杂脕碓O(shè)置對象邊框的顏色、樣式和寬度。邊框顏色用于設(shè)定邊框的顏色（border-color）。顏色的設(shè)置有4個參數(shù)，根據(jù)賦值個數(shù)的不同，會有以下幾種情況：如果在設(shè)定顏色時提供四個顏色參數(shù)，將按上

右

下

左的順序作用于四個邊框。如果只提供一個顏色參數(shù)，則應(yīng)用于四個邊框。如果提供兩個參數(shù)，第一個用于上、下邊框，第二個用于左、右邊框。如果提供三個參數(shù)，第一個用于上邊框，第二個用于左、右邊框，第三個用于下邊框。邊框樣式用于設(shè)定邊框的樣式（border-style）。邊框樣式同樣有4個參數(shù)，賦值方式與邊框顏色相同。-19-CSS樣式屬性-6邊框?qū)挾扔糜谠O(shè)定邊框的寬度（border-wi