1、什麼是CSS Cascading Style Sheet 級聯樣式表。 表現HTML或XHTML文件樣式的電腦語言。 包括對字體、顏色、邊距、高度、寬度、背景圖片、網頁定位等設定。 2、CSS的發展史 CSS1.0 讀者可以從其他地方去使用自己喜歡的設計樣式去繼承性地使用樣式； CSS2.0 ...
1、什麼是CSS
Cascading Style Sheet 級聯樣式表。
表現HTML或XHTML文件樣式的電腦語言。
包括對字體、顏色、邊距、高度、寬度、背景圖片、網頁定位等設定。
2、CSS的發展史
CSS1.0 讀者可以從其他地方去使用自己喜歡的設計樣式去繼承性地使用樣式；
CSS2.0 融入了DIV+CSS的概念，提出了HTML結構與CSS樣式表的分離
CSS2.1 融入了更多高級的用法，如浮動，定位等。
CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向著模塊化的趨勢發展，又加了很多使用 的新技術，如字體、多背景、圓角、陰影、動畫等高級屬性，但是它需要高級瀏覽器的支持。
由於現在IE 6、IE 7使用比例已經很少，對市場企業進行調研發現使用CSS3的頻率大幅增加，學習CSS3 已經成為一種趨勢
CSS的優勢
- 內容與表現分離
- 網頁的表現統一，容易修改
- 豐富的樣式，使得頁面佈局更加靈活
- 減少網頁的代碼量，增加網頁的瀏覽速度，節省網路帶寬
- 運用獨立於頁面的CSS，有利於網頁被搜索引擎收錄
3、CSS的基本語法
Style標簽
4、引入CSS方式
行內樣式
使用style屬性引入CSS樣式
<h1 style="color:red;">style屬性的應用</h1> <p style="font-size:14px; color:green;">直接在HTML標簽中設置的樣式</p>
內部樣式表
CSS代碼寫在 <head> 的 <style> 標簽中
<style>
h1{color: green; }
</style>
優點：方便在同頁面中修改樣式
缺點：不利於在多頁面間共用復用代碼及維護，對內容與樣式的分離也不夠徹底
引出外部樣式表
外部樣式表
CSS代碼保存在擴展名為.css的樣式表中
HTML文件引用擴展名為.css的樣式表，有兩種方式
- 鏈接式（使用的最多）
使用<link>標簽鏈接外部樣式表，並講解各參數的含義，<link>標簽必須放在<head>標簽中
- 導入式
使用@import導入外部樣式表
鏈接式與導入式的區別
1. <link>標簽是屬於XHTML範疇的，@import是屬於CSS2.1中特有的。
2. 使用<link>鏈接的CSS是客戶端瀏覽網頁時先將外部CSS文件載入到網頁當中，然後再進行編 譯顯示，所以這種情況下顯示出來的網頁與用戶預期的效果一樣，即使網速再慢也一樣的效果。
3. 使用@import導入的CSS文件，客戶端在瀏覽網頁時是先將HTML結構呈現出來，再把外部CSS文件 載入到網頁當中，當然最終的效果也與使用<link>鏈接文件效果一樣，只是當網速較慢時會 先顯示沒有CSS統一佈局的HTML網頁，這樣就會給用戶很不好的感覺。這個也是現在目前大多少 網站採用鏈接外部樣式表的主要原因。
4. 由於@import是屬於CSS2.1中特有的，因此對於不相容CSS2.1的瀏覽器來說就是無效的。
CSS樣式優先順序
行內樣式>內部樣式表>外部樣式表 就近原則：越接近標簽的樣式優先順序越高
5、CSS基本選擇器
標簽選擇器
HTML標簽作為標簽選擇器的名稱 <h1>…<h6>、<p>、<img/>
類選擇器
一些特殊的實現效果，單純使用標簽選擇器不能實現，從而引出類選擇器
ID選擇器
ID選擇器的名稱就是HTML中標簽的ID名稱，ID全局唯一
小結
- 標簽選擇器直接應用於HTML標簽
- 類選擇器可在頁面中多次使用
- ID選擇器在同一個頁面中只能使用一次
基本選擇器的優先順序
ID選擇器>類選擇器>標簽選擇器
標簽選擇器是否也遵循“就近原則”？
不遵循，無論是哪種方式引入CSS樣式，一般都遵循ID選擇器 > class類選擇器 > 標簽選擇器的優先順序
6、CSS高級選擇器
1、層次選擇器
後代選擇器
body p{
background: red;
}
子選擇器
body>p{
background: pink;
}
相鄰兄弟選擇器
.active+p {
background: green;
}
通用兄弟選擇器
.active~p{
background: yellow;
}
2、結構偽類選擇器
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用CSS3結構偽類選擇器</title>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
標紅的重點
ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}
小結
- 使用E F:nth-child(n)和E F:nth-of-type(n)的 關鍵點
- E F:nth-child(n)在父級里從一個元素開始查找，不分類型
- E F:nth-of-type(n)在父級里先看類型，再看位置
3、屬性選擇器
E[attr]屬性選擇器
a[id] {
background: yellow;
}
E[attr=val]屬性選擇器
a[id=first] {
background: red;
}
E[attr*=val]屬性選擇器
a[class*=links] {
background: red;
}
E[attr^=val]屬性選擇器
a[href^=http] {
background: red;
}
E[attr$=val]屬性選擇器
a[href$=png] {
background: red;
}
7、小結
本文來自博客園，作者：腹白，轉載請註明原文鏈接：https://www.cnblogs.com/wyh518/
