2、css的四種引入方式
1.行內式瀏覽器
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優點，不推薦使用。架構
2.內嵌式ide
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式以下：佈局
3.連接式post
建一個index.css的文件，存放樣式網站
在主頁面中把index.css引入spa
4.導入式code
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法以下：
要注意導入的路徑。。。。
注意啦：
導入式會在整個網頁裝載完後再裝載CSS文件，所以這就致使了一個問題，若是網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下以後，再出現網頁的樣式。這是導入式固有的一個缺陷。
使用連接式時與導入式不一樣的是它會以網頁文件主體裝載前裝載CSS文件，所以顯示出來的網頁從一開始就是帶樣式的效果的，它不會像導入式那樣先顯示無樣式的網頁，而後再顯示有樣式的網頁，這是連接式的優勢。
因此仍是推薦用連接式。。。。。。。。。。。
3、塊級元素和內聯元素
-
塊級元素---h1,h2,h3,h4,h5,h6,hr,div,fieldset,form,dl,address,ol,p,table,ul,pre等常見。
-
內聯元素---a,b,br,em,i,img,input,strong,textarea,span,label等常見。
-區別：
- 塊級元素通常用來搭建網站架構、佈局、承載內容。
- 內聯元素通常用來在網站內容中的某些細節或者部位，用以「強調、區分樣式、上標、下標、錨點」等等。
- 它們能夠互相轉換：
- <div style="display:inline">塊元素變內聯元素</div>
- <span style="display:block">內聯元素變塊元素</span>
4.塊級元素的特色：每個塊級元素都識從一個新行開始顯示，其後的元素須要另起一行。
-嵌套規則：
- 塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
- 有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素，如h1, h2, h3, h4, h5, h6, p, dt；
- 塊級元素不能放在p裏面。
- li內能夠包含div。
- 塊級元素與塊級元素並列、內聯元素與內聯元素並列。（錯誤的：<div><h2></h2><span></span></div>）。
-注意：
能夠對塊級標籤設置長寬
不能夠對內聯標籤設長寬（它只會根據他的文字大小來變）
4、css的選擇器
4.1 基礎選擇器
「選擇器」指明瞭{}中的「樣式」的做用對象，也就是「樣式」做用於網頁中的哪些元素
1.通用元素選擇器 *: 全部的標籤都變色
2.標籤選擇器：匹配全部使用p標籤的樣式 p{color:red}
3.id選擇器：匹配指定的標籤 #p2{color:red}
4.class類選擇器：誰指定class誰的變色，可選多個 .c1{color:red} 或者 div.c1{color:red}
4.2 組合選擇器
1.後代選擇器 (不分層級，後代全部p標籤) .c2 p{color:red}
2.子代選擇器（只在兒子層找） .c2>p{color:red}
3.多元素選擇器：同時匹配全部指定的元素
.div,p{color:red}
或者
.c2 .c3,.c2~.c3{
color: red;
font-size: 15px;}
不經常使用
4.毗鄰選擇器（緊挨着，找相鄰的,只找下面的，不找上面的）.c2+p{color:red}
5.兄弟選擇器：同一級別的，離得很近的.c2~p{color:red}
4.3 屬性選擇器
匹配全部具備att屬性的E元素，不考慮它的值。（注意：E在此處能夠省略。 好比「[cheacked]」。如下同。） p[class] { color:#f00; }
匹配全部att屬性等於「val」的E元素 div[class=」error」] { color:#f00;}
匹配全部att屬性具備多個空格分隔的值、其中一個值等於「val」的E元素 td[class~=」name」] { color:#f00; }
匹配屬性值以指定值開頭的每一個元素 div[class^="test"]{background:#ffff00;}
匹配屬性值以指定值結尾的每一個元素 div[class$="test"]{background:#ffff00;}
匹配屬性值中包含指定值的每一個元素 div[class*="test"]{background:#ffff00;}
例
/*1.匹配全部xiaoming屬性的，而且只是在div標籤的*/
div[xiaoming]{
color: yellowgreen;
}
/*2.匹配全部xiaoming=boy的而且只是在div標籤的*/
div[xiaoming=boy]{
color: aqua;
}
/*2.上面的優先級和下面的優先級本應該是同樣的*/
/*應該顯示下面的，可是，因爲上面查找的範圍
比下面的範圍廣，因此它會把上面的也顯示了。*/
/*3.匹配全部屬性爲xiaoming，而且具備多個空格分割的值，*/
/*其中一個只等於boy的*/
div[xiaoming~=boy]{
color: blueviolet;
}
/*4.匹配屬性值以指定值開頭的每一個元素，
而且是在div標籤裏的*/
div[xiaoming^=w]{
background-color: aquamarine;
}
div[egon^=w]{
background-color: aquamarine;
}
/*5.匹配屬性值以指定值結尾的每一個元素 */
div[xiaoming$=a]{
background-color: blueviolet;
}
/*6.匹配屬性值中包含指定值的每一個元素 */
div[xiaoming*=a]{
background-color: blueviolet;
}
4.4 僞類
anchor僞類：專用於控制連接的顯示效果
a:link（沒有點過的連接）,用於定義了連接的常規狀態。 a:hover（鼠標懸浮連接上的狀態）,用於產生視覺效果。 a:visited（訪問過的連接）,用於閱讀文章，能清楚的判斷已經訪問過的連接。 a:active（在連接上按下鼠標時的狀態）,用於表現鼠標按下時的連接狀態。 僞類選擇器 : 僞類指的是標籤的不一樣狀態: a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態 a:link {color: #FF0000} /* 未訪問的連接 */ a:visited {color: #00FF00} /* 已訪問的連接 */ a:hover {color: #FF00FF} /* 鼠標移動到連接上 */ a:active {color: #0000FF} /* 選定的連接 */ 格式: 標籤:僞類名稱{ css代碼; }
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>菜鳥教程(runoob.com)</title>
6 <style>
7 a:link {color:#000000;} /* 未訪問連接*/
8 a:visited {color:#00FF00;} /* 已訪問連接 */
9 a:hover {color:#FF00FF;} /* 鼠標移動到連接上 */
10 a:active {color:#0000FF;} /* 鼠標點擊時 */
11 </style>
12 </head>
13 <body>
14 <p><b><a href="/css/" target="_blank">這是一個連接</a></b></p>
15 <p><b>注意：</b> a:hover 必須在 a:link 和 a:visited 以後，須要嚴格按順序才能看到效果。</p>
16 <p><b>注意：</b> a:active 必須在 a:hover 以後。</p>
17 </body>
18 </html>
before after僞類
:before p:before 在每一個<p>元素以前插入內容
:after p:after 在每一個<p>元素以後插入內容
例：p:before{content:"hello";color:red;display: block;}
4.5 css優先級
所謂CSS優先級，便是指CSS樣式在瀏覽器中被解析的前後順序。
單個選擇器優先級
!important > 行內樣式 > ID選擇器 > Class選擇器 >元素選擇器
定義!important的選擇器，優先級最高，但IE6不支持。
例如：h1{color:#ff0000 !important;}
<style type="text/css">
/*（1）行內樣式優先級最高 */ #title{ color:#0000ff;} /*（2）ID選擇器比Class選擇器優先級高 */ .title{ color:#00ff00; } /*（3）Class選擇器比元素選擇器優先級高 */ h1{ color:#ff0000; } /*（4）元素選擇器，優先級最低 */
</style>
<h1 class="title" id="title" style="color:#999900">人社部官員</h1>
組合選擇器優先級
樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高。 style=""－－－－－－－－－－－1000
2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－100
3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－10
4 統計選擇符中的HTML標籤名個數。 p －－－－－－－－－－－－－-－1
按這些規則將數字符串逐位相加，就獲得最終的權重，而後在比較取捨時按照從左到右的順序逐位比較。
div.box span{ } 優先級爲12
.box span{ } 優先級爲11，優先級小於上邊
編寫簡潔、高效的原則
所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時候儘可能進行少的查找。
編寫高效CSS的原則
不要在ID選擇器前使用標籤名。
例如：div#box 簡寫形式 #box
不要再class選擇器前使用標籤名
例如：div.box 簡寫形式 .box
儘可能少使用層級關係
例如：.box .news .title h1 簡寫形式 .title h1
使用class代替層級關係
例如：.box .news .title 簡寫形式 .title