CSS技術(shù)基本概述實用教案

1、HTML總結(jié)(zngji)&回顧 HTML標(biāo)記的組合就是HTML語言，瀏覽器根據(jù)HTML標(biāo)記的含義進(jìn)行解析和顯示 HTML標(biāo)記及標(biāo)記屬性(shxng)的規(guī)范寫法： 所有開始標(biāo)記都有結(jié)束標(biāo)記 標(biāo)記名和屬性(shxng)名小寫 屬性(shxng)值加雙引號或單引號 掌握常用HTML標(biāo)記： 文字、標(biāo)題、段落 、層 、列表 和、超鏈接、 圖像、換行等第1頁/共86頁第一頁，共87頁。HTML回顧(hug) 重點(diǎn)理解：表格 與、()的使用 利用表格進(jìn)行布局(bj) 重點(diǎn)理解：表單 標(biāo)記及表單控件標(biāo)記（、等）的用法 理解表單提交數(shù)據(jù)的過程 數(shù)據(jù)如何打包（表單元素名稱=表單元素值） 數(shù)據(jù)發(fā)送至何處（

2、action屬性） 數(shù)據(jù)發(fā)送的形式（method屬性：GETPOST）第2頁/共86頁第二頁，共87頁。本篇內(nèi)容(nirng) CSS概述(i sh) CSS細(xì)節(jié)第3頁/共86頁第三頁，共87頁。說明(shumng) 本篇教學(xué)目的在于(ziy)css入門，能夠運(yùn)用css的幾種基本用法，能夠看懂和理解比較復(fù)雜一些的css用法第4頁/共86頁第四頁，共87頁。一、CSS概述(i sh) CSS定義 CSS的產(chǎn)生(chnshng) 第一個CSS示例 CSS的好處第5頁/共86頁第五頁，共87頁。1.1 CSS定義(dngy) CSS（Cascade Style Sheet） 級聯(lián)（層疊）樣式表 是由

3、W3C組織制定的一種用來定義(dngy)樣式規(guī)則（如字體、顏色和位置）的語言 能讓網(wǎng)頁制作者有效地定制、改善網(wǎng)頁的顯示效果第6頁/共86頁第六頁，共87頁。1.2 CSS的產(chǎn)生(chnshng) HTML中，文本的格式化（樣式設(shè)置）可以使用一些特定的標(biāo)記，比如粗體標(biāo)記，標(biāo)記等 樣式標(biāo)記散落于HTML語言中，使得內(nèi)容和格式化的代碼混雜(hnz)一起，難以區(qū)分。解決方法是改用獨(dú)立的技術(shù)CSS 示例(shl)第7頁/共86頁第七頁，共87頁。1.3 第一個CSS示例(shl)示例(shl)第8頁/共86頁第八頁，共87頁。1.3.1 第一個CSS說明(shumng)CSS語句 CSS語句(yj)的構(gòu)

4、成： 樣式 應(yīng)用樣式的場所第9頁/共86頁第九頁，共87頁。 CSS語句的構(gòu)成： 樣式 應(yīng)用(yngyng)樣式的場所 pcolor : red; 在這里，頁面中的 元素是應(yīng)用樣式的場所(chn su)，CSS中，元素名稱兩邊不加屬性名color代表(dibio)字體顏色屬性值red一條樣式樣式屬性名和值之間用冒號（：）分隔，每條樣式最后加一個分號（；）應(yīng)用于 元素的所有樣式放置在一對大括號之間樣式包括：樣式屬性名樣式屬性值第10頁/共86頁第十頁，共87頁。 CSS語句的構(gòu)成： 樣式(yngsh)（屬性名、屬性值） 應(yīng)用樣式(yngsh)的場所 pcolor : red; 這條CSS語句(y

5、j)的作用：選擇頁面上的所有元素，將內(nèi)容的字體顏色設(shè)置為red稱之為p選擇符也叫做(jiozu)“選擇符”第11頁/共86頁第十一頁，共87頁。 CSS語句(yj)里添加更多樣式： 可以添加若干條樣式（屬性名、屬性值） pcolor : red;font-size:32px; 這條CSS語句的作用：將頁面上元素的內(nèi)容的字體(zt)顏色設(shè)置為red，大小設(shè)置為32像素;第12頁/共86頁第十二頁，共87頁。1.3.2 第一個CSS說明(shumng)CSS的引入 CSS的引入有多種方式，第一個示例采用(ciyng)在頁面文件中直接引入CSS樣式，方法如下：第13頁/共86頁第十三頁，共87頁。

