CSS3学习笔记——常用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            将所有的段落设置为红色(字体)

           
           */
         /* 元素选择器
                作用:根据标签名来选中指定的元素
                语法:标签名{}
                例:p{}

          p{
             color: crimson;
         }
         h1{
             color:darkblue;
         }
          */

         /* 
         id选择器
            作用:根据元素的id属性值选中一个元素
            语法:#id属性值{}
            例子:#box{},#red{}
          

        #red{
            color: darkred;
        }
        */
        /* 
        类选择器(class选择器):
            作用:根据元素的class属性值选中一组元素
            语法:.class属性值

         .blue{
            color: blue;
         }
         */
        /*
            通配选择器
                作用:选中页面中所有的元素
                语法:*{} 
        
         *{
             color: blue;
         }
         */
    </style>
</head>
<body>
    <h1>我是标题</h1>
    <p>少小离家老大回</p>
    <p id="red">乡音无改鬓毛衰</p>
    <p class="blue">儿童相见不相识</p>
    <!-- 
        class是一个标签的属性,它和id类似,不同的是class是可以重复使用的
        我们可以通过class属性来为元素分组
        可以同时为一个元素指定多个class属性,多个class值之间使用空格隔开
     -->
    <p class="blue red">秋水共长天一色</p>

    <p>落霞与孤鹜齐飞</p>
    <p>笑问客从何处来</p>
</body>
</html>

本笔记是观看尚硅谷HTML5+CSS3时所作,仅供参考!

上一篇:cs61b实验记录(五)HW3、Lab10


下一篇:泡泡的学习小笔记之打印不同颜色字