一、css是什么？
CSS全稱是Cascading Style Sheets，簡(jiǎn)寫為CSS，稱作：層疊樣式表，又稱串樣式列表、級(jí)聯(lián)樣式表、串接樣式表，一種用來(lái)為結(jié)構(gòu)化文檔（如 HTML文檔或 XML 應(yīng)用）添加樣式（字體、間距和顏色等）的計(jì)算機(jī)語(yǔ)言，由 W3C 定義和維護(hù)。
網(wǎng)頁(yè)的讀者和作者都可以使用CSS來(lái)決定文件的顏色、字體、排版等顯示特性。CSS 最主要的目的是將文件的內(nèi)容與顯示分隔開(kāi)來(lái)。這有許多好處：
1、文件的可讀性加強(qiáng)。
2、文件的結(jié)構(gòu)更加靈活。
3、作者和讀者可以自己決定文件的顯示。
4、文件的結(jié)構(gòu)簡(jiǎn)化了。
參考資料1
二、CSS有幾種引入方式？link和@import有什么區(qū)別？
有 4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入外部 CSS 文件。下面我們就來(lái)看看這些方式和它們的優(yōu)缺點(diǎn)。
1、內(nèi)聯(lián)樣式
將style屬性直接加在個(gè)別的元件標(biāo)簽里，<元件(標(biāo)簽) style="性質(zhì)(屬性)1: 設(shè)定值1; 性質(zhì)(屬性)2: 設(shè)定值2; ...}。
這通常是個(gè)很復(fù)雜的書寫方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè) <div> 擁有相同的樣式，你不得不重復(fù)地為每個(gè) <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長(zhǎng)，且使得網(wǎng)頁(yè)難以維護(hù)。
2、內(nèi)部樣式
內(nèi)部樣式也叫內(nèi)嵌式，是將樣式代碼寫在<style></style>標(biāo)簽中，通常將style標(biāo)簽放到HTML文件<head></head>標(biāo)簽里。
嵌入方式的 CSS 只對(duì)當(dāng)前的網(wǎng)頁(yè)有效。因?yàn)?CSS 代碼是在 HTML 文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫模板網(wǎng)頁(yè)時(shí)這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁(yè)面有效，所以當(dāng)多個(gè)頁(yè)面需要引入相同的 CSS 代碼時(shí)，這樣寫會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)。
3、外部引用 link 標(biāo)簽引用CSS
將樣式規(guī)則寫在.css的樣式文件中，再以<link>標(biāo)簽引入。這樣引入該css樣式表文件以后，就可以直接套用該樣式檔案中所制定的樣式了。 通常是將link標(biāo)簽寫在網(wǎng)頁(yè)的<head></head>部份之中。
這種方法的優(yōu)點(diǎn)：可以把要套用相同樣式規(guī)則的數(shù)篇文件都指定到同一個(gè)樣式文件中，可以進(jìn)行統(tǒng)一的修改，也便于整站的設(shè)置有統(tǒng)一的風(fēng)格。這是最常見(jiàn)的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中，所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會(huì)在第一次加載時(shí)引入，以后切換頁(yè)面時(shí)只需加載 HTML 文件即可。
4、外部引用 @import 引用CSS
跟link方法很像，但必須放在<STYLE>...</STYLE> 中。
要注重的是，@improt行末的分號(hào)是必須的！千萬(wàn)不能漏寫！
這種方法的優(yōu)點(diǎn)：可以靈活的引入css文件對(duì)xhtml元素進(jìn)行控制。有時(shí)候也用來(lái)編寫某些css hack。
這種方法的缺點(diǎn)：在個(gè)別文件或元素的靈活度不足。
link和@import引用區(qū)別：
差別1：link 屬于 HTML，通過(guò) <link>標(biāo)簽中的 href 屬性來(lái)引入外部文件，而 @import 屬于 CSS，所以導(dǎo)入語(yǔ)句應(yīng)寫在 CSS 中，要注意的是導(dǎo)入語(yǔ)句應(yīng)寫在樣式表的開(kāi)頭，否則無(wú)法正確導(dǎo)入外部文件；link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。
差別2：加載順序的差別。當(dāng)一個(gè)頁(yè)面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候），link引用的CSS會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)開(kāi)始會(huì)沒(méi)有樣式（就是閃爍），網(wǎng)速慢 的時(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可以控制的。
差別5：@import可以在css中再次引入其他樣式表，比如可以創(chuàng)建一個(gè)主樣式表，在主樣式表中再引入其他的樣式表。這樣更利于修改和擴(kuò)展。但這樣做有一個(gè)缺點(diǎn)，會(huì)對(duì)網(wǎng)站服務(wù)器產(chǎn)生過(guò)多的HTTP請(qǐng)求，以前是一個(gè)文件，而現(xiàn)在卻是兩個(gè)或更多文件 了，服務(wù)器的壓力增大，瀏覽量大的網(wǎng)站還是謹(jǐn)慎使用。參考資料2參考資料3
三、以下這幾種文件路徑分別用在什么地方，代表什么意思?
1、css/a.css
可以用在本地路徑也可以用在網(wǎng)絡(luò)路徑。表示相對(duì)路徑，用在尋找當(dāng)前目錄下的css目錄下的a.css文件 。
2、./css/a.css
用在本地路徑，表示相對(duì)路徑，用于尋找當(dāng)前目錄下的css目錄下的a.css文件。
3、b.css
可以用在本地路徑，也可以用在網(wǎng)絡(luò)路徑。表示相對(duì)路徑，用于尋找當(dāng)前目錄下的b.css文件。
4、../imgs/a.png
用在本地路徑也可以用在網(wǎng)絡(luò)路徑，表示相對(duì)路徑，用于尋找上級(jí)目錄下的imgs目錄下的a.png文件。
5、/Users/hunger/project/css/a.css
用在本地路徑，一般不用于網(wǎng)絡(luò)路徑。表示絕對(duì)路徑，用于尋找本地根目錄下的Users/hunger/project/css/a.css。
6、/static/css/a.css
用在網(wǎng)絡(luò)路徑，表示在static目錄下的css目錄下的a.css文件路徑。
7、http://cdn.jirengu.com/kejian1/8-1.png
網(wǎng)絡(luò)路徑，表示域名下的kejian1文件下的8-1.png文件。
四、在js.jirengu.com上展示一個(gè)圖片，需要怎么操作?
1、我們?cè)诰帉慼tml時(shí)，使用img標(biāo)簽的src屬性時(shí)，它的值就是你要展示圖片的路徑，如果這個(gè)圖片和html文件在同一個(gè)目錄下，直接就是圖片名；如果不在同一個(gè)目錄下，就使用相對(duì)路徑找到圖片位置。一般不使用絕對(duì)路徑添加圖片。
2、當(dāng)圖片不在本地而是在網(wǎng)絡(luò)上，我們可以直接復(fù)制圖片的網(wǎng)址到src中。
五、列出5條以上html和 css 的書寫規(guī)范（非強(qiáng)制）
1、語(yǔ)法不區(qū)分大小寫，但潛規(guī)則是統(tǒng)一使用小寫。
2、不使用內(nèi)聯(lián)的style屬性定義樣式。
3、id和class使用有意義的單詞，分隔符建議使用 -，不建議使用下橫線_。
4、屬性值是0，就省略單位。
5、塊內(nèi)容要縮進(jìn)，為了使整體看起來(lái)規(guī)范整齊。
6、屬性名冒號(hào)后面加一個(gè)空格，也是為了好看。
六、chrome開(kāi)發(fā)工具介紹
在瀏覽器界面，直接右擊、檢查或者快捷鍵F12，即可打開(kāi)。
Google Chrome一共提供了8大組工具：
1、Elements: 允許我們從瀏覽器的角度看頁(yè)面，也就是說(shuō)我們可以看到chrome渲染頁(yè)面所需要的的HTML、CSS和DOM(Document Object Model)對(duì)象。此外，還可以編輯這些內(nèi)容更改頁(yè)面顯示效果；
2、Network: 可以看到頁(yè)面向服務(wù)器請(qǐng)求了哪些資源、資源的大小以及加載資源花費(fèi)的時(shí)間，當(dāng)然也能看到哪些資源不能成功加載。此外，還可以查看HTTP的請(qǐng)求頭，返回內(nèi)容等；
3、Sources: 主要用來(lái)調(diào)試js；
4、Timeline: 提供了加載頁(yè)面時(shí)花費(fèi)時(shí)間的完整分析，所有事件，從下載資源到處理Javascript，計(jì)算CSS樣式等花費(fèi)的時(shí)間都展示在Timeline中；
5、Profiles: 分析web應(yīng)用或者頁(yè)面的執(zhí)行時(shí)間以及內(nèi)存使用情況；
6、Resources: 對(duì)本地緩存（IndexedDB、Web SQL、Cookie、應(yīng)用程序緩存、Web Storage）中的數(shù)據(jù)進(jìn)行確認(rèn)及編輯；
7、Audits: 分析頁(yè)面加載的過(guò)程，進(jìn)而提供減少頁(yè)面加載時(shí)間、提升響應(yīng)速度的方案；
8、Console: 顯示各種警告與錯(cuò)誤信息，并且提供了shell用來(lái)和文檔、開(kāi)發(fā)者工具交互。
每個(gè)工具的界面，又有一些其它工具，祥知可以參考chrome開(kāi)發(fā)工具介紹
