CSS
CSS是Cascading Style Sheets的加簡稱，中文稱爲層疊樣式表，用來控制網頁數據的表現，可使網頁的表現與數據內容分離。css
一丶CSS的四種引入方式
1·行內式html
行內式是在標記的atyle屬性中設定CSS樣式，這種方式沒有體現出CSS的優點，不推薦使用。api
2.嵌入式瀏覽器
嵌入式將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中，格式以下:ide
<head>佈局
<style type="text/CSS">學習
....此處寫CSS樣式字體
</style>url
</hea>spa
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>
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浮動，那麼它將脫離標準流，但div一、div三、div4仍然在標準流當中，因此div3會自動向上移動，
從圖中能夠看出，因爲對div2設置浮動，所以它再也不屬於標準流，div3自動上移頂替div2的位置，div一、div三、div4依次排列，成爲一個新的流。又由於浮動是漂浮在標準流之上的，所以div2擋住了一部分div3，div3看起來變「矮」了
這裏div2用的是左浮動(float:left;)，能夠理解爲漂浮起來後靠左排列，右浮動(float:right;)固然就是靠右排列。這裏的靠左、靠右是說頁面的左、右邊緣。
若是咱們把div2採用右浮動，會是以下效果：
此時div2靠頁面右邊緣排列，再也不遮擋div3，讀者能夠清晰的看到上面所講的div一、div三、div4組成的流。
目前爲止咱們只浮動了一個div元素，多個呢？
下面咱們把div2和div3都加上左浮動，效果如圖：
同理，因爲div二、div3浮動，它們再也不屬於標準流，所以div4會自動上移，與div1組成一個「新」標準流，而浮動是漂浮在標準流之上，所以div2又擋住了div4。
咳咳，到重點了，當同時對div二、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在最左邊。
假如把div二、div三、div4都設置成右浮動，效果以下：
道理和左浮動基本同樣，只不過須要注意一下先後對應關係。因爲是右浮動，所以右邊靠近頁面邊緣，因此右邊是前，所以div2在最右邊。
假如咱們把div二、div4左浮動，效果圖以下：
依然是根據結論，div二、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 : 不容許有浮動對象
定義很是容易理解，可是讀者實際使用時可能會發現不是這麼回事。
定義沒有錯，只不過它描述的太模糊，讓咱們不知所措。
根據上邊的基礎，假如頁面中只有兩個元素div一、div2，它們都是左浮動，場景以下：
依然是根據結論，div二、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 : 不容許有浮動對象
定義很是容易理解，可是讀者實際使用時可能會發現不是這麼回事。
定義沒有錯，只不過它描述的太模糊，讓咱們不知所措。
根據上邊的基礎，假如頁面中只有兩個元素div一、div2，它們都是左浮動，場景以下：
此時div一、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就被迫下移一行。
那麼假如頁面中只有兩個元素div一、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 卻能夠。由於它本來所佔的空間仍然佔據文檔流。
- 1. CSS——CSS樣式
- 2. 【CSS】理解CSS
- 3. CSS Tools: Reset CSS
- 4. CSS——CSS基礎
- 5. CSS之CSS hack
- 6. CSS：關於CSS Hack
- 7. CSS animation & CSS animation 101
- 8. CSS+DIV-CSS與Javascript
- 9. css樣式 --- CSS hack
- 10. CSS 框架 Blueprint CSS
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。