HTML 基本选择器

最新推荐文章于 2024-04-24 09:27:42 发布

蚂蚁的头发

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量2k

点赞数 3

分类专栏：选择器文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_65066169/article/details/127137869

版权

选择器专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基本选择器 : 标签选择器 , 类选择器 , ID选择器

1, 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        p{
            /*自由加属性和各种样式*/
            color: red;/*字体颜色*/
            font-size: 20px;/*字体大小*/
        }
    </style>
</head>
<body>

      <p>我叫徐英岳</p>


</body>
</html>

标签选择器是直接用标签然后在大括号里面写值,如上面我写的<p></p>标签

里面写值或样式,根据自己的需要加样式

}

图片展示如下

2.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .a{
            /*自由加属性和各种样式*/
            color: yellow;/*字体颜色*/
            font-size: 20px;/*字体大小*/
        }
    </style>
</head>
<body>

      <div class="a">
          我叫徐英岳
      </div>


</body>
</html>

使用类选择器的时候如上面我写的一个<div></div>的盒子里面加个class="a",

用class的a这个名字,名字前面一定要加点

.a{

里面写值或样式,根据自己的需要加样式

}

效果如下

3.id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #a{
            /*自由加属性和各种样式*/
            color: blue;/*字体颜色*/
            font-size: 20px;/*字体大小*/
        }
    </style>
</head>
<body>

<div id="a">
    我叫徐英岳
</div>


</body>
</html>

如果需要用id选择器如上我写的,<div></div>里面要加 id="你起的名字".我这里写的a,一定要加#号

#a{

里面写值或样式,根据自己的需要加样式

}

基本选择器 : 网页选择器核心
1.标签选择器: 直接拿标签名作为选择器的名字使用
作用: 当前网页中所有该标签都有效
2.ID选择器: 一个网页中指定一个效果只能用一次
写法: 给标签加 id="值",#值{声明};
3.类选择器:指定一个样式可以多次使用
写法:给标签加class="值", . 值{声明};

加油,我们明天见!!!!!!!!!