【html学习】CSS继承性、层叠性和特殊性

最新推荐文章于 2023-10-16 23:58:53 发布

星痕落雪

最新推荐文章于 2023-10-16 23:58:53 发布

阅读量813

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_43761222/article/details/105564906

版权

这里写目录标题

CSS继承性
CSS层叠性
- 层叠性的介绍
- 注意事项
css特殊性
- 常规选择器权重比值和计算方法。
- 特殊选择器

CSS样式具有3个基本特性：继承性、层叠性和特殊性。
继承性说明样式可以相互传递，层叠性说明样式可以相互覆盖，而特殊性则说明样式也可以特殊化处理。

CSS继承性

继承性的介绍

CSS继承性就是CSS允许结构的外围样式不仅可以应用于某个特定的元素，还可以应用于它包含的、可匹配的标签。
通俗说就是在HTML文档结构中，包含在内部的标签将拥有外部标签的某些样式。
就像java语言的继承一样。子类可以使用父类的方法和属性。

继承性的优点

CSS继承性最典型的应用就是在body元素中定义整个页面的字体大小、字体颜色等基本页面属性，这样包含在body元素内的其他元素都将继承该基本属性，以实现页面显示效果的统一。

<!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>
        /*继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性*/
        /*在CSS中以text-、font-、line- 开头的属性都是可以继承的。*/
        div{
            width: 80%;
            height:80%;
            /* color: red; */
            font-size: 32px;
            background-color: burlywood;
        }
        /*子元素也可以定义自己的样式*/
        span{
            font-style: italic;
            font-size: 12px;
            color: black;
        }
           </div>
</body>
</html>

并不是所有的属性都是可以继承的，

以下的元素都不能继承

边框属性
边界属性
补白属性
背景属性
定位属性
布局属性

不能继承的原因

：CSS继承性给网页设计带来很多便利，当然并不是每个CSS属性都可以继承的。为了防止继承性对网页设计的破坏性影响
示例：

<!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>
        /*继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性*/
        /*在CSS中以text-、font-、line- 开头的属性都是可以继承的。*/
        div{
            width: 80%;
            height:80%;
            /* color: red; */
            font-size: 32px;
            background-color: burlywood;
        }
        /*子元素也可以定义自己的样式*/
        span{
            font-style: italic;
            font-size: 12px;
            color: black;
        }
        /*超链接标签带有默认的字体颜色，不会继承父级的颜色样式*/
        div a{
            color: red;
        }
        /*h1-6标题标签的大小也是不能继承的*/
        h6{
            /* font-size: 3em; */
        }

使用继承的注意事项

继承是非常重要的，使用它可以简化代码，降低CSS样式的复杂度。
但是，如果在网页中所有元素都大量继承样式，那么判断样式的来源就会变得很困难，因此用户应该注意：对于字体、文本类属性等涉及网页中通用属性可以使用继承性。
例如，网页显示字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。其他属性就不要使用继承性来实现。

CSS层叠性

层叠性的介绍

CSS层叠性是指CSS能够对同一个元素或者同一个网页应用多个样式或多个样式表的能力

注意事项

CSS层叠性也会带来样式的冲突，如果多个样式声明的属性相同，但是样式效果不同，并且它们都被应用到同一个对象上，则这种层叠效果就会发生矛盾

<!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>
        /*继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性*/
        /*在CSS中以text-、font-、line- 开头的属性都是可以继承的。*/
        div{
            width: 80%;
            height:80%;
            /* color: red; */
            font-size: 32px;
            background-color: burlywood;
        }
        /*子元素也可以定义自己的样式*/
        span{
            font-style: italic;
            font-size: 12px;
            color: black;
        }
         </div>
</body>
</html>

css特殊性

CSS特殊性是指不同类型的选择器，
它们的优先级别的权重比是不同的。

常规选择器权重比值和计算方法。

标签选择器：权重值为1。
伪元素或伪对象选择器：权重值为1。
类选择器：权重值为10。属性选择器：权重值为10。
ID选择器：权重值为100。
其他选择器：权重值为0，如通配选择器等。

