css为什么叫层叠样式表
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为什么叫层叠样式表的更多相关文章
- 了解HTML CSS布局(层叠样式表)
CSS全称为"层叠样式表(Cascading Style Sheets)", 它主要是用于定义HTML内容在浏览器内显示的样式, 比如文字, 颜色, 视觉上的静态效果, 布局等等. ...
- Web 前端之HTML和CSS
Web 前端之HTML和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签 ...
- HTML+CSS知识点总结
转自:http://blog.csdn.net/qiushi_1990/article/details/40260447?utm_source=tuicool&utm_medium=refer ...
- CSS零基础学习笔记.
酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...
- 小白的CSS基础学习
CSS定义: CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式. CSS代码语法: css样式选择组成部分:选择符+声明( ...
- CSS基础介绍
CSS介绍 CSS是指层叠样式表,CSS样式表极大的提高了工作效率 CSS基础语法 1. 首先选择一个属性 2. 选择了属性以后,用大括号括起来 3. 括号里面是对应的属性和属性值,如: select ...
- Selenium - CSS Selector
Selenium - CSS Selector http://www.cnblogs.com/bugua/archive/2012/08/16/2641647.html 昨天我练习了用CSS(即层 ...
- CSS入门级学习
css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...
- 史上最全的HTML、CSS知识点总结,浅显易懂。
来源于:http://blog.csdn.net/qiushi_1990/article/details/40260447 一,html+css基础1-1Html和CSS的关系学习web前端开发基础技 ...
随机推荐
- Python介绍以及Python 优缺点
Python是先编译成字节码,然后在解释执行的一门语言,而不是单纯的解释型语言 Python应用场景: Web应用开发. 操作系统管理,服务器运维的自动化脚本, 网络爬虫 科学计算 桌面软件 游戏 服 ...
- vue父组件向子组件传递参数
父组件中引用的子组件 <pics :is-pics="showpics" // 这是我们要传递的参数 :is-product="productMsg" : ...
- 洛谷 1328 生活大爆炸版石头剪刀布(NOIp2014提高组)
[题解] 简单粗暴的模拟题. #include<cstdio> #include<algorithm> #include<cstring> #define LL l ...
- 多校 1010 Taotao Picks Apples(补题)
>>点击进入原题<< 思路:题解很有意思,适合线段树进阶 考虑每次修改不叠加,因此我们可以从如何对原序列进行预处理着手.通过观察可以发现,将原序列从任意位置断开,我们可以通过分 ...
- wannafly-day1 Problem B-Board
思路:这个题队友过的,我的思路是枚举行和列,将除了要求位置初始0,每行最小值相减,每列最小值相减,直到除了要求的位置,别的位置都为零,则那个位置取绝对值就行了,有点麻烦应该能过,但是他没有用我给的想法 ...
- 这个贴子的内容值得好好学习--实例详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化
感觉要DJANGO用得好,ORM必须要学好,不管理是内置的,还是第三方的ORM. 最最后还是要到SQL.....:( 这一关,慢慢练啦.. 实例详解Django的 select_related 和 p ...
- [poj2234]Matces Game_博弈论
Matches Game poj-2234 题目大意:n堆石子的Nim游戏,anti-SG. 注释:$1\le n\le 20$. 想法:用Colon定理即可.具体见:小约翰的游戏 最后,附上丑陋的代 ...
- FLASH BACK
overview of different flashback technologies flashback query(including flashback query, flashback ve ...
- 在SpringMVC中,当Json序列化,反序列化失败的时候,会抛出HttpMessageNotReadableException异常, 当Bean validation失败的时候,会抛出MethodArgumentNotValidException异常,因此,只需要在ExceptionHandler类中添加处理对应异常的方法即可。
在SpringMVC中,当Json序列化,反序列化失败的时候,会抛出HttpMessageNotReadableException异常, 当Bean validation失败的时候,会抛出Method ...
- 1. MaxCounters 计数器 Calculate the values of counters after applying all alternating operations: increase counter by 1; set value of all counters to current maximum.
package com.code; import java.util.Arrays; public class Test04_4 { public static int[] solution(int ...