CSS系列:CSS的继承与层叠特性

1. CSS的继承特性

  所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影响父标记。

  CSS的继承贯穿整个CSS设计的始终,每个标记都遵循着CSS继承的概念。

  示例:

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <style type="text/css">
        h1 {
            color: blue;
            text-decoration: underline;
        }

        em {
            color: red;
        }
    </style>
</head>
<body>
    <h1>CSS继承<em>特性</em></h1>
</body>
</html>

  CSS效果:

2. CSS的层叠特性

  CSS的层叠特性可以简单的理解为“冲突”的解决方案。

  CSS优先级规则:行内样式 > ID样式 > 类别样式 > 标记样式。

时间: 2024-11-05 17:33:29

CSS系列:CSS的继承与层叠特性的相关文章

CSS media query应用中的层叠特性使用最佳实践

media query是css3规范中引入的,它提供了一种responsive design的基础机制:浏览器在不同size的设备中将以不同样式展现网页,这就给一个网页能够适应不同device一种可能.在实际使用中,我常常碰到以下问题:为什么media query的rule不起作用?很有可能和你的media query所处的位置有关,也很有可能和media query中的selector权重不 如外面的targeting到相同元素的css权重有关,比如: @media screen and (m

CSS设计指南之CSS三种机制:继承、层叠和特指

一.继承 CSS中的祖先元素也会向后代传递一样东西:CSS属性的值.body元素是所有元素的祖先,所有标签都是它的后代,比如为body元素设置一种字体,那么文档中的所有元素,无论它在层次结构中多么靠下,都将继承这些样式.CSS中有很多属性都可以继承,其中相当一部分都与文本有关. 二.层叠 层叠,就是层叠样式表中的层叠,是一种样式在文档层次中逐层叠加的过程.目的是让浏览器面对某个标签特定属性的多个来源时,确定最终使用哪个值. 1.样式来源 浏览器默认样式表:因为你还没有显示设置CSS属性,h1就会

直击css系列----Css、less和Sass(SCSS)

可能大家对于css还是比较了解了,但说到SASS和LESS还是很陌生,那么今天就跟我来一起了解一下CSS.LESS和SASS.   背景 CSS(层叠样式表)是一门非程序式语言,入门学习使用非常直观方便,但是对于一些比较复杂或者重用性比较强的项目来说,因为CSS没有变量.函数.SCOPE(作用域),需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码.为了方便前端开发的工作量,出现

1.6 CSS的层叠特性

作为本章的最后一节,这里主要讲解CSS的层叠属性.CSS的全名叫做“层叠样式表”,读者有没有考虑过,这里的“层叠”是什么意思?为什么这个词如此重要,以至于要出现在它的名称里. CSS的层叠特性确实很重要,但是要注意,千万不要和前面介绍的“继承”相混淆,二者有着本质的区别.实际上,层叠可以简单地理解为“冲突”的解决方案. 例如有如下一段代码,示例文件位于网页学习网CSS教程资源“第1章\16.htm”. <html> <head> <title>层叠特性</titl

CSS系列目录

1.  在HTML中引入CSS的方法 2.  CSS选择器 2.1 CSS3新增选择器 3.  CSS的继承与层叠特性 4.  CSS中盒子模型 5.  CSS中盒子之间的关系 6.  CSS中盒子的浮动与定位 7.  CSS文字样式 8.  CSS表格样式 9.  CSS3圆角样式

CSS特性: 继承 和 层叠

在css中也存在着继承关系,与面向对象的编程语言不同,css的继承很简单,而且主要指的是在CSS盒模型中,外围的盒子的样式会被内部所包含的盒子所继承.具体来了解一下. HTML元素之间存在一个"树型"关系,这个关系使得样式发生继承.1. 子元素会继承父元素的样式 2. 子元素可以定义自有样式 3. 子元素可以改变从父元素继承而来的样式 4. 子元素的样式不会反作用于父元素(继承是单向的) 5. 每个元素都遵循样式继承的概念. 6. 样式继承是一个抽象(抽象是提取共同点的方法)的过程,抽

CSS 选择器继承和层叠

CSS选择器及其继承特性.层叠特性1.基本选择器  标记  id  class  这个就不再作介绍了 2.复合选择器  交集 交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集 其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器,须连续书写 如,div.class 并集 并集选择器的结果是同时选中各个基本选择器所选择的范围,任何形式的选择器(包括 标记.类选择器.ID选择器)都可作为并集选择器的一部分,它们之间用逗号相连 如,div,class,h3,#nav

后端码农谈前端(CSS篇)第八课:继承与层叠

一.继承 继承:所谓CSS样式继承,就是子元素应用父元素的规则声明.(由这一特性,可将CSS属性分为可继承属性和非可继承属性.)可继承属性:属性值可由父元素继承给子元素的属性称之为可继承属性. 哪些属性是可继承属性? 1.文本样式属性 text-indent.text-align.word-spacing.letter-spacing.text-transform.text-decoration.direction.white-space 2.字体样式属性 font.font-family.fo

css中的继承、层叠、样式优先级机制

一.继承与层叠: 注: 可继承的样式: font-size font-family color ul li dl dt dd; 不可继承的样式:border padding margin width height ; 二.样式优先级机制: 1.css中的选择器有如下几类: 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p...) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器(li a) 7.通配符选