2022/7/10 第六组 王梦龙 学习记录

培训第三天

   学习内容

 

                CSS层叠样式表（网页美化）
                样式通常是存储在样式表中,把样式添加到html中

 

                定义css样式的方式
                行内样式（优先级、不需重复使用）
                内页样式
                标签选择器
                类选择器（声明一个样式，.+名字。用class调用）
                id选择器（#+名字）
            （类选择器优先级大于标签选择器大于id选择器）
          外部样式
              CSS选择器
              标签选择器
              类选择器
              id选择器
             并列选择器（名字，名字、名字 名字-包含、名字 > 名字-直接子标签、名字+名字-紧跟）
             属性选择器（[属性名字]/[属性名字=值/[名字属性～=某个词 某个词 某个词]）
             伪类选择器（link hover active visited）
             ():nth-child(n)选择第n个

 

        CSS层叠样式表
             层叠性：样式冲突，遵循就近原则，离结构近、样式不冲突则不层叠
             继承性：字标签继承父类
             权重：继承的样式权重最低、行内样式权重最高、!important无限大
             CSS常用单位
             px像素：绝对单位
             em：相对单位（参考父级元素）
             rem：相对单位（由页面决定）
             百分比：相对父级元素的比例

 学习重点

         各种选择器的使用规则

  学习记录

    

        div{
           height: 200px;
            width: 200px;
            border: 1px dotted black ;
            background-color: beige;
            /* 半径 */
            border-radius: 100px;
            margin: 10px auto;
            /* 边框线折叠 
                border-collapse: 0px;
            */
        }
 1 <style>
 2         /* p{
 3             background-color: aqua;
 4         } */
 5         .p1{
 6             background-color: blueviolet;
 7         }
 8        
 9         .p2{
10             background-color: aqua;
11         }
12         #p2{
13             background-color: beige;
14         }
15 
16     </style>
17 </head>
18 <body>
19     <!-- css行内样式 -->
20     <!-- <p style="background-color:green ;">这是一个块级元素</p>
21     <span style="background:red ;">这是一个行级元素</span> -->
22     <!-- 优先级从大到小：行内样式、ID选择器、类选择器、元素选择器 -->
23     <p class="p1 p2" id="p2">背景颜色</p>
24 </body>

学习心得

 

             今天学习了CSS,感觉很充实，即使以前学习过几次了，仍然能学到很多新知识。

比如各种选择器：除了常见的标签选择器，类选择器，ID选择器，还有属性选择器，伪类选择器，组合选择器等等。

每种选择器各有特色，优先级也不同，在页面排版，美化时选择更好的选择器，能更有效，更准确地对对应元素或属性进行操作。

 

posted on 2022-07-12 08:53  轮回dawd  阅读(26)  评论(0)    收藏  举报