文章目錄
CSS
CSS 是 “Cascading Style Sheet” 的縮寫，中文譯爲 “層疊樣式表”，用來控制網頁的樣式，如 字體，顏色，邊框，間距，大小，位置，可見性等
如果將 HTML 網頁比作 “毛坯房”，那麼有了 CSS 就是 “精裝修”！
CSS 誕生
HTML 標籤原本被設計爲用於定義文檔內容，通過使用 <h1>、<p>、<table> 這樣的標籤，HTML 的初衷是表達 這是標題，這是段落，這是表格 之類的信息。同時文檔佈局由瀏覽器來完成，而不使用任何的格式化標籤
此時兩種主要的瀏覽器 ( Netscape 和 Internet Explorer ) 不斷地將新的 HTML 標籤和屬性（比如字體標籤和顏色屬性）添加到 HTML 規範中，創建文檔內容清晰地獨立於文檔表現層的站點變得越來越困難
爲了解決這個問題，萬維網聯盟（W3C），這個非盈利的標準化聯盟，肩負起了 HTML 標準化的使命，並在 HTML 4.0 之外創建出樣式 （Style）
所有的主流瀏覽器均支持層疊樣式表
CSS 語法
CSS 規則由兩個主要的部分構成：選擇器 以及 一條或多條聲明（ 每條聲明由一個屬性和一個值組成 ）
- 選擇器 通常是需要改變樣式的 HTML 元素
- 屬性（ property ）是您希望設置的樣式屬性，每個屬性有一個值，屬性和值用冒號分開
- 多條聲明之間使用
;隔開
HTML 嵌入 CSS 樣式
引入方式的優先級： 就近原則
行內樣式
行內樣式就是把 CSS 樣式直接放在代碼行內的標籤中，一般都是放入標籤的 style 屬性中，最直接的一種方式，但是修改起來較爲麻煩
<p style="font-size:30px;">行內樣式</p>
內嵌式
內嵌式通過將 CSS 寫在網頁源文件的頭部，即在 <head> 和 </head> 之間，通過使用 HTML 標籤中的 <style> 標籤將其包圍，解決了行內樣式多次書寫的弊端
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 32px;
}
</style>
</head>
<body>
<p>內嵌樣式</p>
</body>
</html>
鏈接式
鏈接式通過 HTML 的 <link> 標籤，將外部樣式表文件鏈接到 HTML 文檔中，這也是網站使用最多的方式。這種方法將 HTML 和 CSS 完全分離，增強網頁結構的擴展性和 CSS樣式 的可維護性
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./my.css">
</head>
<body>
<p>鏈接樣式</p>
</body>
</html>
@import導入
@import daoru.css;
@import 'daomxss';
@import "daoru.css";
@import url(daoru.css);
@import url('daoru.css');
@import url("daoru.css");
CSS 選擇器
元素選擇器
元素選擇器，最常見的 CSS 選擇器，匹配文檔樹中該元素類型的每一個實例
/* 單個元素選擇器 */
div {
background-color: pink;
}
/* 多個元素選擇器 */
h1, p {
color: gray;
}
id 選擇器
通過元素的 id 屬性定位元素，影響範圍最小
選擇符 #
#item{
width: 200px;
height: 200px;
}
class 選擇器
通過元素的 class 屬性定位元素
選擇符 .
.box{
width: 200px;
height: 200px;
}
屬性選擇器
根據元素的屬性及屬性值來選擇元素
/* 對包含 title 屬性的元素生效 */
*[title] {color:red;}
/* 對包含 title，href 屬性的 a 標籤生效 */
a[href][title] {color:red;}
後代選擇器
又稱爲 包含選擇器，對指定元素中的某一元素生效，遞歸查詢符合子元素，全部生效
h1 em {
color:red;
}
查詢 h1 標籤中的 em 元素，不論嵌套多少層都會生效
子代選擇器
僅對父元素下一級中符合的子元素生效
h1>em {
color:red;
}
查詢 h1 標籤中的 em 元素，僅查詢一級
兄弟選擇器
兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素後的元素，且二者有相同父元素
僞類選擇器
| 選擇器 | 描述 |
|---|---|
| :active | 向被激活的元素添加樣式 |
| :focus | 向擁有鍵盤輸入焦點的元素添加樣式 |
| :hover | 當鼠標懸浮在元素上方時，向元素添加樣式 |
| :link | 向未被訪問的鏈接添加樣式 |
| :visited | 向已被訪問的鏈接添加樣式 |
| :first-child | 向元素的第一個子元素添加樣式 |
/* 當鼠標懸停在 a 標籤時生效 */
a:hover {
color: red;
}
僞元素選擇器
用於向某些選擇器設置特殊效果
| 選擇器 | 描述 |
|---|---|
| :first-letter | 向文本的第一個字母添加特殊樣式 |
| :first-line | 向文本的首行添加特殊樣式 |
| :before | 在元素之前添加內容 |
| :after | 在元素之後添加內容 |
/* 每個 <h1> 元素後面插入一句話 */
h1:after
{
content: "--zzzzls";
}
選擇器優先級
例如 同時兩個選擇器給同一個元素設置相同的屬性，那麼最終設置爲哪個呢？這就要按照優先級來了
- 內連樣式 優先級 1000
- id 選擇器 優先級 100
- class 選擇器 優先級 10
- 元素選擇器 優先級 1
- 統配選擇器 優先級 0
- 繼承的樣式優先級沒有
以上的優先級先滿足高的。
注意：
- 如果是兩種相同優先級 爲同一個元素 同一個屬性設置 的話，是哪個寫在代碼靠後 最終就按那個的樣式
- 交集選擇器的優先級 所有優先級 加起來 運算 然後比較
- 並集的話 就是各算各的