0.基礎
title屬性
當鼠標放在元素上時顯示提示盒子模型
內容content包裹一層padding
然后是border外辦再包裹一層margin配置背景圖片
background : red url() no-repeat center right 10%;
2.組合選擇器
1. id 選擇器
#para 選擇id=para
2. class 選擇器
.center 選擇class=center
p.center選擇 <p class=center>
3. 后代選擇器(以空格分隔)
div p 選取所有 <p> 元素插入到 <div> 元素
4. 子元素選擇器(以大于號分隔）
div>p 選擇了<div>元素中所有直接子元素 <p>
5. 相鄰兄弟選擇器（以加號分隔）
div+p 選取了所有位于 <div> 元素后的第一個 <p> 元素,緊挨著
6 后續(xù)兄弟選擇器（以破折號分隔）
div~p 選取了所有 <div> 元素之后的所有相鄰兄弟元素 <p> :
7. 屬性選擇器
7.1. [title] 所有包含標題title的所有元素
7.2. [title=abc] 屬性和值選擇器
7.3 attribute 屬性以 value 開頭
[attribute^=value] 屬性的前幾個字母是 value 就可以
7.4. attribute 屬性中包含 value
[attribute|=value] 屬性中必須是完整且唯一的單詞克锣，或者以 - 分隔
[attribute~=value] 屬性中包含獨立的單詞為 value
[attribute*=value]`屬性中做字符串拆分，只要能拆出來 value 這個詞就行
7.6 attribute 屬性以 value 結尾
-
[attribute$=value]屬性的后幾個字母是 value 就可以
7.7 class 多個屬性
- 兩個屬性中間有空格就是后代
- 沒有空格就是子代
- 正則表達式
// id=sections 后代div 的id以s開頭的所有元素背景設置為紅色；
#sections div[id^='s'] {
color: red;
}
4. 高級
1. 文本
| 名稱 | 注釋 |
|---|---|
| strong | 強調 |
| small | xiaohao |
| i | 斜體 |
| b | 粗體 |
| cite | 斜體引用 |
| q | 加引號抖锥，有bug |
| blockquote | 塊引用 |
| sup | 2 上標 |
| del | <del>刪除</del> |
| ins | <ins> love </ins> 插入袄简，下劃線 |
| code | <code>hello </code> |
| pre | 不刪除任何空格 |
2. 繼承
并不是所有樣式都可以繼承
字體會被繼承
所有背景相關都不會被繼承
每一個屬性都有是否可以繼承的默認值
3. position
元素可以使用的頂部，底部，左側和右側屬性定位赔硫。然而岩调，這些屬性無法工作巷燥，除非是先設定position屬性。他們也有不同的工作方式号枕，這取決于定位方法缰揪。
| 值 | 描述 |
|---|---|
| absolute | 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位堕澄。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定邀跃。離他最近的開啟了定位（position 不等于static）的祖先元素進行定位霉咨。如果都沒有定位元素，則相對于瀏覽器窗口拍屑。絕對定位開啟后會使元素提升一個層級途戒。 |
| fixed | 相對于瀏覽器窗口進行定位元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。不隨著滾動條滾動僵驰∨缯可以盯著一個地方看到。 |
| relative | 相對于其正常位置進行定位蒜茴。"left:20" 會向元素的 LEFT 位置添加 20 像素星爪。使元素提升一個層級 |
| static | 默認值。沒有定位粉私，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）顽腾。 |
| inherit | 規(guī)定應該從父元素繼承 position 屬性的值。難道寬度和高度也可以自己獲得嗎诺核？ |
absolute
4. display
| 名稱 | 理解 |
|---|---|
| block | 行級塊元素抄肖，相當于自動換行 |
| inline | 行內元素 |
| flex | 水平平均排列 |
5. background
| 名稱 | 理解 |
|---|---|
| background-color | 顏色 |
| background-image | 圖片 |
| background-repeat | 重復 |
| background-position | 位置 |
| background | 可以一次全寫，沒有順序和數量要求 |
6. 表格
| 名稱 | 理解 |
|---|---|
| colspan | 橫向合并單元格窖杀，在td里設置 |
| rowspan | 向合并單元格 |
| border-spacing | 邊框直接的距離 |
| border-collapse | 邊框合并漓摩，合并之后設置邊框距離就失效了。 |
| thead | 表頭入客，然后砸中間設置tr |
| tbody | 主題 |
| tfoot | 腳 |
7. input
| 名稱 | 理解 |
|---|---|
| name | 提交給服務器的時候的變量變量 |
| type | text,data,....buttom |
| value | 默認值 |
| checked | checked 默認選擇 |
| radio | 單選 |
| checkbox | 多選 |
| select | 下拉列表 |
| option | 單選管毙， |
| optgroup | 分組，label分組標簽 |
| textaera | 文本域 |
| label | for 指定表單input的id |
| fieldset | 給不同的輸入分組 |
| legend | 表單注釋 |
8. iframeset
不能和body同時出現在頁面中桌硫。
| 名稱 | 理解 |
|---|---|
| frameset | cols, rows |
| frame | src |
3.其他選擇器
3.1 偽類
| 名稱 | 理解 |
|---|---|
| :link | 沒訪問過的 |
| :visited | 訪問過 |
| :hover | 鼠標移入 |
| :active | 已經選中 |
| :focus | 獲取焦點 input |
| ::selection | 選中的元素,兩個冒號為p中選中的文字設置樣式 |
| ::-moz-selection | 火狐專用選中文字 |
- 注意: a標簽的偽類順序lvha
3.2 偽元素 選擇器
| 名稱 | 注釋 |
|---|---|
| :first-child | 這是是父類的第一個子元素 |
| :first-letter | 第一個子單詞 |
| :first-line | 第一行 |
| :before | 在指定元素開始標簽之后的時候添加內容夭咬，使用content指定插入內容 |
| :after | 指定元素結束標簽之前添加內容 |
| :nth-child(even) | 偶數個子元素 |
| :first-of-type | 該類的的一個 |
| :nth-of-type | 該類的的一個 |
| :not(選擇器) | 不要選擇個選擇器 |
-
選擇器優(yōu)先級
選擇器優(yōu)先級
當包含多個選擇器時，要先將選擇器優(yōu)先級加起來鞍泉，然后在比較皱埠。
多個相同的選擇器相加不會超過他的數量級。
優(yōu)先級相同的用后邊的咖驮。
當給樣式添加!important 超過內聯(lián)樣式移国，盡量避免使用拧廊，js也不能修改腮考。
