CSS的全稱是什么?
CSS全稱是 Cascading Style Sheets, 層疊樣式表
CSS有幾種引入方式? link 和@import 有什么區(qū)別?
css引入方式:
- 內(nèi)聯(lián)樣式
<h1 style="color: red; font-size: 20px;"></h1>
這通常是個(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ù)耐亏。
- 內(nèi)部樣式
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>饑人谷</h1>
嵌入方式的 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ù)几睛。
- 外部樣式
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
這是最常見(jiàn)的也是最推薦的引入 CSS 的方式房轿。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中，所以具有良好的可維護(hù)性囱持。并且所有的 CSS 代碼只存在于 CSS 文件中夯接，CSS 文件會(huì)在第一次加載時(shí)引入，以后切換頁(yè)面時(shí)只需加載 HTML 文件即可纷妆。
<style>
@import url("hello.css");
@import "world.css";
</style>
使用 CSS 規(guī)則引入外部 CSS 文件
比較link和import:
- link 屬于 HTML钻蹬，通過(guò) <link>
標(biāo)簽中的 href 屬性來(lái)引入外部文件，而 @import 屬于 CSS凭需，所以導(dǎo)入語(yǔ)句應(yīng)寫(xiě)在 CSS 中，要注意的是導(dǎo)入語(yǔ)句應(yīng)寫(xiě)在樣式表的開(kāi)頭肝匆，否則無(wú)法正確導(dǎo)入外部文件粒蜈；
@import 是 CSS2.1 才出現(xiàn)的概念，所以如果瀏覽器版本較低旗国，無(wú)法正確導(dǎo)入外部樣式文件枯怖；
當(dāng) HTML 文件被加載時(shí)，link 引用的文件會(huì)同時(shí)被加載能曾，而 @import 引用的文件則會(huì)等頁(yè)面全部下載完畢再被加載.
小結(jié)：我們應(yīng)盡量使用 <link> 標(biāo)簽導(dǎo)入外部 CSS 文件度硝，避免或者少用使用其他三種方式。
以下這幾種文件路徑分別用在什么地方寿冕，代表什么意思?
css/a.css
相對(duì)路徑,鏈接到當(dāng)前同一目錄里的css文件夾里的a.css文件.
./css/a.css
相對(duì)路徑,效果同上
b.css
相對(duì)路徑,鏈接到同一目錄下b.css文件.
../imgs/a.png
相對(duì)路徑,上層目錄img目錄里a.png圖片
/Users/hunger/project/css/a.css
相對(duì)路徑,同一目錄里的user-hunger-project-css目錄里的a.css文件
/static/css/a.css
相對(duì)路徑,效果同上
http://cdn.jirengu.com/kejian1/8-1.png
絕對(duì)路徑,鏈接到該網(wǎng)址的文件.
如果我想在js.jirengu.com上展示一個(gè)圖片蕊程，需要怎么操作?
將該圖片和html展示頁(yè)面上傳于同一服務(wù)器,html頁(yè)面采用相對(duì)路徑的方式展示該圖片
,如<img src="/img/a.png/>顯示.將該圖片上傳到其他服務(wù)器中,然后在html頁(yè)面使用絕對(duì)路徑指向該圖片地址來(lái)展示.
列出5條以上html和 css 的書(shū)寫(xiě)規(guī)范
- 語(yǔ)法不區(qū)分大小寫(xiě)，但建議統(tǒng)一使用小寫(xiě)
- 不使用內(nèi)聯(lián)的style屬性定義樣式
- id和class使用有意義的單詞驼唱，分隔符建議使用-
- 有可能就是用縮寫(xiě)
-屬性值是0的省略單位 - 塊內(nèi)容縮進(jìn)
- 屬性名冒號(hào)后面添加一個(gè)空格
截圖介紹 chrome 開(kāi)發(fā)者工具的功能區(qū)
