CSS基礎(chǔ)
1. CSS簡(jiǎn)述
CSS（Cascading Style Sheets） 中文全稱為層疊樣式表 须教。他是一種樣式表語言用來描述HTML或者是XML文檔中的呈現(xiàn)故慈。CSS 描述了在屏幕勘高、紙質(zhì)涩咖、音頻等其它媒體上的元素應(yīng)該如何被渲染的問題苞也。
主線歷史
- 在1990年第一代的HTML的文檔被發(fā)明時(shí)候樣式表就以各種形式出現(xiàn)了螺男，不同的瀏覽器結(jié)合了它們各自的樣式語言棒厘，讀者可以使用這些樣式語言來調(diào)節(jié)網(wǎng)頁的顯示方式。一開始樣式表是給讀者用的下隧，最初的HTML版本只含有很少的顯示屬性奢人，讀者來決定網(wǎng)頁應(yīng)該怎樣被顯示。
- 1994年哈肯·維姆·萊提出了CSS的最初建議淆院。伯特·波斯（Bert Bos）當(dāng)時(shí)正在設(shè)計(jì)一個(gè)叫做“Argo”的瀏覽器何乎，他們決定一起合作設(shè)計(jì)CSS。
- 哈肯于1994年在芝加哥的一次會(huì)議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個(gè)建議支救。當(dāng)時(shí)W3C剛剛創(chuàng)建抢野，W3C對(duì)CSS的發(fā)展很感興趣，它為此組織了一次討論會(huì)各墨。哈肯指孤、波斯和其他一些人（比如微軟的托馬斯·里爾登）是這個(gè)項(xiàng)目的主要技術(shù)負(fù)責(zé)人。1996年底贬堵，CSS已經(jīng)完成恃轩。1996年12月CSS要求的第一版本被出版。
2. CSS有幾種引入方式黎做？link和@import有什么區(qū)別
一般來說CSS的引入方式主要是有4種 分別為一下幾種情況
- 行內(nèi)式
主要表現(xiàn)為 ：行內(nèi)式是在標(biāo)記的style屬性中設(shè)定CSS樣式叉跛。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢(shì)，不推薦使用蒸殿。格式如下：
<div style = "width:100px;height:100px;>我是行內(nèi)樣式</div>
- 嵌入式
主要表現(xiàn)為： 嵌入式是將CSS樣式集中寫在網(wǎng)頁的<head></head>標(biāo)簽對(duì)的<style></style>標(biāo)簽對(duì)中筷厘。 缺點(diǎn)是對(duì)于一個(gè)包含很多網(wǎng)頁的網(wǎng)站，在每個(gè)網(wǎng)頁中使用嵌入式伟桅，進(jìn)行修改樣式時(shí)非常麻煩敞掘。單一網(wǎng)頁可以考慮使用嵌入式。格式如下：
<head>
<style type="text/css">
...此處寫CSS樣式
</style>
</head>
- 導(dǎo)入式
主要表現(xiàn)為：一個(gè)獨(dú)立的.css文件引入HTML文件中楣铁，導(dǎo)入式使用CSS規(guī)則引入外部CSS文件玖雁，<style>標(biāo)記也是寫在<head>標(biāo)記中。 導(dǎo)入式會(huì)在整個(gè)網(wǎng)頁裝載完后再裝載CSS文件盖腕，因此這就導(dǎo)致了一個(gè)問題赫冬，如果網(wǎng)頁比較大則會(huì)兒出現(xiàn)先顯示無樣式的頁面，閃爍一下之后溃列，再出現(xiàn)網(wǎng)頁的樣式劲厌。這是導(dǎo)入式固有的一個(gè)缺陷。使用的語法如下：
<style type="text/css">
@import"mystyle.css"; 此處要注意.css文件的路徑
</style>
- 鏈接式
也是將一個(gè).css文件引入到HTML文件中听隐，但它與導(dǎo)入式不同的是鏈接式使用HTML規(guī)則引入外部CSS文件补鼻，它在網(wǎng)頁的<head></head>標(biāo)簽對(duì)中使用<link>標(biāo)記來引入外部樣式表文件。使用鏈接式時(shí)與導(dǎo)入式不同的是它會(huì)以網(wǎng)頁文件主體裝載前裝載CSS文件雅任，因此顯示出來的網(wǎng)頁從一開始就是帶樣式的效果的风范，它不會(huì)象導(dǎo)入式那樣先顯示無樣式的網(wǎng)頁，然后再顯示有樣式的網(wǎng)頁沪么，這是鏈接式的優(yōu)點(diǎn)硼婿。使用語法如下：
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
論述link與@import的區(qū)別
因?yàn)閷?duì)于兩種方式，究其根源其實(shí)都是為了CSS的鏈接禽车，但是就像寫法一樣寇漫，世界上不可能存在相同的葉子刊殉。經(jīng)過資料查詢主要論述的區(qū)別有一下幾點(diǎn)
老祖宗的差別。
link屬于XHTML標(biāo)簽州胳，而@import完全是CSS提供的一種方式记焊。然而link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情陋葡，比如定義RSS亚亲，定義rel連接屬性等，@import就只能加載CSS了腐缤。加載順序的差別。
當(dāng)一個(gè)頁面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候）肛响，link引用的CSS會(huì)同時(shí)被加載岭粤，而@import引用的CSS 會(huì)等到頁面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁面時(shí)開始會(huì)沒有樣式（就是閃爍）特笋，網(wǎng)速慢的時(shí)候相當(dāng)明顯影響觀感體驗(yàn)剃浇。兼容性的差別。
由于@import是CSS2.1提出的所以老的瀏覽器不支持猎物，@import只有在IE5以上的才能識(shí)別虎囚，而link標(biāo)簽無此問題。使用dom控制樣式時(shí)的差別蔫磨。
當(dāng)使用javascript控制dom去改變樣式的時(shí)候淘讥，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的堤如。
3. 以下這幾種文件路徑分別用在什么地方蒲列，代表什么意思?
| 路徑 | 意義 |
|---|---|
| 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圖片 |
| /Users/hunger/project/css/a.css | 本地絕對(duì)路徑中的a.css文件 |
| /static/css/a.css | 網(wǎng)站中也可以使用相對(duì)路徑 |
| http://cdn.jirengu.com/kejian1/8-1.png | 指向其他網(wǎng)站上的圖的路徑 |
4. 如果我想在js.jirengu.com上展示一個(gè)圖片，需要怎么操作?
將圖片上傳至圖床搀罢，獲取鏈接蝗岖，插曲img屬性中
上傳到服務(wù)器內(nèi)部并用相對(duì)路徑讀取。
5. 列出5條以上html和 css 的書寫規(guī)范
HTML的書寫規(guī)范
文檔類型聲明及編碼: 統(tǒng)一為html5聲明類型<!DOCTYPE html>; 編碼統(tǒng)一為<meta charset=”gbk” />, 書寫時(shí)利用IDE實(shí)現(xiàn)層次分明的縮進(jìn)榔至。
非特殊情況下樣式文件必須外鏈至<head>…</head>之間;非特殊情況下JavaScript文件必須外鏈至頁面底部抵赢。
引入樣式文件或JavaScript文件時(shí), 須略去默認(rèn)類型聲明。
引入JS庫文件, 文件名須包含庫名稱及版本號(hào)及是否為壓縮版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式為庫名稱+插件名稱, 比如jQuery.cookie.js唧取。
所有編碼均遵循xhtml標(biāo)準(zhǔn), 標(biāo)簽 & 屬性 & 屬性命名 必須由小寫字母及下劃線數(shù)字組成, 且所有標(biāo)簽必須閉合, 包括 br 等; 屬性值必須用雙引號(hào)包括;
CSS的書寫規(guī)范
使用 4 個(gè)空格做為一個(gè)縮進(jìn)層級(jí)铅鲤，不允許使用 2 個(gè)空格 或 tab 字符它掂。
選擇器 與 { 之間必須有空格
屬性名 與之后的 : 之間不允許包含空格呆瞻， : 與 屬性值 之間必須包含空格。
列表型屬性值 書寫在單行時(shí)杏愤，, 后必須跟一個(gè)空格媒区。font-family: Arial, sans-serif;
每行不得超過 120 個(gè)字符驼仪，除非單行不可分割掸犬。
當(dāng)一個(gè) rule 包含多個(gè) selector 時(shí)，每個(gè)選擇器聲明必須獨(dú)占一行绪爸。
6. 截圖介紹 chrome 開發(fā)者工具的功能區(qū)
Elements：查找網(wǎng)頁源代碼HTML中的任一元素,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋湾碎。
- Console：控制臺(tái)，記錄開發(fā)者開發(fā)過程中的日志信息
- Sources：主要用于查看web站點(diǎn)的資源列表及javascript代碼的debug
- Network：從發(fā)起網(wǎng)頁頁面請(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ùn)行時(shí)間的性能萍虽。
- Application：記錄網(wǎng)站加載的所有資源信息睛廊，包括存儲(chǔ)數(shù)據(jù)（Local Storage、Session Storage杉编、IndexedDB超全、Web SQL、Cookies）邓馒、緩存數(shù)據(jù)嘶朱、字體、圖片光酣、腳本疏遏、樣式表等。
- Audits：對(duì)當(dāng)前網(wǎng)頁進(jìn)行網(wǎng)絡(luò)利用情況挂疆、網(wǎng)頁性能方面的診斷改览，并給出一些優(yōu)化建議。比如列出所有沒有用到的CSS文件等
