CSS的全稱是什么?
Cascading Style Sheets 層疊樣式表
CSS有幾種引入方式? link 和@import 有什么區(qū)別?
-
行內(nèi)樣式
<div class="username" style="color: red;"> -
內(nèi)部樣式表
<head> <meta charset="UTF-8"> <title>Title</title> <style> @import url("hello.css"); @import "world.css"; h1 { color: red; } </style> </head> -
鏈入外部樣式
<link href="mystyle.css" rel="stylesheet" type="text/css">
@import 和link 的區(qū)別
語(yǔ)法結(jié)構(gòu)差別 link屬于HTML標(biāo)簽，只能放入html源代碼中使用，而@import是CSS提供的一種方式，只能加載CSS了。
加載順序的差別。link引用的CSS會(huì)在一個(gè)頁(yè)面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候）同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)開(kāi)始會(huì)沒(méi)有樣式（就是閃爍）。
兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識(shí)別，而link標(biāo)簽無(wú)此問(wèn)題。
使用dom控制樣式時(shí)的差別。當(dāng)使用javascript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的。
區(qū)分幾種文件路徑
| 路徑 | 位置 |
|---|---|
| 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.png文件 |
| /Users/hunger/project/css/a.css | 本機(jī)絕對(duì)路徑下的a.css文件 |
| /static/css/a.css | static文件夾中的css文件夾中的a.css文件 |
| http://cdn.jirengu.com/kejian1/8-1.png | 網(wǎng)站中的圖片地址。 |
如果我想在js.jirengu.com上展示一個(gè)圖片，需要怎么操作?
把圖片上傳到服務(wù)器上，把圖片和html文件放在同一級(jí)或者上一級(jí)的img文件夾中，使用相對(duì)路徑引用。
直接使用網(wǎng)絡(luò)上的地址引用。
一些html和 css 的書(shū)寫(xiě)規(guī)范
標(biāo)簽全部小寫(xiě)
盡量不使用行內(nèi)樣樣式
屬性值為0省略單位
可以將注釋插入html代碼中，這樣可以提高其可讀性。````
class和id名稱使用"-",替代下劃線
頁(yè)面必須包含 title 標(biāo)簽聲明標(biāo)題。title 必須作為 head 的直接子元素，并緊隨 charset 聲明之后。
在標(biāo)簽中添加屬性時(shí)，始終為屬性值添加引號(hào)，最好中間空出一個(gè)字節(jié)更加美觀
chrome 開(kāi)發(fā)者工具的功能區(qū)
Elements
審查瀏覽器頁(yè)面的DOM元素，在style那欄可以調(diào)試你的css元素
Network
分析網(wǎng)站請(qǐng)求的網(wǎng)絡(luò)情況，查看某一個(gè)請(qǐng)求的請(qǐng)求頭和響應(yīng)頭還有響應(yīng)內(nèi)容，特別是AJAX類請(qǐng)求的時(shí)候，點(diǎn)開(kāi)可以查看詳細(xì)的http請(qǐng)求情況。
Console
JavaScript控制臺(tái)，顯示各種警告與錯(cuò)誤,console.log和console.debug的信息會(huì)顯示在這里。
Sources
查看頁(yè)面加載的資源文件，可以在這里打斷點(diǎn)調(diào)試js。
