CSS基礎
1. CSS簡述
CSS（Cascading Style Sheets） 中文全稱為層疊樣式表 。他是一種樣式表語言用來描述HTML或者是XML文檔中的呈現。CSS 描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題。
主線歷史
- 在1990年第一代的HTML的文檔被發明時候樣式表就以各種形式出現了，不同的瀏覽器結合了它們各自的樣式語言，讀者可以使用這些樣式語言來調節網頁的顯示方式。一開始樣式表是給讀者用的，最初的HTML版本只含有很少的顯示屬性，讀者來決定網頁應該怎樣被顯示。
- 1994年哈肯·維姆·萊提出了CSS的最初建議。伯特·波斯（Bert Bos）當時正在設計一個叫做“Argo”的瀏覽器，他們決定一起合作設計CSS。
- 哈肯于1994年在芝加哥的一次會議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個建議。當時W3C剛剛創建，W3C對CSS的發展很感興趣，它為此組織了一次討論會。哈肯、波斯和其他一些人（比如微軟的托馬斯·里爾登）是這個項目的主要技術負責人。1996年底，CSS已經完成。1996年12月CSS要求的第一版本被出版。
2. CSS有幾種引入方式？link和@import有什么區別
一般來說CSS的引入方式主要是有4種 分別為一下幾種情況
- 行內式
主要表現為 ：行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。格式如下：
<div style = "width:100px;height:100px;>我是行內樣式</div>
- 嵌入式
主要表現為： 嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。 缺點是對于一個包含很多網頁的網站，在每個網頁中使用嵌入式，進行修改樣式時非常麻煩。單一網頁可以考慮使用嵌入式。格式如下：
<head>
<style type="text/css">
...此處寫CSS樣式
</style>
</head>
- 導入式
主要表現為：一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中。 導入式會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。這是導入式固有的一個缺陷。使用的語法如下：
<style type="text/css">
@import"mystyle.css"; 此處要注意.css文件的路徑
</style>
- 鏈接式
也是將一個.css文件引入到HTML文件中，但它與導入式不同的是鏈接式使用HTML規則引入外部CSS文件，它在網頁的<head></head>標簽對中使用<link>標記來引入外部樣式表文件。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。使用語法如下：
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
論述link與@import的區別
因為對于兩種方式，究其根源其實都是為了CSS的鏈接，但是就像寫法一樣，世界上不可能存在相同的葉子。經過資料查詢主要論述的區別有一下幾點
老祖宗的差別。
link屬于XHTML標簽，而@import完全是CSS提供的一種方式。然而link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載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圖片 |
| /Users/hunger/project/css/a.css | 本地絕對路徑中的a.css文件 |
| /static/css/a.css | 網站中也可以使用相對路徑 |
| http://cdn.jirengu.com/kejian1/8-1.png | 指向其他網站上的圖的路徑 |
4. 如果我想在js.jirengu.com上展示一個圖片，需要怎么操作?
將圖片上傳至圖床，獲取鏈接，插曲img屬性中
上傳到服務器內部并用相對路徑讀取。
5. 列出5條以上html和 css 的書寫規范
HTML的書寫規范
文檔類型聲明及編碼: 統一為html5聲明類型<!DOCTYPE html>; 編碼統一為<meta charset=”gbk” />, 書寫時利用IDE實現層次分明的縮進。
非特殊情況下樣式文件必須外鏈至<head>…</head>之間;非特殊情況下JavaScript文件必須外鏈至頁面底部。
引入樣式文件或JavaScript文件時, 須略去默認類型聲明。
引入JS庫文件, 文件名須包含庫名稱及版本號及是否為壓縮版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式為庫名稱+插件名稱, 比如jQuery.cookie.js。
所有編碼均遵循xhtml標準, 標簽 & 屬性 & 屬性命名 必須由小寫字母及下劃線數字組成, 且所有標簽必須閉合, 包括 br 等; 屬性值必須用雙引號包括;
CSS的書寫規范
使用 4 個空格做為一個縮進層級，不允許使用 2 個空格 或 tab 字符。
選擇器 與 { 之間必須有空格
屬性名 與之后的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。
列表型屬性值 書寫在單行時，, 后必須跟一個空格。font-family: Arial, sans-serif;
每行不得超過 120 個字符，除非單行不可分割。
當一個 rule 包含多個 selector 時，每個選擇器聲明必須獨占一行。
6. 截圖介紹 chrome 開發者工具的功能區
Elements：查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器里面得到反饋。
- Console：控制臺，記錄開發者開發過程中的日志信息
- Sources：主要用于查看web站點的資源列表及javascript代碼的debug
- Network：從發起網頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），可以根據這個進行網絡性能優化。
- Timeline：記錄并分析在網站的生命周期內所發生的各類事件，以此可以提高網頁的運行時間的性能。
- Application：記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。
- Audits：對當前網頁進行網絡利用情況、網頁性能方面的診斷，并給出一些優化建議。比如列出所有沒有用到的CSS文件等
