1. CSS的全稱是什么?
Cascading Style Sheets邢享, 層疊樣式表。CSS為HTML標(biāo)記語(yǔ)言提供了一種樣式描述淡诗,定義了其中元素的顯示方式骇塘。
2. CSS有幾種引入方式? link 和@import 有什么區(qū)別?
** 內(nèi)聯(lián)樣式 > 內(nèi)部樣式 > 外部樣式 > 瀏覽器缺省設(shè)置**
- ** 內(nèi)聯(lián)樣式: **
<h1 style="color:red;"></h1>
- ** 內(nèi)部樣式:**
<style type="text/css">
h1 {
color: red;
}
</style>```
- **外部樣式:**
- ```
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>```
- ```
<style>
@import url("hello.css");
@import "world.css";
</style>
link 和@import 有什么區(qū)別?
- link屬于html標(biāo)簽,而@import是css提供的
- 頁(yè)面被加載時(shí)韩容,link會(huì)同時(shí)被加載款违,而@import引用的css會(huì)等到頁(yè)面加載結(jié)束后加載
- link是html標(biāo)簽,因此沒(méi)有兼容性群凶,而@import只有IE5以上才能識(shí)別
- link方式樣式的權(quán)重高于@import的
3. 以下這幾種文件路徑分別用在什么地方插爹,代表什么意思?
"./":代表目前所在的目錄。
"../":代表上一層目錄。
"/"開(kāi)頭:代表根目錄赠尾。
相對(duì)路徑:
- css/a.css 當(dāng)前文件所在文件夾的/css文件夾的/a.css
- ./css/a.css 同上力穗, ./表示當(dāng)前目錄
- b.css 當(dāng)前文件所在文件夾的/b.css
- ../imgs/a.png 當(dāng)前文件的父文件夾的/imgs文件夾的/a.png
絕對(duì)路徑:文件在硬盤上的路徑(本地)
- /Users/hunger/project/css/a.css
網(wǎng)絡(luò)路徑:
- /static/css/a.css 在這個(gè)服務(wù)器 根目錄下的static文件夾/css文件夾/中的a.css
- http://cdn.jirengu.com/kejian1/8-1.png 是這個(gè)圖片的網(wǎng)絡(luò)地址(絕對(duì)路徑)
4. 如果我想在js.jirengu.com上展示一個(gè)圖片,需要怎么操作?
case1: 上傳到服務(wù)器气嫁,用相對(duì)路徑引用当窗。
case2: 如果圖片已經(jīng)在網(wǎng)絡(luò)路徑上,則可用圖片的網(wǎng)絡(luò)絕對(duì)路徑引用寸宵。
5. 列出5條以上html和 css 的書(shū)寫規(guī)范
html書(shū)寫規(guī)范
- 文檔類型聲明及編碼: 統(tǒng)一為html5聲明類型<!DOCTYPE html>; 編碼統(tǒng)一為<meta charset=”utf-8″ />, 書(shū)寫時(shí)利用IDE實(shí)現(xiàn)層次分明的縮進(jìn);
- 非特殊情況下樣式文件必須外鏈至<head>…</head>之間;非特殊情況下JavaScript文件必須外鏈至頁(yè)面底部;
- 充分利用無(wú)兼容性問(wèn)題的html自身標(biāo)簽, 比如span, em, strong, optgroup, label,等等; 需要為html元素添加自定義屬性的時(shí)候, 首先要考慮下有沒(méi)有默認(rèn)的已有的合適標(biāo)簽去設(shè)置, 如果沒(méi)有, 可以使用須以”data-”為前綴來(lái)添加自定義屬性崖面,避免使用”data:”等其他命名方式;
- 語(yǔ)義化html, 如 標(biāo)題根據(jù)重要性用h*(同一頁(yè)面只能有一個(gè)h1), 段落標(biāo)記用p, 列表用ul, 內(nèi)聯(lián)元素中不可嵌套塊級(jí)元素;
- 盡可能減少div嵌套
- 書(shū)寫鏈接地址時(shí), 必須避免重定向,例如:href=”http://itaolun.com/”, 即須在URL地址后面加上“/”梯影;
- 在頁(yè)面中盡量避免使用style屬性,即style=”…”;
- 必須為含有描述性表單元素(input, textarea)添加label
- 能以背景形式呈現(xiàn)的圖片, 盡量寫入css樣式中;
- 重要圖片必須加上alt屬性; 給重要的元素和截?cái)嗟脑丶由蟭itle;
- 給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋, 方便后臺(tái)添加功能;
css書(shū)寫規(guī)范
- 編碼統(tǒng)一為utf-8;
- class與id的使用: id是唯一的并是父級(jí)的, class是可以重復(fù)的并是子級(jí)的, 所以id僅使用在大的模塊上, class可用在重復(fù)使用率高及子級(jí)中
- 類名簡(jiǎn)寫前提是易懂
- 長(zhǎng)名稱或詞組可以使用中橫線來(lái)為選擇器命名
- id在JS是唯一的巫员,不能多次使用,而使用class類選擇器卻可以重復(fù)使用甲棍,另外id的優(yōu)先級(jí)優(yōu)先與class简识,所以id應(yīng)該按需使用,而不能濫用救军。
- 屬性名 與之后的 : 之間不允許包含空格财异, : 與 屬性值 之間必須包含空格。選擇器 與 { 之間必須包含空格唱遭。
6. 截圖介紹 chrome 開(kāi)發(fā)者工具的功能區(qū)
QQ圖片20170722190855.png