1.CSS的全稱是什么?
CSS的全稱是Cascading Style Sheet,漢語(yǔ)意思是「級(jí)聯(lián)樣式表」思瘟,通常又稱為“風(fēng)格樣式表(Style Sheet)
2.CSS有幾種引入方式? link 和@import 有什么區(qū)別?
三種
- 內(nèi)聯(lián)樣式
<h1 style="color: red; font-size: 20px;"> Hello World </h1>
- 內(nèi)部樣式
<style>
h1{
color: red;
font-size: 20px;
}
</style>
<h1>Hello World </h1>
- 外部樣式
<head>
<link rel="style sheet" type="text/css" href="css/style.css">
</head>
<style>
@import url("hello.css");
@import "world.css";
<\style>
link 和@import 區(qū)別如下
- 從屬差別
link是XHTML中的標(biāo)簽环础,除了用來(lái)引用CSS之外旨指,還能加載RSS等其他事物,@import屬于CSS范疇喳整,只能加載CSS - 加載順序差別
link引用的CSS會(huì)和HTML同時(shí)加載谆构,@import會(huì)在HTML渲染完之后再開(kāi)始加載 - 兼容性差別
link標(biāo)簽可以說(shuō)沒(méi)有瀏覽器不能識(shí)別,@import是CSS 2.1中提出的框都,老瀏覽器不能識(shí)別搬素,IE5以上才能識(shí)別(不過(guò)現(xiàn)在應(yīng)該沒(méi)有人用IE5以下的版本了) - 使用DOM控制樣式時(shí)的區(qū)別
當(dāng)使用JavaScript控制DOM來(lái)改變樣式的時(shí)候,只能使用link標(biāo)簽魏保,因?yàn)锧impotent不是DOM可控的 - @import可以用在CSS中嵌套使用(注意寫在最前面熬尺,否則無(wú)法生效)
3. 以下這幾種文件路徑分別用在什么地方,代表什么意思?
路徑 | 含義 | 分類 |
---|---|---|
css/a.css |
當(dāng)前文件位置下的 css 文件夾中的 a.css 文件 | 相對(duì)路徑 |
./css/a.css |
當(dāng)前文件位置下的 css 文件夾中的 a.css 文件 | 相對(duì)路徑 |
b.css |
當(dāng)前文件位置下的 b.css 文件 | 相對(duì)路徑 |
../imgs/a.png |
當(dāng)前文件位置的 上一級(jí)地址位置下的 imgs 文件夾中的 a.png 文件 | 相對(duì)路徑 |
/Users/hunger/project/css/a.css |
根目錄下的 Users/hunger/project/css 文件夾中的 a.css 文件 |
絕對(duì)路徑 |
/static/css/a.css |
根目錄下的 static/css 文件夾中的 a.css 文件 |
網(wǎng)站路徑 |
http://cdn.jirengu.com/kejian1/8-1.png |
相應(yīng)服務(wù)器上網(wǎng)站根目錄下 kejian1 文件夾中的 8-1.png 文件 | 網(wǎng)站路徑 |
相對(duì)路徑
方便網(wǎng)站的本地測(cè)試谓罗,網(wǎng)站整體遷移方便
相對(duì)路徑的網(wǎng)頁(yè)在被人復(fù)制或轉(zhuǎn)載時(shí)粱哼,不能返回正常的外部鏈接導(dǎo)入絕對(duì)路徑
不方便本地測(cè)試,修改麻煩
在被人復(fù)制或轉(zhuǎn)載時(shí)檩咱,可以給網(wǎng)站帶來(lái)很多外鏈
4. 如果我想在js.jirengu.com上展示一個(gè)圖片揭措,需要怎么操作?
將所需圖片上傳至任意圖床胯舷,獲取到該圖片的url,然后在需要用該圖片的地方引入它的url
5. 列出5條以上html和 css 的書(shū)寫規(guī)范
- html中除了開(kāi)頭的DOC和 'UTF-8'或者h(yuǎn)ead里特殊情況可以大寫外绊含,其他都為小寫桑嘶,css類都為小寫
- 不使用內(nèi)聯(lián)的style屬性定義樣式
- id和class使用有意義的單詞,分隔符建議使用-
- 屬性值是0的省略單位
- 塊內(nèi)容縮進(jìn)
- 屬性名冒號(hào)后面添加一個(gè)空格
6. 截圖介紹 chrome 開(kāi)發(fā)者工具的功能區(qū)
-
Elements 元素
查找網(wǎng)頁(yè)源代碼HTML中的任一元素躬充,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋逃顶。
自由操縱DOM和CSS來(lái)調(diào)整頁(yè)面的布局和設(shè)計(jì)
左上第一個(gè)按鈕點(diǎn)擊之后,再選擇頁(yè)面中的任何元素充甚,Elements窗口中會(huì)實(shí)施跳轉(zhuǎn)到選中的元素的源碼
左上第二個(gè)按鈕點(diǎn)擊之后以政,可以模擬出各種尺寸的移動(dòng)設(shè)備
-
Console 控制臺(tái)
在開(kāi)發(fā)期間,可以使用控制臺(tái)面板記錄診斷信息伴找∮或者使用它作為 shell,在頁(yè)面上與JavaScript交互
-
Sources 源代碼
在“源代碼”面板中疆瑰,可以斷點(diǎn)調(diào)試 JavaScript ≌覆危或者通過(guò)Workspaces(工作區(qū))連接本地文件搭伤,使用開(kāi)發(fā)者工具實(shí)時(shí)編輯
Network 網(wǎng)絡(luò)
從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息(包括狀態(tài)食绿、資源類型、大小耿币、所用時(shí)間等),可以根據(jù)這些信息來(lái)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化
-
Performance 性能
使用時(shí)間軸面板韧拒,可以通過(guò)記錄并分析頁(yè)面內(nèi)的各種事件淹接,由此可以針對(duì)性的進(jìn)行優(yōu)化,提供網(wǎng)頁(yè)運(yùn)行的性能
Application 資源面板
記錄網(wǎng)站加載的所有資源信息叛溢,包括存儲(chǔ)數(shù)據(jù)(Local Storage塑悼、Session Storage、IndexedDB楷掉、Web SQL厢蒜、Cookies)、緩存數(shù)據(jù)烹植、字體斑鸦、圖片、腳本草雕、樣式表等
- Security 安全
判斷當(dāng)前網(wǎng)頁(yè)是否安全
- Audits 審計(jì)
對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行網(wǎng)絡(luò)利用情況巷屿、網(wǎng)頁(yè)性能方面的診斷,并給出一些優(yōu)化建議墩虹。比如列出所有沒(méi)有用到的CSS文件等