首頁 > 開發者 > JavaScript
css之入門篇，css入門篇
今日學習終於到了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在他們之後會勝出。
當不是寫統一屬性就不會出現這種問題。所以寫同一種屬性時要注意 ！！！！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
