1.CSS 認識
層疊樣式表 Cascading Style Sheets 是用來規定HTML文檔的呈現形式，簡單地說就是給網頁設置布局樣式，豐富網頁的呈現狀態，如果說吧HTML標簽比作詞組可以寫成作文，那么CSS就是字體,字體顏色,修飾詞,以及紙張背景等。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>標題</title>
<style type="text/css">
.p1{
color:red;
font-size: 54px;
}
</style>
</head>
<body>
<!-- 內容 -->
<p class="p1">添加了css樣式的段落</p>
<p>未添加css樣式的段落</p>
</body>
</html>
2.CSS 定義和使用
CSS樣式由一條或多條以分號隔開的樣式聲明組成，每條聲明包含著一個CSS和該屬性的值,屬性和值用冒號分割。
例：
color:red;font-size:54px
3.CSS 使用方式
內嵌樣式：直接在元素上應用樣式,使用全局屬性style定義。
<p style="color:red; font-size:54px">內嵌css樣式的段落</p>-
文檔內嵌樣式：上面的內嵌樣式用起來比較隨意，而且屬性優先級是最高的，但是如果要批量管理樣式的話就有些麻煩，比如需要將一個網頁中的所有段落的字體大小改成12px,那么如果一個一個去使用全局屬性style改的話效率太低了。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>標題</title> <style type="text/css"> p { color:red; font-size: 12px; } </style> </head> <body> <p>添加了css樣式的段落</p> <p>添加了css樣式的段落</p> <p>添加了css樣式的段落</p> <p>添加了css樣式的段落</p> <p>添加了css樣式的段落</p> </body> </html> <!-- 這樣就不需要一個個去修改了 只要是body中的 p標簽都會應用 定義的css樣式，在style中定義即可，而且一個style中可以定義多個選擇器(css樣式) --> -
外部樣式表：單獨以.css為文件擴展名定義的樣式表。
試想一下如果一套樣式要在多個網頁中進行使用的話，
那我們如果在每個HTML文檔中都定義相同的一個選擇器的話，
在開發中叫做代碼冗余，不是一個優秀程序員該有的習慣，
在編程的過程中，有一段代碼如果重復寫了兩次或考慮到此模塊的代碼可能在其他地方會用到的時候，
我們就要學會將其當獨封裝起來，便于我們后期重用。定義文件styles.css p { color:red; font-size: 12px; } a{ background-color:green; paddomg:5px } 導入外部樣式表： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>標題</title> <!-- 導入外部樣式表 --> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p >使用外部樣式 添加了css樣式的段落</p> <p >使用外部樣式 添加了css樣式的段落</p> <p >使用外部樣式 添加了css樣式的段落</p> <p >使用外部樣式 添加了css樣式的段落</p> </body> </html> -
樣式表中也可以導入其他的樣式表
使用@import 導入css名稱即可 使用@charset 可以聲明樣式表的字符編碼(如果不聲明的話默認是使用HTML的編碼) 定義文件styles2.css @import "styles.css" @charset "UTF-8"; spn { color:red; font-size: 12px; } 瀏覽器樣式：即一個元素未設置樣式時，瀏覽器應用在它身上的默認樣式，這些樣式會因為瀏覽器而略有差異，不過大體一致。
3.CSS 樣式的層疊和繼承
-
樣式層疊：即瀏覽器顯示元素時，元素的CSS屬性值應用的優先級。
(1)：元素內嵌樣式：用元素的群居屬性style定義的樣式 (2)：文檔內嵌樣式：定義在style元素中的樣式 (3)：外部樣式：用link元素導入的樣式 (4)：用戶樣式：用戶在custom.css中定義的樣式 (5)：瀏覽器樣式：瀏覽器應用的默認樣式 注意：把樣式屬性的值標記為中要(important)，可以改變正常的層次順序。 顯示的段落顏色是綠色。 p{ color:red | important; } <p style="color:green"> 這個段落會因雇傭important 的屬性</p> -
樣式沖突：如果有兩個同一層次的樣式，并且里面都有相同的屬性時，這個時候就要去解決沖突，解決沖突的前提是我們要了解瀏覽器默認是如何處理這些屬性的。
優先級： (1)樣式的尋則其中id值的數目 (2)選擇器中其他屬性和偽類的數目 (3)選擇器中元素名和為元素的數目 -
樣式繼承：瀏覽器在顯示某元素時，如果找不到其樣式屬性，那么就會遵循繼承機制。也就是使用父類元素的樣式屬性。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>標題</title> <style type="text/css"> div { color:red; font-size: 12px; } </style> </head> <body> <div ><p >添加了css樣式的段落</p></div> </body> </html> <!-- 運行 顯示P標簽中的樣式使我們定義的div 樣式，因為p是div的子元素--> <!-- 注意：并不是所有的屬性都可以繼承，只有與元素外觀(文字、顏色、字體等) 相關的樣式才會被繼承。 -->
5.CSS 單位
- 顏色
- 表示更復雜的顏色
| 函數 | 說明 | 示例 |
|---|---|---|
| rgb(r,g,b) | 用RGB模型表示 | color:rgb(112,128,144) |
| rgba(r,g,b,a) | 用RGB模型表示,外加一個用于表名透明度的α值(0表示 全透明,1表示完全不透明) | color:rgb(112,128,144) |
| hsl(h,s,l) | 用HSL模型表示(色相、飽和度和名度) | color:hsl(120,100%,22%) |
| hsla(h,s,l,a) | 用HSL模型表示,只是增加了一個透明度的α值 | color:hsla(120,100%,22%,0.4) |
- 絕對長度：像是世界的度量單位
| 單位標識符 | 說明 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 鎊(1磅=1/72英寸) |
| pc | pica(1pica=12磅) |
- 相對長度
| 單位標識符 | 說明 |
|---|---|
| em | 與元素字號掛鉤 |
| ex | 與元素字體的"高度掛鉤" |
| rem | 與根元素的字號掛鉤 |
| px | css像素(假如顯示設備的分辨率為96dpi) |
| % | 另一屬性的值的百分比 |
用法：
如果設置<P>標簽的高度是2em,那么他的高度就是其段落字體高度的兩倍。
em，ex，rm用法相同。
注意：px原本是相對單位，但是在實際使用中卻變成了絕對單位因此就沒那么靈活了，一般使用em的比較多。使用百分比要注意,并不是所有的屬性都能使用這個單位。
-
算式為值
這個了解一下即可,因為支持的瀏覽器并不多，用起來也比較麻煩 width:calc(80% - 20px); 角度
| 單位標識符 | 說明 |
|---|---|
| deg | 度(取值范圍: 0deg ~ 360deg) |
| grad | 百分度(取值范圍: 0grad ~ 400grad) |
| rad | 弧度(取值范圍: 0rad ~ 6.28rad) |
| true | 圓周(取值范圍: 1turn = 360deg) |
- 時間
| 單位標識符 | 說明 |
|---|---|
| s | 秒 |
| ms | 毫秒(1s = 1000ms) |
