CSS的全稱
CSS的全稱是Cascading Style Sheets，層疊樣式表。是一種樣式表語言，用于為HTML文檔定義布局。
CSS的引入方式
CSS有4種引入方式。
- 內(nèi)聯(lián)式
<h1 style="color:red; font-size: 20px;">...</h1>
- 內(nèi)部式
CSS代碼寫在<style type="text/css">...</style>內(nèi)，一般置于<head>標簽中。
<style type="text/css">
h1 {
color:red;
font-size:20px;
}
</style>
- 外部式
把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名，在<head>內(nèi)，使用<link>標簽將css樣式文件鏈接到HTML文件內(nèi)。
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
- 導入@import
<style>
@import url(a.css);
@import "b.css";
</style>
JS Bin效果展示.png
link 和@import 的區(qū)別
- 語法結構的區(qū)別：link屬于HTML標簽，只能放入html源代碼中使用，而@import是CSS提供的一種方式，只能加載CSS了。
- 加載順序的區(qū)別：link引用的CSS會在一個頁面被加載的時候（即被瀏覽者瀏覽的時候）同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（閃爍）。
- 兼容性的區(qū)別：由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。
- 使用dom控制樣式時的區(qū)別：當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。
路徑
- 相對路徑（即相對當前文件所在位置而言的路徑）
假設當前文件為index。 - css/a.css——index所處目錄下的css文件夾中的a.css文件
- ./css/a.css——同上，“./”表示當前文件所處目錄
- b.css——index所處目錄下的b.css文件
- ../imgs/a.png——index的上級目錄中imgs文件中的a.png文件
- 絕對路徑（電腦中的完整的路徑，不以任何為參考）
- /Users/hunger/project/css/a.css——本地絕對（完整）路徑中的a.css文件
- /static/css/a.css——表示某網(wǎng)站目錄下static目錄中css目錄下的a.css文件
- http://cdn.jirengu.com/kejian1/8-1.png ——絕對意義上的網(wǎng)站中kejian1目錄中的圖片
如何在網(wǎng)站上展示圖片
- 圖片上傳到網(wǎng)上（如某某相冊），獲得地址，利用標簽：
<img s-r-c="XXX">(省略掉“-”)
- 上傳到服務器，獲取相對路徑（適用于本地調試）
HTML 和 CSS 的書寫規(guī)范
- HTML
- 用兩個空格來代替制表符（Tab）
- 嵌套元素應當縮進一次（即兩個空格）。
- 對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。
- 不要省略可選的結束標簽（closing tag）（例如
</li>或</body>）。 - 統(tǒng)一使用小寫（包括標簽、屬性、命名id class等）。
- id class命名使用有意義的單詞，盡量使用縮寫，分隔符用 “-”。
- 使用注釋，方便閱讀。
- CSS
- 為選擇器分組時，將單獨的選擇器單獨放在一行。
- 為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格。
- 聲明塊的右花括號應當單獨成行。
- 每條聲明語句的 : 后應該插入一個空格。
- 為了獲得更準確的錯誤報告，每條聲明都應該獨占一行。
- 所有聲明語句都應當以分號結尾。最后一條聲明語句后面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。
- 對于以逗號分隔的屬性值，每個逗號后面都應該插入一個空格（例如，box-shadow）。
chrome 開發(fā)者工具的功能區(qū)
開發(fā)者工具.png
- **Elements: **查看、編輯頁面上的元素，并可在瀏覽器得到反饋。
- Console: 記錄開發(fā)者開發(fā)過程中的日志信息，且可以作為與JS進行交互的命令行Shell。
- Sources: 主要顯示網(wǎng)頁加載的腳本文件，如CSS、JS等。
- Network: 可以看到頁面向服務器請求了哪些資源、資源的大小以及加載資源花費的時間，當然也能看到哪些資源不能成功加載。
- Application: 記錄網(wǎng)站加載的所有資源信息，包括存儲數(shù)據(jù)（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數(shù)據(jù)、字體、圖片、腳本、樣式表等。
- **Security: **判斷當前網(wǎng)頁是否安全。
- ** Audits: **可以優(yōu)化前端頁面，加快網(wǎng)頁加載速度。
- Style:可以實時修改CSS的屬性值，這里面的所有樣式Name和Value都是可以編輯的。
- Computed:可以編輯左側選中的盒子模型參數(shù)，所有的值都是可以修改的。
