1. CSS的全稱是什么?
Cascading Style Sheets, 層疊樣式表。
2. @charset有什么作用
告訴瀏覽器使用什么字符集去解碼。
3. 以下這幾種文件路徑分別用在什么地方，代表什么意思?
-
css/a.css:相對路徑-當(dāng)前目錄下css文件夾內(nèi)a.css文件。 -
./css/a.css：相對路徑-當(dāng)前目錄下css文件夾內(nèi)a.css文件。 -
b.css：相對路徑-當(dāng)前目錄下b.css文件。 -
../imgs/a.png：相對路徑-上級(jí)目錄下imgs文件夾a.png文件。 -
/Users/hunger/project/css/a.css：絕對路徑-從根目錄向下直到a.css文件。 -
/static/css/a.css：絕對路徑-從根目錄向下直到a.css文件。 -
http://cdn.jirengu.com/kejian1/8-1.png：網(wǎng)站路徑-http服務(wù)提供的圖片地址。
4. id選擇器和class選擇器的使用場景分別是什么？
- id選擇器：每個(gè)id在文檔中必須是唯一的且一個(gè)標(biāo)簽只能綁定一個(gè)id。所以id選擇器通常用于大的模塊上，多用于父級(jí)。
- class選擇器：文檔中多個(gè)元素可以擁有一個(gè)類名且一個(gè)標(biāo)簽可以綁定多個(gè)class。所以class選擇器通常用于重復(fù)使用率高的元素上，多用于子級(jí)。
5. CSS常見選擇器、偽類選擇器和偽元素。
詳見 My Github
6. 下列代碼是什么意思？
.item+p {color: red}:使class="item"的元素的子元素p的下一相鄰元素字色為紅色。
.item~p {color: yellow}:使class="item"的元素的子元素p的下N個(gè)相鄰元素字色為黃色。
.item p {color: blue}:使class="item"的元素的子元素p字色為藍(lán)色。
p.item {color: blue}:使p元素的后代class="item"的元素字色為藍(lán)色。
.item>p{color: blue}:使父元素為class="item"的直接子元素p字色為藍(lán)色。
7. em、rem分別是什么？
em：
相對長度單位，表示元素的font-size的計(jì)算值，代表了默認(rèn)字體大小的倍數(shù)(比如不設(shè)置時(shí)是字體是16px，那2em 就是32px)。
常用于創(chuàng)建可伸縮布局，這樣即便用戶更改了字體尺寸也不影響頁面整體布局。CSS屬性line-height，font-size，margin-bottom和margin-top常具有一個(gè)用em表示的值。
rem：
代表根元素（如<html>）font-size大小，當(dāng)用在根元素的font-size上面時(shí)，它代表了它的初始值，默認(rèn)初始值是html默認(rèn)font-size大小。
當(dāng)未在根元素上設(shè)置font-size大小時(shí),1rem=1em,當(dāng)設(shè)置font-size=2rem的時(shí)候,就使得頁面中1rem的大小相當(dāng)于html的根字體默認(rèn)大小的2倍,當(dāng)然此時(shí)頁面中字體的大小也是html的根字體默認(rèn)大小的2倍)。
該單位在實(shí)際使用中一般用于創(chuàng)建完美的可擴(kuò)展布局。如果不被目標(biāo)瀏覽器支持，可以使用em單位。IE8及之前版本不支持rem。
8. 顏色有幾種寫法？
color:直接寫顏色名，如：red;
color:#000000---#ffffff;
color:#000---#fff;
color:rgb(0,0,0);---rgb(255,255,255);
color:rgb(0%,0%,0%);---rgb(100%,100%,100%)
9. CSS 選擇器的權(quán)重是如何計(jì)算的？
以下為親測結(jié)果：
優(yōu)先級(jí)從高到低排列為：
- head元素中!important
- body元素中inline style內(nèi)聯(lián)樣式（行內(nèi)樣式）
- head元素中id選擇器（無論這個(gè)id聲明放在class選擇器上面還是下面）
- head元素中class選擇器（同一個(gè)body元素內(nèi)應(yīng)用到兩個(gè)及以上的class，無論body中class值如何排序，head元素中靠內(nèi)的class選擇器優(yōu)先級(jí)高于靠外的class選擇器）
- head元素中tag標(biāo)簽選擇器
- css外部樣式表
- body標(biāo)簽內(nèi)style樣式
- 瀏覽器缺省設(shè)置(即默認(rèn)樣式)
**計(jì)算方式：
選擇器的特殊性由選擇器本身決定，出現(xiàn)沖突時(shí)，高特殊性的聲明勝出。
對于復(fù)雜場景，可以使用特殊值來計(jì)算優(yōu)先級(jí)，特殊性值表述為4個(gè)部分：0，0，0，0，計(jì)算規(guī)則如下：
ID —— +0，1，0，0
類、屬性選擇、偽類 —— +0，0，1，0
元素、偽元素 —— +0，0，0，1
所有內(nèi)聯(lián)屬性 —— +1，0，0，0
對于得到的值，相同位置上的數(shù)字越大的值代表的優(yōu)先級(jí)越高；不同的位置按從前到后優(yōu)先級(jí)依次降低，即 0，1，0，0 的優(yōu)先級(jí)比 0，0，1，15 更高。
越是“特殊”的選擇器優(yōu)先級(jí)越高，具有相同優(yōu)先級(jí)的選擇器，如果樣式出現(xiàn)沖突，那么后出現(xiàn)的樣式會(huì)覆蓋先出現(xiàn)的樣式。
10. 如何在js.jirengu.com上展示一個(gè)圖片?
定制圖片操作：示例
將圖片xxx.ico放在代碼當(dāng)前目錄下，按如下配置來生成地址欄左側(cè)圖標(biāo)：
<link rel="shortcut icon" href="xxx.ico" type="image/x-icon">
其中shortcut icon特指瀏覽器中地址欄左側(cè)顯示的圖標(biāo)，一般大小位16*16，后綴名為.icon。href的值為圖片鏈接。
11. 列出5條以上html和css的書寫規(guī)范。
html書寫規(guī)范：
- 遵循語義化標(biāo)準(zhǔn)但注重實(shí)用性，避免多余的父節(jié)點(diǎn)，以較小復(fù)雜度和較少的標(biāo)簽解決問題。
- 在頁面開頭用doctype來啟用標(biāo)準(zhǔn)模式，使其在每個(gè)瀏覽器中盡可能一致的展現(xiàn)，照慣例DOCTYPE大寫。
- 在html標(biāo)簽上加上lang屬性。這會(huì)告訴語音工具和翻譯工具應(yīng)怎么去發(fā)音和翻譯。
- 指定
<meta charset="UTF-8">，讓瀏覽器輕松渲染并減少亂碼的可能。 - 嵌套的節(jié)點(diǎn)需縮進(jìn)以保持結(jié)構(gòu)工整。
- 屬性名全小寫。
- 屬性值使用雙引號(hào)。
- 除自閉合標(biāo)簽外所有標(biāo)簽都應(yīng)成對出現(xiàn)。
css書寫規(guī)范：
- 選擇器內(nèi)的屬性值對要使用縮進(jìn)。
- 不使用內(nèi)聯(lián)樣式。
- 使用有意義的單詞作為選擇器名稱。
- 每個(gè)屬性聲明屬性名后加空格，屬性值末尾要加分號(hào)。
- 注釋統(tǒng)一用/* */，縮進(jìn)與下一行代碼保持一致。
- 最外層統(tǒng)一使用雙引號(hào)，url的內(nèi)容要用引號(hào)，屬性值要用引號(hào)。
- 類名使用小寫字母以中劃線分隔，id采用駝峰式命名。
- 十六進(jìn)制顏色名用小寫字母且能簡寫一定簡寫。
- 屬性值0后不要加單位。
12. 截圖介紹 chrome 開發(fā)者工具的功能區(qū)
右鍵打開開發(fā)者工具：
