1、CSSCSS層疊樣式表層疊樣式表第五章第五章本章目標理解樣式表對控制頁面元素外觀的作用掌握樣式規則的語法理解各種選擇器理解樣式代碼在什么位置編寫及它們的作用范圍掌握常用的樣式屬性 CSS概述概述 CSS的英文全稱為Cascading Style Sheet，中文翻譯一般稱為層疊樣式表或級聯樣式表。 CSS的作用是定義如何顯示HTML元素。 它是一門獨立的語言，由萬維網聯盟（W3C）制定。 目前的正式版本為2.0版。CSS解決的問題解決的問題 CSS的出現，解決了網頁內容內容與表現表現分離的問題。 由HTML的標簽告知瀏覽器網頁中有哪些內容，而由CSS的規則告知瀏覽器這些內容應該如何表現。 CS

2、S對網頁文檔及其元素的外觀樣式的控制能力遠非HTML語言所能比擬。 CSS能夠對網頁文檔及其元素的外觀樣式實施完整完整的和精確精確的控制。 CSS樣式規則聲明 CSS語法由三部分構成：選擇器，屬性和值。 三個部分組合起來構成了一條樣式樣式規則規則聲明declaration。選擇器選擇器selector是某個HTML標簽的名稱或你自定義的名稱。選擇器說明這個樣式在網頁中的適用范圍。屬性屬性property是你期望控制的樣式的某個方面，如字體，顏色，邊框，背景等。屬性需要有一個或多個值value。屬性名和值可以有多對同時出現，多對之間用;分號隔開，屬性名和值之間用:冒號連接。它們集中放置在一對大括

3、號中。selector property : value ;property : value ;. . .在在標簽中聲明樣式規則標簽中聲明樣式規則 樣式規則聲明body background-image:url(image/eg_bg.gif);p text-indent:32px;font-size:16px;演示 例5-1這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。 選擇器 一條樣式規則聲明中包含選

4、擇器，選擇器的作用是說明這條樣式規則在網頁中的適用范圍，或者說網頁中的哪個地方或哪些地方將要用到它。 上例中，body和p就是這兩條樣式規則中的選擇器。第一條規則對網頁中的即網頁正文有效。第二條規則對網頁中的所有標簽即段落都有效。兩條規則中的選擇器的名稱是合法的HTML標簽的名稱，這樣瀏覽器在解析這條樣式規則時就已經知道它是針對頁面中這種標簽的。 使用HTML標簽名稱作為選擇器，稱為HTML選擇器或標簽選擇器標簽選擇器。其他的選擇器還有：類選擇器類選擇器、ID選擇器選擇器、偽類選擇器偽類選擇器、偽元素選擇器偽元素選擇器、上下上下文選擇器文選擇器、群組聯合選擇器聯合選擇器等。HTML選擇器選擇器

5、 使用某種HTML標簽的名稱作為選擇器，當瀏覽器解析這種標簽時，即采用這條樣式規則。這樣做的目的是為了覆蓋瀏覽器內部對這種標簽顯示方式預先定義的規則。 標簽名 /*/HTML選擇器選擇器h1 text-align:center;font-size:18pt;input border:1px solid gray;background-color:#fedcba;color:blue;a text-decoration:none; 在此登錄用戶名: 密碼: 注冊回到首頁演示 例5-2通配符選擇器特殊的HTML選擇器 使用*號通配符代表所有HTML標簽。用*號作為選擇器名稱的樣式規則將作用于所有標

6、簽。 * /*在這里定義對所有標簽都生效的樣式*/類選擇器類選擇器 使用類選擇器，將多個應共享同一種外觀共享同一種外觀的標簽歸為一類。 定義類選擇器時，要以 . 點號作為前綴，類名可自己定義，但必須符合命名標識符的規范，不能以數字開頭。類選擇器定義好之后，并不會自動生效，這一點和HTML選擇器不同。在需要使用這個類選擇器定義的樣式的標簽中，設置class屬性，賦值為類的名稱，瀏覽器在顯示這個標簽時將套用這個類選擇器定義的樣式。 .類名/*/類選擇器類選擇器.txt border:1px dashed gray;background-color:#fedcba;color:blue;height

7、:20px;.btn border:1px solid blue;background-color:#cccccc;color:red;font-weight:bold; 演示 例5-3ID選擇器選擇器為頁面中特定的某個特定的某個標簽定制定制外觀。定義ID選擇器時，要以#號作為前綴，ID名可自己定義，但必須符合命名標識符的規范，不能以數字開頭。ID選擇器定義好之后，并不會自動生效，跟類選擇器相似，需要在要使用此樣式的標簽中設置ID屬性來顯式地使用這個ID選擇器。 標簽的id屬性值在整個頁面范圍內應具有唯一性唯一性。ID選擇器樣式規則在一個頁面中應只被使用一次，即只能在一處標簽使用此樣式規則。

8、#id名/*/ID選擇器選擇器tdborder:1px solid blue;#mytable width:260px;border-width:5px;border-style:double;border-color:gray;border-collapse:collapse;#mytd background-color:#fedcba;text-align:center;font-size:16px;font-style:italic; 單元格單元格單元格單元格單元格單元格 演示 例5-4偽類選擇器偽類選擇器 偽類用于向其他選擇器指定適用范圍內的特定元素或特定狀態制定樣式。使用得比較多的場

