1. CSS的全稱是什么?
CSS全稱是 Cascading Style Sheets, 層疊樣式表
2. CSS有幾種引入方式? link 和@import 有什么區(qū)別?
2.1內(nèi)聯(lián)樣式
即寫在標(biāo)簽內(nèi)部的樣式
<h1 style="color: red; font-size: 20px;"></h1>
2.2內(nèi)部樣式
寫在<style></style>中的樣式
<style type="text/css">
p{
color: yellow;
font-size: 30px;
}
</style>
2.3外部樣式
用link標(biāo)簽引入css文件
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
用import引入樣式
<style>
@import url("hello.css");
@import "world.css";
</style>
2.4瀏覽器默認樣式
例如h1~h6本身自帶樣式
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
link 和@import 有什么區(qū)別
區(qū)別1：link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。
區(qū)別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。
區(qū)別3：link是XHTML標(biāo)簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區(qū)別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。
3.以下這幾種文件路徑分別用在什么地方，代表什么意思?
相對路徑
- css/a.css
當(dāng)前文件和css同級，要切換到css文件夾下的a.css文件 - ./css/a.css
./代表當(dāng)前文件（夾），作用和css/a.css一樣 - b.css
當(dāng)前文件和b.css文件同處于一級，直接切換到b.css文件。 - ../imgs/a.png
當(dāng)前文件上一級與imgs同處一個文件夾，切換到當(dāng)前文件的上一級，然后進入其中的imgs文件夾，找到其中的a.png
絕對路徑
- /Users/hunger/project/css/a.css
在本地時一級一級的往下找，直到找到a.css。放在服務(wù)器上時會失效。
網(wǎng)站路徑
- /static/css/a.css
主域名下static文件夾下的css文件夾中的a.css文件 -
http://cdn.jirengu.com/kejian1/8-1.png
線上圖片地址
4.如果我想在js.jirengu.com上展示一個圖片，需要怎么操作?
圖片是網(wǎng)絡(luò)上的圖片，直接在src中添加其網(wǎng)絡(luò)地址；
如果是本地圖片，先上傳至網(wǎng)絡(luò)上，獲得網(wǎng)絡(luò)地址再添加進src。
七牛云圖床
5.列出5條以上html和 css 的書寫規(guī)范
- 語法不區(qū)分大小寫，但建議統(tǒng)一使用小寫
- 不使用內(nèi)聯(lián)的style屬性定義樣式
- id和class使用有意義的單詞，分隔符建議使用-
- 有可能就是用縮寫
- 屬性值是0的省略單位
- 塊內(nèi)容縮進
- 屬性名冒號后面添加一個空格
- 選擇器 與 { 之間必須包含空格
- +、>、~ 選擇器的兩邊各保留一個空格
- 屬性定義必須另起一行
- 屬性定義后必須以分號結(jié)尾
- 如無必要，不得為 id、class 選擇器添加類型選擇器進行限定
- 同一 rule set 下的屬性在書寫時，應(yīng)按功能進行分組，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相關(guān)） > Visual（視覺效果） 的順序書寫，以提高代碼的可讀性。
Formatting Model 相關(guān)屬性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相關(guān)屬性包括：border / margin / padding / width / height 等
Typographic 相關(guān)屬性包括：font / line-height / text-align / word-wrap 等
Visual 相關(guān)屬性包括：background / color / transition / list-style 等
另外，如果包含 content 屬性，應(yīng)放在最前面。
6.截圖介紹 chrome 開發(fā)者工具的功能區(qū)
