3_基本选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        h1 {
            color: aqua;
            background: #3cbda6;
            border-radius:20px;
        }
        p{
            font-size: 30px;

        }
    </style>
</head>
<body>

<h1>学Java</h1>
<h1>你真帅！！！</h1>
<p>听狂神说</p>

</body>
</html>

结果展示

 

 

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        /*类选择器的格式:，class的名称{}
        好处，可以多个标签归类，是同一个class

        */

        .tuyin{
            color: maroon;
        }
        .xiaoming{
            color: aquamarine;
        }
    </style>
</head>
<body>

<h1 class="tuyin">标题1</h1>
<h1 class="xiaoming">标题2</h1>
<h1 class="tuyin">标题3</h1>

<p class="xiaoming">P标签</p>
</body>
</html>

结果展示

 

 

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器的格式：#id名称{}
        id必须保证全局唯一！
        不遵循就近原则，固定的
        id选择器>class选择器>标签选择器
        */
        #tuyin{
            color: #925242;
        }

        .style{
            color: aqua;
        }
        h1{
            color: #af0f66;
        }
    </style>
</head>
<body>

<h1 class="style" id="tuyin">标题1</h1>
<h1 class="style">标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

结果展示

 

posted @ 2022-08-05 18:18  tuyin  阅读(36)  评论(0)    收藏  举报