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