------------------------------------------------------------------------------------
层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程.
css之所以有“层叠”的概念,是因为有多个样式来源。
其中css样式来源有5个,分别是内联样式(<a style="">),内部样式(<style></style>),
外部样式(写在css文件中的样式),浏览器用户自定义样式,浏览器默认样式;
按照其来源优先级为内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式
按照选择器优先级为id >class>元素选择器
如果有important,important优先级最高。

------------------------------------------------------------------------------------

层叠指的是样式的优先级,当产生冲突时以优先级高的为准。
1. 开发者样式>读者样式>浏览器样式(除非使用!important标记 )
2. id选择符>(伪)类选择符>元素选择符
3. 权重相同时取后面定义的样式

以下是一段经典的html,三个类名分别为模块、标题和正文。
<div class="mod">
<div class="hd"></div>
<div class="bd"></div>
</div>
大部分html页面都可以由这种结构嵌套或者累加而成。

------------------------------------------------------------------------------------

个人理解:

先理解层的概念,一般我们认为一个DIV就是一层,多个DIV嵌套,就算是层叠,如下所示:

<div class="mod">第一层
    <div class="hd">第二层</div>
    <div class="bd">第二层
     <div class="bd2"></div>第三层
</div>
</div>

每一层都有一个class属性,即每层都会定义一个样式,综合起来,叫层叠样式表,这也是为什么现在流行的是DIV+CSS的样式更改,而抛弃table标签的含义。  

css为什么叫层叠样式表的更多相关文章

  1. 了解HTML CSS布局(层叠样式表)

    CSS全称为"层叠样式表(Cascading Style Sheets)", 它主要是用于定义HTML内容在浏览器内显示的样式, 比如文字, 颜色, 视觉上的静态效果, 布局等等. ...

  2. Web 前端之HTML和CSS

    Web 前端之HTML和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签 ...

  3. HTML+CSS知识点总结

    转自:http://blog.csdn.net/qiushi_1990/article/details/40260447?utm_source=tuicool&utm_medium=refer ...

  4. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  5. 小白的CSS基础学习

    CSS定义: CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式. CSS代码语法: css样式选择组成部分:选择符+声明( ...

  6. CSS基础介绍

    CSS介绍 CSS是指层叠样式表,CSS样式表极大的提高了工作效率 CSS基础语法 1. 首先选择一个属性 2. 选择了属性以后,用大括号括起来 3. 括号里面是对应的属性和属性值,如: select ...

  7. Selenium - CSS Selector

    Selenium - CSS Selector http://www.cnblogs.com/bugua/archive/2012/08/16/2641647.html   昨天我练习了用CSS(即层 ...

  8. CSS入门级学习

    css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...

  9. 史上最全的HTML、CSS知识点总结,浅显易懂。

    来源于:http://blog.csdn.net/qiushi_1990/article/details/40260447 一,html+css基础1-1Html和CSS的关系学习web前端开发基础技 ...

随机推荐

  1. BZOJ 2095 [POI2010]Bridges (最大流、欧拉回路)

    洛谷上有这题,但是输出方案缺SPJ..(而且我也懒得输出方案了) 题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2095 题解: 首先判 ...

  2. Java基础学习总结(87)——坚持写Java等技术类博客的好处

    1.加深对技术点的理解 每天写博客,可以加深对技术点的理解,假如工作中,对某个技术点运用的不熟,当你通过博客的形式写出来,这个过程中,遇到不懂的知识点,你就会查阅相关的资料,弄明白他. 2.自己日后用 ...

  3. ZOJ 1654 Place the Robots

    题目大意: 在空地上放置尽可能多机器人,机器人朝上下左右4个方向发射子弹,子弹能穿过草地,但不能穿过墙, 两个机器人之间的子弹要保证互不干扰,求所能放置的机器人的最大个数 每个机器人所在的位置确定了, ...

  4. Hero HDU4310 贪心

    When playing DotA with god-like rivals and pig-like team members, you have to face an embarrassing s ...

  5. [转] MySQL "replace into" 的坑 (5.5 ROW格式)

    MySQL 对 SQL 有很多扩展,有些用起来很方便,但有一些被误用之后会有性能问题,还会有一些意料之外的副作用,比如 REPLACE INTO. 比如有这样一张表: 1 2 3 4 5 6 7 8 ...

  6. Luca Canali

    https://github.com/LucaCanali http://cern.ch/canali/

  7. Docker创建PHP镜像

    Step: 1. 创建Dockerfile FROM php:7.0-apache RUN chmod -R 755 /var/www 2. 创建镜像 docker build -t docker_n ...

  8. 用 Arduino Uno 给 Arduino Mini(Pro)烧录程序

    用 Arduino Uno 给 Arduino Mini(Pro)烧录程序 准备 Arduino Uno Arduino Mini(Pro) 杜邦线若干 接线 首先去掉 Arduino 上的芯片ATM ...

  9. Python3基础(十二) 学习总结·附PDF

    Python是一门强大的解释型.面向对象的高级程序设计语言,它优雅.简单.可移植.易扩展,可用于桌面应用.系统编程.数据库编程.网络编程.web开发.图像处理.人工智能.数学应用.文本处理等等. 在学 ...

  10. 大话设计模式宏观总结——创建型&amp;结构型&amp;行为型

    师傅验收项目的时候.问大话设计模式那三种类型的差别和联系是什么,顿时我傻了眼.由于除了知道这三种类型分别如何称呼以外.从来都没想过为什么这样划分?于是,我便回答:我没想过这个问题.若是从字面上来理解的 ...