css标签选择器，类选择器

最新推荐文章于 2024-05-12 21:28:34 发布

小鱼的池塘

最新推荐文章于 2024-05-12 21:28:34 发布

阅读量2.7k

点赞数

分类专栏：前端基础语言从学习文章标签： css 标签 class

本文链接：https://blog.csdn.net/haha_hello/article/details/54953035

版权

前端基础语言从学习专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一，类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-css类选择器.html</title>
    <!--
        类选择器,根据指定class找到对应的标签,然后设置属性
        1,格式:
        .类名{
                属性:值;
            }
        2,注意点:
        (1),class命名,不能以数字开头
        (2),class命名格式包括字母、数字、下划线
        (3),不能是标签的名称
        (4),在编写id选择器时,一定要在class前面加上.
        (5),在同一界面中class命名可以重复
        (6),class是专门给某个特定的标签设置样式的
        (7),在html中每个标签可以同时绑定多个class,但是id是唯一的
        格式:<标签名称 class="类名1 类名2 ...> </标签名称>"
    -->
    <style>
        .p1{
            color: red;
        }
        .p2{
            color: burlywood;
        }
        .p3{
            color: greenyellow;
        }
        .p4{
            color: cyan;
        }
        .para1{
            color: green;
        }
        .para2{
            font-size:50px;
        }
    </style>
</head>
<body>
<h1>成功法则</h1>
<p class="p1">迟到毁一生</p>
<p class="p2">早退穷三代</p>
<p class="p3">按时上下班</p>
<p class="p4">终成高富帅</p>
<br>
<p class="para1 para2">我是段落</p>
</body>
</html>

二，id类选择器和class选择器的比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-cssid选择器和class选择器.html</title>
    <!--
        1,id和class的区别
        (1)
        id相当于身份证号是不可以重复的
        class相当于人名可以重复
        (2)
        一个html标签只能有一个id名称
        一个html标签可以有多个class名称

        2,id选择器和class选择器的区别
        (1)
        id选择器是以#开头
        class选择器是以.开头

        3,在企业开发中到底是使用id选择器还是class选择器呢
        id一般是给js使用的,所以除了特殊情况,一般是不是使用id来设置样式的

        4,在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
        例如下面的代码
    -->

    <style>
        /*
        .para1{
            color: red;
            font-size: 30px;;
        }
        .para2{
            font-size: 30px;
            text-decoration: underline;
        }
        .para3{
            color: red;
            text-decoration: underline;
        }*/

        .coloR{
            color: red;
        }
        .size30{
            font-size: 30px;
        }
        .line{
            text-decoration: underline;
        }
    </style>
</head>
<body>

<!--<p class="para1">第一段文字</p>-->
<!--<p class="para2">第二段文字</p>-->
<!--<p class="para3">第三段文字</p>-->

<p class="coloR size30">第一段文字</p>
<p class="size30 line">第二段文字</p>
<p class="coloR line">第三段文字</p>
</body>
</html>

小鱼的池塘

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css标签选择器，类选择器

一，类选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>10-css类选择器.html</title> <!-- 类选择器,根据指定class找到对应的标签,然后设置属性 1,格式: .类名{ 属性:值
复制链接

扫一扫