CSS继承与层叠案例

深碍√TFBOYSˉ_ 2022-12-15 03:55 207阅读 0赞

样式表的继承规则是子标记继承父标记的样式。  
div\{color:blue;font-weight:bold;\}

继承标记div的样式

CSS规定样式的优先级(从高到低)如下：  
行内样式﹥ id样式﹥类样式﹥ 标记样式  
案例:edu\_7\_3\_1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>CSS继承与层叠案例</title>
    <style type="text/css">
    body{
        font-size:12px;}
    .c1{
        font-size:28px;color:blue;
    font-family:"黑体";	}
    #p1,#p2{
        font-family:"幼圆";font-size:56px;}
    </style>
    
    
    
    <body>
    	这是 body 的文本内容。
    	<p>第一段 子标记p继承了父标记body的样式。</p>
    	<p class="c1">第二、三、四段都设置了 class="c1"。</p>
    	<p class="c1" id="p1">第三段设置了 id="p1"。</p>
    	<p class="c1" id="p2" style="font-family:'Arial Black';color:red;">行内样式 style="font-family:'Arial Black'; color:red;"，优先级最高。</p>
    </body>
    
    </html>

结果如图：  
![略][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpc3Nfc2NhcmVjcm93_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpc3Nfc2NhcmVjcm93_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/320370448a8e4ba69f6d36816d2ce223.png

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS继承与层叠案例

样式表的继承规则是子标记继承父标记的样式。 div\{color:blue;font-weight:bold;\} 继承标记div的样式

深碍√TFBOYSˉ_/ 2022年12月15日 03:55/ 0 赞/ 208 阅读

相关 CSS层叠与继承你知道吗？

CSS 层叠（Cascading）指的是某个元素会根据样式规则的优先级来设置某个元素的外观。层叠样式的优先级主要有三方面： 1. 根据样式域判断，是用户代理样式

约定不等于承诺〃/ 2022年10月19日 12:46/ 0 赞/ 226 阅读

相关【CSS】CSS之层叠性，继承性，优先级

层叠性样式发生冲突的时候，总是执行后边的样式，和调用顺序无关。继承性文字的所有属性都可以被继承 \-特殊：h1-h6 文字大小不能被继承 a标签文字颜色

本是古典何须时尚/ 2022年10月02日 14:50/ 0 赞/ 254 阅读

相关 CSS选择器,继承,层叠，权重

这节主要讲CSS选择器：最常用的有两种选择器：1 类型选择器（也称为元素选择器） p \{ color:black;\} 2 后代选择器（两者之间加空格）.firs

迈不过友情╰/ 2022年07月15日 04:56/ 0 赞/ 246 阅读

相关 CSS的继承，层叠和特殊性

1 继承 CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜

今天药忘吃喽~/ 2022年06月14日 01:19/ 0 赞/ 218 阅读

相关 CSS学习摘要-层叠和继承

当有多个选择器作用在一个元素上时，哪个规则最终会应用到元素上？其实这是通过层叠机制来控制的，这也和样式继承(元素从其父元素那里获得属性值)有关。元素的最终样式可以在多个

向右看齐/ 2022年05月23日 03:27/ 0 赞/ 277 阅读

相关 CSS的层叠与继承

层叠什么选择器在层叠中胜出取决于三个因素。重要性专用性源代码次序重要性 CSS中的`!important`语句可以使让一条规则总是优

淩亂°似流年/ 2022年05月11日 15:54/ 0 赞/ 271 阅读

相关 CSS三大特性——继承、优先级、和层叠。

继承：即子类元素继承父元素的样式。优先级：是指不同类别样式的权重比较。层叠：是说当数量相同时，通过层叠（后者覆盖前者）的样式。 CSS优先级排序：！importan

桃扇骨/ 2022年05月11日 00:22/ 0 赞/ 292 阅读

相关 CSS-继承和层叠

一: 继承面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面

悠悠/ 2021年10月23日 08:59/ 0 赞/ 375 阅读

相关 CSS的两个核心概念——层叠和继承

1、继承：是指应用在某个标签/元素上的`CSS`属性传递给了内部嵌套的标签。通常来说文本类的会被继承（字体、字号、颜色） chrome里面是灰色的表示没有继承 2、

傷城~/ 2021年06月26日 16:06/ 0 赞/ 459 阅读