- CSS全稱層疊樣式表（Cascading Style Sheets）
CSS的幾種引入方式
行間樣式(寫在html標簽的style屬性里)
<input type="text" style="color:#ccc;width:120px">內部樣式（寫在<head></head>里面，以<style>...</style>標簽包裹。比）
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<style>
p {
font-size: 20px
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html>外部樣式：也稱鏈接樣式，寫在<head></head>里面。以link定義，（rel="stylesheet"和tbye="text/css"為規范必寫，詳細原因現在的我也不知道）， css樣式寫在另一個文件夾取名為style（文件名可以隨便取但推薦是英文）。比如：
<link rel="stylesheet" type="text/css">-
@import 引用CSS(放在<style></style>之間)
<style type="text/css"> @import url(引入的樣式表的路徑); </style>
link 和@import的區別
鏈接方式（下面用 link 代替）和導入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來比較這兩種方式，并且說明為什么不推薦使用 @import。
-
差別1：ink屬于HTML標簽，而@import完全是CSS提供的一種方式。
link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。 - 差別2：加載順序的差別。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完才被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。
- 差別3：兼容性的差別。由于@import是CSS2.1提出的，所以低版本瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。
-
差別4：使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。
從上面的分析來看，還是使用link標簽比較好。
以下這幾種文件路徑分別用在什么地方，代表什么意思?
css/a.css 相對路徑：當前文件夾內CSS目錄下的a.css文件
./css/a.css 相對路徑：當前文件夾內CSS目錄下的a.css文件
b.css 相對路徑：當前目錄下的b.css文件
../imgs/a.png 相對路徑：當前目錄的上級目錄內的images目錄下的a.png文件
/Users/hunger/project/css/a.css 絕對路徑：本地/Users/hunger/project/css/目錄下的 a.css文件
/static/css/a.css 網站路徑：當前服務器根目錄下的/static/css的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png 網絡路徑：通過該路徑可以找到cdn.jirengu.com域名下kejian1目錄下的8-1.png文件
如果我想在js.jirengu.com上展示一個圖片，需要怎么操作?
- 可以直接將圖片上傳到服務器，在頁面使用這張圖片
- 如果這個圖片本來就存在網絡上其他的服務器上，可以直接使用圖片的網絡絕對路徑鏈接的方式在頁面上添加url引用這張圖片
HTML和 CSS的書寫規范
HTML:
- 標簽名必須使用小寫字母。
- 對于無需自閉合的標簽，不允許自閉合。
- 對 HTML5 中規定允許省略的閉合標簽，不允許省略閉合標簽。
- 一次縮進2個空格，不要使用 tab 或者混合 tab 和空格的縮進。
- class 必須單詞全字母小寫，單詞間以 - 分隔。
- 標簽的使用應該遵循標簽的語義。
- 標簽的使用應盡量簡潔，減少不必要的標簽。
- 屬性值必須用雙引號包圍。
- 布爾類型的屬性，建議不添加屬性值。
- 引入 CSS 時必須指明 rel="stylesheet"。
下面是常見標簽語義
- p - 段落
- h1,h2,h3,h4,h5,h6 - 層級標題
- strong,em - 強調
- ins - 插入
- del - 刪除
- abbr - 縮寫
- code - 代碼標識
- cite - 引述來源作品的標題
- q - 引用
- blockquote - 一段或長篇引用
- ul - 無序列表
- ol - 有序列表
- dl,dt,dd - 定義列表
CSS
- 選擇器與 { 之間必須包含空格。
- 屬性名與之后的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。
- 在可以使用縮寫的情況下，盡量使用屬性縮寫。
- 屬性書寫順序
建議同一rule-set下的屬性在書寫時應按功能進行分組，并以Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相關） > Visual（視覺效果）的順序書寫，以提高代碼的可讀性。 - 數值為0時不帶單位
- 復合樣式使用縮寫
- 統一使用小寫
注釋：
- Formatting Model 相關屬性包括：position / top / right / bottom / left / float / display / overflow 等
- Box Model 相關屬性包括：border / margin / padding / width / height 等
- Typographic 相關屬性包括：font / line-height / text-align / word-wrap 等
- Visual 相關屬性包括：background / color / transition / list-style 等
