CSS selector 選擇符是我們進(jìn)行CSS網(wǎng)頁布局的基_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
CSS selector 選擇符是我們進(jìn)行CSS網(wǎng)頁布局的基礎(chǔ)。CSS selector到底有哪些,如何合理的運(yùn)用呢?選擇符可以分為三類,除了第一類HTML selector之外,其它兩類我們是可以自己命名的,在進(jìn)行命名時,注重包含語義,或者添加必要的注釋,使我們的代碼更清楚,易讀。
HTML selector 標(biāo)簽選擇符
HTML selector就是HTML的標(biāo)簽,如:DIV,TD,P,H1等等,如你用 CSS 定義了它們,在CSS文章所控制的頁面中這個標(biāo)簽的性質(zhì)就按照你的定義來顯示。
比如我們想叫H1的顏色是紅的,則:H1 {color: red}。這里我們學(xué)習(xí)一個CSS的特點(diǎn),它可定義好幾個 selector在一個rule里。如:H1, H2, TD {color: red}。這個定義就能讓所有的 H1, H2, 和 TD 的顏色都為紅色。在具體使用中,可以將幾個設(shè)置相同的屬于合并起來編寫,減小我們的代碼。
Class selector 類選擇符
Class selector有兩種,一種叫相關(guān) class selector,它跟一個 HTML 的標(biāo)簽有關(guān)系它的語法是tag.Classname {property:value}。如:我們想設(shè)置一些而不是全部 H1 的顏色是紅的 H1.redone {color: red}則:第一個 H1 是紅色的,而第二個就不是了。
第二種是獨(dú)立class selector。它可被任何 HTML標(biāo)簽所應(yīng)用。它的語法如下 .Classname {property:value}假如我們有下面這個定義.blueone {color: blue}那么我們可以把他應(yīng)用到不同的標(biāo)簽中去。非常明顯class selector 給了我們更多的自由與發(fā)揮的空間。
ID selector ID選擇符
ID selector 其實(shí)跟獨(dú)立 class selector 的功能很相似。而區(qū)別在于它們的語法和用法不同,以及對于 javascript 操縱 HTML元素有幫助。我們在布局中,對不同的結(jié)構(gòu)區(qū)域的定義,往往用ID選擇符。
它的語法如下#IDname {property:value}。假如我們有下面的定義#yelowone {color: yellow}。我們可以運(yùn)用這個定義到任何的有同樣 ID 名字的標(biāo)簽,如:text here你可能覺得既然 ID selector 和獨(dú)立 class selector 功能一樣,為什么兩者都存在呢?有 ID 的 HTML元素可以被JavaScript來操縱。
HTML selector 標(biāo)簽選擇符
HTML selector就是HTML的標(biāo)簽,如:DIV,TD,P,H1等等,如你用 CSS 定義了它們,在CSS文章所控制的頁面中這個標(biāo)簽的性質(zhì)就按照你的定義來顯示。
比如我們想叫H1的顏色是紅的,則:H1 {color: red}。這里我們學(xué)習(xí)一個CSS的特點(diǎn),它可定義好幾個 selector在一個rule里。如:H1, H2, TD {color: red}。這個定義就能讓所有的 H1, H2, 和 TD 的顏色都為紅色。在具體使用中,可以將幾個設(shè)置相同的屬于合并起來編寫,減小我們的代碼。
Class selector 類選擇符
Class selector有兩種,一種叫相關(guān) class selector,它跟一個 HTML 的標(biāo)簽有關(guān)系它的語法是tag.Classname {property:value}。如:我們想設(shè)置一些而不是全部 H1 的顏色是紅的 H1.redone {color: red}則:第一個 H1 是紅色的,而第二個就不是了。
第二種是獨(dú)立class selector。它可被任何 HTML標(biāo)簽所應(yīng)用。它的語法如下 .Classname {property:value}假如我們有下面這個定義.blueone {color: blue}那么我們可以把他應(yīng)用到不同的標(biāo)簽中去。非常明顯class selector 給了我們更多的自由與發(fā)揮的空間。
ID selector ID選擇符
ID selector 其實(shí)跟獨(dú)立 class selector 的功能很相似。而區(qū)別在于它們的語法和用法不同,以及對于 javascript 操縱 HTML元素有幫助。我們在布局中,對不同的結(jié)構(gòu)區(qū)域的定義,往往用ID選擇符。
它的語法如下#IDname {property:value}。假如我們有下面的定義#yelowone {color: yellow}。我們可以運(yùn)用這個定義到任何的有同樣 ID 名字的標(biāo)簽,如:text here你可能覺得既然 ID selector 和獨(dú)立 class selector 功能一樣,為什么兩者都存在呢?有 ID 的 HTML元素可以被JavaScript來操縱。
/所屬分類:Div+CSS教程/更新時間:2008-06-05
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對聯(lián)廣告不隨屏幕滾動的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級元素和內(nèi)聯(lián)元素
- 5個你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
猜你也喜歡看這些
- 三列自由式布局770-1024自適應(yīng)寬度!
- 用CSS打造評分星級效果的一個實(shí)例
- DIVCSS菜單:超炫的菜單一張圖片實(shí)現(xiàn)鼠標(biāo)的兩種狀態(tài)及CSS當(dāng)前頁效果
- 用背景圖片實(shí)現(xiàn)CSS柱狀圖表一例
- CSS實(shí)例:如何讓無空格的長字符在IE和FF下面實(shí)現(xiàn)自動換行?
- CSS如何實(shí)現(xiàn)單行圖片與文字垂直居中?
- 10個很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計展示
- CSS菜單:明快清新的格調(diào)闡述CSS當(dāng)前頁效果的實(shí)現(xiàn)
- CSS菜單實(shí)例:按鈕效果跳躍的藍(lán)色精靈
- CSS折疊菜單一例:可自由伸縮折疊
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-CSS selector 選擇符是我們進(jìn)行CSS網(wǎng)頁布局的基
。