码迷,mamicode.com
首页 > Web开发 > 详细

HTML_css选择器

时间:2018-04-27 02:36:42      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:rip   meta   出现   增加   char   多个   har   方法   css选择器   

第二种增加css样式的方法,可以在head中增加style标签,style中通过选择器定位标签增加css样式

CSS选择器分为六种:

1、id选择器

2、class选择器
 
3、标签选择器
 
4、层级选择器(空格)
 
5、组合选择器(逗号)
 
6、属性选择器(中括号)
 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8 
 9         /*id选择器*/
10         #i1{
11             background-color: #0000CC;
12             width: 100px;
13             height: 50px;
14         }
15 
16 
17     </style>
18 </head>
19 <body>
20 
21 <div id="i1">id选择器</div>
22 
23 </body>
24 </html>

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8 
 9         /*class选择器*/
10         .c1{
11             background-color: red;
12             width: 100px;
13             height: 50px;
14         }
15 
16         /*为什么有id和class两种选择器?*/
17         /*id在html页面中,只允许出现1个同名id;但是class是可以重复的;*/
18         /*实际前端开发中,主要用class进行定位的,因为多个标签可以同时引用一个css样式*/
19 
20 
21     </style>
22 </head>
23 <body>
24 
25 <div class="c1">class选择器</div>
26 
27 </body>
28 </html>

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8 
 9         /*标签选择器*/
10         /*表示 这个页面下所有的div标签,都增加这个样式*/
11         div{
12             background-color: pink;
13             width: 100px;
14             height: 100px;
15         }
16 
17 
18     </style>
19 </head>
20 <body>
21 
22 <div></div>  /*标签选择器*/
23 
24 </body>
25 </html>

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8 
 9         /*层级选择器*/
10         /*表示div标签下的span标签使用这个样式*/
11         div span{
12             background-color: pink;
13             width: 100px;
14             height: 100px;
15         }
16 
17 
18     </style>
19 </head>
20 <body>
21 
22 <div>
23     <span>层级选择器</span>
24 </div>
25 
26 </body>
27 </html>

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8 
 9         /*id组合选择器 id i1 i2 i3 共用一套css样式*/
10         #i1, #i2, #i3 {
11             background-color: #0000CC;
12             width: 100px;
13             height: 100px;
14         }
15 
16 
17         /* 组合选择器 class s1 s2 s3 共用一套css样式*/
18         .s1,.s2,.s3{
19 
20         background-color: darkmagenta;
21 
22         height:48px;
23 
24         }
25 
26 
27         /*最常用:class层级选择器*/
28         .c2 span{
29             background-color:blue;
30             width: 100px;
31             height: 100px;
32         }
33 
34 
35 
36     </style>
37 </head>
38 <body>
39 
40     <!--id组合选择器-->
41     <div id="i1"></div><br>
42     <div id="i2"></div><br>
43     <div id="i3"></div>
44 
45 
46     <!-- class组合选择器 -->
47     <div class="s1"></div>
48     <div class="s2"></div>
49     <div class="s3"></div>
50 
51     <!--class选择器-->
52     <div class="c2">
53         <span>123</span>
54     </div><br>
55     <div class="c2">
56         <span>456</span>
57     </div><br>
58     <div class="c2">
59         <span>789</span>
60     </div>
61 
62 </body>
63 </html>

 

HTML_css选择器

标签:rip   meta   出现   增加   char   多个   har   方法   css选择器   

原文地址:https://www.cnblogs.com/testfan/p/8955400.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!