1.CSS的全稱是什么?
層疊樣式表(英文全稱：Cascading Style Sheets)
是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
2.CSS有幾種引入方式? link 和@import 有什么區別?
引入方式：
在HTML中引入CSS的方法主要有四種，它們分別是行內式、內嵌式、鏈接式和導入式。
1.行內式（內聯式）
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。如下：
<div style="color:red">123</div>
2.內嵌式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。
缺點是對于一個包含很多網頁的網站，在每個網頁中使用嵌入式，進行修改樣式時非常麻煩。單一網頁可以考慮使用嵌入式。
如下：
<head>
<style type="text/css">
...CSS樣式
</style>
</head>
3.鏈接式
也是將一個.css文件引入到HTML文件中，但它與導入式不同的是鏈接式使用HTML規則引入外部CSS文件，它在網頁的<head></head>標簽對中使用<link>標記來引入外部樣式表文件，如下：
<link href="style.css" rel="stylesheet" type="text/css"/>
4.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，如下：
<style>
@import url("style.css");
@import "css.css"
</style>
link 和@import的區別：
- 語法結構差別 link屬于HTML標簽，只能放入html源代碼中使用，而@import是CSS提供的一種方式，只能加載CSS了。
- 加載順序的差別 link引用的CSS會在一個頁面被加載的時候（就是被瀏覽者瀏覽的時候）同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍）。
- 兼容性的差別 由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。
- 使用dom控制樣式時的差別 當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。
3.以下這幾種文件路徑分別用在什么地方，代表什么意思?
- css/a.css（當前目錄下css文件夾內a.css文件）
- ./css/a.css（當前目錄下css文件夾內a.css文件）
- b.css（當前目錄下b.css文件）
- ../imgs/a.png（上一層目錄下imgs目錄中a.png文件）
- /Users/hunger/project/css/a.css（本地絕對路徑中的a.css文件）
- /static/css/a.css（本地絕對路徑中的a.css文件）
- (http://cdn.jirengu.com/kejian1/8-1.png) （網站的圖片地址）
4. 如果我想在js.jirengu.com上展示一個圖片，需要怎么操作?
方法：
- 把圖片上傳到網站服務器，在頁面中使用相對路徑引用，如：../imgs/a.png
- 在頁面中使用絕對路徑，引用其他網站中的圖片，如：http://cdn.jirengu.com/kejian1/8-1.png
5. 列出5條以上html和 css 的書寫規范
HTML書寫規范
- id元素必須保證頁面唯一。
- 同一頁面，應避免使用相同的 name 與 id。
- 標簽使用必須符合標簽嵌套規則。
- 屬性值必須用雙引號包圍。
- 引入 CSS 時必須指明 rel="stylesheet"。
- title 必須作為 head 的直接子元素，并緊隨 charset 聲明之后。
CSS書寫規范
- 語法不區分大小寫，但建議統一使用小寫
- 當一個 rule 包含多個 selector 時，每個選擇器聲明必須獨占一行。
- 屬性定義后必須以分號結尾。
- 不使用內聯的style屬性定義樣式
- id和class使用有意義的單詞，分隔符建議使用-
- 屬性值是0的省略單位
- 塊內容縮進
- 屬性名冒號后面添加一個空格
6.截圖介紹 chrome 開發者工具的功能區
面板上包含了Elements面板、Console面板、Sources面板、Network面板、Timeline面板、Profiles面板、Application面板、Security面板、Audits面板這些功能面板。
** 這些面板的功能點如下：**
Elements:查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器里面得到反饋。
Console:記錄開發者開發過程中的日志信息，且可以作為與JS進行交互的命令行Shell。
Sources:查看網站包含的html，css，js等文件，可以在js文件中打斷點調試
Network:從發起網頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），可以根據這個進行網絡性能優化。
Timeline:記錄并分析在網站的生命周期內所發生的各類事件，以此可以提高網頁的運行時間的性能。
Profiles:如果你需要Timeline所能提供的更多信息時，可以嘗試一下Profiles,比如記錄JS CPU執行時間細節、顯示JS對象和相關的DOM節點的內存消耗、記錄內存的分配細節。
Application:記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。
Security:判斷當前網頁是否安全。
Audits:對當前網頁進行網絡利用情況、網頁性能方面的診斷，并給出一些優化建議。比如列出所有沒有用到的CSS文件等。
