CSS的全稱是什么?
- CSS全程是Cascading Style Sheets層疊樣式表
CSS有幾種引入方式? link 和@import 有什么區(qū)別?
- 內(nèi)聯(lián)樣式
這通常是個很糟糕的書寫方式，它只能改變當前標簽的樣式阵子，如果想要多個 <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 只對當前的網(wǎng)頁有效住练。因為 CSS 代碼是在 HTML 文件中，所以會使得代碼比較集中愁拭，當我們寫模板網(wǎng)頁時這通常比較有利讲逛。因為查看模板代碼的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因為嵌入的 CSS 只對當前頁面有效敛苇，所以當多個頁面需要引入相同的 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標簽很早以前不光可以加載樣式表技羔，可以加載
各種各樣的鏈接，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標簽泳秀，除了加載CSS外标沪，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇嗜傅，只能加載CSS金句。
link引用CSS時，在頁面載入時同時加載吕嘀；@import需要頁面網(wǎng)頁完全載入以后加載违寞。
link是XHTML標簽贞瞒，無兼容問題；@import是在CSS2.1提出的坞靶，低版本的瀏覽器不支持憔狞。
ink支持使用Javascript控制DOM去改變樣式；而@import不支持
以下這幾種文件路徑分別用在什么地方彰阴，代表什么意思?
- 相對路徑：自己相對與目標的位置瘾敢，當兩個文件的相對關(guān)系沒有變，就可以使用相對路徑指明它的地址進而去引用彼此
css/a.csscss目錄下的a.css文件
./css/a.csscss目錄下的a.css文件
b.css與目標文件同處于一級的b.css文件
../imgs/a.png../表示上一級尿这，相對于目標的上一級目錄下的imgs目錄下的a.png - 絕對路徑：完整的描述文件位置的路徑就是絕對路徑簇抵，當文件之間的相對關(guān)系改變了，不處于同一個根目錄下射众，就需要明確的描述文件的位置
/Users/hunger/project/css/a.css/表示根目錄碟摆，跟目錄下的users目錄下的hunger目錄下的project目錄下的css目錄下的a.css文件 - 網(wǎng)站路徑：也是絕對路徑，當兩個具有引用與被引用關(guān)系的文件不在同一個服務(wù)器上時叨橱，需要完整的描述文件位置
/static/css/a.css與目標文件同處于一個服務(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中：
- 是閉合標簽的標簽一定要完整的把標簽的開始和結(jié)束都寫上贩绕，/表示閉合火的，寫在閉合標簽的標簽名稱的前面，例如：
<h1></h1> - 當標簽之間存在嵌套關(guān)系時淑倾，最好是使用縮進的方式進行編寫馏鹤，以便閱讀、理解和修改
- 標簽以尖括號開始娇哆，也以尖括號結(jié)束
- 標簽內(nèi)屬性與屬性值的連接使用“=”等號來連接
CSS中： - 部分css可以寫在html的標簽中假瞬，其緊跟在標簽名稱后面，以空格分開迂尝。
- 部分css無法寫在標簽中，這時可以寫在head標簽內(nèi)部剪芥，用<style></style>包裹起來垄开。在style標簽內(nèi)部，對具有同一個名稱或?qū)儆谕粋€類或是同一個元素的標簽進行統(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:判斷當前網(wǎng)頁是否安全。
- Audits:對當前網(wǎng)頁進行網(wǎng)絡(luò)利用情況职员、網(wǎng)頁性能方面的診斷麻蹋，并給出一些優(yōu)化建議。比如列出所有沒有用到的CSS文件等焊切。
元素選擇器
標簽欄第一個類似放大鏡的標志扮授。按下放大鏡并且在頁面上滑動鼠標芳室，會發(fā)現(xiàn)有區(qū)域被點亮（這里會點亮接觸的最內(nèi)層元素） 同時會看到這個元素的一些基本信息（類，寬高）另外元素的box模型的真實內(nèi)容刹勃，padding堪侯，margin也會被不同顏色標示。單擊后則工具會選中DOM中的該元素荔仁。效果如下圖：imageimage
移動設(shè)備模擬
在桌面瀏覽器模擬移動端的操作伍宦，雖然可能樣式上會稍有偏差，但可以模擬多種屏幕分辨率以及支持一些觸屏的事件咕晋，非常實用p3p4
Elements標簽頁
和對網(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標簽頁方便的查看生成的對象枚驻，告別Unicode轉(zhuǎn)碼和顯示的困擾查看responseimage選擇preview查看返回內(nèi)容imageimage
資源
可以查看頁面的圖片濒旦，cookie，local storage等信息（但是沒法修改cookie只能清除再登，如果需要修改則需要通過js修改尔邓，目前只成功在firebug提供圖形界面修改過cookie）image
控制臺
在這里可以自由的撰寫js代碼，可以使用瀏覽器提供的內(nèi)置對象锉矢，同時可以自己新定義對象和函數(shù)梯嗽。在控制臺輸入代碼和許多IDE一樣提供了自動補全功能。image
