css作用：早期，依靠HTML元素的屬性設置樣式，比如：border/align；而每個元素的屬性不盡相同，所以樣式設置比較混亂；因此，W3C推出了一套標準：使用某種樣式聲明後，所有的元素通用，即CSS產生，它是對頁面的樣式進行統一的定義（聲明）的。
CSS概念：
+ CSS（Cascading Style Sheets）:層疊樣式表，又叫級聯樣式表，簡稱樣式表；
+ 用於HTML文檔中元素的定義
+ 實現了將內容與表現分離
+ 提高了代碼的可重用性和可維護性
CSS基礎語法：
+ 由多個樣式規則 組成，每個樣式規則有兩個部分: 選擇器和聲明
—>選擇器：決定哪些元素使用這些規則
—>聲明：由一個或多個屬性/值組成，用於設置元素的外觀表現；
*CSS 使用
一共有三種使用方式：內聯樣式、內部樣式表、外部樣式表
*內聯樣式：定義在單個HTML元素中；不需要定義選擇器，也不需要大括號{}，只需要將分號隔開的一個或多個屬性/值對，作爲元素的style的值；如：
<h1 style=“background-color:silver;color:blue”>文本</h1>- 內部樣式表：定義在HTML頁的頭元素中；位於頭元素的
<head><style type="text/css">
h1{ color:green; }
</style></head>
<body><h1>文本</h1></body>[注意：<style>中的屬性 <type=“text/css”>可省略；且<style>元素裏的註釋要用css規定的/**/來註釋，而不是HTML裏的<!— —>]
- 外部樣式表：定義在一個外部的CSS文件中(.css文件)；由HTML頁面引用樣式表文件；
—> 一個純文本文件；
—> 該文件中只能包含css樣式規則；
—> 文件後綴爲.css;
使用 <link>元素鏈接需要的外部樣式表文件。如:
myStyle.css文件：
h1{ color:green; }
p{ background-color;silver;color:blue; }
html文件裏的<head>元素：
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
</head>[注意：rel：表示做什麼用；href：表示引入的文件路徑；type：引入文件類型，text/css表示純文本的CSS代碼]；
** 三種使用方式的區別：
1）內聯樣式：將樣式定義在元素的style屬性裏；但沒有重用性。
2）內部樣式表：將樣式定義在元素裏的
.myClass{ background-color:pink;font-size:35pt; }
<h2 class="myClass">h2中的文本</h2>
<p class="myClass">p中的文本</p>[注意：html文件中，所有元素都有一個class屬性，如<p class=“name”></p>;
類選擇器還有一種用法：
則樣式d1和s1共同起作用]3）分類選擇器 div.class
將類選擇器和元素選擇器結合起來使用，以實現同一類元素不同樣式的細分控制。如元素，雙有按鈕又有文本時，可採用分類選擇器，如：
p.myClass{ color:red;font-size:20pt }
<h2 class="myClass">h2中的文本</h2>
<p class="myClass">p1中的文本</p>
<p>p2中的文本</p>4）元素id選擇器 #id
以某個元素id的值作爲選擇器。比較特殊的、頁面整體結構的劃分一般使用id選擇器
+ 語法：定義id選擇器時，選擇器前需要有一個”#”號。選擇器本身則爲文檔中某個元素的id屬性；如：
#header{ color:red;background:yellow; }
<h1 id="header">This is Title<h1>[注意：html文件中，所有元素都一個id屬性。且某個id選擇器僅使用一次]
5）派生選擇器 h1 span （包含/後代選擇器）
依靠元素的層次關係來定義。某一包含元素下的一些相同子元素使用派生選擇器
+ 語法：通過依據元素在其位置的上下文關係來定義樣式，選擇器一端包括兩個或多個用空格分隔的選擇器。如：
h1 span{color:red;}
<h1>This is a<span>important</span>heading</h1>6）選擇器分組 h1,p,div
對某些選擇器定義一些統一設置（相同的部分）
+ 語法：選擇器聲明爲以逗號隔開的元素列表，如：
h1,p,div{ border:1px solid black;}7）僞選擇器 a:link
用於向某些選擇器添加特殊的效果
+ 語法：使用冒號 ：作爲結合符，結合符左邊是其他選擇器，右邊是僞類。
+ 常用僞類：有些元素有不同的狀態，典型的如<a>元素
* link：未訪問鏈接 *active：激活 *visited：訪問過的鏈接 *focus：獲得焦點
* hover：懸停，鼠標移入，所有元素都能用
如：
a:link{ color:black;font-size:15pt; } a:visited{ color:pink;font-size:15pt; }
a:hover{ font-size:20pt; }8)子選擇器 .class>div
用於指定標籤元素第一代子元素。只作用於第一代後代；
+語法：使用>作爲連接符，連接類名及標籤名。如:
.first>span{border:1px solid red;}9）通用選擇器
作用是匹配html中所有標籤元素。
+語法：使用一個 * 表示，如：*{color:red;}
*選擇器優先級(每種選擇都有其權值，優先級就是對其權值的比較)
+ 基本規則：內聯樣式 > id選擇器 > 類選擇器 > 元素選擇器
+ 優先級從低到高：
div < .class < div.class < #id < div#id < #id.class < div#id.class
!important : 設置選擇器的權值爲最高，即優先級最大。
如：p{color:red!important;} /則不管後面的設置都會爲紅色/
id選擇器與類選擇器的區別：
—> id選擇器在一個HTML中只能使用一次；若使用兩次則會出錯；而類選擇器.class可以使用多次；
—> 可以使用類選擇器列表爲同一個元素設置多個樣式，而id不能。如class=“stress bigsize”;
博客地址：Web基礎之CSS（一）