CSS的全稱是什么?
英文全稱：Cascading Style Sheets
中文全稱：層疊樣式表
CSS有幾種引入方式? link 和@import 有什么區(qū)別?
有 4 種方式可以在 HTML 中引入 CSS。
1.行內(nèi)樣式
行內(nèi)樣式指的是直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS。
示例：<div style="background: red"></div>
這通常是個(gè)很糟糕的書寫方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè) <div> 擁有相同的樣式，你不得不重復(fù)地為每個(gè) <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，行內(nèi)樣式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長，且使得網(wǎng)頁難以維護(hù)。
2.內(nèi)部方式
內(nèi)部方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書寫 CSS 代碼。
示例：
<head>
<style>
div{
background: red;
}
</style>
</head>
內(nèi)部方式的 CSS 只對當(dāng)前的網(wǎng)頁有效。因?yàn)?CSS 代碼是在 HTML 文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫模板網(wǎng)頁時(shí)這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)閮?nèi)部的 CSS 只對當(dāng)前頁面有效，所以當(dāng)多個(gè)頁面需要引入相同的 CSS 代碼時(shí)，這樣寫會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)，一般用于個(gè)人自己寫demo。
- 外部樣式
外部樣式指的是使用 HTML 頭部的 <head> 標(biāo)簽引入外部的 CSS 文件。
示例：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中，所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會(huì)在第一次加載時(shí)引入，以后切換頁面時(shí)只需加載 HTML 文件即可。
- 導(dǎo)入樣式
導(dǎo)入樣式指的是使用 CSS 規(guī)則引入外部 CSS 文件。
示例：
<style>
@import url(style.css);
</style>
方法3、4兩者都是外部引用CSS的方式，但是存在一定的區(qū)別：
區(qū)別1：link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。
區(qū)別2：link引用CSS時(shí)，在頁面載入時(shí)同時(shí)加載；@import需要頁面網(wǎng)頁完全載入以后加載。
區(qū)別3：link是XHTML標(biāo)簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區(qū)別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。
綜上所述，link的好處遠(yuǎn)遠(yuǎn)大于@import
以下這幾種文件路徑分別用在什么地方，代表什么意思?
css/a.css為相對路徑，代表與當(dāng)前目錄下的css目錄下的a.css文件
./css/a.css為相對路徑，等價(jià)于css/a.css,其中./等價(jià)于當(dāng)前目錄
b.css為相對路徑，代表當(dāng)前路徑下的b.css文件
../imgs/a.png為相對路徑， 代表當(dāng)前目錄的上一級目錄下的imgs目錄下的a.png文件
/Users/hunger/project/css/a.css為絕對路徑，代表本地文件夾下a.css文件地址
/static/css/a.css為網(wǎng)站路徑，當(dāng)前服務(wù)器根目錄下的/static/css的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png為網(wǎng)站路徑，http://cdn.jirengu.com/kejian1/8-1.png網(wǎng)絡(luò)路徑下的文件
如果我想在js.jirengu.com上展示一個(gè)圖片，需要怎么操作?
- 把本地圖片上傳至某網(wǎng)站(圖床)，生成一個(gè)線上地址，然后在js.jirengu.com中加載
- 在本地打開服務(wù)器，通過localhost加載這個(gè)圖片。再將圖片放在js.jirengu.com(自己測試時(shí)可這樣使用）
列出5條以上html和 css 的書寫規(guī)范:
html
- 一定要閉合HTML標(biāo)簽
- 聲明正確的文檔類型（DocType)
- 不要使用內(nèi)聯(lián)樣式
- 使用小寫的標(biāo)簽名
- 同一頁面，應(yīng)避免使用相同的 name 與 id重名
- 標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則
css
- 使用 4 個(gè)空格做為一個(gè)縮進(jìn)層級，不允許使用 2 個(gè)空格 或 tab 字-
符。 - 選擇器 與 { 之間必須包含空格
- 屬性名 與之后的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格
- 列表型屬性值 書寫在單行時(shí)，, 后必須跟一個(gè)空格
- 每行不得超過 120 個(gè)字符，除非單行不可分割
- 對于超長的樣式，在樣式值的 空格 處或 , 后換行，建議按邏輯分組
- 當(dāng)一個(gè) rule 包含多個(gè) selector 時(shí)，每個(gè)選擇器聲明必須獨(dú)占一行 >、+、~ 選擇器的兩邊各保留一個(gè)空格
- 屬性選擇器中的值必須用雙引號包圍
- 屬性定義必須另起一行
- 屬性定義后必須以分號結(jié)尾
- 如無必要，不得為 id、class 選擇器添加類型選擇器進(jìn)行限定
還有一個(gè)更健全的css規(guī)范，可自行查閱
截圖介紹 chrome 開發(fā)者工具的功能區(qū)
- Elements:查找網(wǎng)頁源代碼HTML中的任一元素,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋。
- Console:記錄開發(fā)者開發(fā)過程中的日志信息，且可以作為與JS進(jìn)行交互的命令行Shell。
- Sources:斷點(diǎn)調(diào)試JS。
- Network:從發(fā)起網(wǎng)頁頁面請求Request后分析HTTP請求后得到的各個(gè)請求資源信息（包括狀態(tài)、資源類型、大小、所用時(shí)間等），可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。
- Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件，以此可以提高網(wǎng)頁的運(yùn)行時(shí)間的性能。
- Profiles:如果你需要Timeline所能提供的更多信息時(shí)，可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時(shí)間細(xì)節(jié)、顯示JS對象和相關(guān)的DOM節(jié)點(diǎn)的內(nèi)存消耗、記錄內(nèi)存的分配細(xì)節(jié)。
- Application:記錄網(wǎng)站加載的所有資源信息，包括存儲(chǔ)數(shù)據(jù)（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數(shù)據(jù)、字體、圖片、腳本、樣式表等。
- Security:判斷當(dāng)前網(wǎng)頁是否安全。
- Audits:對當(dāng)前網(wǎng)頁進(jìn)行網(wǎng)絡(luò)利用情況、網(wǎng)頁性能方面的診斷，并給出一些優(yōu)化建議。比如列出所有沒有用到的CSS文件等。
web開發(fā)調(diào)試用的最多的就是Elements、Console、Sources、Network