6、css pcolor:red; 第一段文字(wnz) 在HTML頁面中直接引入CSS，需要在元素里增加一對樣式(yngsh)開始和結(jié)束標(biāo)記（）標(biāo)記(bioj)屬性type值為text/csscss語句置于標(biāo)記之間第14頁/共86頁第十四頁，共87頁。 css pcolor:red; 第一段文字(wnz) 內(nèi)容的樣式(yngsh)采用獨(dú)立的CSS原始(yunsh)內(nèi)容樣式 應(yīng)用p選擇符選擇頁面中的元素第15頁/共86頁第十五頁，共87頁。1.3.3 第一個CSS說明(shumng)寫法 以下寫法都可以： CSS不區(qū)分大小寫，推薦(tujin)全部小寫 pcolor : red;font-size

7、 : 32px; p color : red; font-size : 32px; 包含多條樣式(yngsh)時，習(xí)慣第一種寫法第16頁/共86頁第十六頁，共87頁。1.3.4 第一個CSS說明(shumng)術(shù)語總結(jié) CSS語句的構(gòu)成： （若干條）樣式 樣式的屬性(shxng)名 樣式的屬性(shxng)值 應(yīng)用樣式的場所選擇符 pcolor : red; p選擇符一條(y tio)樣式樣式屬性名樣式屬性值第17頁/共86頁第十七頁，共87頁。1.4 CSS的好處(ho chu) CSS將HTML格式與內(nèi)容分離，有利于對內(nèi)容進(jìn)行統(tǒng)一的格式設(shè)置和修改 CSS樣式相比HTML格式化標(biāo)記(bioj

8、)的功能更加豐富和強(qiáng)大不采用(ciyng)CSS示例采用CSS示例第18頁/共86頁第十八頁，共87頁。二、CSS細(xì)節(jié)(xji) CSS樣式(yngsh) CSS選擇符 CSS的引入方式 CSS樣式(yngsh)的級聯(lián)第19頁/共86頁第十九頁，共87頁。2.1 CSS樣式(yngsh) HTML中的格式化標(biāo)記（如等）功能有限，CSS樣式的功能更加強(qiáng)大 CSS包括各種樣式屬性，用于控制字體、顏色、對齊方式和邊距以及位置等 CSS樣式種類繁多，無須(wx)一一記憶第20頁/共86頁第二十頁，共87頁。2.1.1 CSS樣式(yngsh)字體 字體的樣式屬性主要包括文字(wnz)的字體、大小、顏色

9、、顯示效果等示例(shl)向雷鋒同志學(xué)習(xí)！僅通過HTML如何實現(xiàn)該效果第21頁/共86頁第二十一頁，共87頁。字體樣式(yngsh)的說明 font-family：指定(zhdng)字體 可以指定(zhdng)多個字體，字體之間以逗號（,)分隔 按順序依次查找計算機(jī)中有無指定(zhdng)的字體，有則顯示，無則查找下一個，如果都沒有查到，采用默認(rèn)字體font-family:微軟雅黑,楷體(kit),宋體;第22頁/共86頁第二十二頁，共87頁。字體(zt)樣式的說明 font-size：字體大小 常用單位(dnwi)：px（像素），pt（點(diǎn)） 40px：px代表像素單位(dnwi)，單位(dn

10、wi)通常不要省略 font-size: 40px; 第23頁/共86頁第二十三頁，共87頁。字體樣式(yngsh)的說明 color：字體顏色 可以用預(yù)定義的顏色名稱 可以用十六進(jìn)制(sh li jn zh)代碼 顏色拾取 color:red; color:#ff0000; 第24頁/共86頁第二十四頁，共87頁。字體(zt)樣式的說明 font-weight：控制字體的粗細(xì) 取值：normal, bold, lighter, bolder，默認(rèn)normal font-style：控制文字傾斜(qngxi) 取值：italic，normal，默認(rèn)normal text-decoration：

