1. CSS的全稱是什么?
Cascading Style Sheets, 層疊樣式表，是一種樣式表語言，用來描述 HTML 或 XML 文檔的呈現(xiàn)。
2. CSS有幾種引入方式? link 和@import 有什么區(qū)別?
- 樣式引入有三種方式：外部樣式，內(nèi)部樣式，內(nèi)聯(lián)樣式
- 外部樣式：當(dāng)樣式需要被應(yīng)用到很多頁面的時(shí)候，外部樣式表將是理想的選擇。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
- 內(nèi)部樣式：當(dāng)單個(gè)文件需要特別樣式時(shí)，就可以使用內(nèi)部樣式表。
<head>
<style type="text/css">
body {background-color: red}
</style>
</head>
- 內(nèi)聯(lián)樣式：當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí)，就可以使用內(nèi)聯(lián)樣式。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
-
link和@import有什么區(qū)別
它們兩者是導(dǎo)入CSS文件兩種不同方式
- link
<link rel="stylesheet" href="style.css" type="text/css"/>? - @import
<style type="text/css">
@import url("style.css");
</style>
- 理論上，
@import和link的唯一區(qū)別是@import是CSS下導(dǎo)入樣式表的語法而<link>是HTML下的語法。然而，瀏覽器以不同的方式處理他們。從網(wǎng)頁性能的的角度考慮，應(yīng)該避免用@import。 而且link除了調(diào)用css外還可以聲明頁面鏈接屬性，聲明目錄，rss等等，而@import就只能調(diào)用css。
3. 以下這幾種文件路徑分別用在什么地方，代表什么意思?
-
css/a.css
相對(duì)路徑，當(dāng)前目錄下的css目錄下的a.css文件 -
./css/a.css
相對(duì)路徑，當(dāng)前目錄下的css目錄下的a.css文件，等價(jià)于css/a.css -
b.css
相對(duì)路徑，當(dāng)前路徑下的b.css文件 -
../imgs/a.png
相對(duì)路徑，上級(jí)目錄下imgs下的a.png文件 -
/Users/hunger/project/css/a.css
絕對(duì)路徑， 本地文件地址 -
/static/css/a.css
絕對(duì)路徑，網(wǎng)站根目錄下static文件中css中的a.css文件 -
http://cdn.jirengu.com/kejian1/8-1.png
網(wǎng)站路徑，在 cdn.jirengu.com 這個(gè)網(wǎng)站上找到圖片 8-1.png
4. 如果我想在js.jirengu.com上展示一個(gè)圖片，需要怎么操作?
- 如果這個(gè)圖片本來就存在網(wǎng)絡(luò)上， 可以直接使用圖片的網(wǎng)絡(luò)絕對(duì)地址
- 如果圖片在本地，可將圖片上傳到某個(gè)網(wǎng)址，生成一個(gè)線上網(wǎng)址，或?qū)D片文件存于
本地服務(wù)器。例如： http://chuantu.biz/upload.php
5. 列出5條以上html和 css 的書寫規(guī)范
- HTML:
- 用兩個(gè)空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。
- 對(duì)于屬性的定義，確保全部使用雙引號(hào)，絕不要使用單引號(hào)。
- 不要在自閉合（self-closing）元素的尾部添加斜線
- 為每個(gè) HTML 頁面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。
<!DOCTYPE html>
<html>
<head>
</head>
</html>
- 通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內(nèi)容的渲染方式。
- CSS:
- 為選擇器分組時(shí)，將單獨(dú)的選擇器單獨(dú)放在一行。
- 為了獲得更準(zhǔn)確的錯(cuò)誤報(bào)告，每條聲明都應(yīng)該獨(dú)占一行。
- 所有聲明語句都應(yīng)當(dāng)以分號(hào)結(jié)尾。最后一條聲明語句后面的分號(hào)是可選的，但是，如果省略這個(gè)分號(hào)，你的代碼可能更易出錯(cuò)。
- 對(duì)于以逗號(hào)分隔的屬性值，每個(gè)逗號(hào)后面都應(yīng)該插入一個(gè)空格（例如，
box-shadow）。 - 避免為 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;。
其他的HTML 和 CSS 規(guī)范： http://codeguide.bootcss.com/
6. 截圖介紹 chrome 開發(fā)者工具的功能區(qū)
q6
- elements: 查看和修改html
- style: 調(diào)試CSS
- console: JavaScript console
- sources: 協(xié)同調(diào)試JavaScript, 比如加入斷點(diǎn)等
- network: 查看網(wǎng)絡(luò)請(qǐng)求
- timeline: 時(shí)間軸，頁面加載的時(shí)間
- profiles: CPU, JavaScript 的性能
- application: 查看頁面加載的資源。操作HTML5 Database, Cookies, AppCache等。
