選擇器及各樣式
語(yǔ)法：
| 選擇器 | 說(shuō)明 | 例子 |
|---|---|---|
| Class 類選擇器 | .+Class類的名稱；類名是區(qū)分大小寫。 | .postTitle {background-color: Green;} |
| 元素(標(biāo)簽)名稱選擇器 | 元素的名稱不區(qū)分大小寫。 | h2 {background-color:Green;} |
| 復(fù)合選擇器 | 元素名稱1,元素名稱2,#id,.ClassName ：可以根據(jù)元素的名稱、id、類名，使符合條件的元素共同擁有樣式;各選擇器條件要以分號(hào)(,)隔開(kāi)。 | h2 , #subid , .subclass {background-color:Green;} |
| 層次選擇器 | 父選擇器 子選擇器 ：滿足父選擇器下的子選擇器條件；兩者中間用空格隔開(kāi)。 | div input{background-color:Green} /* 表示div下的input子元素*/.showInfo_tabel tr{height:20px;} / * 表示table的class為showInfo_tabel時(shí)，下面的tr元素height屬性為20px */ |
| 偽類選擇器(類似狀態(tài)) | ①a:link 選擇所有未被訪問(wèn)的鏈接 ②a:visited 選擇所有已被訪問(wèn)的鏈接 ③a:active 選擇活動(dòng)鏈接 ④input:hover 鼠標(biāo)懸停上方的元素 ⑤input:focus 獲取到焦點(diǎn)的元素 |
a :link,:visited{color:Blue;} .btn_login:hover {background-color: #218fd5;} |
| 屬性選擇器 | 元素選擇器[屬性名稱="屬性值"] 可在其他選擇器上，再添加對(duì)屬性的匹配。 若要元素同時(shí)滿足多個(gè)屬性，可在屬性選擇器后面進(jìn)行追加：元素選擇器[屬性名稱1="屬性值"][屬性名稱2="屬性值"] |
textarea[readonly="readonly"]{ background-color: #EBEBEB;} .readOnlyBg input[type="text"][readonly="readonly"]{ background-color: #EBEBEB;} |
樣式調(diào)用方式：
- 外部樣式表
- 內(nèi)部樣表
- 內(nèi)聯(lián)樣式
樣式的優(yōu)先級(jí)：
當(dāng)一個(gè)元素附加許多級(jí)樣式時(shí)，比如：外聯(lián)樣式包含此元素、內(nèi)聯(lián)樣式也包含此元素等，樣式采用的是并集方式。
若有交集的元素，將按以下的情況決定采用哪個(gè)樣式屬性
- 非同級(jí)引用：外部樣式表、內(nèi)部樣式表、內(nèi)聯(lián)樣式都設(shè)置了此元素的某個(gè)相同樣式屬性。
- 內(nèi)聯(lián)樣式 > 內(nèi)部樣式表 > 外部樣式表
- 同級(jí)引用：在外部樣式表 或 內(nèi)部樣式表里 多個(gè)樣式選擇器包含了此元素
- 外部樣式表、內(nèi)部樣式表 情況下：Id選擇器 > class 類選擇器 >元素選擇器。
- 內(nèi)聯(lián)樣式情況下：采用后面同屬性樣式的值。
CSS HTML元素布局及Display屬性
HTML元素大題可分為內(nèi)聯(lián)(inline)元素和塊(block)元素。
| 元素類型 | 區(qū)別 |
|---|---|
| 內(nèi)聯(lián)元素(inline) | ①元素顯示方式："文本方式"，1個(gè)挨著1個(gè)，不獨(dú)自占有1行； ②內(nèi)嵌的元素也必須是內(nèi)聯(lián)元素：如 <a></a>,不能在里面嵌入<div></div>等塊級(jí)元素；③包含的標(biāo)簽有： <a>、<input>、<label>、<img> 等等； |
| 塊元素(block) | ①元素顯示方式：每個(gè)元素獨(dú)自占有1行，相當(dāng)于前后都帶有換行符； ②內(nèi)嵌的元素可以是內(nèi)聯(lián)或塊級(jí)元素； ③包含的元素有： <h1>~<h6>、<div>、<hr>等等； |
HTML 元素布局
原則：
- HTML元素在瀏覽器展示的方式是：從上到下，從左到右。
- 內(nèi)聯(lián)元素，是根據(jù)瀏覽器的寬度及自身的width寬度來(lái)填充。若當(dāng)前行剩余空白區(qū)域不夠，就會(huì)換至下一行。
- 塊級(jí)元素，根據(jù)內(nèi)聯(lián)元素的展示方式展示大概區(qū)域；當(dāng)瀏覽器的寬度減少時(shí)，會(huì)自動(dòng)擴(kuò)充塊級(jí)元素的height屬性的值，以容納內(nèi)嵌元素的展示。
默認(rèn)展示(未添加width和height屬性)改變?yōu)g覽器高度展示頁(yè)面：
塊級(jí)元素(div)增加了width屬性，改變?yōu)g覽器寬度展示頁(yè)面：
①當(dāng)塊級(jí)元素沒(méi)設(shè)置width屬性時(shí)，瀏覽器寬度的變更，會(huì)壓縮塊元素內(nèi)嵌元素的排版。
②設(shè)置塊級(jí)元素的width屬性時(shí)，瀏覽器的width屬性值變更，不會(huì)影響到塊級(jí)元素里的內(nèi)嵌元素的布局，他們(內(nèi)嵌元素)受父級(jí)塊級(jí)元素的影響。
適用范圍：導(dǎo)航條(導(dǎo)航條里有多個(gè)a標(biāo)簽，可放在一個(gè)div里，并給div附加width屬性；以免瀏覽器縮小，造成導(dǎo)航排版亂掉)；
CSS display
- none ：此元素不被顯示；
- block ：此元素按塊級(jí)元素顯示：前后帶換行符，自己占一行。內(nèi)聯(lián)元素 → 塊元素
- inline ：此元素按內(nèi)聯(lián)元素顯示：1個(gè)挨著1個(gè)。塊元素 → 內(nèi)聯(lián)元素
| 樣式 | 例子 | |
|---|---|---|
| display:block |  |
|
| display:inline |  |
CSS Position 定位屬性
Position 屬性：規(guī)定元素的定位類型。即元素脫離文檔流的布局，在頁(yè)面的任意位置顯示。
③fixed ：固定定位；類似于absolute，但不隨著滾動(dòng)條的移動(dòng)而改變位置。
④static ：默認(rèn)值；默認(rèn)布局。
| 布局方式 | 解釋 | 實(shí)例 |
|---|---|---|
| absolute | 絕對(duì)定位；脫離文檔流的布局，遺留下來(lái)的空間由后面的元素填充。定位的起始位置為最近的父元素(postion不為static)，否則為Body文檔本身。 |  |
| relative | 相對(duì)定位；不脫離文檔流的布局，只改變自身的位置，在文檔流原先的位置遺留空白區(qū)域。定位的起始位置為此元素原先在文檔流的位置。 |  |
| fixed | 固定定位；類似于absolute，但不隨著滾動(dòng)條的移動(dòng)而改變位置。 ①登錄框覆蓋層：如dz論壇的登錄。 ②虛假Q(mào)Q消息廣告。 |
 |
| static | 默認(rèn)值 |
- 滾動(dòng)條是否出現(xiàn):當(dāng)含有position屬性的元素為最邊緣元素時(shí)：
- absolute 和 relative ：含有此2個(gè)值的邊緣元素，瀏覽器縮小到此元素不可見(jiàn)時(shí)，會(huì)出現(xiàn)滾動(dòng)條。
- fixed ：含有此值的邊緣元素，瀏覽器縮小到此元素不可見(jiàn)時(shí)，不會(huì)出現(xiàn)滾動(dòng)條。