11、控制下劃線等 取值：underline（下劃線），line-through（中劃線），overline（上劃線） font-weight: bold; font-style:italic; text-decoration:underline; 示例(shl)第25頁/共86頁第二十五頁，共87頁。CSS字體(zt)樣式屬性含義屬性值font-family字體各種字體font-style字體樣式italic、oblique、normalfont-variant小體大寫small-capsfont-weight字體粗細(xì)normal、bold、bolder、lighterfont-size字體大小a

12、bsolute、relative、%color字體顏色顏色值第26頁/共86頁第二十六頁，共87頁。2.1.2 CSS樣式(yngsh)背景 背景屬性包括背景顏色、背景圖像以及背景圖像的控制(kngzh) background-color：設(shè)置元素的背景色示例(shl) background-color: silver;第27頁/共86頁第二十七頁，共87頁。CSS樣式(yngsh)背景 background-image：設(shè)置元素的背景圖像 background-repeat：設(shè)置背景圖像的重復(fù) 取值：no-repeat（不重復(fù)），repeat（在水平和垂直(chuzh)方向上重復(fù)），repe

13、at-x和repeat-y（分別在水平和垂直(chuzh)方向上重復(fù)），默認(rèn)repeat background-image: url( “” ) ; 示例(shl)可以用相對地址或絕對地址示例第28頁/共86頁第二十八頁，共87頁。CSS背景(bijng)樣式屬性含義屬性值background-color背景色顏色值background-image背景圖案圖片路徑(相對，絕對)background-repeat背景圖案重復(fù)方式repeat-x | repeat-y | no-repeat| repeat第29頁/共86頁第二十九頁，共87頁。2.1.3 CSS樣式(yngsh)文本 文本屬性包

14、括對齊方式、文字間距、行距(hngj)等 text-align：設(shè)置文本的水平對齊方式 取值：left，center，right，默認(rèn)left示例(shl) text-align: center;第30頁/共86頁第三十頁，共87頁。HTML的格式化用法(yn f) VS CSS CSS樣式屬性和HTML屬性很多寫法不完全一致，比如：text-align（CSS中），align（HTML標(biāo)記屬性） HTML中一些格式化標(biāo)記，比如（粗體）（斜體）等，在CSS中，通過(tnggu)新的樣式屬性來展現(xiàn) 傳統(tǒng)HTML中用于格式化的標(biāo)記（，等）不再推薦使用，推薦采用CSS來實現(xiàn) 相比HTML格式化標(biāo)記，

15、CSS提供的樣式功能更加豐富第31頁/共86頁第三十一頁，共87頁。對比(dub)示例(shl) p font-family:微軟雅黑,楷體(kit),宋體; color:red; font-size:32px; font-weight:bold; font-style:italic; text-decoration:underline; 第一段文字第二段文字第32頁/共86頁第三十二頁，共87頁。2.1.4 CSS樣式(yngsh)邊框 在CSS看來，HTML元素都有一個邊框 CSS邊框?qū)傩?shxng)設(shè)置元素邊框的顏色、寬度、樣式等第33頁/共86頁第三十三頁，共87頁。 border-

16、style（邊框樣式）：控制邊框的外觀 取值：none(無邊框)，solid(實線)，dashed（虛線)，dotted（點(diǎn)線），double（雙線），groove(凹槽)，inset（凹邊），ridge（凸槽），outset（凸邊(t bin)） border-color（邊框顏色）： 取值：顏色名，或十六進(jìn)制 border-width（邊框?qū)挾龋?通常采用像素單位示例(shl)第34頁/共86頁第三十四頁，共87頁。 border屬性：通過該屬性同時設(shè)置邊框(binkung)樣式、寬度、顏色 border: 5px solid green;多個值之間以空格分隔(fng)，多個值的順序隨意

