今日學習終於到了css，css可以實現很多表現出很酷的界面，而css的出現是為了解決
HTML結構上寫樣式出現一片混亂現象而應運而生的語言，在以前樣式都是和結構一起寫的，
不分彼此，而這樣大大增加了代碼量，因為一個同樣的樣式不斷重復，只能不斷重新寫出
來，還有也讓代碼寫完后困難閱讀，查找錯誤也變得無比艱辛，而這個時候css出現了，並
體現出了它的好處，而它的好處就是把上面的問題解決了，把結構與表現分離開來。
接下說說什么是css?
什么是CSS？
CSS (Cascading Style Sheets) 層疊樣式表
CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎上增加了很多強大的新功能。
目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經支持了CSS3大部分功能了
，IE10以后也開始全面支持CSS3了。 不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性
或規則尚未成為W3C標准的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不需
要前綴的，但為了更好的向前兼容前綴還是少不了的。
css就是為了裝飾HTML的結構而出現的，它能做到以前的HTML無法做到的事，它能把HTML裝扮的
很美觀，所以css是HTML的補充。
如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> p{ color: #ff00ff; font-size: 16px; font-weight: bold; } </style> </head> <body> <p>wowaoda</p> </body> </html>
css把p標簽修飾成字體是粉紅色，粗體，字體大小為16像素，從這可以看出css可以為HTML里的元素補充樣式，即修飾它，打扮它。
那么css究竟可以干嘛呢？
CSS能做什么？？？？
CSS把很多以前需要使用圖片和腳本來實現的效果、甚至動畫效果，只需要短短幾行代碼就能搞定。
比如圓角，圖片邊框，文字陰影和盒陰影，過渡、動畫等。
CSS簡化了前端開發工作人員的設計過程，更靈活的頁面布局，更快的頁面加載速度。
可以將站點上所有的網頁風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的代碼，
那么整個站點的所有頁面都會隨之發生變動。 CSS可以支持多種設備,比如手機,PDA,打印機,電視機,游戲機等。
目的：將表現與結構分離。
例子：
代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> div{ width: 100px; height: 100px; border-radius: 50%; background: rgba(200,150,200,0.3); box-shadow: 2px 2px 2px 3px #eee; } </style> </head> <body> <div></div> </body> </html>
這個完全是靠css實現，它使頁面美化。
還有請點擊這個：動畫的css
那么前面寫着這些，讓我對其強大感到好奇，那接下來，讓我們探探它的語言。
CSS語法結構？
CSS 語法由三部分構成：選擇符、屬性和值
屬性是您希望設置的樣式屬性。
每個屬性有一個值。屬性和值被冒號分開。
p{
font-size:15px;
}
p是選擇符，屬性是font-size，值為15px；
a{
color:#000;
}
這個也是一樣理解，是不是很類似，它的結構很簡單，就這三個部分。
那么css的就夠都懂了，那么怎么實現這些css呢？那就要說說引用到頁面了。
如何引入CSS？
三種引入方式：
1.行內引用 行內引用是指將CSS樣式編碼直接寫在HTML 標簽中的style屬性里。
注意這種方式的引入CSS，是不需要寫選擇器的。
<p style="color:#ff7600;">我是段落</p>
2. 頁內引用
頁內引用作為頁面中的一個單獨部分，由<style></style>標簽定位在<head></head>之中。
<head> <meta charset="UTF-8"> <title>css</title> <style> p{ color: #ff7600; } </style> </head>
3.外部樣式表
外部樣式表是CSS應用中最好的一種形式，它將CSS樣式代碼單獨 放在一個外部文件中，再由網頁進行調用。
<head> <meta charset="UTF-8"> <title>css</title> <link rel="stylesheet" href="style.css"> </head>
這些就是它的引用方式，只要引用進來才能作用到HTML結構上。
既然有這幾種引用方式，那么是不是隨意引用的呢？如果這樣那么就是亂套了，因為css也叫層疊樣式表，既然
隨便引用那么不是和它的理念沖突了嗎？所以這些引用還是規則的，就是優先級；
優先級依次是：就近原則
行內引用 > 頁內引用 > 頁外引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <link rel="stylesheet" href="style.css"> </head> <body> <div></div> <p style="color:#ff7600;">我是段落</p> </body> </html>
它會優先執行行內樣式，所以在外部樣式中含有相同樣式時，它是給忽略掉的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> p{ color: #fff; } </style> </head> <body> <div></div> <p style="color:#ff7600;">我是段落</p> </body> </html>
從規則中知道這個也一樣，內部樣式也是被忽略的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> p{ color: #fff; } </style> <link rel="stylesheet" href="style.css"> </head> <body> <div></div> <p>我是段落</p> </body> </html>
根據規則，內部樣式優先。
既然樣式都會寫，那么自己寫了很多很多樣式代碼，然后想找出某處的樣式怎么辦？一個一個樣式看一遍，這個豈不是很耗時，很費神，
既然自己都這樣了，那這個代碼到了隊友那不就是個坑。所以我們是不是可以注釋一下他呢，讓代碼可讀性更加強。
CSS注釋
/*這是頭部*/
header{
color:#fff;
}
/*這是導航*/
nav{}
/*這是主體*/
.container{}
/*這是尾部*/
footer{}
這樣是不是可讀更強呢。
在HTML中結構可以很復雜，那么我們不可能簡單的寫個元素選擇符吧。
而各種各樣方便的選擇符，從HTML結構樹應運而生。
選擇符
1、通配選擇符*
這個是選中全部元素，為他們設置樣式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> *{ font-size: 15px; } </style> </head> <body> <h1>標題</h1> <p>我的段落的兄弟</p> <p>我是段落</p> </body> </html>
它們的字體都被設置為15像素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> *{ font-size: 15px; font-weight: bold; } </style> </head> <body> <h1>標題</h1> <p>我的段落的兄弟</p> <p>我是段落</p> </body> </html>
它們都被加粗了。
2、元素選擇符
所謂元素選擇符，指以網頁中已有的標簽名作為名稱的選擇符。
body {}
h1 {}
p {}
3、 群組選擇符
除了可以對單個標簽進行樣式指定外，還可以對一組標簽進行相同的樣式定義。
使用逗號對選擇符進行分隔。對頁面中需要使用相同樣式的地方，只需寫一次樣式。
p,h1{
font-size: 15px;
font-weight: bold;
}
4、 關系選擇符
選擇所有被E元素包含的F元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> p span{ color: #eee; } </style> </head> <body> <p> <span>我是誰？</span> </p> </body> </html>
今日課程知識到此！！！
css.doyoe.com css參考手冊
接下來擴展補充：
特殊性：
每個選擇器都有特殊性，而如果一個元素有兩個或多個沖突的屬性聲明，特殊性高的勝出。
選擇器的特殊性由選擇器本身的組件確定。特殊性值表述為4個部分，如：0,0,0,0.
一個選擇器的具體特殊性如下確定：
對於選擇器中給定的各個ID屬性值，加0,1,0,0。
對於選擇器中給定的各個類屬性值、屬性選擇或偽類，0,0,1，0。
對於選擇器中給定的各個元素和偽元素，0,0,0,1。
結合符和通配選擇器對特殊性沒有任何貢獻。
而通配選擇器 0,0,0,0.
結合符連零都沒有。
例子：
h1{color:red;} 為0,0,0,1
p em{color：purple} 為0,0,0,2
.grape{color:purple} 為0,0,1,0
p.b e.a{color:red; } 0,0,2,2
#aa{color:red;} 0,1,0,0
div#aa *[href]{color:red;} 0,1,1,1
而第一個0是為行內樣式准備的，因為越前面，代表優先級越高，假如非零數字位置一樣，那么先比較前面的數字的大小，
然后再往下比較，直到數字不相對，取數字大那個的優先級高。
重要聲明 !important ,就是把你所需要的聲明標出來，它的優先級最高，不過它要放在聲明的值的最后。
繼承：
繼承的特殊性連零都沒有，就是沒有特殊性；
這個0特殊性有零與無特殊性有很大的區別，就是0特殊性的選擇器可以為后代加樣式，
而繼承雖然也有給后代加樣式，但有限制的，只有有繼承能力的才能加到后代元素中，如color等，而margin、padding和border這些屬性都不會加到后代里。
相同權重的，按順序比較，順序越下他的優先級最高。
較高特殊性強於較低特殊性
所以偽類聲明順序：link-visited-hover-active
LVHA（簡寫）
當:visited在他們之后時，由於權重一樣，所以會看他們的順序，而:visited在他們之后會勝出。
當不是寫統一屬性就不會出現這種問題。所以寫同一種屬性時要注意 ！！！！