html,css基础9

最新推荐文章于 2024-09-30 08:51:48 发布

止语c

最新推荐文章于 2024-09-30 08:51:48 发布

阅读量63

点赞数

分类专栏： HTML和CSS学习之路文章标签： css

本文链接：https://blog.csdn.net/weixin_53333752/article/details/128387394

版权

HTML和CSS学习之路专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的继承概念，强调了继承在简化开发中的作用，以及哪些样式可以被继承。同时，详细讲解了选择器的权重，包括内联样式、ID选择器、类选择器和元素选择器等的权重计算，以及如何解决样式冲突。此外，还讨论了长度单位如像素和百分比，以及em和rem在响应式设计中的应用。最后，提到了颜色单位，如RGB、RGBA和HSL，帮助理解颜色设置的多样性。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p></p>
    <!-- 继承
        继承是发生在祖先和后代之间的
        继承的设计目的是为了方便我们的开发
        并不是所有的样式都会被继承，背景和布局相关的样式不会被继承
    样式的继承：为一个元素设置的继承会应用到他的后代元素中
 -->

    <!-- 选择器的权重
    当通过不同的选择器选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突
    发生样式冲突时，应用那个样式由选择器的权重决定
        选择器的优先级
        内联样式    1000
        id选择器    100
        类和伪类选择器10
        元素选择器  1
        通配选择器  0
        继承的样式  没有优先级
        比较优先级时，需要将所有的选择器相加计算最后优先级越高，则越优先显示
        如果优先级相同则使用靠下的样式
            可以在某一个样式的后面加！important，则该样式会获取到超过内联样式的最高的优先级
     -->

    <!-- 长度单位：
        像素
            不同屏幕的像素是不一样的，像素越小显示效果越清晰
            同样的像素在不同的设备下显示效果不一样
        百分比
            将属性值设置为相对于父元素属性的百分比
            可以使子元素随父元素的改变而改变
        
             -->
    <!-- 大小单位
        em
            em是相对于元素的字体大小来计算的
            1em = 1font-size
            em会根据字体的大小改变而改变
        rem
            rem是相对于根元素的字体大小来计算 -->
    <!-- 颜色单位
            CSS中可以直接使用颜色的英文名来设置对应颜色
            
        RGB值（red,green,blue）
            通过三种颜色的不同浓度来调制出不同颜色，浓度范围是0到255
            语法：RGB（红色，绿色，蓝色）
        RGBA
            在RGB的基础上加a值表示不透明度
        
        HSL值
            色相0-360
            饱和度 颜色的浓度0-100
            亮度 颜色的亮度0%-100%
            -->
  </body>
</html>