17、示例(shl)第35頁/共86頁第三十五頁，共87頁。 定義(dngy)邊框的一側(cè)：可以定義(dngy)任何一側(cè)(上、下、左、右）的邊框的樣式、寬度或顏色 border-top border-bottom border-left border-right 比如：定義(dngy)邊框上側(cè)border-top-style: dashed;border-top-width:5px;border-top-color:green; border-top: 10px dashed navy;示例(shl)第36頁/共86頁第三十六頁，共87頁。 div border:5px solid blue;bord

18、er-top:10px dashed navy; 對于邊框上側(cè)：border-top樣式(yngsh)覆蓋了border樣式(yngsh)第37頁/共86頁第三十七頁，共87頁。CSS邊框(binkung)樣式屬性含義屬性值border-width邊框?qū)挾龋ㄋ倪叄?通常采用像素單位border-color邊框顏色（四邊） 顏色值border-style邊框樣式（四邊） dotted | dash | solid | double | groove | ridge | inset | outsetborder邊框所有屬性border-top-width上邊框?qū)挾萣order-top-color上

19、邊框顏色border-top-style上邊框樣式border-top 上邊框所有屬性第38頁/共86頁第三十八頁，共87頁。2.1.5 CSS樣式(yngsh)高度和寬度 height和width屬性控制元素矩形區(qū)域的大小 常用單位(dnwi)：px（像素），pt（點(diǎn)）示例(shl)width:200px;height:200px;第39頁/共86頁第三十九頁，共87頁。補(bǔ)白補(bǔ)白(bbi)2.1.6 CSS樣式(yngsh)補(bǔ)白 元素(yun s)內(nèi)容與邊框之間有一層“補(bǔ)白”（也叫“填充”）元素內(nèi)容區(qū)邊框補(bǔ)白補(bǔ)白補(bǔ)白補(bǔ)白補(bǔ)白補(bǔ)白第40頁/共86頁第四十頁，共87頁。CSS樣式(yngsh)補(bǔ)

20、白padding屬性控制元素內(nèi)容(nirng)與邊框之間的補(bǔ)白屬性含義屬性值padding-left內(nèi)容與左邊框的補(bǔ)白通常采用像素單位padding-top內(nèi)容與上邊框的補(bǔ)白padding-right內(nèi)容與右邊框的補(bǔ)白padding-bottom內(nèi)容與下邊框的補(bǔ)白padding同時設(shè)置四側(cè)的補(bǔ)白示例(shl)第41頁/共86頁第四十一頁，共87頁。2.1.7 CSS樣式(yngsh)邊界 元素(yun s)與元素(yun s)之間有一層邊界元素(yun s)內(nèi)容區(qū)補(bǔ)白補(bǔ)白補(bǔ)白補(bǔ)白補(bǔ)白補(bǔ)白補(bǔ)白補(bǔ)白元素內(nèi)容區(qū)元素B邊框元素A邊框邊邊 界界第42頁/共86頁第四十二頁，共87頁。CSS樣式(yngs

21、h)邊界margin屬性控制元素(yun s)之間的邊界示例(shl)屬性含義屬性值margin-top上邊界常用單位像素margin-right右margin-bottom下margin-left左margin同時設(shè)置第43頁/共86頁第四十三頁，共87頁。 “盒模式”： CSS中，每個元素被看待成一個“盒子”box，這個(zh ge)盒子有“邊框”，盒子內(nèi)容與邊框之間有“補(bǔ)白”，盒子與盒子之間有“邊界”第44頁/共86頁第四十四頁，共87頁。2.1.8 CSS樣式(yngsh)定位 定位(dngwi)類型由position屬性指定 position取值：absolute和relative

22、指定定位(dngwi)類型后，可用下列屬性來提供具體位置 left：左邊的位置偏移 right: 右邊的位置偏移 top：頂部的位置偏移 bottom：底部的位置偏移第45頁/共86頁第四十五頁，共87頁。定位(dngwi)說明 positon取值absolute時，表示相對于父元素；position取值relative時，表示相對于自身 left取值25px，absolute下，元素左邊將偏離父元素25像素(xin s)； relative下，元素左邊距離自身原始位置偏移25像素(xin s)absolute示例(shl)1absolute示例2第46頁/共86頁第四十六頁，共87頁。2.1

