CSS的全稱(chēng)是什么?
層疊樣式表(英文全稱(chēng):Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言衫仑。
CSS有幾種引入方式?
- 內(nèi)聯(lián)樣式(不建議使用)
當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí),就可以使用內(nèi)聯(lián)樣式堕花。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性文狱。樣式屬性可以包含任何 CSS 屬性,
例如:
<h1 style="color: red; font-size: 20px;"></h1>
- 內(nèi)部樣式
當(dāng)單個(gè)文件需要特別樣式時(shí)缘挽,就可以使用內(nèi)部樣式表瞄崇。你可以在 head 部分通過(guò) <style> 標(biāo)簽定義內(nèi)部樣式表
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>很強(qiáng)</h1>
- 外部樣式
指的是單獨(dú)將CSS樣式寫(xiě)在另一個(gè)文件里,當(dāng)樣式需要被應(yīng)用到很多頁(yè)面的時(shí)候到踏,外部樣式表將是理想的選擇杠袱。使用外部樣式表,你就可以通過(guò)更改一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀
引入外部樣式一般有兩種方式:
- **link **
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
- @import
<style>
@import url("hello.css");
@import "world.css";
</style>
- 瀏覽器默認(rèn)樣式
當(dāng)頁(yè)面沒(méi)有任何樣式時(shí)窝稿,頁(yè)面上的內(nèi)容會(huì)加載瀏覽器自帶的默認(rèn)樣式
不同瀏覽器對(duì)于相同元素的默認(rèn)樣式并不一致,因此根據(jù)需求會(huì)需要重設(shè)默認(rèn)樣式使頁(yè)面在所有瀏覽器上顯示一致:
* {padding:0;marging:0}凿掂;
link 和@import 有什么區(qū)別?
- link是HTML的標(biāo)簽伴榔,@import是CSS的語(yǔ)法
- link是html標(biāo)簽,因此沒(méi)有兼容性庄萎,而@import只有IE5以上才能識(shí)別
- 權(quán)重:link引入>@import
- 頁(yè)面加載方式:link引入的CSS會(huì)與頁(yè)面內(nèi)容同時(shí)加載踪少,@import引入的CSS會(huì)等頁(yè)面內(nèi)容加載完成后再加載
以下這幾種文件路徑分別用在什么地方,代表什么意思?
-
css/a.css
相對(duì)路徑糠涛,代表的是當(dāng)前目錄的css文件夾中a.css文件 -
./css/a.css
相對(duì)路徑援奢,代表的是當(dāng)前目錄的css文件夾中a.css文件(與上面的路徑相同) -
b.css
相對(duì)路徑,代表的是當(dāng)前文件夾下的b.css文件 -
../imgs/a.png
相對(duì)路徑忍捡,代表的是上一級(jí)目錄中的imgs文件夾中的a.png文件 -
/User/hunger/project/css/a.css
絕對(duì)路徑集漾,代表的是本地路徑中的a.css文件 -
/static/css/a.css
網(wǎng)站路徑切黔,網(wǎng)站的主目錄下的css文件夾的a.css文件 -
http://cdn.jirengu.com/kejian1/8-1.png
網(wǎng)站路徑,網(wǎng)站的主目錄下kejian1文件夾
8-1.png文件
如果我想在js.jirengu.com上展示一個(gè)圖片具篇,需要怎么操作?
- 方法一:將想要展示的圖片上傳至js.jirengu.com所在的服務(wù)器中纬霞,最好是放置在網(wǎng)站主目錄下,并新建一個(gè)專(zhuān)門(mén)存放圖片文件夾驱显,例如:images文件夾诗芜,然后在html中寫(xiě)入
![](/images/目標(biāo)圖片.jpg)
優(yōu)點(diǎn):圖片便于管理,寫(xiě)HTML時(shí)可讀性高埃疫,安全性高
缺點(diǎn):服務(wù)器需要一定費(fèi)用購(gòu)入內(nèi)存來(lái)存儲(chǔ)圖片伏恐,一旦遇到大量并發(fā)會(huì)對(duì)服務(wù)器產(chǎn)生較大壓力
- 方法二:將想要展示的圖片上傳至圖床或第三方網(wǎng)站存儲(chǔ)并生成外鏈,然后在自己的網(wǎng)站的html中寫(xiě)入
![](http://www.xxxxxx)
優(yōu)點(diǎn):不占用網(wǎng)站服務(wù)器內(nèi)存栓霜,加載不會(huì)對(duì)網(wǎng)站服務(wù)器造成壓力
缺點(diǎn):有安全風(fēng)險(xiǎn)脐湾,如果選擇的圖床不夠好,有可能會(huì)被刪庫(kù)跑路叙淌,加載速度也因圖床質(zhì)量而定
列出5條以上html和 css 的書(shū)寫(xiě)規(guī)范
- 每行不得超過(guò) 120 個(gè)字符秤掌,除非單行不可分割(CSS)
- 屬性名 與之后的 : 之間不允許包含空格, : 與 屬性值 之間必須包含空格(CSS)
- 使用 border / margin / padding 等縮寫(xiě)時(shí)鹰霍,應(yīng)注意隱含值對(duì)實(shí)際數(shù)值的影響闻鉴,確實(shí)需要設(shè)置多個(gè)方向的值時(shí)才使用縮寫(xiě)(CSS)
- class 必須單詞全字母小寫(xiě),單詞間以 - 分隔(HTML)
- 對(duì) HTML5 中規(guī)定允許省略的閉合標(biāo)簽茂洒,不允許省略閉合標(biāo)簽(HTML)
- 屬性名必須使用小寫(xiě)字母(HTML)
- 自定義屬性建議以
xxx-
為前綴孟岛,推薦使用data-
(HTML) - 使用 HTML5 的 doctype 來(lái)啟用標(biāo)準(zhǔn)模式,建議使用大寫(xiě)的 DOCTYPE(HTML)
截圖介紹 chrome 開(kāi)發(fā)者工具的功能區(qū)
- Elements:查找網(wǎng)頁(yè)源代碼HTML中的任一元素,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋督勺。
- Console:記錄開(kāi)發(fā)者開(kāi)發(fā)過(guò)程中的日志信息渠羞,且可以作為與JS進(jìn)行交互的命令行Shell。
- Sources:斷點(diǎn)調(diào)試JS智哀。
- 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)化。
- Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類(lèi)事件摹菠,以此可以提高網(wǎng)頁(yè)的運(yùn)行時(shí)間的性能盒卸。
- 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文件等。