计算方法
然后，以上面权值数为起点来计算每个样式中选择
器的总权值数。则计算规则是：
统计选择器中ID选择器的个数，然后乘以100。
统计选择器中类选择器的个数，然后乘以10。
统计选择器中的标签选择器的个数，然后乘以1。
以此方法类推，最后把所有权重值数相加，即可得到当前选择器的总权重值，最后根据权重值来决定哪个样式的优先级大。

特殊选择器

一般情况下，常规选择器已经够用了，但是对于很复杂的页面样式来说，可能你想讲之前的所有样式都覆盖，那么就需要使用特殊手段了。
比如说CSS2.1称之为重要声明的!important标志
如果!important放在声明的任何其他位置，整个声明都将无效
示例全部代码

<!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>
        /*继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性*/
        /*在CSS中以text-、font-、line- 开头的属性都是可以继承的。*/
        div{
            width: 80%;
            height:80%;
            /* color: red; */
            font-size: 32px;
            background-color: burlywood !important;
        }
        /*子元素也可以定义自己的样式*/
        span{
            font-style: italic;
            font-size: 12px;
            color: black;
        }
        /*超链接标签带有默认的字体颜色，不会继承父级的颜色样式*/
        div a{
            color: red;
        }
        /*h1-6标题标签的大小也是不能继承的*/
        h6{
            /* font-size: 3em; */
        }
        /*若有多个选择器都作用于同一元素时，即多个选择器的范围发生了重叠，CSS该怎样处理？
         （1）若多个选择器定义的样式不发生冲突，则元素应用所有选择器定义的样式
          （2）若多个选择器定义的样式发生冲突（比如：同时定义了字体颜色属性），则CSS按选择器的优先级，
          让元素应用优先级高的选择器样式。
       */
        /*优先级:行内样式>ID样式>类选择器>标签选择器>继承样式>浏览器默认的样式*/
        /*!important可以提升优先级*/
         #div1{
            background-color:red;
            color:wheat;
        } 
        div div{
            color: darkorchid ;
        } 
         .d1{
           color: coral;
        } 
        /*1.内联样式，如: style=””，权值为1000。

2.ID选择器，如：#content，权值为100。

3.类，伪类和属性选择器，如.content，权值为10。

4.标签选择器和伪元素选择器，如div p，权值为1。 

5.继承样式，权值为0
*/
/*数标签：  
先数id,如果id相等再数类如果id不相等id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。
 
 （0,0,0,0）分别对应（行内式个数,id选择器个数,类选择器个数,标签选择器个数）
两个选择器通过对比4个数的大小，确定权重关系
怎么理解呢？
例如：#box ul li a.cur    1个id  1个类 3个标签  （0,1,1,3）
例如：.nav ul .active .cur  (0,0,3,1)

怎么比较大小呢：
先比较第一个数，两个都是0，所以对比第二个数，因为第一个选择器第二个数是1，而后一个选择器权重是0所以前面的选择器权重大。
*/

    </style>
</head>
<body>
    <div>
        <h6>CSS</h6>
        <a href="#">百度</a>
        <p>特性
            <span>继承</span>
        </p>
        <div id="div1" class="d1" style="color: yellowgreen;">你好</div>
    </div>
</body>
</html>

初学者一枚，大家多多关照，有错误可以在下面说出来
谢谢大家

星痕落雪

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【html学习】CSS继承性、层叠性和特殊性

CSS样式具有3个基本特性：继承性、层叠性和特殊性。继承性说明样式可以相互传递，层叠性说明样式可以相互覆盖，而特殊性则说明样式也可以特殊化处理。CSS继承性CSS继承性就是CSS允许结构的外围样式不仅可以应用于某个特定的元素，还可以应用于它包含的、可匹配的标签。通俗说就是在HTML文档结构中，包含在内部的标签将拥有外部标签的某些样式。就像java语言的继承一样。子类可以使用父类的方法和属...
复制链接

扫一扫