422
css是web前端開發(fā)的三劍客之一（html、css、JavaScript），html負(fù)責(zé)網(wǎng)頁內(nèi)容框架，css負(fù)責(zé)網(wǎng)頁美化，JS負(fù)責(zé)網(wǎng)頁邏輯。
你現(xiàn)在看到的網(wǎng)頁是怎么來的？
你在本地輸入了一個域名，回車，經(jīng)過DNS解析為ip地址后，與遠(yuǎn)端服務(wù)器進(jìn)行tcp連接，連接后本地與遠(yuǎn)端服務(wù)器通過http協(xié)議發(fā)送和傳輸數(shù)據(jù)，服務(wù)器會給本地發(fā)送一個html文件，里面描述了整個網(wǎng)頁的實現(xiàn)內(nèi)容，本地通過瀏覽器打開html文件（里面包含css、js），你就看到眼前的網(wǎng)頁了。
我們在這里學(xué)的就是這個負(fù)責(zé)網(wǎng)頁頁面美化的css，層疊樣式表！
正文
css的核心思想就是把頁面美化從頁面框架中抽離開了，html專心干好骨架和內(nèi)容的事情，相當(dāng)于形成一個人，css專注于把這個人打扮得漂漂亮亮，所以設(shè)計感好的人玩起css來會相當(dāng)出彩。
先來試試下面這個代碼，如果第一次聽說前端，建議先去看看我的html文章哦，為了方便，可以直接登錄這個網(wǎng)站在線編輯html。
<!DOCTYPE HTML> <!--聲明是html文檔-->
<html>
<head> <!--頭部-->
<meta charset="UTF-8"/>
<title>第一個網(wǎng)頁</title>
<style>
p {color:red;}
h1 {color:blue;}
</style>
</head>
<body> <!--內(nèi)容-->
<h1>hello world</h1>
<p>hello</p>
</body>
</html>
我們看到題目內(nèi)容變成了紅色，段落內(nèi)容變成了藍(lán)色，如何實現(xiàn)的？我們在head內(nèi)部定義了一個標(biāo)簽<style>，在里面就可以輸入我們的css代碼進(jìn)行頁面美化！對于html中的每一個標(biāo)簽我們都可以進(jìn)行編輯，進(jìn)行美化，
p {color:red;}
h1 {color:blue;}
相信大家都能看懂，這兩行就實現(xiàn)了p和h1標(biāo)簽的顏色設(shè)置，當(dāng)然css能力遠(yuǎn)不止如此，對于p，我們再加點料：
p {
color:red; /*字體紅色*/
font-size:30px; /*字體大小為30像素*/
background-color:lightblue; /*背景為天藍(lán)色*/
text-align:center; /*居中顯示*/
}
段落中的字體被我們設(shè)置為紅色，背景為天藍(lán)色，字體大小為30像素，且字體居中顯示。
如果有兩個P段落，但我只想對其中一個編輯，怎么辦？？比如
<p>hello1</p>
<p>hello2</p>
若直接p {color:red;}，則hello1和hello2都會變成紅色，現(xiàn)在我只想讓hello1變成紅色，而我還想讓hello2變成藍(lán)色，怎么說？
選擇器
通過給每個標(biāo)簽加上選擇器！你也可以理解成一個類，這樣每個段落都變得獨一無二，這樣對它們進(jìn)行編輯就簡單多了。
<p class="a">hello1</p>
<p class="b">hello2</p>
在style里，用.a和.b表示上面兩個類：
.a{
color:red;
}
.b{
color:blue;
}
成功！且由于先前對P標(biāo)簽的背景顏色、字體大小、字體居中的設(shè)置，hello1、hello2也繼承了這些特性，這也是后面對于復(fù)雜的文本進(jìn)行編輯時的思路，先對大部分進(jìn)行統(tǒng)一的基本設(shè)定，再對單一特殊的部分單獨調(diào)整。
所有標(biāo)簽都可以定義一個或多個選擇器，class是最經(jīng)典的一種，多個class時，可以
<p class="a b c d">hello3</p>
這樣對a,b,c,d編輯都可以影響hello3。
再舉個例子，對圖片如何用css改尺寸？很簡單
<img class="img" src="..." alt="..."/>
style里：
.img{
width:100px;
}
自然圖片的寬度變?yōu)?00像素，高度會自動變化。
選擇器有很多種，還有很常用的一種，為id
<p id="e">hello4</p>
style里，用#e對其編輯
#e{
color:blue;
}
hello4就變成了藍(lán)色！id的優(yōu)先級要高于class。
class嵌套
class經(jīng)常會嵌套著使用，比如
<div class="container">
<div class="d1"> 1 </div>
<div class="d2"> 2 </div>
</div>
對它們進(jìn)行編輯也是一樣的，
.container{
font-size:20px;
text-align:center; /*居中顯示*/
border-color:blue; /*邊框顏色為藍(lán)色*/
border-width:10px; /*邊框粗10px*/
border-style:solid; /*邊框類型為實線*/
border-radius:10px; /*邊框圓角*/
}
.d1{
background-color:lightblue; /*d1區(qū)域的背景是天藍(lán)色*/
}
.d2{
background-color:red; /*d2區(qū)域的背景是紅色*/
}
很easy吧！下一章見！
下載ECAD模型