23、.9 CSS樣式(yngsh)display 樣式屬性display，描述元素如何顯示(xinsh) 取值：block，inline，list-item，none 理解：元素在網(wǎng)頁上的顯示(xinsh)占據(jù)一塊矩形區(qū)域（盒模式），display屬性控制該矩形區(qū)域如何顯示(xinsh) block：使元素顯示(xinsh)在下一行 none：使得元素隱藏不顯示(xinsh)示例(shl)第47頁/共86頁第四十七頁，共87頁。2.1.10 CSS樣式(yngsh)的繼承示例(shl) body font-family:微軟雅黑,楷體(kit),宋體; 你好，歡迎光臨飲料鋪!卡布奇諾，15元來自意

24、大利的咖啡，口味香濃綠茶，10元來自中國的茶飲，清涼爽口里嵌套的元素繼承了body的字體樣式第48頁/共86頁第四十八頁，共87頁。 繼承( jchng)的覆蓋 body font-family:微軟雅黑,楷體,宋體; p font-family: 華文(hu wn)行楷,微軟雅黑; 你好，歡迎光臨飲料(ynlio)鋪!卡布奇諾，15元來自意大利的咖啡，口味香濃綠茶，10元來自中國的茶飲，清涼爽口p的字體樣式覆蓋從body繼承的字體樣式示例第49頁/共86頁第四十九頁，共87頁。 在CSS里，被應(yīng)用的樣式規(guī)則總是最具體的 比如，如果(rgu)有一個樣式，定義了一個更具體的，則瀏覽器會執(zhí)行更具體

25、的那條樣式 body font-family:微軟雅黑,楷體,宋體; p font-family: 華文(hu wn)行楷,微軟雅黑; 第50頁/共86頁第五十頁，共87頁。CSS樣式(yngsh)繼承的說明 一個(y )元素的CSS樣式屬性，（部分地）會被嵌套在其內(nèi)的元素（子孫元素）所繼承 繼承的樣式可以被子孫元素重新定義的相同樣式所覆蓋 哪些屬性可以繼承？ 主要是字體相關(guān)的樣式（如字體、顏色、大小、粗斜體等） 其它大部分屬性不被繼承 如邊框、位置等 根據(jù)理解，動手驗證，不用死記硬背示例(shl)第51頁/共86頁第五十一頁，共87頁。二、CSS細(xì)節(jié)(xji) CSS樣式(yngsh) CS

26、S選擇符 CSS的引入方式 CSS樣式(yngsh)的級聯(lián)第52頁/共86頁第五十二頁，共87頁。2.2 CSS選擇符 CSS語句中的選擇符（selector)定義了樣式應(yīng)用的場所（對象），即受樣式影響(yngxing)的是哪些HTML元素 三種主要類型的選擇符： HTML標(biāo)記選擇符 class（類）選擇符 ID選擇符理解理解(lji)第53頁/共86頁第五十三頁，共87頁。 HTML標(biāo)記選擇符就是標(biāo)記選擇符就是HTML標(biāo)記（不加標(biāo)記（不加），如：），如：p，div，body 如果在如果在CSS中將某個中將某個HTML標(biāo)記定義標(biāo)記定義(dngy)成選擇符，則在成選擇符，則在CSS所應(yīng)用的網(wǎng)頁所

27、應(yīng)用的網(wǎng)頁中，所有的這種中，所有的這種HTML標(biāo)記都按照相應(yīng)的樣式進(jìn)行顯示標(biāo)記都按照相應(yīng)的樣式進(jìn)行顯示示例(shl)2.2.1 HTML標(biāo)記(bioj)選擇符第54頁/共86頁第五十四頁，共87頁。2.2.2 類（class）選擇符 用HTML標(biāo)記比如段落作為HTML選擇符定義的樣式規(guī)則，將影響所有段落，如果想采用不同樣式，可以創(chuàng)建(chungjin)不同的樣式類，通過類選擇符應(yīng)用不同樣式類第55頁/共86頁第五十五頁，共87頁。 定義：選擇符直接以點(diǎn)（.）開頭，后跟類名(任意合法名稱)，即“.類名” 應(yīng)用：類選擇符根據(jù)HTML標(biāo)記的class屬性進(jìn)行選擇，選擇class屬性等于(dngy)該

