CSS是Cascading Style Sheets的加簡稱，中文稱為層疊樣式表，用來控制網頁資料的表現，可以使網頁的表現與資料内容分離。
一丶CSS的四種引入方式
1·行内式
行内式是在标記的atyle屬性中設定CSS樣式，這種方式沒有展現出CSS的優勢，不推薦使用。
2.嵌入式
嵌入式将CSS樣式集中寫在網頁的<head></head>标簽對的<style></style>标簽對中，格式如下:
<head>
<style type="text/CSS">
....此處寫CSS樣式
</style>
</hea>
3·導入式
将一個獨立的CSS檔案引入HTML檔案中，導入式使用CSS規則引入外部CSS檔案，<style>标記也是寫在<head>标記中，使用的文法如下：
<style type="text/CSS">
@import"mystyle.css" !!此處要注意css檔案的路徑
</style>
4.連結式
也是講一個.css檔案引入到HTML檔案中 <link href="mystyle.css" rel="stylesheet" type="text/css">
注意：
導入式會在整個網頁裝載完成在裝載CSS檔案，是以這個就導緻了一個問題，如果是以網頁比較大則會出現先顯示樣式頁面，閃爍一下之後，在出現網頁的樣式，這就是導入式固有的一個缺陷，使用連結式時與導入式不同的是它會以網頁檔案主體裝載前裝載css檔案，是以顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然後在顯示有樣式的網頁，這就是連結式的優點。
二丶 CSS的選擇器（Selector）
“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的那些元素
1·基礎選擇器：
＊： 通用元素選擇器，比對任何元素 *{margin:0; padding:0;}
E： 标簽選擇器，比對所有使用E标簽的元素P{color:green}
.info和E.info: class選擇器，比對所有class屬性中包含info的元素 .info{background:#ff0}
p..info{background:blue;}
#info和E#info id選擇器，比對所有的id屬性等于footer的元素 #info{background:#ff0;}
p#info{background:#ff0;}
2·組合選擇器
E,F 多資源選擇器，同僚比對所有E元素或F元素，E和F之間用逗号分隔 DIV,p{color:#f00;}
E F 後代元素選擇器,比對所有屬于E元素後代的F元素,E和F之間用空格分隔 #nav li{display:inline;} li a{font-weight:bold;}
E > F 子元素選擇器，比對所有的E元素的子元素F div > strong{color:#f00;}
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7
8 .div1>p{
9 background-color: aqua;
10 color: deeppink;
11 }
12
13 .main2>div{
14 background-color: blueviolet;
15 color: chartreuse;
16 }
17 </style>
18 </head>
19 <body>
20
21 <div class="div1">hello1
22 <div class="div2">hello2
23 <div>hello4</div>
24 <p>hello5</p>
25 </div>
26 <p>hello3</p>
27 </div>
28 <p>hello6</p>
29
30 <hr>
31
32 <div class="main2">1
33 <div>2
34 <div>
35 4
36 </div>
37 </div>
38 <div>
39 3
40 </div>
41 </div>
42 </body>
43 </html> View Code
E + F 毗鄰元素選擇器，比對所有的緊随E元素之後的統計元素F p+p{color:#f00;}
注意嵌套規則；
1·塊集元素可以包含内聯标簽或某些塊集元素，但内聯元素不能包含塊集元素，它隻能包含其它内聯元素。
2·塊集元素不能放在P裡面。
3·有集個特殊的塊集元素隻能包含内聯元素，不能包含塊集元素，如h1,h2,h3,h4,h5,h6,p,dt.
4·li内可以包含div
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 [suoning]{
8 color: blueviolet;
9 }
10 .he>div{
11 color: bisque;
12 }
13
14 </style>
15 </head>
16 <body>
17
18 <div class="he">111
19 <p class="fr">222
20 <div>333</div>
21 </p>
22 <div>444</div>
23 </div>
24
25
26 ***************************
27
28 <div suoning="sb">ddd
29 <p>pppp</p>
30 </div>
31 <p suoning="sb2">ddd2
32 <p>pppp2</p>
33 </p>
34 </body>
35 </html> 3·屬性選擇器
E[att] 比對所有具有att屬性的E元素，不考慮它的值。
（注意:E在此處可以省略，比如"[cheacked]".以下同） div[class="error"]{color:#f00}
E[att=val] 比對所有att屬性等于"val"的E元素 div[class="error"]{color:#f00}
E[att~=val] 比對所有att屬性具有多個空格分隔的值,其中一個值等于"val"的E元素 td[class~="name"]{color:#f00;}
E[att|=val] 比對所有的att屬性具有多個連字号分隔（hyphen-separated）的值,其中一個值以“val”開頭的E元素，主要用于lang屬性，
比如：“en”,“en-us”,“en-gb”，等.... p[lang=en]{color:#f00;}
E[attr^=val] 比對屬性值以指定開頭的每個元素 div[class^="text"]{background:#ffff00;}
E[attr$=val] 比對屬性值指定的結尾的每個元素 div[class$=text]{background:#ffff00;}
E[attr*=val] 比對屬性值中包含指定的每個元素 div[class*"text"]{background:#ffff00;}
p;before 在每個<p>元素的内容之前插入内容 p:before{content:"hello";color:red}
p:after 在每個<p>元素的内容之前插入内容 p:after{content:"hello";color:red}
4·僞類選擇器：
僞類選擇器：專用于控制連結的顯示效果，僞類選擇器：
a:link(沒有接觸過的連結)，用于定義了連結的正常狀态。
a:hover(滑鼠放在連結上的狀态)，用于産生視覺效果。
a:visited(通路過的連結)，用于閱讀文章，能清楚的判斷已經通路過的連結。
a:active(在連結上按下滑鼠時的狀态)，用于表現滑鼠按下時的連結狀态。
僞類選擇器：僞類值得是标簽的不同狀态：
a==>點過狀态，沒有點過的狀态，滑鼠懸浮狀态，激活狀态
a:lin{color；#FF0000}/*未通路的連結*/
a:visited{color:#00FF00}/*已通路的連結*/
a:hover{color:#FF00FF}/*滑鼠移動到連結上*/
a:active{color:#0000FF}/*標明的連結*/格式:标簽:僞類名稱{css代碼;}
1 <style type="text/css">
2 a:link{
3 color: red;
4 }
5 a:visited {
6 color: blue;
7 }
8 a:hover {
9 color: green;
10 }
11 a:active {
12 color: yellow;
13 }
14 </style>
15 </head>
16 <body>
17 <a href="01-hello-world.html">hello-world</a>
18 </body>
19 </html> 三·CSS的常用屬性
1·顔色屬性：
<div style="color:blueviolet">Wyc</div>
<div style="color:#ffee33">Wyc</div>
<div style="color:rgb(255.0.0)">Wyc</div>
<div style="color:rgba(255.0.0.5)">Wyc</div>
2·字型屬性：
font-size:20px/50%/larger
font-family:'Lucida Bright'
font-weight:lighter/bold/border/
<h1 style="font-style:oblique">你好世界</h1>
3·背景屬性：
background-color:cornflowerblue
background-image:url('1.jpg');
background-requeat:no-requeat;(repeat:平鋪滿)
backgroun-position:right top(20px 20px);(橫向:left center right)(縱向: top center bottom)
簡寫:<body style="background:20px 20px no-repeat #ff4 url('1.jpg')">
<div style="width: 300px;height:300pxbackground:20px20px no-repeat #ff4 url('1.jpg')">
注意：
《如果講背景屬性加在body上，要記得給body加上一個height，否則結果異常，這是應為body為空，無法撐起背景圖檔，另外，如果此時要設定一個
width=100px，你也看不出效果，除非設定出html。》
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 html{
8 background-color: antiquewhite;
9
10 }
11 body{
12 width: 100px;
13 height: 600px;
14 background-color: deeppink;
15 background-image: url(1.jpg);
16 background-repeat: no-repeat;
17 background-position: center center;
18 }
19 </style>
20 </head>
21 <body>
22
23 </body>
24 </html> 4·文本屬性：
font-size：10px;
text-align:center;橫向排列
line-height:200px;文本行高 通俗的講，文字高度加上文字上下的空白區域的高度50%:基于字型大小的百分比
p{
width:200px;
height:200px;
text-align:center;
background-color:aquammarine;
line-height:200px;
}
text-indent:150px;首行縮進，50%：基于父元素（weight）的百分比
letter-spacing:10px
word-spacing:20px
direction:rtl;
text-transform:capitalize;
5·邊框屬性：
boeder-style:solid;
border-color:chartreuse;
borser-width:20px;
簡寫：border:30px rebeccapurple solid;
6·清單屬性:
ul,ol{
list-style:decimal-leading-zero;
list-style:none;list-style:circle;
list-style:upper-alpha;
list-style:disc;
7·dispaly屬性：
·none
·block
·inline
8·盒子模式
padding：用于控制内容與邊框的距離。
margin：用于控制元素與元素之間的距離，margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到互相隔開的目的。
内邊距會影響盒子的大小，外邊距不會影響盒子的大小，需要設定 練習:300px*300px的盒子裝着100px*100px的盒子，分别通過margin和padding設定将小盒子移到大盒子的中間。
注意1：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7
8 .div1{
9 background-color: aqua;
10 width: 300px;
11 height: 300px;
12 }
13 .div2{
14 background-color: blueviolet;
15 width: 100px;
16 height: 100px;
17 }
18 </style>
19 </head>
20 <body>
21 <div class="div1">
22 <div class="div2"></div>
23 <div class="div2"></div>
24 </div>
25 </body>
26 </html> 邊框在預設情況下會定位在于浏覽器視窗的左上角，但是并沒有緊貼這浏覽器的視窗的邊框，這是應為body本身也是一個盒子（外層還有html），在預設情況下，body距離html會有若幹像素的margin，具體數值因各個浏覽器不盡相同，是以body中的盒子不會緊貼浏覽器視窗的邊框了，為了驗證這一點，加上
body{
boeder:1px solid;
background-color:cadetblue;
>>>>>解決方法：
body{
margin:0;
注意2：margin collapse（邊界塌陷或者說邊界重疊）
外邊距的重疊隻産生在普通流文檔的上下邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。攝像，當我們上下排列一系列規則的塊級元素（如段 落P）時，那麼塊集元素之間應為外邊距重疊的存在，段落之間就不會産生雙倍的距離。又比如停車場
1·兄弟div:上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin裡最大的值作為顯示值。
2·父子div
if 父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個标簽包括border，padding，inline content 中的其中一個，然後按此div 進行margin ；
1 <!DOCTYPE html>
2 <html lang="en" style="padding: 0px">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7
8 body{
9 margin: 0px;
10 }
11
12 .div1{
13 background-color: aqua;
14 width: 300px;
15 height: 300px;
16 }
17 .div2{
18 background-color: blueviolet;
19 width: 100px;
20 height: 100px;
21 margin: 20px;
22
23 }
24 </style>
25 </head>
26 <body>
27
28 <div style="background-color: cadetblue;width: 300px;height: 300px"></div>
29
30 <div class="div1">
31 <div class="div2"></div>
32 <div class="div2"></div>
33 </div>
34
35 </body>
36 </html>
解決方法：
1: border:1px solid transparent
2: padding:1px
3: over-flow:hidden;
首先要知道，div是塊級元素，在頁面中獨占一行，自上而下排列，也就是傳說中的流。
可以看出，即使div1的寬度很小，頁面中一行可以容下div1和div2，div2也不會排在div1後邊，因為div元素是獨占一行的。注意，以上這些理論，是名額準流中的div。
無論多麼複雜的布局，其基本出發點均是：“如何在一行顯示多個div元素”。浮動可以了解為讓某個div元素脫離标準流，漂浮在标準流之上，和标準流不是一個層次。
例如，假設上圖中的div2浮動，那麼它将脫離标準流，但div1、div3、div4仍然在标準流當中，是以div3會自動向上移動，
從圖中可以看出，由于對div2設定浮動，是以它不再屬于标準流，div3自動上移頂替div2的位置，div1、div3、div4依次排列，成為一個新的流。又因為浮動是漂浮在标準流之上的，是以div2擋住了一部分div3，div3看起來變“矮”了
這裡div2用的是左浮動(float:left;)，可以了解為漂浮起來後靠左排列，右浮動(float:right;)當然就是靠右排列。這裡的靠左、靠右是說頁面的左、右邊緣。
如果我們把div2采用右浮動，會是如下效果：
此時div2靠頁面右邊緣排列，不再遮擋div3，讀者可以清晰的看到上面所講的div1、div3、div4組成的流。
目前為止我們隻浮動了一個div元素，多個呢？
下面我們把div2和div3都加上左浮動，效果如圖：
同理，由于div2、div3浮動，它們不再屬于标準流，是以div4會自動上移，與div1組成一個“新”标準流，而浮動是漂浮在标準流之上，是以div2又擋住了div4。
咳咳，到重點了，當同時對div2、div3設定浮動之後，div3會跟随在div2之後，不知道讀者有沒有發現，一直到現在，div2在每個例子中都是浮動的，但并沒有跟随到div1之後。是以，我們可以得出一個重要結論：
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟随在上一個元素的後邊(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)；如果A元素上一個元素是标準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。
div的順序是HTML代碼中div的順序決定的。
靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是後。
為了幫助讀者了解，再舉幾個例子。
先從div4開始分析，它發現上邊的元素div3是浮動的，是以div4會跟随在div3之後；div3發現上邊的元素div2也是浮動的，是以div3會跟随在div2之後；而div2發現上邊的元素div1是标準流中的元素，是以div2的相對垂直位置不變，頂部仍然和div1元素的底部對齊。由于是左浮動，左邊靠近頁面邊緣，是以左邊是前，是以div2在最左邊。
假如把div2、div3、div4都設定成右浮動，效果如下：
道理和左浮動基本一樣，隻不過需要注意一下前後對應關系。由于是右浮動，是以右邊靠近頁面邊緣，是以右邊是前，是以div2在最右邊。
假如我們把div2、div4左浮動，效果圖如下：
依然是根據結論，div2、div4浮動，脫離了标準流，是以div3将會自動上移，與div1組成标準流。div2發現上一個元素div1是标準流中的元素，是以div2相對垂直位置不變，與div1底部對齊。div4發現上一個元素div3是标準流中的元素，是以div4的頂部和div3的底部對齊，并且總是成立的，因為從圖中可以看出，div3上移後，div4也跟着上移，div4總是保證自己的頂部和上一個元素div3(标準流中的元素)的底部對齊。
至此，恭喜讀者已經掌握了添加浮動，但還有清除浮動，有上邊的基礎清除浮動非常容易了解。
經過上邊的學習，可以看出：元素浮動之前，也就是在标準流中，是豎向排列的，而浮動之後可以了解為橫向排列。
清除浮動可以了解為打破橫向排列。
清除浮動的關鍵字是clear，官方定義如下：
文法：
clear : none | left | right | both
取值：
none : 預設值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
定義非常容易了解，但是讀者實際使用時可能會發現不是這麼回事。
定義沒有錯，隻不過它描述的太模糊，讓我們不知所措。
根據上邊的基礎，假如頁面中隻有兩個元素div1、div2，它們都是左浮動，場景如下：
此時div1、div2都浮動，根據規則，div2會跟随在div1後邊，但我們仍然希望div2能排列在div1下邊，就像div1沒有浮動，div2左浮動那樣。
這時候就要用到清除浮動（clear），如果單純根據官方定義，讀者可能會嘗試這樣寫：在div1的CSS樣式中添加clear:right;，了解為不允許div1的右邊有浮動元素，由于div2是浮動元素，是以會自動下移一行來滿足規則。
其實這種了解是不正确的，這樣做沒有任何效果。
對于CSS的清除浮動(clear)，一定要牢記：這個規則隻能影響使用清除的元素本身，不能影響其他元素。
怎麼了解呢？就拿上邊的例子來說，我們是想讓div2移動，但我們卻是在div1元素的CSS樣式中使用了清除浮動，試圖通過清除div1右邊的浮動元素(clear:right;)來強迫div2下移，這是不可行的，因為這個清除浮動是在div1中調用的，它隻能影響div1，不能影響div2。
根據小菜定論，要想讓div2下移，就必須在div2的CSS樣式中使用浮動。本例中div2的左邊有浮動元素div1，是以隻要在div2的CSS樣式中使用clear:left;來指定div2元素左邊不允許出現浮動元素，這樣div2就被迫下移一行。
那麼假如頁面中隻有兩個元素div1、div2，它們都是右浮動呢？讀者此時應該已經能自己推測場景，如下：
10 ·position
1 static，預設值 static：無特殊定位，對象遵循正常文檔流。
top，right，bottom，left等屬性不 會被應用。 說到這裡我們不得不提一下一個定義——文檔流，文檔流其實就是文檔的輸出順序， 也就是我們通常看到的由左 到右、由上而下的輸出形式，在網頁中每個元素都是按照這個順序進行排序和顯示的，而float和position兩個屬性可以将元素從文檔流脫離出來顯示。 預設值就 是讓元素繼續按照文檔流顯示，不作出任何改變。
2 position:relative
relative：對象遵循正常文檔流，但将依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
absolute：對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。 如果設定 position:relative，就可以使用 top,bottom,left和 right 來相對于元素在文檔中應該出現的位置來移動這個元素。[意思是元素實際上依然占據文檔 中的原有位置，隻是視覺上相對于它在文檔中的原有位置移動了] 當指定 position:absolute 時，元素就脫離了文檔[即在文檔中已經不占據位置了]，可以準确的按照設定的 top,bottom,left 和 right 來定位了。 如果一個元素絕對定位後，其參照物是以離自身最近元素是否設定了相對定位，如果有設定将以離自己最近元素定位，如果沒有将往其祖先元素尋找相對定位元素， 一直找到html為止。
3 position:fixed
在理論上，被設定為fixed的元素會被定位于浏覽器視窗的一個指定坐标，不論視窗是否滾動，它都會固定在這個位置。
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，對象不會随着滾動。而其層疊通過z-index屬性 定義。 注意點： 一個元素若設定了 position:absolute | fixed; 則該元素就不能設定float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流， 另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。