1.CSS的全稱
CSS全稱是 Cascading Style Sheets, 層疊樣式表
2.CSS的引用方式
- 內(nèi)聯(lián)樣式
樣式與html標(biāo)簽混雜在一起
<h1 style="color: red; font-size: 20px;"></h1>
- 內(nèi)部樣式
在style標(biāo)簽中進(jìn)行樣式的設(shè)計(jì)與頁(yè)面結(jié)構(gòu)的HTML分離，但css的樣式內(nèi)容仍在HTML文件中
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>簡(jiǎn)書</h1>
- 外部樣式
- HTML文件引用外部css文件
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
href：表明CSS文件的路徑
type：表明頁(yè)面鏈接文檔的類型稽坤，值應(yīng)該是text/css
rel：表明HTML與被鏈接文件的關(guān)系哺眯，當(dāng)鏈接到CSS文件時(shí)鸭限，特性應(yīng)該為stylesheet
通常把link放到head里面
Link是html的標(biāo)簽
- CSS文件引用外部css
<style>
@import url("hello.css");
@import "world.css";
</style>
@import是CSS的語(yǔ)法，在style標(biāo)簽里面用，=不能把這個(gè)直接放到html頁(yè)面里使用
3.文件路徑
-
相對(duì)路徑
css/a.css
引用的a.css的html文件與css文件夾在同一級(jí)路徑下绽族，可以直接進(jìn)入css引用./css/a.css
“./”严肪，代表當(dāng)前文件夾史煎，表示意義與上一種相同谦屑，用法等價(jià)b.css
引用的b.css的html文件與b.css在同一文件夾下，可以直接引用../imgs/a.png
“../”篇梭，代表向上一級(jí)氢橙，從html當(dāng)前路徑向上一級(jí)，找到Imgs文件夾恬偷，進(jìn)行引用
-
絕對(duì)路徑
- /Users/hunger/project/css/a.css
本地文件的絕對(duì)路徑悍手，在本地使能服務(wù)器后，可用這種方法來(lái)引用本地文件
- /Users/hunger/project/css/a.css
-
網(wǎng)站路徑
/static/css/a.css
在網(wǎng)站的根目錄下袍患，找static文件夾坦康，進(jìn)入css引用a.csshttp://cdn.jirengu.com/kejian1/8-1.png
將圖片上傳，得到一個(gè)線上地址诡延，引用圖片
4.如何在JsBin上展示一個(gè)圖片
將圖片上傳圖床涝焙，如七牛，得到圖片的線上地址孕暇，在代碼中引用圖片的線上地址
直接將圖片拖到Jsbin中仑撞，得到一個(gè)線上的url，也可展示妖滔，多用于調(diào)試
5.HTML和CSS的書寫規(guī)范
-
HTML
- 用兩個(gè)空格來(lái)代替制表符（tab）
- 嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個(gè)空格）
- 為每個(gè) HTML 頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明隧哮，<!DOCTYPE html>
- 為 html 根元素指定 lang 屬性，<html lang="en-us">
- 明確聲明字符編碼座舍，<meta charset="UTF-8">
-
CSS
- 用兩個(gè)空格來(lái)代替制表符（tab）
- 為選擇器分組時(shí)沮翔，將單獨(dú)的選擇器單獨(dú)放在一行
- 為了代碼的易讀性，在每個(gè)聲明塊的左花括號(hào)前添加一個(gè)空格
- 聲明塊的右花括號(hào)應(yīng)當(dāng)單獨(dú)成行
- 每條聲明語(yǔ)句的 : 后應(yīng)該插入一個(gè)空格
6.開發(fā)者工具常用的功能區(qū)
- Element
用于查看頁(yè)面結(jié)構(gòu)曲秉，html元素采蚀，可通過(guò)選擇元素查看對(duì)應(yīng)的HTML代碼
- styles
對(duì)應(yīng)網(wǎng)頁(yè)的樣式，可查看元素的樣式設(shè)計(jì)承二，也可自己修改添加樣式榆鼠，進(jìn)行驗(yàn)證
- Console
用于調(diào)試JS代碼，查看執(zhí)行狀態(tài)亥鸠，在console中添加代碼妆够，可以查看動(dòng)畫的效果，調(diào)試JS時(shí)负蚊，如果有報(bào)錯(cuò)神妹，可以雙擊定位出錯(cuò)的代碼；
- Network
查看請(qǐng)求的信息家妆，調(diào)試ajex用到鸵荠；Header，看到向接口傳遞的參數(shù)伤极；Response看后臺(tái)給的響應(yīng)蛹找；可以通過(guò)請(qǐng)求的種類進(jìn)行篩選
- Source
可用于JS調(diào)試嵌赠，可添加斷點(diǎn)
- Resources/Application
當(dāng)前頁(yè)面的資源，包括頁(yè)面的圖片熄赡，樣式表，用的最多的是local storage和cookies
localStorage作為HTML5本地存儲(chǔ)web storage特性的API之一齿税，主要作用是將數(shù)據(jù)保存在客戶端中
Cookie 實(shí)際上是指小量信息彼硫，是由 Web 服務(wù)器創(chuàng)建的，將信息存儲(chǔ)在用戶計(jì)算機(jī)上的文件凌箕。一般網(wǎng)絡(luò)用戶習(xí)慣用其復(fù)數(shù)形式 Cookies拧篮，指某些網(wǎng)站為了辨別用戶身份、進(jìn)行 Session 跟蹤而存儲(chǔ)在用戶本地終端上的數(shù)據(jù)
- Emulation
用于移動(dòng)端網(wǎng)頁(yè)開發(fā)牵舱，模擬手機(jī)
可模擬不同手機(jī)分辨率串绩，不同網(wǎng)速下網(wǎng)頁(yè)加載響應(yīng)速度；
