Web全栈-id选择器和类选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #identity1{
            color: red;
        }
        #identity2{
            color: green;
        }
        #identity3{
            color: blue;
        }
        #identity4{
            color: yellow;
        }
    </style>
</head>
<body>
<!--
1.什么是id选择器?
作用: 根据指定的id名称找到对应的标签, 然后设置属性

格式:
#id名称{
    属性:值;
}

注意点:
1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
2.在同一个界面中id的名称是不可以重复的
3.在编写id选择器时一定要在id名称前面加上#
4.id的名称是有一定的规范的
4.1id的名称只能由字母/数字/下划线
a-z 0-9 _
4.2id名称不能以数字开头
4.3id名称不能是HTML标签的名称
不能是a h1 img input ...
5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的
-->
<p id="identity1">迟到毁一生</p>
<p id="identity2">早退穷三代</p>
<p id="identity3">按时上下班</p>
<p id="identity4">必成高富帅</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .pp{
            color: red;
        }
        .ppp{
            color: green;
        }
        .pppp{
            color: blue;
        }
        .ppppp{
            color: yellow;
        }
        .para1{
            font-size: 100px;
        }
        .para2{
            font-style: italic;
        }
    </style>
</head>
<body>
<!--
1.什么是类选择器?
作用: 根据指定的类名称找到对应的标签, 然后设置属性

格式:
.类名{
    属性:值;
}

注意点:
1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在编写class选择器时一定要在class名称前面加上.
4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给CSS设置样式的
6.在HTML中每个标签可以同时绑定多个类名
格式:
<标签名称 class="类名1 类名2 ...">
错误的写法:
<p class="para1" class="para2">
-->
<p class="pp">迟到毁一生</p>
<p class="ppp">早退穷三代</p>
<p class="pppp">按时上下班</p>
<p class="ppppp">必成高富帅</p>

<p class="para1 para2">我是段落</p>
<p class="para1 para2">我是段落</p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器和class选择器</title>
    <style>
        /*这么写不好。语句很多是重复冗余的。*/
        /*
        .para1{
            color: red;
            font-size: 30px;
        }
        .para2{
            font-size: 30px;
            text-decoration: underline;
        }
        .para3{
            color: red;
            text-decoration: underline;
        }
        */
        .colorR{
            color: red;
        }
        .size30{
            font-size: 30px;
        }
        .line{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<!--
1.id和class的区别?
1.1
id相当于人的身份证不可以重复
class相当于人的名称可以重复
1.2
一个HTML标签只能绑定一个id名称
一个HTML标签可以绑定多个class名称

2.id选择器和class选择器区别?
id选择器是以#开头
class选择器是以.开头

3.在企业开发中到底用id选择器还是用class选择器?
id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式

4.在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可

-->
<!--
<p class="para1">第一段文字</p>
<p class="para2">第二段文字</p>
<p class="para3">第三段文字</p>
-->
<!-- 利用一个标签可以绑定多个类名 -->
<p class="colorR size30">第一段文字</p>
<p class="size30 line">第二段文字</p>
<p class="colorR line">第三段文字</p>
</body>
</html>
posted @ 2019-10-14 00:29  yindanny  阅读(1183)  评论(0)  编辑  收藏  举报