day14-CSS选择器

一、引子

　　前面我们学习了html 的一些标签，大概20多个。下面我们开始学习CSS，衣服穿起来，

二、编写CSS样式

2.1、直接在标签上设置 style 样式

这样编写虽然感觉方面，

但是样式一多，1、代码凌乱，不整洁。

2、CSS代码不能重复利用，不高效。

1 <body>
2     <fieldset style="height: 200px;width: 300px;background-color: #dddddd">
3         <legend>登陆</legend>
4         <label for="user">用户名：</label>
5         <input type="text" id="user">
6         <br>
7         <label for ="password">密码：</label>
8         <input type="password" id="password">
9     </fieldset>

2.2、在head 里面编写　　

1 <style>
2         .c1{
3             background-color: #dddddd;
4             color: greenyellow;
5             height: 200px;
6             width: 300px;
7         }
8     </style>
9 </head>

这样样式虽然编写好，但是怎么应用到标签中呢？

有下面几种方式，编写CSS 样式，及对应方法应用到标签中。

三、CSS选择器

3.1、id选择器

说明：在head标签的style中设置 #id 设置样式，这个id对应的是标签的id，但是这个一般不用，因为我们的id是默认不重复的。

 1     <style>
 2         #i1{
 3             background-color: aliceblue;
 4             color: black;
 5         }
 6 
 7         .c1{
 8             background-color: #dddddd;
 9             color: greenyellow;
10             height: 200px;
11             width: 300px;
12         }
13     </style>
14 </head>
15 <body>
16     <fieldset style="height: 200px;width: 300px;background-color: #dddddd">
17         <legend id="i1">登陆</legend>
18         <label for="user">用户名：</label>
19         <input type="text" id="user">
20         <br>
21         <label for ="password">密码：</label>
22         <input type="password" id="password">
23     </fieldset>
24 </body>

3.2、class选择器

说明：在head标签的style中设置 .名称 样式，在标签中直接用class='名称'的方式使用样式。

这种方式经常使用，并且在标签中可以有多个样式重叠，之后内容中会介绍样式冲突，应用顺序等问题。

 1 <head lang="en">
 2     <meta charset="UTF-8">
 3     <title></title>
 4     <style>
　　/*编写样式 */

 5         .c1{
 6             width: 400px;
 7             height: 200px;
 8             background-color: #dddddd;
 9             color: blue;
10         }
11     </style>
12 </head>
13 <body>
14     <div class="c1">  <!--引用样式 -->
15         我老牛逼啦，你信你试试
16     </div>
17 </body>

效果：

3.3、标签选择器

说明：利用标签设置样式，这个作用是使此标签都使用这个样式。

直接通过标签名字应用，会应用到所有这个名称的标签中。

 1 <head lang="en">
 2     <meta charset="UTF-8">
 3     <title></title>
 4     <style>
 5         div{
 6             background-color: #dddddd;
 7             color: blue;
 8             height: 40px;
 9         }
10     </style>
11 </head>
12 <body>
13     <div>我很牛逼</div>
14     <span>我真的很牛逼啊，</span>
15     <h1>我无话可说</h1>
16 
17 </body>

3.4、层级选择器

说明：根据层级关系，选择某个标签下的所有标签使用该样式，层级之间用空格分开 

 1     <style>
 2         div span {
 3             height: 30px;
 4             background-color: #eeeeee;
 5             color: blue;
 6         }
 7     </style>
 8 </head>
 9 <body>
10     <div>
11         <span>
12             <a> 我老牛逼啦，不服你来试试。</a>
13             <h3>我是H3标签，我就试试我有没有样式</h3>
14             <span>所有这个层级的标签都有这个样式</span>
15         </span>
16     </div>
17 
18 </body>

注意：这里的标签可以是 class(.c1)、id(#id)、标签名(div)

3.5、组合选择器

 说明：就是多个标签使用一个样式，标签之间用逗号隔开

 1 <head lang="en">
 2     <meta charset="UTF-8">
 3     <title></title>
 4     <style>
 5         .c1,.c2,span{
 6             background-color: blue;
 7             color: white;
 8         }
 9     </style>
10 </head>
11 <body>
12     <div class="c1"> 我的样式 c1</div>
13     <div class="c2"> 我的样式 c2</div>
14     <span>我的样式 span</span>
15     <span> 其实都一样</span>
16 </body>

3.6、属性选择器

说明：根据标签的属性来设置样式  ，

注意了：这个属性是可以css自定义的，也可以是自己定义的。

 1     <style>
 2         input[n="n1"]{
 3             background-color: #eeeeee;
 4             color: blue;
 5             height: 30px;
 6         }
 7         span[name="n2"]{
 8             color: aqua;
 9         }
10     </style>
11 </head>
12 <body>
13     <input n="n1" type="text"value="我的样式根据属性设置"/>
14     <span name="n2">我的样式根据属性设置</span>
15 </body>

 

posted @ 2018-05-17 10:32  东郭仔  阅读(93)  评论(0)    收藏  举报