9、景是使用錨偽類錨偽類為頁面中的超鏈接超鏈接制定在不同狀態不同狀態下不同的外觀。a : 普通狀態 /*/a : 已被訪問狀態 /*/a : 鼠標懸停狀態 /*/a : 被激活狀態 /*/錨偽類選擇器錨偽類選擇器a text-decoration:none;font-size:14px;a:link color:blue;a:visited color:gray;a:hover color:red;font-size:16px;text-decoration:underline;a:active font-style:italic; 演示 例5-5樣式規則聲明 HTML選擇器 類選擇器 ID選擇器

10、 偽元素選擇器偽元素選擇器 偽元素用于向其他選擇器指定適用范圍內的元素特定部分制定樣式。一般應用于文本塊的首行首行或文本塊的首字符首字符。 選擇器 : first-line /*/選擇器 : first-letter /*/偽元素選擇器偽元素選擇器p font-size:14px;p : first-line font-size:16px;text-decoration:line-through;h1font-size:18pt;color:black;h1 : first-letter font-size:24pt;color:red;border:1px solid blue;paddin

11、g:3px; 這是一個段落，它的第一行文字將有刪除線修飾，字號比其他行要大。這是一個段落，它的第一行文字將有刪除線修飾，字號比其他行要大。這是一個段落，它的第一行文字將有刪除線修飾，字號比其他行要大。這是一級標題，注意它的第一個字符 演示 例5-6上下文選擇器上下文選擇器 上下文選擇器又稱為派生選擇器，用于根據上下文關系上下文關系來確定某個標簽是否使用上下文選擇器的樣式規則。父標簽 子標簽/*/類 標簽/*/標簽 類/*/id 標簽/*/上下文選擇器上下文選擇器ol li list-style-type:upper-alpha;font-size:14px;ul li list-style-i

12、mage:url(image/li.gif);font-weight:bold;XX公司三亞之旅第一天行程07:00 之前在新大新廣場前集合07:15 乘坐機場大巴前往黃花機場08:30 集體辦理登機手續09:15 乘機飛往三亞11:00 抵達三亞機場11:30 由地接大巴送到旅社12:30 集體吃海鮮自助餐下午自由活動海鮮自助餐重點推薦口味大肉蟹鹽焗瀨尿蝦蒜蓉清蒸小鮑辣椒炒海瓜子哈貝冬瓜湯 演示 例5-7上下文選擇器上下文選擇器table border:2px solid black;border-collapse:collapse;#mytable width:280px;#mytable

13、 td border:1px solid gray;.myp font-size:14px;.myp span font-weight:bold;font-size:16px;單元格單元格單元格單元格單元格單元格單元格單元格單元格單元格單元格單元格 這是一個段落，其中有某些文字某些文字的樣式需要設置。這是一個段落，其中有某些文字某些文字的樣式需要設置。 演示 例5-8群組聯合選擇器多個樣式規則的定義相同，但選擇器名稱不同。可以將這些樣式規則合并成為一個樣式規則，選擇器名稱之間使用逗號分隔。 選擇器一 , 選擇器二 , /*/群組聯合選擇器h1, h2, h3 color:black;text-

14、align:center;font-family:微軟雅黑;h1 font-size:24px;h2 font-size:16px;h3 font-size:12px; 一級標題二級標題三級標題 演示 例5-91、2、 小結1選擇器起什么作用，有哪些選擇器。選擇器起什么作用，有哪些選擇器。剛才我們用到了哪些樣式屬性，它們分別控制哪個方面的樣式剛才我們用到了哪些樣式屬性，它們分別控制哪個方面的樣式將樣式規則聲明編寫在何處 樣式規則聲明可以編寫在網頁頭部中的標簽內部，在這里聲明的樣式規則稱為內部樣式表內部樣式表，或叫內嵌樣式表，它們將對整個頁面全局有效。樣式規則還可以作為標簽的style屬性的值。 樣式規則還可以寫在獨立的樣式文件中。內聯樣式樣式規則作為標簽的style屬性的值，稱為內聯樣式。僅對包含它的標簽有效。本頁面演示內聯樣式表，內聯樣式其實就