css
css全稱：Cascading Style Sheets層疊樣式表，用于給網頁添加樣式。（html式結構；css是樣式；js是行為）
css的引入方式：
- 內聯樣式：直接寫在html的標簽里
<h1 style="color: red; font-size: 20px;"></h1> - 內部樣式：寫在head中的<style type=“text/css”></style>中
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style> - 外部樣式：兩種方法
第一種：用<link>引入css
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
第二種：用@import引入樣式放在css中，注意分號
<style>
@import url("hello.css");
@import "world.css";
</style>
link和@import的區別
- <link>時XHTL標簽除了加載css樣式外還可以定義RSS等其他事物；@import屬于css的語法，只能夾在css樣式。
- <link>在引用css時，頁面載入的同時加載css樣式；@import則是完全載入頁面后再去加載css樣式
- <link>時XHYML標簽，沒有兼容問題；@import是css2.1提出的，過低版本的瀏覽器不支持
- <link>可以用JS控制DOM去改變樣式；@import不可以
注：每一個瀏覽器都有自己默認的樣式，在寫css時一般先清空默認樣式。
文件路徑
相對路徑
css／a.css當前文件夾下的css文件夾下的a.css文件
./css/a.css同上
b.css當前文件夾下的b.css文件
../imags/a.png上一級文件夾下的imags文件夾下的a.png文件
絕對路徑
／users／hunger／project／css／a.css users文件夾下的hunger文件下的project文件夾下的css文件夾下的a.css文件
網頁路徑
/static/css/a.css主域名下的文件路徑
http：//cdn.jirengu.com/kejian1/8-1.png網站中的路徑，是一個絕對路徑
本地文件在網站上展示
將本地圖片上傳后會得道一個路徑然后再img標簽中的src屬性引用這個路徑
也可以用其它網站上圖片的網絡絕對路徑在img中的src里引用這個絕對路徑
html書寫規范
統一文檔h5聲明<!DOCTYPE html>
編碼表<meta charset=“utf-8”>
因瀏覽器加載問題，js文件放在html下面
屬性值用雙引號包裹
引入css要指明rel=“stylesheet”
css的書寫規范
語法不區分大小寫，一般統一用小寫
不使用內聯式寫法
id和class屬性的值盡量語義化，可以用分隔符“_”
屬性值為0省略單位塊內容縮進，縮進使用tap進行縮進
屬性名冒號后加一個空格
編碼規范https://github.com/fex-team/styleguide/blob/master/css.md
chrome開發者工具
打開頁面，在頁面任意位置右鍵點擊檢查就打開了開發者工具
Elements：查看和編輯頁面中的元素，elements下看到的是html的結構
下面的styles里的內容是css樣式可編輯一般用于調試css樣式，styles右邊是和模型結構。
Elements左邊藍色部分點擊可切換網頁端或移動端
Console：是后臺打印結果，用于調試js;查看全局變量;在開發期間，可以使用控制面板記錄和診斷信息，或者使用它作為shell在頁面上與JavaScript交互
Sources：在源代碼面板中設置斷點來調試JavaScript，或者workspace連接本地文件來使用開發者工具的實時編輯器。在左側的腳本代碼編號，鼠標點擊即可添加斷點，添加斷點后，刷新網頁，程序運行到斷點即可看到斷點調式的狀態了。
Network：可以看到網頁加載的腳本和資源的時間，還可以看到某些不能加載成功的資源；
Resources里可以查看web程序跑起來后所加載的一些資源（Resources），包括圖片或者其他“值”，以及Cookies。