28、“類名”的任何HTML標(biāo)記 .類名(li mn) 樣式1；樣式2； 選擇class屬性為“類名”的任何(rnh)元素類選擇符的定義和應(yīng)用第56頁/共86頁第五十六頁，共87頁。 類選擇符的應(yīng)用：使用(shyng)HTML標(biāo)記的class屬性 .style1 樣式(yngsh) .style2 樣式(yngsh) 段落內(nèi)容1段落內(nèi)容2示例class = “style1”class = “style2”選擇class為“style1”的元素選擇class為“style2”的元素第57頁/共86頁第五十七頁，共87頁。 .style 樣式(yngsh); 段落(dunlu)內(nèi)容選擇(xunz)cla

29、ss為“style”的任何元素示例 層內(nèi)容類選擇符選擇類選擇符選擇class屬性等于該類名的屬性等于該類名的任何元素任何元素第58頁/共86頁第五十八頁，共87頁。2.2.3 ID選擇符 id： HTML標(biāo)記（元素）的可選屬性，一個HTML元素可以設(shè)置id屬性值，標(biāo)識該HTML元素 HTML標(biāo)記（元素）的name屬性 在一個頁面中，id值是唯一(wi y)的，name屬性值可以重復(fù) 段落(dunlu)內(nèi)容 段落(dunlu)內(nèi)容第59頁/共86頁第五十九頁，共87頁。ID和NAME 第60頁/共86頁第六十頁，共87頁。ID選擇符 如果一個HTML標(biāo)記設(shè)置(shzh)了id屬性，可以通過“id

30、選擇符”設(shè)置(shzh)該HTML標(biāo)記的樣式 ID選擇符定義和應(yīng)用 定義：以（#）開頭后跟ID值，即“#ID值” 應(yīng)用：ID選擇符根據(jù)HTML標(biāo)記的id屬性進(jìn)行選擇，選擇id屬性值等于該“ID值”的任意一個元素第61頁/共86頁第六十一頁，共87頁。 #style 樣式(yngsh); 段落(dunlu)內(nèi)容HTML標(biāo)志可以有id屬性，值為任意合法(hf)名稱示例選擇id為“style”的任意一個元素第62頁/共86頁第六十二頁，共87頁。選擇符小結(jié)(xioji) 類選擇符和ID選擇符: 一個頁面，類選擇符可以重復(fù)使用，多個HTML標(biāo)記的class屬性值是可以相同的 一個頁面中，HTML標(biāo)記的

