css指層疊樣式表(cascading style sheets),也稱css樣式表或級聯樣式表,跟html一樣,也是一種標記語言。由於html的侷限性,網頁的內容只是單純的填充,沒有經過合理排布,樣式醜陋,而用css可以解決這個問題,用於美化網頁,包括設定頁面的文字內容(字型、大小、對齊方式等)、外形(寬高、邊框樣式、邊距等)、版面布局和外觀顯示樣式。
基本語法:
>
選擇器style
>
選擇器是用於指定css樣式的html標籤,花括號是對該物件設定的具體樣式。
**風格
樣式一般用展開格式書寫,一行乙個屬性,看起來更直觀
一般用小寫字母
冒號、選擇器後保留空格
1.基礎選擇器(單個選擇器)
(1)標籤選擇器——html標籤名作為選擇器
這種方式會把某一類標籤名全部選擇出來,能快速為頁面同型別的標籤統一設定樣式,但缺點是不能設計差異化樣式。
(2)類選擇器——單獨選擇乙個或幾個標籤
>
.類名style
>
中哪個標籤想使用這個樣式就在自己標籤後加乙個屬性class=「類名」,類名自定義,但最好有意義,便於後期維護修改,增加**可讀性。類名的命名規則:長名稱或片語可以使用中橫線來命名,不要用純數字、中文命名。
(3)id選擇器
>
#id名
style
>
id選擇器與類選擇器最大的區別在於使用次數上:類選擇器相當於乙個人可以有多個名字,同乙個名字也可以被多個人使用;id選擇器相當於人的身份證號碼,是唯一的,不可以重複使用。id選擇器一般用於頁面上唯一的元素上,經常和js搭配使用。
(4)萬用字元選擇器
萬用字元選擇器用於將頁面中所用的標籤進行統一修改。
>
*style
>
最常用於清除所有元素的內外邊距,因為在不同瀏覽器中,預設的各種邊距一般不同,為了避免在不同瀏覽器上網頁出現顯示誤差,一般在設定樣式前都要先將所有邊距全部清除一遍,由程式設計師重新統一設定。
>
*style
>
2.復合選擇器
復合選擇器是由兩個及以上的基礎選擇器通過不同方式組合而成,能夠更準確高效選擇目標元素(標籤)。
(1)後代選擇器(包含選擇器)
可以選擇父元素裡面的子元素,其寫法就是把外層標籤寫在前面,內層標籤寫在後面,中間用空格分隔。
>
<--! 表示元素1裡面所有的元素2,只選擇了元素2 -->
元素1 元素2
style
>
(2)子(元素)選擇器
與後代選擇器的區別在於:只能選擇某元素的最近一級子元素,即直接後代。
(3)並集選擇器
用於多組標籤選擇選擇相同的樣式。最後乙個選擇器不需要加逗號。
>
元素1,
元素2style
>
(5)偽類選擇器
用於向某些選擇器新增效果,比如給鏈結新增特殊效果,或選擇第乙個,第n個元素。
偽類選擇器
說明a:link
選擇所有未被訪問的鏈結
a:visited
選擇所有已被訪問的鏈結
a:hover
選擇滑鼠指標位於其上的鏈結(最常用)
a:active
選擇活動鏈結(滑鼠按下未彈起的鏈結)
例如下方的**可以實現將鏈結a設定成天藍色,如果將滑鼠移動到鏈結a上,會變成紅色。
>
aa:hover
style
>
>
href
="#"
>
我是空鏈結a
>
body
>
注意事項:
為了確保鏈結偽類選擇器能夠生效,要按照lvha順序宣告。
鏈結a在瀏覽器中具有預設樣式,直接對body進行整體修改是不會,這個涉及到優先順序的問題,以後會有說明。改變鏈結a,需要給鏈結單獨指定樣式。
>
input:focus
style
>
>
type
="text"
>
body
>
CSS學習筆記 選擇器
用過css的同志們都知道,選擇器是非常重要的,如果選擇器使用不當,即使你的css寫的再好,但是不知道要用在哪個元素上,這不是英雄無用武之地嗎?css,用過的都說好!最基本的選擇器,id選擇器,類選擇器這些大家早已心知肚明的就不在這裡贅述了,有那功夫趕緊研究一下把妹攻略 link,visited被稱為...
css選擇器學習筆記
概念 層疊樣式表 同乙個樣式都作用於同乙個元素 設定網頁外觀 注意 如果同乙個樣式同時作用於同乙個元素,最終樣式決定於樣式的優先順序 css選擇器 可以使css樣式與元素進行分離 作用 減少 冗餘 方便後期維護 語法 選擇器 注意 符號都是英文的,符號必須寫 行間樣式 語法 標籤名 style 樣式...
學習筆記 CSS選擇器
1 元素選擇器 1.id選擇器,2.類選擇器,3.標籤選擇器,4.萬用字元選擇器 2 關係選擇器 1.包含關係 e f e的所有f後代 2.子代選擇 e!important 內聯樣式 id 屬性 類 偽類 元素 偽元素 關係 萬用字元 繼承 瀏覽器預設屬性 內聯樣式 特殊性 1000 id 特殊性 ...