1、第四章 CSS基礎(chǔ)知識(shí),本章內(nèi)容,一、CSS 簡(jiǎn)介,二、在網(wǎng)頁(yè)中應(yīng)用 CSS,三、 CSS 基本語(yǔ)法,四、CSS 選擇器,五、 CSS 的繼承性,六、 CSS 的層疊和特殊性,重點(diǎn),難點(diǎn),復(fù)習(xí),HTML 標(biāo)記 ， ， ,body,p,h1,h2,h3,li,li,li,li,li,ul,p,p,p,p,img,div id=“header”,div id=“navigation”,div id=“mainContent”,div id=“mainContent”,div id=“footer”,CSS 的引入 W3C 組織于 1996 年推出 CSS1.0 技術(shù)標(biāo)準(zhǔn)，1998 年推出 CSS2

2、.0 技術(shù)標(biāo)準(zhǔn)。 CSS 是 Cascading Style Sheets 的縮寫(xiě)，譯為“層疊樣式表”，是用于控制網(wǎng)頁(yè)樣式的一種標(biāo)記性語(yǔ)言。 HTML 控制網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)，CSS 控制網(wǎng)頁(yè)內(nèi)容的樣式。 CSS 實(shí)現(xiàn)了網(wǎng)頁(yè)的結(jié)構(gòu)與表現(xiàn)相分離。,一、CSS 簡(jiǎn)介,二、在網(wǎng)頁(yè)中應(yīng)用 CSS,在網(wǎng)頁(yè)上應(yīng)用CSS的三種方法： 行內(nèi)樣式 （Inline Styles） 內(nèi)部樣式表（Embedding a Style Block） 外部樣式表（Linking to a Style Sheet）,二、在網(wǎng)頁(yè)中應(yīng)用 CSS,行內(nèi)樣式：在 HTML 標(biāo)記的 style 屬性中設(shè)置 CSS 樣式。,例： 泡泡潛水俱

3、樂(lè)部歡迎你 泡泡潛水俱樂(lè)部 泡泡潛水俱樂(lè)部為你量身打造一流的潛水服務(wù)， ,style=“color: #FFFFFF; background-color: #000080” 泡泡潛水俱樂(lè)部,二、在網(wǎng)頁(yè)中應(yīng)用 CSS,內(nèi)部樣式表：將 CSS 樣式寫(xiě)在 和 標(biāo)記之間。,例： 泡泡潛水俱樂(lè)部歡迎你 泡泡潛水俱樂(lè)部 泡泡潛水俱樂(lè)部為你量身打造一流的潛水服務(wù)， , h1 color: #FFFFFF; background-color: #000080; 泡泡潛水俱樂(lè)部 泡泡潛水俱樂(lè)部為你量身打造一流的潛水服務(wù)， ,例： 泡泡潛水俱樂(lè)部歡迎你 泡泡潛水俱樂(lè)部 泡泡潛水俱樂(lè)部為你量身打造一流的潛水服務(wù)，

4、,二、在網(wǎng)頁(yè)中應(yīng)用 CSS,外部樣式表：將 CSS 樣式寫(xiě)在獨(dú)立的 CSS 文件中，然后將 CSS 文件鏈接到 HTML 文件上。, 泡泡潛水俱樂(lè)部 泡泡潛水俱樂(lè)部為你量身打造一流的潛水服務(wù)， ,小結(jié)：,在網(wǎng)頁(yè)上應(yīng)用CSS的三種方法： 行內(nèi)樣式 （Inline Styles） 內(nèi)部樣式表（Embedding a Style Block） 外部樣式表（Linking to a Style Sheet） 內(nèi)部樣式表優(yōu)于行內(nèi)樣式。 外部樣式表優(yōu)于內(nèi)部樣式表。,CSS 樣式由“選擇器”和“聲明”組成。 聲明由“屬性”和“屬性值”組成。 每條聲明之間用“;” 分隔。,三、CSS 基本語(yǔ)法,selecto

