一、CSS 全稱是什么？
CSS 全稱 Cascading Style Sheets，層疊樣式表。
二、CSS 有幾種引入方式? link 和 @import 有什么區別?
- 內聯樣式
寫在 HTML 頁面的元素內，權重越大，通過 JS 改變的樣式其實都是內聯樣式。但如果寫頁面的時候直接寫在 HTML 元素里，會使得 HTML 看起來很混亂，而且難以維護，使用方法如下：
<div style="color: red;">Hello World!</div>
- 內部引用
同樣寫在 HTML 頁面內，但用了個特殊的
<style>標簽包裹著，一般該標簽放在<head>里面，但放在其他標簽內也可以。相對比內聯寫法好，免去的 CSS 樣式的請求，加快頁面加載速度，缺點是會使得 HTML 本身文件大小變得更大，維護也是有問題的，使用方法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
background-color: #ccc;
}
</style>
</head>
<body>
<div>Hello World!</div>
</body>
</html>
- 用內部標簽 link 引用 CSS 資源
該引用是通過在
<head>標簽內通過<link>標簽引入外部資源，可以是相對路徑、絕對路徑、網站路徑引入。<link>引入會增加 HTTP 請求，網絡慢時，會影響體驗。但樣式和結構分離，易維護，也是主流的引入方式。使用方法如下：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet">
</head>
<body>
<div class="text-center">居中</div>
</body>
</html>
- 用 @import 引入 CSS 資源
在 HTML 中的
<style>中通過import url();引入，或者在*.css中的通過import url();引入。同樣會增加 HTTP 請求，但對于團隊分工有好處，使用方法如下：
<style>
<!--
@import url(css/example.css);
-->
</style>
@import 和 link 引入對比
-
<link>標簽不僅僅可以加載 CSS,@import只能支持 CSS 引入 - 加載順序，
<link>引入的都是優先加載的，哪怕是@import寫在<link>前方，在網速慢的時候體驗不好。參照：CSS 中 link 和 import 的加載順序 - 兼容性。
<link>沒有兼容性，@import是 CSS 2.1 提出的，有瀏覽器兼容問題，需要 IE5 以上才能識別。不過 IE 已死，兼容性不再是問題。 -
@import可以在其內部再次引入，如下,當引入a.css時：
/* a.css */
@import(b.css);
div {
background: #eee;
}
/* b.css */
@import(c.css);
div {
color: #000;
}
/* c.css */
div {
border: 1px solid red;
}
參考： CSS 引入的方式有哪些？
三、以下這幾種文件路徑分別用在什么地方，代表什么意思?
- 相對路徑
css/a.css
./css/a.css
b.css
../imgs/a.png
- 絕對路徑
/Users/hunger/project/css/a.css
- 網站路徑
/static/css/a.css
http://cdn.jirengu.com/kejian1/8-1.png
四、如果我想在 js.jirengu.com 上展示一個圖片，需要怎么操作?
上傳圖片到一個服務器，任何能通過網站路徑訪問的方式都可以成功在
js.jirengu.com中引入。比如 QQ空間、微博、貼吧或者github（強烈推薦 _ ），然后把圖片地址復制，貼進js.jirengu.com就可以了。
五、列出5條以上 HTML 和 CSS 的書寫規范
HTML
- 縮進：用兩個空格，而且內嵌元素都應該縮進。
- 全部使用雙引號。
- 自閉合標簽不使用
/。 - 添加
<!DOCTYPE html>聲明。 - 語言屬性
<html lang="en">；IE兼容模式<meta http-equiv="X-UA-Compatible" content="IE=Edge">；字符編碼<meta charset="utf-8"> - 引入 CSS 和 JS 無須書寫
type="text/css"和type="text/javascript"，因為這是默認屬性。 - 盡量使用最少標簽實現功能，免除復雜化。
...
CSS
- 縮進：用兩個空格。
- 選擇器：選擇器與左花括號
{之間有一個空格，且左花括號{開始分行；選擇器有多組時，每個選擇器單獨一行； - 每條 CSS 屬性的
:之后應該接一個空格。 - 所有語句結束都是分號。
- 小數省略 0 。
- 十六進制顏色全部小寫。
...
參考： 編碼規范
六、截圖介紹 chrome 開發者工具的功能區
1. Element 功能塊。
日常使用最多的一個功能，在瀏覽器中右鍵審查元素就能看到當前元素的 HTML 結構，而且還能看到對應的 CSS ，所有結構和屬性都可以直接修改。
2. Console 功能塊。
同樣的使用頻率很高，能看到網頁的報錯和一些打印信息，同時也能直接在上面進行 JS 代碼調試，而且是主要功能。
3. Sources 功能塊。
能看到該網頁需要加載的所有資源。
4. Network 功能塊。
查看網絡請求，可以看到請求頭，服務器響應（數據、HTML 代碼等），獲取時間等信息。
5. 設置。
在設置可以選擇開發者工具顯示的位置，同時在最左邊有個移動端模式用于手機調試的。
日常用的比較多的就以上幾個。
