css作用：早期，依靠HTML元素的屬性設置樣式，比如：border/align；而每個元素的屬性不盡相同，所以樣式設置比較混亂；因此，W3C推出了一套標準：使用某種樣式聲明後，所有的元素通用，即CSS產生，它是對頁面的樣式進行統一的定義（聲明）的。

CSS概念：

+ CSS（Cascading Style Sheets）:層疊樣式表，又叫級聯樣式表，簡稱樣式表；

+ 用於HTML文檔中元素的定義

+ 實現了將內容與表現分離

+ 提高了代碼的可重用性和可維護性

CSS基礎語法：

+ 由多個樣式規則 組成，每個樣式規則有兩個部分: 選擇器和聲明

—>選擇器：決定哪些元素使用這些規則

—>聲明：由一個或多個屬性/值組成，用於設置元素的外觀表現；

*CSS 使用

一共有三種使用方式：內聯樣式、內部樣式表、外部樣式表

*內聯樣式：定義在單個HTML元素中；不需要定義選擇器，也不需要大括弧{}，只需要將分號隔開的一個或多個屬性/值對，作為元素的style的值；如：

<h1 stylex=「background-color:silver;color:blue」>文本</h1>

* 內部樣式表：定義在HTML頁的頭元素中；位於頭元素的<style>元素內；在文檔的<head>元素內添加<style>元素，在<style>中添加樣式規則；如：

<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）內部樣式表：將樣式定義在<head>元素裏的<style>裏；但僅限於當前文檔範圍重用。

3）外部樣式表：將樣式表單獨定義在.css文件裏，有頁面引入它；但可維護性可重用性高，同時實現了數據(內容)和表現的分離；

* CSS特徵：

—> 繼承性：大多數CSS的樣式表可以被繼承；

—> 層疊性：可以定義多個樣式表；不衝突時，多個樣式表中的樣式可層疊為一個，即不衝突時採用並集方式；

* 優先順序：即衝突時採用優先順序

—> 內聯 > 內部 或 外部；

內部和外部：優先順序相同的情況下，採取就近原則，以最後一次定義的優先

（所以，當修改時，不想去找，就在CSS文件中最後的位置重新寫新的樣式；這也是CSS文件越來越大的原因）；

[注意：還應注意瀏覽器的預設設置]

** CSS的特點就是：繼承+並集+優先順序；

*CSS選擇器

1）元素選擇器：HTML文檔的元素名 div

+ 語法：如h1{color : blue}

+ 缺點：不同的元素樣式相同，即不能跨元素，做不到同一類元素下的細分；

2）類選擇器：.class

+ 語法：.className{樣式聲明}，如：

.myClass{ background-color:pink;font-size:35pt; }
<h2 class="myClass">h2中的文本</h2>
<p class="myClass">p中的文本</p>

[注意：html文件中，所有元素都有一個class屬性，如<p class=「name」></p>;

類選擇器還有一種用法：<div id=「d1」 class=「s1」></div>則樣式d1和s1共同起作用]

3）分類選擇器 div.class

將類選擇器和元素選擇器結合起來使用，以實現同一類元素不同樣式的細分控制。如<input>元素，雙有按鈕又有文本時，可採用分類選擇器，如：

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」;


推薦閱讀：
相關文章