5、rs property: value; ,四、CSS 選擇器,CSS 常用選擇器的類型： 通配選擇器 類型選擇器 ID 選擇器 后代選擇器 類選擇器 偽類 群選擇器,四、CSS 選擇器,1. 通配選擇器（ Universal Selector ） * property: value; ,例： * padding: 0; margin: 0; ,四、CSS 選擇器,2. 類型選擇器（ Type Selectors ） Tag property: value; ,例： body font: 0.75em/1.5 宋體; background: #E0E0E0 url(images/bg.gif);

6、 ,h1 font-size: 180%; margin: 1em 0; ,p margin: 1em 0; ,四、CSS 選擇器,3. ID 選擇器（ ID Selectors ） ID property: value; ,例： #container width: 760px; margin: auto; ,#header height: 120px; background: url(images/bg_header.gif) no-repeat; ,#content padding: 30px; ,四、CSS 選擇器,4. 后代選擇器（ Descendant Selectors ） sel

7、ector1 selector2 property: value 說(shuō)明：選擇所有被 selector1 包含的 selector2。,例： #content p text-indent: 2em; ,四、CSS 選擇器,5. 類選擇器（ Class Selectors ） .className property: value; 使用類選擇器需要兩個(gè)步驟： 標(biāo)識(shí)類； 定義類。,四、CSS 選擇器,5. 類選擇器（ Class Selectors ）,例： 散文詩(shī) 秋夜 魯迅 在我的后園，可以看見(jiàn)墻外有兩株樹(shù)， ,秋夜 魯迅,秋夜 魯迅, .center text-align: center; 秋

8、夜 魯迅 在我的后園，可以看見(jiàn)墻外有兩株樹(shù)， , .center text-align: center; h2.center color: #0000FF; 秋夜 魯迅 在我的后園，可以看見(jiàn)墻外有兩株樹(shù)， ,四、CSS 選擇器,7. 偽類（ Pseudo-Classes Selectors ） selector : pseudo-class property: value ,例： a:link color: #000000; text-decoration: none; a:visited color: #000000; text-decoration: none; a:hover color

9、: #FF0000; text-decoration: underline; a:active color: #FF0000; text-decoration: underline; ,注意：一定要按照 link，visited，hover，actived 的順序書(shū)寫(xiě)。,四、CSS 選擇器,6. 群選擇器（ Group Selectors ） selector1，selector2，selector3 property: value; 說(shuō)明：當(dāng)多個(gè)選擇符設(shè)置相同樣式時(shí)，可以將選擇符合并為一組。,例： h2, h3 margin: 1em 0; td, th border: solid 1px

10、#000000; padding: 5px; ,小結(jié)：,CSS 常用選擇器的類型： 通配選擇器（*） 類型選擇器（ body p li h1 h2 h3 ） ID 選擇器（ #header #navigation #maincontent ） 后代選擇器（ #header p #navigation ul #footer p ） 類選擇器（ .center .fltrt ） 偽類（ a:link a:visited a:hover a:active ） 群選擇器（ p, li p, h2, h3 ）,五、CSS 的繼承性,繼承性是指：如果某個(gè)屬性具有繼承性，則屬性作用在父元素的同時(shí)，也會(huì)作用于

11、其包含的子元素。 常用的具有繼承性的屬性： font-family font-size font-style line-height color text-align text-indent a:link a:visited a:hover a:active,五、CSS 的繼承性, #header font: 20px/1.5 “楷體_GB2312”; color: #000000; text-align: center; width: 408px; height: 200px; border: 3px solid #993300; background: #FFF5E3 url(images/bg.jpg) no-repeat center bottom; 聊城大學(xué) 敬業(yè) 博學(xué) 求實(shí) 創(chuàng)新 ,例：,六、層疊和特殊性,選擇符的特殊性分成四個(gè)等級(jí)： 用行內(nèi)樣式具有