CSS概述
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常存儲在樣式表中
- 把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲在 CSS 文件中
- 多個樣式定義可層疊為一
css引入方式
- 行內式
- 嵌入式
- 導入式
- 鏈接式
1、行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
<p style="background-color: #00a2ca">zhangyanlin</p>
效果圖如下：
2、嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
<head>
<style type="text/css">
...此處寫CSS樣式
</style>
</head>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{background-color: #00a2ca} </style> </head> <body> <p>zhangyanlin</p> </body> </html>
效果圖如下：
3、導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：
<style type="text/css">
@import"mystyle.css"; 此處要注意.css文件的路徑
</style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @import "CSS引入/css樣式3.css"; # 導入css文件路徑 </style> </head> <body> <div>zhangyanlin</div> </body> </html>
效果圖一樣就不一一展示啦
4、鏈接式
也是將一個.css文件引入到HTML文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css樣式3.css"> # 主要核心在這鏈接 </head> <body> <div class="zhang">zhangyanlin</div> </body> </html>
注：
導入式會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。
CSS選擇器
1、基礎選擇器
1>、匹配任何元素用*，包括body元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ background-color: #00a2ca; } </style> </head> <body> <p>zhangyanlin</p> <div>張岩林</div> </body> </html>
效果圖如下：
2>、標簽選擇器，匹配所有P標簽，格式如下:p{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #00a2ca; } </style> </head> <body> <p>zhangyanlin</p> <div>張岩林</div> </body> </html>
3>、id選擇器和class選擇器，css樣式id調用里用： #id名字調用； class調用用：.類名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #zhang{ background-color: #00a2ca; # id調用方法 } p.zhangyanlin{ background-color: #197991; #只應用於p標簽 } </style> </head> <body> <p id="zhang">zhangyanlin</p> <div class="zhangyanlin">張岩林</div> <p class="zhangyanlin">aylin</p> </body> </html>
效果圖如下：
2、組合選擇器
1>、多元素選擇器
同時匹配所有E元素或F元素，E和F之間用逗號分隔
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p,div{ background-color: #00a2ca; } </style> </head> <body> <p>zhangyanlin</p> <div >張岩林</div> <p>aylin</p> </body> </html>
效果圖如下:
2>、后代選擇器
后代選擇器匹配所有值得元素的后代元素。以下實例選取所有 <p> 元素插入到 <div> 元素中:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> div p { background-color:yellow; } </style> </head> <body> <div> <p>段落 1。 在 div 中。</p> <p>段落 2。 在 div 中。</p> </div> <p>段落 3。不在 div 中。</p> <p>段落 4。不在 div 中。</p> </body> </html>
效果圖如下：
3>、子元素選擇器
與后代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。以下實例選擇了<div>元素中所有直接子元素 <p> ：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> div>p { background-color:yellow; } </style> </head> <body> <h1>Welcome to My Homepage</h1> <div> <h2>My name is Donald</h2> <p>I live in Duckburg.</p> </div> <div> <span><p>I will not be styled.</p></span> </div> <p>My best friend is Mickey.</p> </body> </html>
只改變了div下p子元素，效果圖如下：
4>、相鄰元素選擇器
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。以下實例選取了所有位於 <div> 元素后的第一個 <p> 元素:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> div+p { background-color:yellow; } </style> </head> <body> <h1>Welcome to My Homepage</h1> <div> <h2>My name is Donald</h2> <p>I live in Duckburg.</p> </div> <p>My best friend is Mickey.</p> <p>I will not be styled.</p> </body> </html>
效果圖如下：
注意嵌套規則：
- 塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
- 塊級元素不能放在p里面。
- 有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
- li內可以包含div
- 塊級元素與塊級元素並列、內聯元素與內聯元素並列。（錯誤的：<div><h2></h2><span></span></div>）
3、偽類選擇器：
偽類選擇器： 專用於控制鏈接的顯示效果，偽類選擇器：
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代碼; }
<style type="text/css"> a:link{ color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: yellow; } </style> </head> <body> <a href="01-hello-world.html">hello-world</a> </body> </html>
CSS的常用屬性
1、顏色屬性
<div style="color:blueviolet">ppppp</div> 輸入顏色英文單詞
<div style="color:#ffee33">ppppp</div> 16進制顏色樣式
<div style="color:rgb(255,0,0)">ppppp</div> 紅綠藍三原色按順序
<div style="color:rgba(255,0,0,0.5)">ppppp</div> a代指透明度
2、字體屬性：
font-size: 20px/50%/larger 字體大小
font-family:'Lucida Bright' 字體樣式
font-weight: lighter/bold/border/ 字體粗細
line-height:40px; 字體上下調到居中位置
<h1 style="font-style: oblique">老男孩</h1> 斜體
3、背景屬性
background-color: cornflowerblue 背景顏色
background-image: url('1.jpg');打開一個圖片當做背景圖片
background-repeat: no-repeat;(repeat:平鋪滿) 不平鋪
background-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: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
注意：如果講背景屬性加在body上，要記得給body加上一個height，否則結果異常，這是因為body為空，無法撐起背景圖片，另外，如果此時要設置一個width＝100px，你也看不出效果，除非你設置出html。
4、文本屬性
font-size: 10px;
text-align: center;橫向排列
line-height: 200px;文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比
p
{ width: 200px;
height: 200px;
text-align: center;
line-height: 200px; }
text-indent: 150px; 首行縮進，50%：基於父元素（weight）的百分比
letter-spacing: 10px; 字體間距
word-spacing: 20px;
direction: rtl; #右邊開始
text-transform: capitalize; #字母
5 邊框屬性：
border-style: solid;
border-color: chartreuse;
border-width: 20px;
簡寫：border: 30px rebeccapurple solid;
<!--border:有3個參數：線的粗細、線的樣式（實線、點、虛線等）、線的顏色--> <!--第一種：線的粗細為1像素，實線、紅色--> <div style="border:1px solid red;height:10px" ></div> <!--第二種：線的粗細為1像素，點、藍色--> <div style="border:1px dotted blue;height:10px" ></div> <!--第三種：線的粗細為1像素、虛線、紫色--> <div style="border:1px dashed purple;height:10px" ></div>
6 、dispaly屬性
- none
- block
- inline
<!--display 為none將隱藏標簽--> <div style="display: none;">張岩林</div> <!--display 為inline會將塊級別標簽調為內聯標簽--> <div style="background-color:red;display:inline">張岩林</div> <!--display 為block會將內聯標簽調為塊級別標簽--> <a style="background-color:red;display:block">張岩林</a>
為none時不會顯示出來，效果如下：
7、列表屬性
ul,ol{ list-style: decimal-leading-zero;
list-style: none; #去掉前面符號
list-style: circle; #列表樣式
list-style: upper-alpha; #列表樣式
list-style: disc; } #列表樣式
<!DOCTYPE html> <html> <head> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head> <body> <p>Example of unordered lists:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>Example of ordered lists:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>
效果圖如下：
8、盒子模型
- Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
- Border(邊框) - 圍繞在內邊距和內容外的邊框。
- Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
- Content(內容) - 盒子的內容，顯示文本和圖像。
下面帶大家分析一下這個圖片
下面寫一段代碼來實現一下吧：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } </style> </head> <body> <div class="ex">The picture above is 250px wide. The total width of this element is also 250px.</div> </body> </html>
效果如下：
9、float模型
首先要知道，div是塊級元素，在頁面中獨占一行，自上而下排列，也就是傳說中的流。
可以看出，即使div1的寬度很小，頁面中一行可以容下div1和div2，div2也不會排在div1后邊，因為div元素是獨占一行的。注意，以上這些理論，是指標准流中的div。無論多么復雜的布局，其基本出發點均是：“如何在一行顯示多個div元素”。浮動可以理解為讓某個div元素脫離標准流，漂浮在標准流之上，和標准流不是一個層次。
例如，假設上圖中的div2浮動，那么它將脫離標准流，但div1、div3、div4仍然在標准流當中，所以div3會自動向上移動，占據div2的位置，重新組成一個流。如圖：
從圖中可以看出，由於對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的順序決定的。靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是后。
為了幫助讀者理解，再舉幾個例子。
假如我們把div2、div3、div4都設置成左浮動，效果如下：
根據上邊的結論，跟着小菜理解一遍：先從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，它們都是右浮動呢？讀者此時應該已經能自己推測場景，如下：
此時如果要讓div2下移到div1下邊，要如何做呢？
同樣根據小菜定論，我們希望移動的是div2，就必須在div2的CSS樣式中調用浮動，因為浮動只能影響調用它的元素。
可以看出div2的右邊有一個浮動元素div1，那么我們可以在div2的CSS樣式中使用clear:right;來指定div2的右邊不允許出現浮動元素，這樣div2就被迫下移一行，排到div1下邊。
‘
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 卻可以。因為它原本所占的空間仍然占據文檔流。