CSS选择器

前言

CSS选择器用于选择你想要的元素的样式的模式。

一、基础选择器

  1. 标签选择器(元素选择器)

<!DOCTYPE html>
<html>
<!-- 标签选择器:指用HTML标签名称作为选择器,为页面中某一类标签设置统一的CSS样式 -->
<!-- 语法:
        标签名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }或者
        元素名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
 -->
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
        /*设置p标签的属性*/
        p {
            color: red;
            font-size: 10px;
        }

        /*设置h1标签的属性*/
        h1 {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>段落一</p>
    <p>段落二</p>
    <h1>标题一</h1>
    <h1>标题二</h1>
</body>
</html>
<!-- 特点:能快速的为页面中同类型的标签统一样式。
     缺点:不能设计差异化样式。 
-->
  1. id选择器

<!DOCTYPE html>
<html>
<!-- id选择器:使用#(英文井号)标识,后面紧跟id名 -->
<!-- 语法:
        #id名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
     注意:id不能相同
        例:<p id = "p1"></p>
           <p id = "p1"></p>
           这种写法是错的,id如同编号,元素的id是唯一的,只能对应于文档中某一个具体的元素
 -->
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        /*设置id为p1的元素属性*/
        #p1 {
            color: blueviolet;
        }

        /*设置id为p2的元素属性*/
        #p2 {
            color: pink;
        }

    </style>
</head>
<body>
<p id="p1">段落一</p>
<p id="p2">段落二</p>
</body>
</html>

  1. 类选择器

<!DOCTYPE html>
<html>
<!-- 类选择器:使用"."(英文点号)进行标识,后面紧跟类名
    语法:
        .类名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    标签调用的时候设置属性 class = "类名" 即可。
-->
<head>
    <title>类选择器</title>
    <meta charset="UTF-8">
    <style type="text/css">
        /*设置类名为p1的标签属性*/
        .p1 {
            /*设置字体颜色*/
            color: red;
            /*设置字体粗细*/
            font-weight: bold;
        }

        /*设置类名为p2的标签属性*/
        .p2 {
            color: blue;
            font-weight: lighter;
        }

        /*设置所有类名为h1的标签属性*/
        .h1 {
            color: green;
        }
    </style>
</head>
    <body>
        <p class="p1">段落一</p>
        <p class="p2">段落二</p>
        <h1 class="h1">标题一</h1>
        <h1 class="h1">标题二</h1>
    </body>
</html>
<!-- 类选择器最大的优势是可以为元素对象定义单独或相同的样式 -->

id选择器和类选择器的区别

W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。

id选择器:就像人的身份证号码,全中国是唯一的,不得重复。

类选择器(class):就像人的名字,是可以多次重复使用的,比如张伟这个名字,全国不知道多少人。

  1. 通配符选择器

<!--通配符选择器用"*"号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。
语法:
    *{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
-->
<!--例如:使用通配符选择器定义css样式,清除所有HTML标记的默认边距。-->
    *{ margin: 0 ; padding: 0 ; }
<!-- 注意:这个通配符选择器,认识就行了,平时很少用到 -->
    

  1. CSS选择器命名规范

  • 见名知意:看见名字就知道是干嘛的

  • 长名称或者词组可以使用中横线来分割

  • 不建议使用"_"下划线来命名CSS选择器

  • 不要用纯数字、中文等命名,尽量使用英文字母来表示

  • 注:这些规范都是约定成俗的,不一定必须按照这个写,但是大家都愿意这么写

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值