任務(wù)6 CSS基礎(chǔ)

Cascading Style Sheets，層疊樣式表。是一種樣式表語(yǔ)言，用于為HTML文檔定義布局

引入方式
1. 內(nèi)聯(lián)式：把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中
  eg.<p style="color:#ccc; font-size:18px;">學(xué)習(xí)使我快樂(lè) 我愿沉迷于學(xué)習(xí)無(wú)法自拔-.-</p>

內(nèi)部式(嵌入式)：把css樣式代碼寫在<style type="text/css"></style>標(biāo)簽之間
一般情況下寫在<head></head>之間，也可寫在<body>標(biāo)簽內(nèi)

 eg：
     <style type="text/css">
         p { 
             color: #ccc; 
             font-size: 18px;
            }
     </style>

外部式：把css代碼寫一個(gè)單獨(dú)的外部文件中丰介，這個(gè)css樣式文件以“.css”為擴(kuò)展名藐唠，在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)

eg：
  <head>
        <link rel="stylesheet" type="text/css" href="index.css">
  </head>

導(dǎo)入@import

eg：
  <style>
     @import url("index.css");
     @import "index.css";
  </style>

JS Bin示例：

CSS引用方式

link是鏈接式誉碴，@import是導(dǎo)入式厦幅。兩者都是從外部引入CSS文件蜘澜。@import會(huì)在整個(gè)頁(yè)面加載完成后再加載CSS文件施流，當(dāng)網(wǎng)頁(yè)內(nèi)容較大時(shí)會(huì)產(chǎn)生不好的體驗(yàn)；而link會(huì)同時(shí)加載鄙信。
link是html的一個(gè)標(biāo)簽瞪醋，@import是CSS的語(yǔ)法。兩者效果相同装诡。但是link不止可以調(diào)用CSS银受，還能調(diào)用其他類型的文件；而@import只能調(diào)用CSS文件鸦采。
@import不兼容過(guò)早版本的瀏覽器宾巍，而link沒(méi)有這個(gè)問(wèn)題。

符號(hào)	意義
./	表示當(dāng)前文件所在的目錄的上一級(jí)目錄
../	表示當(dāng)前文件所在的目錄(可以省略)
/	表示當(dāng)前站點(diǎn)的根目錄(域名映射的硬盤目錄)

相對(duì)路徑：以當(dāng)前文件(HTML頁(yè)面)所在路徑為基準(zhǔn)來(lái)查找相關(guān)文件
- css/a.css：選擇當(dāng)前目錄(HTML文件所在路徑)下css文件夾中的a.css文件
- ./css/a.css：等價(jià)于css/a.css渔伯，選擇當(dāng)前目錄下css文件夾中的a.css文件
- b.css：選擇當(dāng)前目錄中的b.css文件
- ../image/a.png：選擇上一級(jí)目錄中的imgs文件夾下的a.png文件
絕對(duì)路徑：從盤符開(kāi)始的路徑顶霞，是指文件在硬盤上真正存在的路徑
注：不常用，在本地計(jì)算機(jī)上瀏覽可能會(huì)一切正常锣吼，但是上傳到Web服務(wù)器上瀏覽就很有可能不會(huì)顯示圖片
- /Users/hunger/project/css/a.css：在本地計(jì)算機(jī)上可以通過(guò)該路徑找到a.css文件
網(wǎng)站路徑：
- /static/css/a.css：以相對(duì)路徑的方式在服務(wù)器中尋找a.css文件选浑，網(wǎng)站根目錄下 static目錄下的css目錄下的a.css文件
- http://cdn.jirengu.com/kejian1/8-1.png：
  網(wǎng)絡(luò)路徑蓝厌，通過(guò)該路徑可以找cdn.jirengu.com域名下kejian1目錄下的8-1.png文件

統(tǒng)一使用小寫（包括標(biāo)簽褂始、屬性、命名id class等）
id class命名使用有意義的單詞描函，盡量使用縮寫崎苗，分隔符用-
盡量不使用內(nèi)聯(lián)的style屬性定義樣式
屬性名“：”后面添加一個(gè)空格
使用 4 個(gè)空格做為一個(gè)縮進(jìn)層級(jí)，不允許使用 2 個(gè)空格或 tab 字符
屬性書寫順序：Formatting Model（布局方式舀寓、位置） > Box Model（尺寸） > Typographic（文本相關(guān)） > Visual（視覺(jué)效果）
注：

Formatting Model 相關(guān)屬性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相關(guān)屬性包括：border / margin / padding / width / height 等
Typographic 相關(guān)屬性包括：font / line-height / text-align / word-wrap 等
Visual 相關(guān)屬性包括：background / color / transition / list-style 等

chrome調(diào)試工具

Elements:允許我們從瀏覽器的角度看頁(yè)面必尼，也就是說(shuō)我們可以看到chrome渲染頁(yè)面所需要的的HTML、CSS和DOM(Document Object Model)對(duì)象篡撵。此外判莉，還可以在右下方(5)的styles中修改樣式更改頁(yè)面顯示效果
Console: 顯示各種警告與錯(cuò)誤信息，并且提供了shell用來(lái)和文檔育谬、開(kāi)發(fā)者工具交互(6)
Sources: 主要用來(lái)調(diào)試js
Network: 可以看到頁(yè)面向服務(wù)器請(qǐng)求了哪些資源券盅、資源的大小以及加載資源花費(fèi)的時(shí)間，當(dāng)然也能看到哪些資源不能成功加載膛檀。此外锰镀，還可以查看HTTP的請(qǐng)求頭，返回內(nèi)容等
Application(應(yīng)用面板): 使用資源面板檢查加載的所有資源咖刃，包括IndexedDB與Web SQL數(shù)據(jù)庫(kù)泳炉，本地和會(huì)話存儲(chǔ)，cookie嚎杨，應(yīng)用程序緩存花鹅，圖像，字體和樣式表枫浙。在 Chrome 52 之后資源面板更名為應(yīng)用面板.