CSS选择器示例

最新推荐文章于 2021-08-18 19:16:59 发布

7TribeZ

最新推荐文章于 2021-08-18 19:16:59 发布

阅读量222

点赞数 1

分类专栏： HTML，CSS

本文链接：https://blog.csdn.net/wildand/article/details/89526536

版权

HTML，CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        /*这里是全局申明*/
        * {
         text-align: center;
        }

        /*普通的标签选择器*/
        body{
            background-color:white;
            
            font-size: 12px;
        }
        h1{
            font: "黑体";
            font-size: 20px;
        }
     /*   这里是集体申明*/
        h1,p{
            color: red;
            font-size: 16px;

        }
        hr{
            width:200px;
        }
       /* 类名选择器*/
        .green{
            color: green;
        }
        .black{
            color:black;
        }        
        .blue{
            color: blue;
        }
        .left{
            text-align: left;
        }
        .one
        {
            font-size:30px;
        }

       /* ID选择器*/
        #pink{
            color:pink;
        }   
        #yellow{
            color:yellow;
        }
        /*这里是嵌套申明*/
        p span{
            color:red;
        }


        

    </style>
</head>
<body>
    <h1>web前端开发</h1>
    <h2>HTML</h2>
    <p class="green">超文本标记语言，<span>用于构建</span>网页结构</p>
    <hr />
    <h2>CSS</h2>
    <p class="black" id="pink">层叠样式表，用于构建网页样式</p>
    <hr />
    <h2>JS</h2>
    <p class="blue" id="yellow">javascript,脚本语言，用于构建网页行为</p>
    
    <!-- 这里是叠加引用，三个类叠加引用   id和类叠加引用-->
    <p class="one blue left" >这将是30px，蓝色字体，靠左对齐</p>    <p class="one blue left" id="yellow" >这将是30px，黄色字体，靠左对齐</p>
    <hr />
    
     
</body>
</html>

7TribeZ

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器示例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首页</title> <style> /*这里是全局申明*/ * { text-align: cen...
复制链接

扫一扫