css選擇器設(shè)置標簽樣式的實例代碼
發(fā)布時間:2018-11-22 14:57:12 作者:佚名
我要評論

這篇文章主要介紹了css選擇器設(shè)置標簽樣式的實例代碼,需要的朋友可以參考下
css選擇器
在html標簽上設(shè)置style可以給標簽設(shè)置屬性:
<div style="background-color: #2459a2;height: 48px;">啊啊啊</div>
我們還可以通過<head>標簽里設(shè)置選擇器,這樣每種樣式只需要寫一遍
<head> <meta charset="UTF-8"> <title>Title</title> <style> <!--在這里寫選擇器--> </style> </head>
具體的選擇器有很多種:
1、通過id來復(fù)制樣式
#i1{ background-color: #2459a2; height: 48px; }
在body里的標簽這樣用:但id不能寫多個,所以還是不能多用
<div id="i1"></div> <div id="i1"></div>但id不能寫多個(不規(guī)范)
2、通過class來復(fù)制:
/*class選擇器:用class=c1來就可以復(fù)制這個樣式,同時避免了id必須統(tǒng)一的缺陷*/ .c1{ background-color: #2459a2; height: 60px; }
使用的時候:
<div class="c1">1251251</div>能寫多個 <div class="c1">1251253</div>能寫多個
3、標簽選擇器:把某一標簽都變成這個樣式:
標簽選擇器:把所有的div標簽變成黑底白字
div{ background-color: black; color: white; }
4、層級選擇器:中間是空格
層級選擇器:把span標簽里div標簽弄成這個樣式
span div{ background-color: black; color: white; } 層級:把c1里c2里的div設(shè)置成這個樣式 .c1 .c2 div{ background-color: black; color: white; }
5、組合選擇器:中間是逗號
<style> 組合選擇器:#或者.都可以實現(xiàn)組合 #i1,#i2,#i3{ background-color: black; color: white; } .c5,.c6,.c7{ background-color: black; color: white; } </style>
6、屬性選擇器:
<style> /*屬性選擇器:把type='text'的設(shè)成這個樣式*/ input[type='text']{ width: 100px; height: 200px; } 把自定義的n的值為s1的標簽設(shè)置成這個樣式 input[n='s1']{ width: 100px; height: 200px; } </style>
總結(jié)
以上所述是小編給大家介紹的css選擇器設(shè)置標簽樣式的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
- 下面小編就為大家?guī)硪黄獪\談html5標簽css3的常用樣式。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-20
- list_style屬性用于修改列表的屬性,list-style-type用于設(shè)置列表項類型,list-style-position用于設(shè)這列表項位置,list-style-image用于設(shè)置使用圖像替換列表項標記2014-07-29
- 在布局過程中為了某些需求,將html標簽在瀏覽器居中顯示是很常見的做法,下面有個不錯的示例,大家可以參考下2014-04-15
- list_style屬性用于修改列表的屬性,下面為大家介紹下CSS list-style屬性控制li標簽樣式的具體實現(xiàn),感興趣的朋友可以了解下2014-03-03
- 這篇文章主要介紹了CSS實現(xiàn)鼠標懸停改變其他標簽樣式的示例代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-19