一、語法規則
選擇器{ 屬性1:屬性值1; 屬性2:屬性值2; ...... } /*注釋*/二、如何在html中應用CSS 1. 外部引用css文件
css文件:css/layout.css(css文件夾和HTML位于同一個目錄下)2. 內部嵌入css
3. 元素內部使用
三、選擇器 1. 基本選擇器 1)元素選擇器
a div body ul2)類選擇器
.ClassName 例如: .current3)ID選擇器
#IdName 例如: #top_nav4)普遍選擇器
*{ /*css代碼*/ }5)并且選擇器
選擇器1選擇器2 p.one#first6)并列選擇器
p,.one,#first
使用空格分割兩個選擇器, 例如 【parant son】2)子代選擇器
使用大于號分割兩個選擇器,例如 【parent > son】3)下一個兄弟選擇器
使用+分割兩個選擇器,例如 【li:first-child + *】4)之后所有兄弟選擇器
使用波浪線~分割兩個選擇器,例如【li:first-child ~ *】3. 屬性選擇器(過濾器)
配合基本選擇器進行篩選 selector[name] 選擇具有name屬性的元素、無論該屬性的值為什么 selector[name=val] 選擇具有name屬性的、并且name的值為val元素 selector[name*=val] 選擇具有name屬性的、并且name的值之一為val的元素 selector[name^=val] 選擇具有name屬性的、并且name的值以val開頭的元素 selector[name$=val] 選擇具有name屬性的、并且name的值以val結尾的元素 selector[name~=val] 選擇具有name屬性的、并且name的值包含val的元素4. 偽類選擇器
配合基本選擇器進行篩選1) 子元素
:first-child :last-child :nth-child(n)、: nth-last-child(n) :first-of-type :last-of-type :nth-of-type(n)、:nth-last-of-type(n) 注:n可以為元素的序號,也可以為特殊的字符,比如“odd”,“even2) 狀態
:hover、:active:、focus :enabled、 :disabled;:checked、 :default :invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range5. 偽元素選擇器
偽元素以"::"開頭,用在選擇器后,用于選擇指定的元素。
::after 常用于清除浮動,讓浮動的子元素將父撐起來。 例:#nav::after{ content = ""; display = block; clear = both; } ::before ::first-letter ::first-line ::selection
未完待續... ...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115948.html
一、語法規則 選擇器{ 屬性1:屬性值1; 屬性2:屬性值2; ...... } /*注釋*/ 二、如何在html中應用CSS 1. 外部引用css文件 css文件:css/layout.css(css文件夾和HTML位于同一個目錄下) 2. 內部嵌入css /*css代碼*/ 3...
摘要:一級聯概念級聯是的簡寫,說明級聯是非常重要的。二繼承中有些規則將會默認被子元素繼承,有些則不會。應用瀏覽器的默認樣式不設定,表現該規則本來特性,即如果該規則具有繼承屬性則繼承,否則不繼承。 一、級聯 概念:級聯(The cascade),CSS是Cascading Style Sheet的簡寫,說明級聯是非常重要的。從表層來看,級聯表明CSS規則的順序問題,但是級聯遠比這個復雜,在所有...
摘要:一級聯概念級聯是的簡寫,說明級聯是非常重要的。二繼承中有些規則將會默認被子元素繼承,有些則不會。應用瀏覽器的默認樣式不設定,表現該規則本來特性,即如果該規則具有繼承屬性則繼承,否則不繼承。 一、級聯 概念:級聯(The cascade),CSS是Cascading Style Sheet的簡寫,說明級聯是非常重要的。從表層來看,級聯表明CSS規則的順序問題,但是級聯遠比這個復雜,在所有...
閱讀 2885·2021-10-18 13:33
閱讀 840·2019-08-30 14:20
閱讀 2619·2019-08-30 13:14
閱讀 2510·2019-08-29 18:38
閱讀 2878·2019-08-29 16:44
閱讀 1205·2019-08-29 15:23
閱讀 3466·2019-08-29 13:28
閱讀 1909·2019-08-28 18:00