HTML+CSS第六課：初識CSS之CSS選擇器的使用、為HTML文件新增CSS樣式的3種方式
知識點：CSS的概念及語法、CSS選擇器的使用、CSS選擇器的優先順序、新增CSS樣式的3種方式。
1、CSS概念理解
CSS 是Cascading Style Sheet的縮寫，可以翻譯為“層疊樣式表”或者“級聯樣式表”，即“樣式表”。層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行畫素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力。
1.1 使用CSS的意義
CSS最重要的目標是將檔案的內容與它的顯示分離開來。在CSS出現前，幾乎所有的HTML檔案內都包含檔案顯示的資訊，比如字型的顏色、背景應該是怎樣的、如何排列、邊緣、連線等都必須一一在HTML檔案內列出，有時會重複列出。CSS可以將這些資訊中的大部分隔離出來，簡化HTML檔案，這些資訊被放在一個輔助的、用CSS語言寫的檔案中。HTML檔案中只包含結構和內容的資訊，CSS檔案中只包含樣式的資訊。（太長不看版……）
總結兩個意義：簡化程式碼量、將內容和樣式分離。
舉例1：要實現以下網頁效果：
<!--沒有使用CSS樣式時，需要對每一個內容新增同樣的標籤，來實現樣式的一致--> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> </head> <body> <p><font color="#FF0000">這裡是段落1</font></p> <p><font color="#FF0000">這裡是段落2</font></p> <p><font color="#FF0000">這裡是段落3</font></p> <p><font color="#FF0000">這裡是段落4</font></p> </body> </html>
<!--使用CSS樣式後，只需新增一次樣式即可-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
p { color:#F00;}
</style>
</head>
<body>
<p>這裡是段落1</p>
<p>這裡是段落2</p>
<p>這裡是段落3</p>
<p>這裡是段落4</p>
</body>
</html>舉例2：不需要開啟html檔案，只修改css樣式檔案，即可完成網頁樣式的修改。
1.2 使用CSS的優勢（瞭解即可）
- 內容與表現分離：
- 表現的統一
- 佈局更靈活
- 減小網頁中程式碼量
- 有利於搜尋引擎收錄
2、CSS的基本語法
CSS和HTML一樣，都是瀏覽器能夠解析的計算機語言，因此，CSS也有自己的語法規則和結構。
2.1 CSS基本語法結構
- CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條宣告。（大括號前面是選擇器，大括號內是宣告組成的樣式程式碼）
- 選擇器通常是您需要改變樣式的 HTML 元素。（選擇器的種類有標籤選擇器、類選擇器、ID選擇器等）
- 每條宣告由兩部分組成：樣式屬性和值，以英文分號:為分割，前面是樣式屬性，後面是屬性值，每條樣式宣告以英文分號;結束。
注意：①一個css規則中可能有多條宣告，不同宣告之間用空格隔開。②一條宣告的樣式屬性可能有多個值，如p { font-family:"Times New Roman",Georgia,Serif; } 不同值之間用英文逗號,隔開，瀏覽器會使用它可識別的第一個值。
2.2 認識<style>標籤
<style> 標籤用於為 HTML 文件定義樣式資訊。在 <style> 中，您可以規定在瀏覽器中如何呈現 HTML 文件。type 屬性是必需的，定義 <style>元素的內容。唯一可能的值是 "text/css"。style 元素位於 head 部分中。
通俗的說：要想讓css樣式影響html文件，那麼就需要使用<style>標籤引入css樣式。
由於css樣式在html文件中分佈的位置不一樣，因此<style>標籤引入css樣式的方法也不一樣，如行內樣式、內部樣式表、外部樣式表的連結與匯入。
2.3 認識CSS選擇器
要使用css對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器。HTML頁面中的元素就是通過CSS選擇器進行控制的。 “選擇器”指明瞭{}中的“樣式”的作用物件，也就是“樣式”作用於網頁中的哪些元素。CSS中有3種基本的選擇器，分散式：標記選擇器、類選擇器和ID選擇器。
1）標籤選擇器
一個完整的HTML頁面是有很多不同的標籤組成，而標籤選擇器，則是決定哪些標籤採用相應的CSS樣式。例如p選擇器就是用於宣告頁面中所有p標籤的樣式風格。如：p { font-size:16px; } 、h3 { color:red; } 等等
2）類選擇器
標籤選擇器一旦宣告，那麼頁面中的所有該標籤，都會相應地發生變化。如果只希望部分元素進行樣式更改，可以使用類選擇器。類選擇器的名稱可以由使用者自定義，屬性和值同標籤選擇器一樣，必須符合CSS規範。如：.blue { color: blue; }
在HTML文件中，可以通過對標籤設定屬性class="類名" ，來設定類選擇器，設定了類選擇器以後，只要頁面中某個標籤中需要相同的樣式，直接給該標籤新增使用同一個class屬性即可。
類選擇器可以在一個HTML頁面中頻繁使用。
3）ID選擇器
在HTML文件中，可以通過對標籤設定屬性id="ID名" ，來設定ID選擇器。呼叫樣式時，使用舉例：#top { width:720px; }
ID選擇器的使用方法與類選擇器基本相同，不同之處在於，一個ID選擇器在同一個HTML頁面中只能使用一次，因此它的針對性更強。
注意：在一個HTML文件中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
3、CSS樣式的引入
實際製作網頁時，css樣式與HTML文件的位置關係有三種：CSS樣式在HTML文件的<head>標籤中、在標籤屬性中設定CSS樣式、CSS樣式單獨放在一個檔案中。
因此在HTML中應用CSS樣式的方法有三種：內部樣式、行內樣式和外部樣式。
3.1 行內樣式
行內樣式就是在HTML標籤中直接使用style屬性，通過style屬性來設定CSS樣式。style屬性的用法：
<h1 style="color:red">通過style屬性設定行內樣式</style>
注意：通過此方法設定的CSS樣式，只對當前的HTML標籤起作用，無法對多個標籤同時使用。並且它是寫在HTML文件中的，不能使內容和樣式相分離，本質上沒有體現CSS的優勢，因此不推薦使用。
3.2 內部樣式表
把CSS樣式，用<style>標籤寫在HTML文件中的<head>中，CSS樣式和HTML文件的內容在同一個文件中，這就是內部樣式表。
內部樣式表，方便在同一個頁面中修改樣式，但是不能夠在多個HTML文件之間進行共享重複使用以及維護，對內容和樣式分離的不夠徹底。因此不推薦使用。
3.3 外部樣式表
將樣式單獨儲存在一個獨立的文件中，文件的副檔名為.css，只需在頁面中引入外部樣式表即可。這也是網站製作中常用的方法。
HTML文件引用外部樣式表有兩種方式：連結式和匯入式。
1）建立CSS檔案
介紹兩種方式：建立一個記事本文件，然後將字尾修改為.css即可。另外一個方式就是藉助Dreamweaver開發工具，建立CSS文件即可。CSS樣式表是純文字檔案，其內容不會用於在瀏覽器中檢視。
2）連結外部樣式表
在HTML文件中，使用<link />標籤連結外部樣式表。<link />標籤必須放在<head>標籤中。語法如下：
<head>
<link href="CSS檔案路徑" rel="stylesheet" type="text/css" />
</head>- href屬性：用來指定css檔案的路徑
- rel屬性：規定當前文件與被連結文件之間的關係。這裡取值為stylesheet
- type屬性：規定被連結文件的 MIME 型別。這裡取值為text/css
外部樣式表實現了網頁內容和樣式的徹底分離，一個外部樣式表文件可以用於多個網頁。當改變這個樣式表文件時，所有的頁面都將隨之變化。這在製作大量相同樣式頁面的網站時，非常有用。不僅減少了重複的工作量，有利於保持網站的統一樣式和網站維護，同時使用者在瀏覽網頁時也減少重複程式碼的下載，提高了網站的速度。
3）匯入外部樣式表
在HTML網頁中使用@import匯入外部樣式表，匯入樣式表的語法必須放在<style>標籤中，而<style>標籤必須放在頁面的<head>標籤內。語法：
<head>
<style>
@import url("CSS檔案路徑");
</style>
</head>
4）連結式與匯入式的區別
連結式和匯入式都是將外部CSS樣式表，引用到HTML文件。但是兩者之間有一些區別：
- link屬於XHTML，import屬於css2.1。
- link先載入再顯示，import延遲載入。
- import必須要瀏覽器相容css2.1
- 優先使用link
3.4 樣式優先順序
對於頁面中的某個元素，允許同時使用多個樣式（即疊加），頁面元素最終的樣式即為多個樣式的疊加效果。但當同時應勇以上3類樣式時，頁面元素的樣式之間有衝突，應該繼承哪種樣式？這時就存在一個優先順序的問題。同理，從選擇器的角度看，當單個元素同時應用了標籤選擇器、類選擇器、ID選擇器定義樣式時，也存在樣式優先順序的問題。
CSS中規定的優先順序的規則如下：
對發生衝突的屬性，看樣式優先級別發揮作用。
-
越靠近標籤位置的優先級別越高 行內樣式>內部樣式>外部樣式
-
後寫的樣式>先寫的樣式
-
越精確的優先級別越高 id選擇器>類選擇器>標籤選擇器
舉例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<style type="text/css">
p { color:blue;}
</style>
</head>
<body>
<p style="color:red">這裡是段落1</p>
<p>這裡是段落2</p>
<p>這裡是段落3</p>
<p>這裡是段落4</p>
</body>
</html>程式碼結果演示：
程式碼分析：文件中同時使用了外部樣式表、內部樣式表、行內樣式，觀察優先順序的效果。
優先順序關係：內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標籤選擇器 = 偽元素選擇器
課後練習：使用CSS樣式製作百度首頁，要求使用外部CSS樣式表。