02-CSS基础选择器5种

最新推荐文章于 2021-08-04 03:49:01 发布

乖女子@@@

最新推荐文章于 2021-08-04 03:49:01 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/qq_43260366/article/details/107677428

版权

CSS基础选择器

注意：
HTML中使用的注释是
CSS中使用的注释是/**/
1、标签选择器
1）样式
标签名 {
样式属性1：属性值1；
样式属性2：属性值2；
样式属性3：属性值3；
}
注：若写在head标签内要加<style></style>标签
2）定义：标签选择器是将HTML标签作为选择器，为相同的HTML标签设定相同的样式；
3）优点：能快速为页面中的相同标签统一样式；
4）缺点：不能设置差异化样式；
5）举例：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        div {
            color:gold;
        }
    </style>
    <style>
        span {
            color:greenyellow;
        }
    </style>
</head>
<body>
    <strong>标签选择器口诀</strong>
    <!--div是一个div显示一行-->
    <div>标签选择器，</div>
    <div>页面同选起。</div>
    <div>直接写标签，</div>
    <div>全部不放弃。</div>
    <!--span是所有span全部在一行显示-->
    <span>标签选择器</span>
    <span>页面同选起。</span>
    <span>直接写标签，</span>
    <span>全部不放弃。</span>
</body>
</html>

注意：<div></div>和<span></span>的区别；
2、类选择器
1）样式
[1].类名{
样式属性1：属性值1；
样式属性2：属性值2；
样式属性3：属性值3；
}
[2]在需要调用样式的地方 如<div class=”类名”></div>
注：若写在head标签内要加<style></style>标签
2）类名为自定义的，但是尽量不用纯数字、纯中文的类名，一般为英文名，见名知意；
3）优点：可以为元素对象定义单独或相同的样式，可选择一个或者多个标签。
4）**在一个标签内部只能有一个class;**
5)举例：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
    类选择器的口诀:
    <div>差异化选择，</div>
    <div>一个或多个。</div>
    <div>上面点定义，</div>
    <div>类名别写错。</div>
    <div>谁用谁调用，</div>
    <div class="red">class来做。</div>  
</body>
</html>

6）举例2：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google</title>
    <style>
        .blue {
            color: blue;
            font-size: 100px;
        }
    </style>
   <style>
    .orangered {
        color: orangered;
        font-size: 100px;
    }
    </style>
    <style>
        .orange {
            color: orange;
            font-size: 100px;
        }
    </style>
    <style>
        .green {
            color: green;
            font-size: 100px;
        }
    </style>
</head>
<body>
    谷歌google logo设计
    <br/>
    <br/>
    <!--不能用<div></div>因为div为块元素，一个div显示一行-->
    <span class="blue">G</span>
    <span class="orangered">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="orangered">e</span>
</body>
</html>

3、类选择器特殊用法-多类名
在logo设计中每个类选择器都有相同的一句话–font-size: 100px;，我们可以将其提取出来，写一个新的类样式；

.fontsize100 {
            font-size: 100px;
        }

但是写出来之后要想每个都调用那就要调用两个类选择器，但是一个标签只能有一个class----使用类选择器特殊用法；
1）作用：作用：可以给标签指定多个类名，从而达到更多的选择目的；
2）logo设置举例：

 <!--由于每个设计标签中都有font-size: 100px;可以将其提取出来单独做一个类-->
    <style>
        .fontsize100 {
            font-size: 100px;
        }
        .blue {
            color: blue;
          /*font-size: 100px;*/
        }
    </style>
   <style>
    .orangered {
        color: orangered;
         /*font-size: 100px;*/
    }
    </style>
    <style>
        .orange {
            color: orange;
             /*font-size: 100px;*/
        }
    </style>
    <style>
        .green {
            color: green;
             /*font-size: 100px;*/
        }
    </style>

 <!--不能用<div></div>因为div为块元素，一个div显示一行-->
    <!--一个标签只能由一个class标签，当需要使用两个类样式时--class="类名1 类名2"-->
    <span class="blue fontsize100">G</span>
    <span class="orangered fontsize100">o</span>
    <span class="orange fontsize100">o</span>
    <span class="blue fontsize100">g</span>
    <span class="green fontsize100">l</span>
    <span class="orangered fontsize100">e</span>

4、id选择器
1）样式(和类选择器类似)
[1]#id名{
样式属性1：属性值1；
样式属性2：属性值2；
样式属性3：属性值3；
}
[2]在需要调用样式的地方 如<div id=”id名”></div>
注：若写在head标签内要加<style></style>标签
2)和类选择器的区别：
类选择器：相当于人的名字，可以重复使用；
id选择器：相当于人的身份证号，不可以重复使用，一般用在页面唯一元素上。
5、通配符选择器
1）格式
* {
样式属性1：属性值1；
样式属性2：属性值2；
样式属性3：属性值3；
}
2）含义：所有的标签都使用这个形式(使用较少);
3）常用方式
* {
margin:0;
padding:0；
}
6、总结
在这里插入图片描述

乖女子@@@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02-CSS基础选择器5种

CSS基础选择器注意：HTML中使用的注释是CSS中使用的注释是/**/1、标签选择器1）样式标签名 {样式属性1：属性值1；样式属性2：属性值2；样式属性3：属性值3；}注：若写在head标签内要加<style></style>标签2）定义：标签选择器是将HTML标签作为选择器，为相同的HTML标签设定相同的样式；3）优点：能快速为页面中的相同标签统一样式；4）缺点：不能设置差异化样式；5）举例：<!DOCTYPE
复制链接

扫一扫