簡(jiǎn)單的說(shuō)一下CSS，這對(duì)入門者而言會(huì)有用巷蚪，CSS大拿們見笑。
CSS解釋
html和css是如何建立聯(lián)系的濒翻？
這一點(diǎn)很重要屁柏，做任何事情之前都要明確問題的關(guān)鍵點(diǎn)。做開發(fā)更是如此有送，不去思考淌喻，對(duì)事情的來(lái)龍去脈不去深入理解，寫再多代碼也是枉然雀摘。
css文件不是必須的裸删。
我們完全可以把樣式寫到html里面，比如這樣：
<div style="width:100%;color:red">
</div>
div的樣式是可以完成通過(guò)style標(biāo)簽去定義的阵赠。那么涯塔，我們?yōu)槭裁匆褂胏ss文件來(lái)“畫蛇添足”呢？初學(xué)者肯定覺得不可思議清蚀，寫到一個(gè)html文件里面多好匕荸？省事，方便枷邪，也不會(huì)出現(xiàn)諸如文件未找到之類的錯(cuò)誤榛搔。
其實(shí)，隨著我們后續(xù)接觸項(xiàng)目东揣，慢慢就會(huì)發(fā)現(xiàn)這其中的奧妙了践惑。
使用css文件的優(yōu)點(diǎn)
諸位可以設(shè)想一下這樣的場(chǎng)景，我有100個(gè)html網(wǎng)頁(yè)嘶卧，其中頂部的樣式完全一樣尔觉，比如均使用類似百度的樣式，右上角的按鈕排列樣式芥吟。
我有100個(gè)網(wǎng)頁(yè)穷娱，每個(gè)網(wǎng)頁(yè)里面我都需要去添加style嗎绑蔫？就算是復(fù)制粘貼也能把人累死。
更嚴(yán)重的是泵额，假如后續(xù)我改了樣式配深，那么我是不是需要改100遍html網(wǎng)頁(yè)呢？想想都頭大嫁盲。為了解決這個(gè)問題篓叶，css文件就應(yīng)運(yùn)而生了。我只要這般寫網(wǎng)頁(yè)就可以了：
<div class="test"></div>羞秤，在css文件里面定義test樣式就可以了：.test{width:100%;}缸托。如果有一天，客戶彪了瘾蛋，提出了新的需求俐镐，要求width全部改成50%，我們只需要改一下css文件就好了：
.test{width:50%} 綜上哺哼，css文件的好處顯而易見：
- 消滅重復(fù)代碼
- 修改需求方便
html和css建立聯(lián)系
廢話落落了那么多佩抹，具體是如何建立聯(lián)系的呢？
- 使用link標(biāo)簽將css文件引入進(jìn)來(lái)
- css文件里面定義樣式
- html里面使用樣式
css定義樣式的方式
class定義
.定義法取董，在css文件使用.樣式名{}的形式來(lái)定義樣式棍苹，在html里面則使用class='樣式名'來(lái)引入樣式
id定義法
‘#定義法’，在css文件里面使用#樣式名{}的形式來(lái)定義樣式茵汰，在html里面則使用id='樣式名'來(lái)引入樣式
標(biāo)簽定義法
標(biāo)簽名定義法枢里，如div{width:100%}或者input{width:100%}，以html標(biāo)簽直接定義蹂午，之后只要通過(guò)link將文件成功引入栏豺，那么對(duì)應(yīng)的所有的標(biāo)簽都會(huì)使用該樣式。
標(biāo)簽選擇器
一定要記得在樣式名中間加空格豆胸，非常重要冰悠。否則就引用不到。
通過(guò)了解上文說(shuō)的定義樣式的方式配乱，相信這里就非常好理解了溉卓，舉例：
.a .b .c {
這里表示樣式a之下樣式b之下樣式c的樣式
}
對(duì)應(yīng)的html應(yīng)該這樣寫：
<div class="a">
<div class="b">
<div class="c">
其中的元素會(huì)使用css里面的樣式
</div>
</div>
</div>
<div class="aaaa">
<div class="b">
<div class="c">
這里面的元素則不會(huì)使用css里面的樣式
</div>
</div>
<div>
假如，我的css文件這樣寫搬泥，就會(huì)全部生效了：
.c{}
同樣桑寨，我可以混合樣式的定義方式使用：
.a #abc{}
.a div{}
chrome的使用
chrome是html的神器了，可以即時(shí)的修改css忿檩，查看樣式尉尾，同時(shí)還可以調(diào)試腳本，好用的一塌糊涂燥透。
f12
按一下f12鍵沙咏，一切網(wǎng)頁(yè)無(wú)法遁形：
介紹一個(gè)各個(gè)功能欄
Elements
這里可以查看到所有的元素：
鼠標(biāo)滑到每一個(gè)標(biāo)簽辨图，左側(cè)的網(wǎng)頁(yè)都會(huì)高亮顯示：
同時(shí)我們還可以看到css：
紅框框起來(lái)的地方為css，當(dāng)然肢藐，我們可以修改css故河，左側(cè)實(shí)時(shí)就顯示出效果了，比如吆豹，我們把float浮動(dòng)效果去掉：
是不是變得不一樣了鱼的？
Console
此為控制臺(tái)，主要打印日志痘煤，js日志可以從這里打印出來(lái)凑阶。報(bào)錯(cuò)信息也可以打印出來(lái)：
我修改一下css引用路徑：
再打開網(wǎng)頁(yè)，在控制臺(tái)就報(bào)錯(cuò)了：
報(bào)錯(cuò)信息為：無(wú)法加載文件衷快，錯(cuò)誤在第五行宙橱。
Source
此為資源展示界面，可以在該界面進(jìn)行js的調(diào)試蘸拔。
比如师郑，我在第七行加一個(gè)斷點(diǎn)，f5刷新之后都伪，程序會(huì)在第七行停止，然后等待我們?nèi)?zhí)行积担。
左下方的兩個(gè)常用按鈕為跳到下一個(gè)斷點(diǎn)陨晶，和跳到下一行。假如我們定義了兩個(gè)斷點(diǎn)帝璧，第一個(gè)按鈕點(diǎn)擊之后就會(huì)到下一個(gè)斷點(diǎn)先誉。第二個(gè)按鈕則會(huì)到下一行。
簡(jiǎn)單說(shuō)這些的烁，希望對(duì)初學(xué)者有幫助褐耳。
