資訊專(zhuān)欄INFORMATION COLUMN
摘要：編寫(xiě)靜態(tài)頁(yè)面時(shí)使用常見(jiàn)的元素樣式等使用語(yǔ)義化的元素樣式新增了很多語(yǔ)義化標(biāo)簽若與元素樣式，這兩個(gè)標(biāo)簽都是無(wú)語(yǔ)義化的表示十與標(biāo)簽是塊級(jí)元素獨(dú)占一行默認(rèn)的寬度為父級(jí)元素寬度的默認(rèn)的高度為作用用于布局元素是內(nèi)聯(lián)元素
一、input標(biāo)簽
1.實(shí)現(xiàn)按鈕效果
-與表單相關(guān)的按鈕效果
-
2.
二、基本選擇器
1.選擇器的優(yōu)先級(jí)別 通配符選擇器 < 元素選擇器 < 類(lèi)選擇器/屬性選擇器 < ID選擇器 2.元素選擇器 - 定位當(dāng)前頁(yè)面的指定標(biāo)簽名 ID選擇器 - 定位當(dāng)前頁(yè)面中指定ID屬性值的標(biāo)簽（只能匹配一個(gè)標(biāo)簽，無(wú)法重復(fù)使用） 類(lèi)(class)選擇器 - 定位當(dāng)前頁(yè)面中指定class屬性值的標(biāo)簽 通配符選擇器 - 匹配當(dāng)前頁(yè)面所有內(nèi)容 屬性選擇器 - [attr] - 匹配含有指定屬性(屬性名為attr)的標(biāo)簽(元素)。 3.優(yōu)先級(jí)別：內(nèi)聯(lián)樣式 > 外聯(lián)樣式。 4.!important 設(shè)置當(dāng)前內(nèi)容的選擇器的級(jí)別為最高; 注意 - 打亂CSS選擇器的默認(rèn)優(yōu)先級(jí)別順序; 建議 - 盡量不要使用.
三、關(guān)系選擇器
1.祖先與后代的關(guān)系 - 后代選擇器 A B 2.父級(jí)與子級(jí)的關(guān)系 - 子選擇器 A>B 3.相鄰兄弟選擇器 - 定位指定元素的下一個(gè)兄弟元素 A+B 4.后面兄弟選擇器 - 定位指定元素的后面所有兄弟元素 A~B
四、組合選擇器
1.組合選擇器 - 選擇器之間使用逗號(hào)隔開(kāi)，之間為并集如：
h1, h2, h3 {font-size: 18px;}
其中：標(biāo)題一
標(biāo)題二
標(biāo)題三
2.組合選擇器 - 選擇器之間沒(méi)有任何分隔，之間為交集
1） p#p1 { color: lightcoral; } 都選中
這是一個(gè)段落內(nèi)容.
這是一個(gè)段落內(nèi)容.
2） p.mini { font-size: 12px; } 只選中p元素。
標(biāo)題二
這是一個(gè)段落內(nèi)容.
五、顏色值
1.使用英文單詞描述顏色
-常用的顏色使用比較方便
-問(wèn)題
-比較特殊的顏色，表示比較麻煩
-不同瀏覽器對(duì)單詞描述的顏色存在色差
-建議 - 開(kāi)發(fā)中，盡量不要使用
2.顏色基本由三原色（紅、綠、藍(lán)）組成
-rgb(紅, 綠, 藍(lán))
-每個(gè)顏色值的范圍 - 0 ~ 255
- #紅綠藍(lán)
-每個(gè)顏色使用兩位表示
-值的范圍 00 ~ ff
-舉例
-#000000
六、偽類(lèi)
偽類(lèi) - 設(shè)定指定狀態(tài)下的樣式 標(biāo)簽鏈接 - 默認(rèn)樣式 未被訪問(wèn)的樣式 - 字體顏色為藍(lán)色 鼠標(biāo)懸浮在鏈接元素時(shí) - 鼠標(biāo)樣式變化 當(dāng)鼠標(biāo)點(diǎn)擊鏈接元素時(shí) - 字體顏色為紅色 已被訪問(wèn)的樣式 - 字體顏色變化 ：hover ：active ：visited ：link ：focus
七、偽元素
：：before ：：after等
八、塊級(jí)元素與內(nèi)聯(lián)元素
1.塊級(jí)元素
獨(dú)占一行（自動(dòng)換行） - 所有的塊級(jí)元素都是垂直排列的
| 九、語(yǔ)義化 所謂的語(yǔ)義化 -每一個(gè)指定的HTML元素， 具有明確的指定含義。 HTML編寫(xiě)靜態(tài)頁(yè)面時(shí) 1. 使用常見(jiàn)的HTML元素 + CSS樣式 - |