31、ID值是唯一的，ID選擇符通常用于為某一個特定的HTML元素(yun s)設(shè)置樣式示例(shl)第63頁/共86頁第六十三頁，共87頁。選擇符小結(jié)(xioji) 三種選擇符: HTML標(biāo)記(bioj)選擇符(標(biāo)記(bioj)名不加) 根據(jù)HTML標(biāo)記(bioj)名進(jìn)行選擇 類選擇符(用.定義) 根據(jù)HTML標(biāo)記(bioj)的class屬性進(jìn)行選擇 ID選擇符(用#定義) 根據(jù)HTML標(biāo)記(bioj)的id屬性進(jìn)行選擇第64頁/共86頁第六十四頁，共87頁。 課堂練習(xí)，問以下(yxi)選擇符的含義： table 樣式(yngsh) td .td #TitlePanel 第65頁/共86頁第六十五

32、頁，共87頁。2.2.4 選擇符的進(jìn)一步學(xué)習(xí)(xux) 組合選擇器 可以在一條CSS語句中定義(dngy)若干個選擇器，每個選擇器之間用逗號（，）分隔 p,h1,h2color:red; font-weight:bold; 元素的文本(wnbn)內(nèi)容都為紅色，粗體示例第66頁/共86頁第六十六頁，共87頁。選擇符的進(jìn)一步學(xué)習(xí)(xux) 關(guān)聯(lián)選擇(xunz)器 只選擇(xunz)特定元素的子孫元素 div pcolor:red; font-weight:bold; 只選擇嵌套在div元素(yun s)里的p元素(yun s)兩者之間以空格進(jìn)行分隔第67頁/共86頁第六十七頁，共87頁。htmlh

33、eadbodytitledivpp div p color:red; font-weight:bold; 選擇(xunz)不選擇不選擇(xunz)示例(shl)第68頁/共86頁第六十八頁，共87頁。htmlbodypp .style p color:red; font-weight:bold; 選擇(xunz)選擇(xunz)class為”style”的元素內(nèi)嵌套的p元素不選擇不選擇(xunz)第69頁/共86頁第六十九頁，共87頁。htmlbodypp #style p color:red; font-weight:bold; 選擇(xunz)id為”style“的元素內(nèi)嵌套的p元素第70

34、頁/共86頁第七十頁，共87頁。 課堂練習(xí)，問以下選擇符的含義(hny)： ：學(xué)習(xí)網(wǎng)頁源碼時，能看懂各種選擇符的含義(hny) .grid .grid table #grid table 新浪首頁源文件中的CSS .grid,table 要求要求(yoqi) .grid table td 第71頁/共86頁第七十一頁，共87頁。選擇符的進(jìn)一步學(xué)習(xí)(xux) 偽類選擇器： 對同一個HTML元素(yun s)的各種狀態(tài)的一種定義方式 比如：對于超鏈接（）的正常狀態(tài)、訪問過的狀態(tài)、光標(biāo)移動上去的狀態(tài) 常用偽類選擇器： a:hover 光標(biāo)移動到超鏈接上時的狀態(tài) a:visited 超鏈接訪問過后的狀

35、態(tài)示例(shl)第72頁/共86頁第七十二頁，共87頁。二、CSS細(xì)節(jié)(xji) CSS樣式(yngsh) CSS選擇符 CSS的引入方式 CSS樣式(yngsh)的級聯(lián)第73頁/共86頁第七十三頁，共87頁。2.3 應(yīng)用CSS樣式的不同(b tn)方式 HTML文檔內(nèi)定義內(nèi)部(nib)樣式表 鏈接外部樣式表 嵌入外部樣式表 直接定義HTML標(biāo)記的style屬性（內(nèi)聯(lián)樣式）第74頁/共86頁第七十四頁，共87頁。2.3.1 HTML文檔內(nèi)定義(dngy)內(nèi)部樣式表 css pcolor:red; 第一段文字(wnz) 只在該頁面(y min)內(nèi)有效第75頁/共86頁第七十五頁，共87頁。2.3

36、.2 鏈接(lin ji)外部樣式表 在文件里(后綴名為css)定義各種樣式規(guī)則，頁面(y min)中創(chuàng)建到該文件的外部鏈接bodybackground-color:#d2b48c;border:10px solid gray;padding:20px;font-family:微軟雅黑;藍(lán)色部分(b fen)寫在單獨(dú)的樣式文件（后綴名為css)文件里不需要標(biāo)記一個樣式文件可被多個文檔引入樣式文件示例第76頁/共86頁第七十六頁，共87頁。 css . 之間的標(biāo)記(bioj)鏈接外部樣式文件相對(xingdu)或絕對地址鏈接示例1鏈接示例2鏈接外部樣式文件表第77頁/共86頁第七十七頁，共87頁。2.3.3 嵌入(qin r)外部樣式表 定義好的外部樣式表還可以通過import命令嵌入在頁面中，該命令通常放置(fngzh)在標(biāo)記之間 舊版瀏覽器不支持（IE6及以下）import url(樣式(yngsh)文件名.css)；相對或絕對地址示例第78頁/共86頁第七十八頁，共87頁。 內(nèi)聯(lián)樣式表 內(nèi)聯(lián)樣式直接(zhji)定義HTML標(biāo)記的style屬性 css 段落(dunlu)文字 HTML標(biāo)記(bioj)的style屬性style屬性值 ：（若干條）css樣式內(nèi)聯(lián)樣式只針對