任務(wù)六——CSS基礎(chǔ)

一善镰、CSS的全稱(chēng)是什么?

CSS 全稱(chēng)是：CasCading Style sheet，層疊樣式表。

二博其、CSS有幾種引入方式? link 和@import 有什么區(qū)別?

有 4 種方式可以在 HTML 中引入 CSS。

2.1 內(nèi)聯(lián)方式

內(nèi)聯(lián)方式指的是直接在 HTML 標(biāo)簽中的 style屬性中添加 CSS迂猴。

示例：
<div style="background: red"></div>

這通常是個(gè)很糟糕的書(shū)寫(xiě)方式慕淡，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè) <div>
擁有相同的樣式沸毁，你不得不重復(fù)地為每個(gè) <div>
添加相同的樣式峰髓，如果想要修改一種樣式傻寂，又不得不修改所有的 style 中的代碼。很顯然儿普，內(nèi)聯(lián)方式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長(zhǎng)崎逃，且使得網(wǎng)頁(yè)難以維護(hù)。

2.2 嵌入方式

嵌入方式指的是在 HTML 頭部中的 <style>標(biāo)簽下書(shū)寫(xiě) CSS 代碼眉孩。
示例：
<head>
<style>
.content { background: red; }
</style>
</head>

嵌入方式的 CSS 只對(duì)當(dāng)前的網(wǎng)頁(yè)有效个绍。因?yàn)?CSS 代碼是在 HTML 文件中，所以會(huì)使得代碼比較集中浪汪，當(dāng)我們寫(xiě)模板網(wǎng)頁(yè)時(shí)這通常比較有利巴柿。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁(yè)面有效死遭，所以當(dāng)多個(gè)頁(yè)面需要引入相同的 CSS 代碼時(shí)广恢，這樣寫(xiě)會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)呀潭。

2.3.鏈接方式

鏈接方式指的是使用 HTML 頭部的 <head> 標(biāo)簽引入外部的 CSS 文件钉迷。
示例：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

這是最常見(jiàn)的也是最推薦的引入 CSS 的方式。使用這種方式钠署，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中糠聪，所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中谐鼎，CSS 文件會(huì)在第一次加載時(shí)引入舰蟆，以后切換頁(yè)面時(shí)只需加載 HTML 文件即可。

2.4.導(dǎo)入方式

導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件狸棍。
示例：
<style> @import url(style.css);</style>

2.5 link 和@import 有什么區(qū)別?

兩者都是外部引用CSS的方式身害，但是存在一定的區(qū)別：
　　區(qū)別1：link是XHTML標(biāo)簽，除了加載CSS外草戈，還可以定義RSS等其他事務(wù)塌鸯；@import屬于CSS范疇，只能加載CSS唐片。
　　區(qū)別2：link引用CSS時(shí)界赔，在頁(yè)面載入時(shí)同時(shí)加載；@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載牵触。
　　區(qū)別3：link是XHTML標(biāo)簽淮悼，無(wú)兼容問(wèn)題；@import是在CSS2.1提出的揽思，低版本的瀏覽器不支持袜腥。
　　區(qū)別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。

三羹令、以下這幾種文件路徑分別用在什么地方鲤屡，代表什么意思?

3.1 相對(duì)路徑：指的是文件相對(duì)于當(dāng)前位置的路徑。

以下是相對(duì)路徑：

css/a.css
./css/a.css
b.css
../imgs/a.png

3.2 絕對(duì)路徑：

本地文件的絕對(duì)路徑福侈。是一個(gè)很完整的路徑酒来，但是一般不用，因?yàn)闊o(wú)法在網(wǎng)站頁(yè)面中打開(kāi)肪凛。
/Users/hunger/project/css/a.css

3.3 網(wǎng)站路徑：

服務(wù)器中啟動(dòng)的文件路徑堰汉，服務(wù)器啟動(dòng)之后，該文件夾在網(wǎng)站上的路徑伟墙。
/static/css/a.css
http://cdn.jirengu.com/kejian1/8-1.png

四翘鸭、如果我想在js.jirengu.com上展示一個(gè)圖片，需要怎么操作?

方法1：可以直接將圖片上傳到服務(wù)器戳葵，在頁(yè)面使用這張圖片就乓；
方法2：如果這個(gè)圖片本來(lái)就存在網(wǎng)絡(luò)上其他的服務(wù)器上，可以直接使用圖片的網(wǎng)絡(luò)絕對(duì)路徑鏈接的方式（比如：http://cdn.jirengu.com/kejian1/8-1.png）在頁(yè)面上添加url引用這張圖片

五拱烁、列出5條以上html和 css 的書(shū)寫(xiě)規(guī)范

語(yǔ)法不區(qū)分大小寫(xiě)生蚁，但還是盡量統(tǒng)一使用小寫(xiě)。
不要使用內(nèi)聯(lián)的Style屬性定義樣式
id和class使用有意義的單詞戏自，分隔符建議使用-邦投，少用_。
有可能會(huì)有使用縮寫(xiě)的情況浦妄。
屬性值是0的，要盡量省略單位见芹。比如0px剂娄，就可以直接使用0
塊內(nèi)容要縮進(jìn)，代碼要盡量寫(xiě)得干凈玄呛、清爽阅懦、優(yōu)雅好看。
屬性名冒號(hào)后面需要添加一個(gè)空格徘铝。

六耳胎、截圖介紹 chrome 開(kāi)發(fā)者工具的功能區(qū)

橙色線框里為element，可以查看當(dāng)前頁(yè)面的HTML元素惕它。
也可以直接點(diǎn)擊進(jìn)行刪除怕午、移動(dòng)位置等編輯修改，進(jìn)行頁(yè)面調(diào)試淹魄。

image.png

2.紅色線框里為當(dāng)前頁(yè)面的CSS代碼郁惜，也可以進(jìn)行對(duì)當(dāng)前頁(yè)面的部分元素進(jìn)行樣式修改，用于頁(yè)面調(diào)試甲锡。

image.png

3.點(diǎn)擊用色圓圈里面的選擇鍵之后兆蕉，可以隨意選中當(dāng)前頁(yè)面的特定元素進(jìn)行編輯羽戒。