1、CSS的全稱是什么?
Cascading Style Sheets，層疊樣式表?？梢杂糜陟o態(tài)的修飾網(wǎng)頁(yè)，也可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
2、CSS有幾種引入方式? link 和@import 有什么區(qū)別?
1、內(nèi)聯(lián)樣式
<h1 style="color: blue; font-size: 10px;"></h1>
樣式直接寫(xiě)在HTML標(biāo)簽中，簡(jiǎn)單直接，但對(duì)后續(xù)的修改以及添加樣式會(huì)很繁瑣，不推薦使用。
2、內(nèi)部樣式
h1 {
color: blue; font-size: 10px;
}
</style> ```
優(yōu)劣：因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁(yè)面有效，所以當(dāng)多個(gè)頁(yè)面需要引入相同的 CSS 代碼時(shí)，這樣寫(xiě)會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)。但是如果寫(xiě)末班網(wǎng)頁(yè)的話就很適合，因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。
3、外部樣式
` <head> <link rel="stylesheet" type="text/css" href="index.css"> </head> `
最常用的引用方式，rel:告訴瀏覽器引用的是一個(gè)樣式表文件；type:文件類型（可省略）；href:文件地址。實(shí)現(xiàn)了內(nèi)容與樣式分離。
<style>
@import url("hello.css");
</style>
本質(zhì)上，這兩種方式都是為了加載CSS文件，但還是存在著細(xì)微的差別
- 1.link屬于XHTML標(biāo)簽，而@import完全是CSS提供的一種方式。link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。
- 2.加載順序的差別。當(dāng)一個(gè)頁(yè)面被加載的時(shí)候，link引用的CSS會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)性能較差
- 3.兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識(shí)別，而link標(biāo)簽無(wú)此問(wèn)題
- 4.使用dom控制樣式時(shí)的差別。當(dāng)使用javascript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的。
## 3、以下這幾種文件路徑分別用在什么地方，代表什么意思?
### 相對(duì)路徑
- css/a.css:當(dāng)前目錄下的css文件夾中的a.css
- ./css/a.css:當(dāng)前目錄中css文件夾中的a.css文件
- b.css:當(dāng)前目錄下的b.css文件
- ../imgs/a.png:上級(jí)目錄中的imgs 文件夾中的a圖片
### 絕對(duì)路徑
- /Users/hunger/project/css/a.css:本地絕對(duì)路徑中的a.css文件
### 網(wǎng)站路徑
- /static/css/a.css:網(wǎng)站路徑的相對(duì)路徑
- http://cdn.jirengu.com/kejian1/8-1.png:圖片上傳后生成的線上地址
## 4、如果我想在js.jirengu.com上展示一個(gè)圖片，需要怎么操作?
1、把圖片上傳到服務(wù)器上，把圖片和html文件放在同一級(jí)或者上一級(jí)的img文件夾中，使用相對(duì)路徑引用。
2、直接使用網(wǎng)絡(luò)上的地址引用（把本地照片上傳到極簡(jiǎn)圖床，會(huì)生成一個(gè)網(wǎng)絡(luò)地址）。
## 5、列出5條以上html和 css 的書(shū)寫(xiě)規(guī)范
### html規(guī)范：
- id元素必須保證頁(yè)面唯一。
- 同一頁(yè)面，應(yīng)避免使用相同的 name 與 id。
- 標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則。
- 屬性值必須用雙引號(hào)包圍。
- 引入 CSS 時(shí)必須指明 rel="stylesheet"。
- title 必須作為 head 的直接子元素，并緊隨 charset 聲明之后。
### CSS書(shū)寫(xiě)規(guī)范：
- 語(yǔ)法不區(qū)分大小寫(xiě)，但建議統(tǒng)一使用小寫(xiě)
- 當(dāng)一個(gè) rule 包含多個(gè) selector 時(shí)，每個(gè)選擇器聲明必須獨(dú)占一行。
- 屬性定義后必須以分號(hào)結(jié)尾。
- 不使用內(nèi)聯(lián)的style屬性定義樣式
- id和class使用有意義的單詞，分隔符建議使用-
- 屬性值是0的省略單位
- 塊內(nèi)容縮進(jìn)
- 屬性名冒號(hào)后面添加一個(gè)空格
## 6、截圖介紹 chrome 開(kāi)發(fā)者工具的功能區(qū)
- Elements:查找網(wǎng)頁(yè)源代碼HTML中的任一元素,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋。
- Console:記錄開(kāi)發(fā)者開(kāi)發(fā)過(guò)程中的日志信息，且可以作為與JS進(jìn)行交互的命令行Shell。
- Sources:斷點(diǎn)調(diào)試JS。
- Network:從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)、資源類型、大小、所用時(shí)間等），可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。
- Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件，以此可以提高網(wǎng)頁(yè)的運(yùn)行時(shí)間的性能。
- Profiles:如果你需要Timeline所能提供的更多信息時(shí)，可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時(shí)間細(xì)節(jié)、顯示JS對(duì)象和相關(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)頁(yè)是否安全。
- Audits:對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行網(wǎng)絡(luò)利用情況、網(wǎng)頁(yè)性能方面的診斷，并給出一些優(yōu)化建議。比如列出所有沒(méi)有用到的CSS文件等。