css全稱
Cascading Style Sheet （層疊樣式表）
CSS為HTML標(biāo)記語言提供了一種樣式描述翎卓，定義了其中元素的顯示方式贞瞒。
層疊
簡單的說偶房，層疊就是對一個元素多次設(shè)置同一個樣式，這將使用最后一次設(shè)置的屬性值军浆。例如對一個站點(diǎn)中的多個頁面使用了同一套CSS樣式表棕洋，而某些頁面中的某些元素想使用其他樣式，就可以針對這些樣式單獨(dú)定義一個樣式表應(yīng)用到頁面中乒融。這些后來定義的樣式將對前面的樣式設(shè)置進(jìn)行重寫拍冠，在瀏覽器中看到的將是最后面設(shè)置的樣式效果。
css有幾種引入方式
- 內(nèi)聯(lián)樣式
<div style="color:red; border:1px solid"></div>
- 內(nèi)部樣式
<head>
<style>
h1{
color:blue;
}
</style>
</head>
- 外聯(lián)樣式
<link type="text/css" rel="stylesheet" href="index.css">
- 導(dǎo)入樣式
<style>
@import url()
</style>
link和@import的區(qū)別
- 導(dǎo)入的語法不同
- link 和 import 語法結(jié)構(gòu)不同簇抵，前者 <link> 是 html 標(biāo)簽庆杜，只能放入 html 源代碼中使用， link 標(biāo)簽除了可以加載 CSS 外碟摆，還可以做很多其它的事情晃财，比如定義 RSS ，定義 rel 連接屬性等典蜕， @import 看作為 css 的樣式断盛，就只能加載 CSS 了
- 使用 link 方式，瀏覽器將 CSS 文件和 HTML 的主體部分一同裝載愉舔，所以顯示出來的頁面從開始就是帶樣式效果的钢猛；而采用 @import 方式，瀏覽器則會先裝載完整個 HTML 文件后再裝載 CSS 文件
- 當(dāng)使用 Javascript 控制 DOM 去改變樣式的時候轩缤，只能使用 link 方式命迈，因?yàn)?@import 眼里只有 CSS 贩绕，不是 DOM 可以控制的
- link 是 HTML 標(biāo)簽，無兼容問題壶愤； @import 是在 CSS2.1 提出的淑倾，低版本的瀏覽器不支持
以下幾種文件路徑什么意思?
css/a.css
相對路徑 當(dāng)前目錄下css下的a.css文件
./css/a.css
相對路徑 等同于css/a.css
b.css
相對路徑 當(dāng)前目錄下的b.css文件
../imgs/a.png
相對路徑 當(dāng)前目錄的父目錄下imgs下的a.png文件
/User/hunger/projects/css/a.css
絕對路徑 本地電腦下的a.css文件
/static/css/a.css
網(wǎng)站路徑 網(wǎng)站根目錄下 static目錄下的css目錄下的a.css文件
http: //cdn.jirengu.com/kejian1/8-1.png
網(wǎng)站路徑 在域名下的kejian1下的/8-1.png文件
如果我想在網(wǎng)站上展示一個圖片，需要怎么操作?
- 將本地圖片上傳到線上某個網(wǎng)址征椒，然后采用網(wǎng)絡(luò)路徑引用娇哆；
- 將本地圖片上傳到網(wǎng)站服務(wù)器，然后采用相對路徑引用勃救；
css 的一些書寫規(guī)范
- 使用 4 個空格做為一個縮進(jìn)層級碍讨，不允許使用 2 個空格 或 tab 字符
- 選擇器 與 { 之間必須包含空格
- 屬性名 與之后的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格
- 列表型屬性值 書寫在單行時蒙秒，, 后必須跟一個空格垄开。
- 每行不得超過 120 個字符税肪，除非單行不可分割溉躲。
- +、~ 益兄、 > 選擇器的兩邊各保留一個空格锻梳。
- 更多css書寫規(guī)范 ：https://github.com/fex-team/styleguide/blob/master/css.md
chrome 開發(fā)者工具
Elements(元素面板): 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的HTML净捅、CSS和DOM(Document Object Model)對象疑枯。此外，可以自由的操作DOM和CSS來迭代布局和設(shè)計(jì)頁面
Console(控制臺面板): 顯示各種警告與錯誤信息蛔六，并且提供了shell用來和文檔荆永、開發(fā)者工具交互。
Sources(源代碼面板): 主要用來調(diào)試js国章，設(shè)置斷點(diǎn)來調(diào)試 js具钥，或者通過Workspaces（工作區(qū)）連接本地文件來使用開發(fā)者工具的實(shí)時編輯器。
Network(網(wǎng)絡(luò)面板): 可以看到頁面向服務(wù)器請求了哪些資源液兽、資源的大小以及加載資源花費(fèi)的時間骂删，當(dāng)然也能看到哪些資源不能成功加載。此外四啰，還可以查看HTTP的請求頭宁玫，返回內(nèi)容等. 使用網(wǎng)絡(luò)面板了解請求和下載的資源文件并優(yōu)化網(wǎng)頁加載性能。
Performance(性能面板): 使用時間軸面板可以通過記錄和查看網(wǎng)站生命周期內(nèi)發(fā)生的各種事件來提高頁面的運(yùn)行時性能柑晒。 在 Chrome 57 之后時間線面板更名為性能面板.
Memory(內(nèi)存面板): 如果需要比時間軸面板提供的更多信息欧瘪，可以使用“配置”面板，例如跟蹤內(nèi)存泄漏. 在 Chrome 57 之后分析面板更名為內(nèi)存面板.
Application(應(yīng)用面板): 使用資源面板檢查加載的所有資源匙赞，包括IndexedDB與Web SQL數(shù)據(jù)庫佛掖，本地和會話存儲妖碉，cookie，應(yīng)用程序緩存苦囱，圖像，字體和樣式表脾猛。在 Chrome 52 之后資源面板更名為應(yīng)用面板.
Security(安全面板): 使用安全面板調(diào)試混合內(nèi)容問題撕彤，證書問題等等。
Audits(審計(jì)面板)：分析頁面加載情況 優(yōu)化前端頁面
