1.CSS的全稱是什么?
答：Cascading Style Sheets——層疊樣式表
2.CSS有幾種引入方式? link 和@import 有什么區(qū)別?
| 方式 | 例子 | 說明 |
|---|---|---|
| 內(nèi)聯(lián) | <div style="background: red"></div> |
不推薦使用。直接嵌入在HTLML的style屬性中，相同樣式的代碼要重復寫，容易使得代碼冗長，難以維護 |
| 嵌入 | .content {background: red;} |
不推薦使用。嵌入到HTML頭部style內(nèi)，只對當前網(wǎng)頁有效，當多個頁面需要引入相同的 CSS 代碼時，這樣寫會導致代碼冗余，也不利于維護。 |
| 導入 | @import url(style.css); |
推薦使用。使用 CSS 規(guī)則引入外部 CSS 文件，放在HTML頭部的style里面。 |
| 鏈接 | <link rel="stylesheet" type="text/css" href="style.css"> |
推薦使用。使用 HTML 頭部的 <head> 標簽引入外部的 CSS 文件。所有的 CSS 代碼只存在于單獨的 CSS 文件中，所以具有良好的可維護性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會在第一次加載時引入，以后切換頁面時只需加載 HTML 文件即可。 |
區(qū)別：
（1）link：link 屬于 HTML，通過 <link> 標簽中的 href 屬性來引入外部文件，而 @import 屬于 CSS，所以導入語句應(yīng)寫在 CSS 中，要注意的是導入語句應(yīng)寫在樣式表的開頭，否則無法正確導入外部文件；
（2）@import：是 CSS2.1 才出現(xiàn)的概念，所以如果瀏覽器版本較低，無法正確導入外部樣式文件；
（3）當 HTML 文件被加載時，link 引用的文件會同時被加載，而 @import 引用的文件則會等頁面全部下載完畢再被加載；
3.以下這幾種文件路徑分別用在什么地方，代表什么意思?
- css/a.css ：相對路徑，在當前的目錄下的css文件夾中的a.css文件
- ./css/a.css：相對路徑，在當前的目錄下的css文件夾中的a.css文件
- b.css：相對路徑，在當前的目錄下的b.css文件
- ../imgs/a.png：相對路徑，在上級目錄的img文件夾下的a.png文件
- /Users/hunger/project/css/a.css：絕對路徑，在/Users/hunger/project/css文件夾下的a.css文件
- /static/css/a.css ： 網(wǎng)站路徑，通常而言
static是約定好的在服務(wù)器上的某個默認文件夾，一些靜態(tài)文件放在其中，例如img , html ,css ,js等 ，如果采用相對路徑前加了/，那么就默認訪問localhost:8080的根目錄，而根目錄下還有一個static文件件，那么訪問的時候就需要在前面添加上這個static作為相對路徑
例如：目錄結(jié)構(gòu)為以下結(jié)構(gòu)
static--
static--css--style.css
static--img--avatar.jpg
static-- js --main.js
static--index.html
代碼為：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>hello,world!</h1>
<!-- 錯誤示范 -->
<img src="/img/hello.jpg" alt="圖片">
<!-- 正確示范 -->
<img src="/static/img/hello.jpg" alt="圖片">
<img src="https://i.loli.net/2017/11/14/5a0ab01593c3c.jpg" alt="圖片">
</body>
</html>
結(jié)果為：第一張圖片沒有顯示，查看控制臺顯示報錯信息，因為其路徑/img/hello.jpg的文件不存在。
image.png
-
http://cdn.jirengu.com/kejian1/8-1.png引用線上地址,如下代碼。
<img src="https://i.loli.net/2017/11/14/5a0ab01593c3c.jpg" alt="圖片">
4.如果我想在js.jirengu.com上展示一個圖片，需要怎么操作?
答 ：如果服務(wù)器的文件結(jié)構(gòu)如圖，可采用2種方式展示圖片
示例圖片
（1）相對路徑：
<img src="img/hello.jpg" alt="圖片">（2）外部鏈接：
<img src="https://i.loli.net/2017/11/14/5a0ab01593c3c.jpg" alt="圖片">代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>hello,world!</h1>
<img src="img/hello.jpg" alt="圖片">
<img src="https://i.loli.net/2017/11/14/5a0ab01593c3c.jpg" alt="圖片">
</body>
</html>
顯示效果：
效果如圖
5.列出5條以上html和 css 的書寫規(guī)范
答：
- HTML：
（1）使用HTML5的文檔聲明<!Doctype html>
（2）必須申明文檔的編碼charset，且與文件本身編碼保持一致，推薦使用UTF-8編碼。<meta charset="utf-8">
（3）title 不可缺少，控制在25個字、50個字節(jié)以內(nèi)?！岸墮谀?- 一級欄目 - 網(wǎng)站名稱”。
（4）keywords很重要，關(guān)鍵詞，針對SEO。注意： 5個左右,單個8漢字以內(nèi)；禁忌堆砌，與網(wǎng)站主題無關(guān)。
（5）書寫注釋，方便程序開發(fā)嵌套。注釋方式：
開始注釋：<!-- 注釋 -->
結(jié)束注釋：<!-- /注釋文案 -->
允許只有開始注釋
注意： 浮動的地方不要加注釋，可能導致布局錯位或文字的BUG。
（6）img添加alt屬性，增加可訪問性。
<img src="" alt="圖片描述" title="圖片描述">
- 參考鏈接HTML書寫規(guī)范
- CSS:
（1）語法不區(qū)分大小寫，但是建議都用小寫；
（2）不使用內(nèi)聯(lián)的style屬性定義樣式；
（3）id和class使用有意義的單詞，分隔符建議使用-；
（4）屬性值是0就省略單位，例如：
div{
margin: 10px 0 20x 0;
}
（5）塊內(nèi)容就縮進，例如：
h1,
h2{
color: red;
font-weight: normal;
}
（6）屬性名后面添加一個空格space，如上（5）的例子
參考鏈接
CSS書寫規(guī)范-知乎
網(wǎng)易前端工程師HTMNL,CSS規(guī)范
6.截圖介紹 chrome 開發(fā)者工具的功能區(qū)
Image 1.png
Image 2.png
Image 4.png
Image 5.png
Image 7.png
