1. CSS的全稱是什么?
CSS全稱是cascading style sheets,也就是層疊樣式表篇亭。是一種樣式表語(yǔ)言突那,用來(lái)描述HTML或XML(包括如SVG竭鞍、XHTML之類的 HTML分支語(yǔ)言)文檔的呈現(xiàn)斜筐。CSS描述了在屏幕望几、紙質(zhì)伍掀、音頻等其它媒體上的元素應(yīng)該如何被渲染的問(wèn)題掰茶。
2.CSS有幾種引入方式? link 和@import 有什么區(qū)別?
- CSS的三種引入方式
- 內(nèi)聯(lián)樣式
直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS
<h1 style="color: red; font-size: 20px;"></h1>
- 內(nèi)部樣式
在HTML頭部中的<style>
標(biāo)簽下書寫CSS代碼<style type="text/css"> h1 { color: red; font-size: 20px; } </style> <h1>饑人谷</h1>
- 外部樣式
- link 使用HTML頭部
<head>
標(biāo)簽引入外部的CSS文件。<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
- @import 使用CSS規(guī)則引入外部CSS文件
<style> @import url("hello.css"); @import "world.css"; </style>
- 內(nèi)聯(lián)樣式
- link 和@import 的比較
- ink 屬于 HTML蜜笤,通過(guò)link標(biāo)簽中的 href 屬性來(lái)引入外部文件濒蒋,而 @import 屬于 CSS,所以導(dǎo)入語(yǔ)句應(yīng)寫在 CSS 中把兔,要注意的是導(dǎo)入語(yǔ)句應(yīng)寫在樣式表的開頭沪伙,否則無(wú)法正確導(dǎo)入外部文件;
- @import是 CSS2.1 才出現(xiàn)的概念县好,所以如果瀏覽器版本較低围橡,無(wú)法正確導(dǎo)入外部樣式文件;
- 當(dāng) HTML 文件被加載時(shí)缕贡,link 引用的文件會(huì)同時(shí)被加載翁授,而 @import 引用的文件則會(huì)等頁(yè)面全部下載完畢再被加載;
- link是XHTML標(biāo)簽晾咪,除了加載CSS外收擦,還可以定義RSS等其他事務(wù);@import屬于CSS范疇谍倦,只能加載CSS炬守。
- link支持使用Javascript控制DOM去改變樣式;而@import不支持剂跟。
3. 以下這幾種文件路徑分別用在什么地方,代表什么意思?
- 相對(duì)路徑
- css/a.css
當(dāng)前目錄CSS文件夾下的a.css文件 - ./css/a.css
同上酣藻,也是當(dāng)前目錄CSS文件夾下的a.css文件曹洽,./的意思是當(dāng)前目錄 - b.css
當(dāng)前目錄的b.css文件 - ../imgs/a.png
當(dāng)前目錄的上一級(jí)目錄下的imgs文件夾下的a.png文件
- css/a.css
- 絕對(duì)路徑
- /Users/hunger/project/css/a.css
從根文件夾指定a.css文件
- /Users/hunger/project/css/a.css
- 網(wǎng)站路徑
- /static/css/a.css
服務(wù)器根目錄下名為static文件夾中的css文件夾下的a.css文件 -
http://cdn.jirengu.com/kejian1/8-1.png
圖片的網(wǎng)站路徑
- /static/css/a.css
4.如果我想在js.jirengu.com上展示一個(gè)圖片,需要怎么操作?
- 將圖片上傳到服務(wù)器上用相對(duì)路徑直接展示
- 如果是網(wǎng)頁(yè)上的圖片辽剧,直接通過(guò)URL用網(wǎng)站路徑展示
5.列出5條以上html和 css 的書寫規(guī)范
- HTML
- 標(biāo)準(zhǔn)模式聲明
HTML頁(yè)面第一行送淆,添加標(biāo)準(zhǔn)模式的聲明。eg. <!DOCTYPE html>
原因:可確保在每個(gè)瀏覽器中擁有一致的表現(xiàn)怕轿。 - 字符編碼
要明確聲明偷崩。eg.<meta charset="UTF-8">
原因:明確聲明字符編碼辟拷,可確保瀏覽器快速&容易判斷用哪種方式去渲染頁(yè)面內(nèi)容。 - 定義屬性時(shí)阐斜,建議用雙引號(hào)衫冻,不要用單引號(hào)。
- 成對(duì)的標(biāo)簽谒出,結(jié)束標(biāo)簽一定要有隅俘。
- HTML屬性應(yīng)當(dāng)按照一定的順序依次排列,來(lái)確保代碼的易讀性笤喳。
- 標(biāo)準(zhǔn)模式聲明
- CSS
- 語(yǔ)法不區(qū)分大小寫为居,但建議統(tǒng)一使用小寫
- 不使用內(nèi)聯(lián)的style屬性定義樣式
- id和class使用有意義的單詞,分隔符建議使用-
- 有可能就是用縮寫
- 屬性值是0的省略單位
- 塊內(nèi)容縮進(jìn)
- 屬性名冒號(hào)后面添加一個(gè)空格
6. 截圖介紹 chrome 開發(fā)者工具的功能區(qū)
參考:
https://segmentfault.com/a/1190000000683599
https://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn