CSS的全稱(chēng)是什么?
- 英文全稱(chēng)：Cascading Style Sheets
- 漢語(yǔ)意思：層疊樣式表
- 是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。在網(wǎng)頁(yè)制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。
CSS有幾種引入方式?
在HTML中引入CSS的方法主要有三種，它們分別是內(nèi)聯(lián)樣式、內(nèi)部樣式、外部樣式。
1.內(nèi)聯(lián)樣式（行內(nèi)樣式）
行內(nèi)樣式是在標(biāo)記的style屬性中設(shè)定CSS樣式。
<h1 style="color: red;font-size: 20px;"></h1>
2.內(nèi)部樣式
內(nèi)聯(lián)樣式是將CSS樣式集中寫(xiě)在網(wǎng)頁(yè)的<head></head>標(biāo)簽對(duì)的<style></style>標(biāo)簽對(duì)中。
<style type="text/css">
h1{
color: red;
font-size: 20px;
}
</style>
3.外部樣式
外部樣式又分為鏈接式和導(dǎo)入式。
鏈接式（link）：使用HTML規(guī)則引入外部CSS文件，它在網(wǎng)頁(yè)的<head></head>標(biāo)簽對(duì)中使用<link>標(biāo)記來(lái)引入外部樣式表文件.
<head>
<link ref="stylesheet" type="text/css" href="index.css">
</head>
其中，href的屬性值應(yīng)為目標(biāo)文件的路徑及文件名全稱(chēng)。
導(dǎo)入式（@import）：將一個(gè)獨(dú)立的.css文件引入HTML文件中，導(dǎo)入式使用CSS規(guī)則引入外部CSS文件，可放在<style>里面，也可以放在另外一個(gè)樣式表里面。<style>標(biāo)記也是寫(xiě)在<head>標(biāo)記中。
<style type="text/css">
@import url("hello.css")
@import "hello.css"
</style>
其中url中的屬性值應(yīng)為目標(biāo)文件的路徑及文件名全稱(chēng)。
link 和@import 有什么區(qū)別?
- link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。
- link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。
- link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
- link支持使用Javascript控制DOM去改變樣式；而@import不支持。
以下這幾種文件路徑分別用在什么地方，代表什么意思?
1）相對(duì)路徑
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
2）絕對(duì)路徑
/Users/hunger/project/css/a.css
絕對(duì)路徑 本地/Users/hunger/project/css/目錄下的a.css
3）網(wǎng)站路徑
/static/css/a.css 網(wǎng)站路徑，當(dāng)前服務(wù)器根目錄下的/static/css的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png
網(wǎng)站路徑 http://cdn.jirengu.com服務(wù)器下的kejian1文件夾下的8-1.png
在js.jirengu.com上展示一個(gè)圖片，需要怎么操作?
- 網(wǎng)上的圖片,可以直接使用圖片的網(wǎng)絡(luò)絕對(duì)地址。或者把本地圖片上傳到某網(wǎng)站，生成一個(gè)線上地址，然后在js.jirengu.com上加載。
- 在本地打開(kāi)一個(gè)服務(wù)器，通過(guò)localhost的方式加載圖片，然后將圖片放到j(luò)s.jirengu.com上展示，適用于本地測(cè)試。
列出5條以上html和 css 的書(shū)寫(xiě)規(guī)范
CSS書(shū)寫(xiě)規(guī)范
- 使用 4 個(gè)空格做為一個(gè)縮進(jìn)層級(jí)。
- 語(yǔ)法不區(qū)分大小寫(xiě)，但建議統(tǒng)一使用小寫(xiě)。
- 不使用內(nèi)聯(lián)的style屬性定義樣式。
- id和class使用有意義的單詞，分隔符建議使用-，不建議使用”_”下劃線。
- CSS的有些屬性例如
margin padding有可能盡量縮寫(xiě)，16進(jìn)制顏色代碼#ff99cc盡量縮寫(xiě)為#f9c. - 屬性值是0的省略單位
- 塊內(nèi)容縮進(jìn)
- 屬性名冒號(hào)后面添加一個(gè)空格，屬性定義后必須以分號(hào)結(jié)尾。
HTML書(shū)寫(xiě)規(guī)范
- 一定要閉合HTML標(biāo)簽。
- id元素必須保證頁(yè)面唯一。
- 同一頁(yè)面，應(yīng)避免使用相同的 name 與 id。
- 標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則。
- 屬性值必須用雙引號(hào)包圍。
截圖介紹 chrome 開(kāi)發(fā)者工具的功能區(qū)
以百度為例，右鍵——檢查
- Element：可以看到chrome渲染頁(yè)面所需要的HTML、CSS和DOM對(duì)象。也可以編輯這些內(nèi)容更改頁(yè)面顯示效果。
- Console:記錄開(kāi)發(fā)者開(kāi)發(fā)過(guò)程中的日志信息，且可以作為與JS進(jìn)行交互的命令行Shell。
- Sources：斷點(diǎn)調(diào)試JS。可以查看請(qǐng)求的資源情況，包括CSS、JS、圖片等的內(nèi)容。
- Network：從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)、資源類(lèi)型、大小、所用時(shí)間等），可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。
- Performance:性能監(jiān)控
- memory: 獲取腳本語(yǔ)言的內(nèi)存占用信息
- Profiles：如果你需要Timeline所能提供的更多信息時(shí)，可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時(shí)間細(xì)節(jié)、顯示JS對(duì)象和相關(guān)的DOM節(jié)點(diǎn)的內(nèi)存消耗、記錄內(nèi)存的分配細(xì)節(jié)。
- Application：記錄網(wǎng)站加載的所有資源信息，包括存儲(chǔ)數(shù)據(jù)（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數(shù)據(jù)、字體、圖片、腳本、樣式表等。
- Security:判斷當(dāng)前網(wǎng)頁(yè)是否安全。
- Audits:對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行網(wǎng)絡(luò)利用情況、網(wǎng)頁(yè)性能方面的診斷，并給出一些優(yōu)化建議。比如列出所有沒(méi)有用到的CSS文件等。
點(diǎn)擊Style面板，可以實(shí)時(shí)修改CSS的屬性值，這里面的所有樣式Name和Value都是可以編輯的;在每個(gè)屬性后面單擊可以添加新的樣式。
