HTML第四章
第四章 初識CSS
1.什麽是CSS：
CSS全稱（Cascading Style Sheet）風格樣式表(Style Sheet)它是用來進行網頁風格設計的。
2.CSS的優勢：
（1）內容與表現分離，也就是使用前面學習的HTML語言制作網頁，使用CSS設置網頁的樣式風格，並且CSS單獨存放一個文件中。
（2）表現的統一，可以使網頁的表現非常統一並且容易修改。
（3）豐富的樣式，使得頁面更加靈活。
（4）減少網頁的代碼量，增加網頁的瀏覽速度，節省網絡寬帶。
（5）運用獨立於頁面的CSS，還有利於網頁被搜索引擎收錄。
3.CSS的基本語法：
CSS規則由兩部分構成：選擇器和聲名。聲名必須放在大括號{}中，
並且聲名是一條或者多條，每一條聲名由一個屬性和值組成，屬性和值
用冒號分開，每條語句以英文分號結尾。
4.<style>標簽：在HTML中通過使用<style>標簽引入CSS樣式。<style>標簽用於為HTML文檔定義樣式信息。<style>標簽位於<head>標簽中，它規定瀏覽器中如何呈現HTML文檔。<style>標簽中type屬性是必須的，它用來定義style元素內容，唯一的值是“text/css”。
5.CSS選擇器：
|
選擇器的種類 |
例 |
|
1.標簽選擇器 |
P{font-size:16px;} |
|
2.類選擇器 |
.class{font-size:16px;} |
|
3.ID選擇器 |
#id{font-size:16px;} |
6.id選擇器與類選擇器的不同之處：ID選擇器只能在HTML中使用一次，因此它的針對性很強。
選擇器優先級：ID選擇 器：>類選擇器>標簽選擇器
7.引入CSS樣式:
|
引入樣式 |
定義 |
例 |
利與弊 |
|
行內樣式表就是在html中直接使用style屬性設置CSS樣式 |
<pstyle=”font-size:14px; color:green;”> |
這種使用style屬性的設置CSS樣式僅對當前的HTML標簽起作用，並且是寫在HTML標簽中的，因此這種方式不能使內容和表現相分離，本質上沒有體現出css的優勢。 |
|
2.內部樣式 |
內部樣式就是把css樣式代碼寫在<head>的<style>標簽中，與HTML內容位於同一個HTML文件中。 |
<head> <style> .green{ font-size:20px; color:red; } </style> </head> |
這種樣式方便在同一頁面中修改樣式，但不利於在多頁面間共享復用代碼及維護，對內容與樣式分離也不夠徹底。 |
|
3.外部樣式 |
外部術樣式表就是把CSS代碼保存為一個單獨的樣式表文件，文件擴展名為.CSS在頁面中引用外部樣式表。
|
①鏈接外部樣式表： <head> <link href=”style.css”rel=”stylesheet” type=”text/css”/> </head> |
外部樣式實現了樣式和結構的徹底的分離，一個外部樣式表文件可應用於多個頁面。當改變這個樣式文件時，所有頁面的樣式都會隨之改變。這在制作大量相同樣式頁面的網站時，非常有用，不僅減少了重復的工作量，利於保持網站的統一樣式和網站維護，同時用戶在瀏覽網頁時也減少了重復下載代碼，提高了網站的速度。 |
|
②導入外部樣式表: <head> <style type=”text/css” <!— @import url(“style.csss”) --> </head>
|
樣式優先級：行內樣式>內部樣式>外部樣式。
8.CSS復合選擇器:
|
復合選擇器的種類 |
定義 |
|
1.後代選擇器 |
在HTML中經常有標簽的嵌套使用，那麽在CSS選擇器中，就可以通過嵌套的方式，對特殊位置的HTML標簽進行聲名。 例：p . txt{ color:blue; font-size:36px;} |
|
2.交集選擇器 |
交集選擇器是由兩個直接連接構成，其結果是選中二者各自元素範圍的交集。其中第一個必須是標簽選擇器，第二個必須是類選擇器域者ID選擇器。這兩個選擇器之間不能有空格，必須連續書寫。 例：p.txt{color:blue; line-height:28px} |
|
3.並集選擇器 |
同時選中各個基本選擇器所選擇的範圍。任何形式的選擇器（包括標簽選擇器，類選擇器，ID選擇器材等）都可以作為並集選擇器的一部分。 例：H3, .first, #end{ font-size:16px; color:green;} |
9.css繼承特性：
繼承的概念：在CSS語言中繼承就是將各個HTML標簽看作一個容器，其中被包含的小容器會繼承包含它的大容器的風格樣式，也稱包含與被包含的標簽為父子關系。
繼承的應用：
Css繼承指的是子標簽的所有樣式風格，可以在父標簽樣式風格的基礎上再加以修改，產生新的樣式，而子標簽的樣式風格完全不會影響父標簽。
例：<style type=”text/css>
Li{
Color:blue;
font-size:12px;
}
ul li ul li ul li{ color:red;}
ul li ol li{color:green;}
</style>
HTML第四章