CSS的全稱是什么?
- CSS全程是Cascading Style Sheets層疊樣式表
CSS有幾種引入方式? link 和@import 有什么區(qū)別?
- 內(nèi)聯(lián)樣式
這通常是個很糟糕的書寫方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個 <div> 擁有相同的樣式，你不得不重復(fù)地為每個 <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會導(dǎo)致 HTML 代碼變得冗長，且使得網(wǎng)頁難以維護
<h1 style = "color: red; font-size: 20px;"></h1> - 內(nèi)部樣式。放到head里
嵌入方式的 CSS 只對當(dāng)前的網(wǎng)頁有效。因為 CSS 代碼是在 HTML 文件中，所以會使得代碼比較集中，當(dāng)我們寫模板網(wǎng)頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因為嵌入的 CSS 只對當(dāng)前頁面有效，所以當(dāng)多個頁面需要引入相同的 CSS 代碼時，這樣寫會導(dǎo)致代碼冗余，也不利于維護
<style type = "text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>饑人谷</h1>
- 外部樣式。使用鏈接引用的方式加載樣式
這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨的 CSS 文件中，所以具有良好的可維護性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會在第一次加載時引入，以后切換頁面時只需加載 HTML 文件即可
<head>
/*link標(biāo)簽很早以前不光可以加載樣式表，可以加載
各種各樣的鏈接，rel是relation，type屬性可以不
寫，href樣式的文件地址。link一般寫在<head>
</head>里，否則可能會引起無樣式內(nèi)容閃爍、白屏
等瀏覽器渲染時會出現(xiàn)的問題*/
<link rel = "stylesheet" type = "text/css" href = "index.css">
</head>
- 導(dǎo)入樣式
是使用 CSS 規(guī)則引入外部 CSS 文件
<style>
@import url("hello.css");/*import的兩種寫法*/
@import "world.css";
</style>
link和@import都是外部引用CSS的方式，但是存在一定的區(qū)別：
link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。
link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。
link是XHTML標(biāo)簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
ink支持使用Javascript控制DOM去改變樣式；而@import不支持
以下這幾種文件路徑分別用在什么地方，代表什么意思?
- 相對路徑：自己相對與目標(biāo)的位置，當(dāng)兩個文件的相對關(guān)系沒有變，就可以使用相對路徑指明它的地址進而去引用彼此
css/a.csscss目錄下的a.css文件
./css/a.csscss目錄下的a.css文件
b.css與目標(biāo)文件同處于一級的b.css文件
../imgs/a.png../表示上一級，相對于目標(biāo)的上一級目錄下的imgs目錄下的a.png - 絕對路徑：完整的描述文件位置的路徑就是絕對路徑，當(dāng)文件之間的相對關(guān)系改變了，不處于同一個根目錄下，就需要明確的描述文件的位置
/Users/hunger/project/css/a.css/表示根目錄，跟目錄下的users目錄下的hunger目錄下的project目錄下的css目錄下的a.css文件 - 網(wǎng)站路徑：也是絕對路徑，當(dāng)兩個具有引用與被引用關(guān)系的文件不在同一個服務(wù)器上時，需要完整的描述文件位置
/static/css/a.css與目標(biāo)文件同處于一個服務(wù)器地址下的相對路徑，例如服務(wù)器地址為http://cdn.jirengu.com，則它代表的是http://cdn.jirengu.com/static/css/a.css
http://cdn.jirengu.com/kejian1/8-1.png網(wǎng)絡(luò)上的地址
如果我想在js.jirengu.com上展示一個圖片，需要怎么操作?
- 將要展示的圖片上傳到服務(wù)器上，若js.jirengu.com與圖片處于同一服務(wù)器，可以以相對路徑或絕對路徑去描述；若不在同一個服務(wù)器上，只能用絕對路徑這樣完整的描述文件的方式來展示，具體為：
<img src = "imgs/a.png">
或
<img src = "http://a.com/images/a.jpg">
列出5條以上html和 css 的書寫規(guī)范
html中：
- 是閉合標(biāo)簽的標(biāo)簽一定要完整的把標(biāo)簽的開始和結(jié)束都寫上，/表示閉合，寫在閉合標(biāo)簽的標(biāo)簽名稱的前面，例如：
<h1></h1> - 當(dāng)標(biāo)簽之間存在嵌套關(guān)系時，最好是使用縮進的方式進行編寫，以便閱讀、理解和修改
- 標(biāo)簽以尖括號開始，也以尖括號結(jié)束
- 標(biāo)簽內(nèi)屬性與屬性值的連接使用“=”等號來連接
CSS中： - 部分css可以寫在html的標(biāo)簽中，其緊跟在標(biāo)簽名稱后面，以空格分開。
- 部分css無法寫在標(biāo)簽中，這時可以寫在head標(biāo)簽內(nèi)部，用<style></style>包裹起來。在style標(biāo)簽內(nèi)部，對具有同一個名稱或?qū)儆谕粋€類或是同一個元素的標(biāo)簽進行統(tǒng)一設(shè)置，設(shè)置的內(nèi)容用花括號包裹起來，例如：
<style>
span{
color: yellow;
}
</style>
截圖介紹 chrome 開發(fā)者工具的功能區(qū)
image.png
面板上包含了Elements面板、Console面板、Sources面板、Network面板、 Timeline面板、Profiles面板、Application面板、Security面板、Audits面板這些功能面板:
- Elements:查找網(wǎng)頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器里面得到反饋。
- Console:記錄開發(fā)者開發(fā)過程中的日志信息，且可以作為與JS進行交互的命令行Shell。
- Sources:斷點調(diào)試JS。
- Network:從發(fā)起網(wǎng)頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息（包括狀態(tài)、資源類型、大小、所用時間等），可以根據(jù)這個進行網(wǎng)絡(luò)性能優(yōu)化。
- Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件，以此可以提高網(wǎng)頁的運行時間的性能。
- Profiles:如果你需要Timeline所能提供的更多信息時，可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時間細節(jié)、顯示JS對象和相關(guān)的DOM節(jié)點的內(nèi)存消耗、記錄內(nèi)存的分配細節(jié)。
- Application:記錄網(wǎng)站加載的所有資源信息，包括存儲數(shù)據(jù)（Local Storage、Session Storage、
IndexedDB、Web SQL、Cookies）、緩存數(shù)據(jù)、字體、圖片、腳本、樣式表等。 - Security:判斷當(dāng)前網(wǎng)頁是否安全。
- Audits:對當(dāng)前網(wǎng)頁進行網(wǎng)絡(luò)利用情況、網(wǎng)頁性能方面的診斷，并給出一些優(yōu)化建議。比如列出所有沒有用到的CSS文件等。
元素選擇器
標(biāo)簽欄第一個類似放大鏡的標(biāo)志。按下放大鏡并且在頁面上滑動鼠標(biāo)，會發(fā)現(xiàn)有區(qū)域被點亮（這里會點亮接觸的最內(nèi)層元素） 同時會看到這個元素的一些基本信息（類，寬高）另外元素的box模型的真實內(nèi)容，padding，margin也會被不同顏色標(biāo)示。單擊后則工具會選中DOM中的該元素。效果如下圖：imageimage
移動設(shè)備模擬
在桌面瀏覽器模擬移動端的操作，雖然可能樣式上會稍有偏差，但可以模擬多種屏幕分辨率以及支持一些觸屏的事件，非常實用p3p4
Elements標(biāo)簽頁
和對網(wǎng)頁右鍵查看源代碼有所不同，是經(jīng)過js代碼執(zhí)行以后真實的html代碼，因此直接改動就會在頁面生效。同時進入該面板以后還會有額外的一塊功能區(qū)出現(xiàn)，這里可以查看和修改樣式，也可以查看元素綁定的事件等。image
網(wǎng)絡(luò)
查看頁面的網(wǎng)絡(luò)請求（打開開發(fā)者工具并且選擇開啟錄制以后以后才會記錄）這里可以開啟過濾，通過關(guān)鍵字或者請求的類型來更快的定位想查找的請求，概況里可以查看請求的方式，狀態(tài)，大小，來源等屬性。單擊一個請求就能查看請求具體的信息，如請求的頭部，回復(fù)等。 這里查看response有個小技巧，如果返回的是json/jsonp數(shù)據(jù)，可以用Preview標(biāo)簽頁方便的查看生成的對象，告別Unicode轉(zhuǎn)碼和顯示的困擾查看responseimage選擇preview查看返回內(nèi)容imageimage
資源
可以查看頁面的圖片，cookie，local storage等信息（但是沒法修改cookie只能清除，如果需要修改則需要通過js修改，目前只成功在firebug提供圖形界面修改過cookie）image
控制臺
在這里可以自由的撰寫js代碼，可以使用瀏覽器提供的內(nèi)置對象，同時可以自己新定義對象和函數(shù)。在控制臺輸入代碼和許多IDE一樣提供了自動補全功能。image
