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/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/529987.html
標籤：其他
上一篇：什么是虛擬DOM？
下一篇：JS函式知識點總結