Web前端新人笔记之CSS结构和层叠
上一篇文章介绍了如何利用CSS选择器为元素应用各种丰富的样式,每个合法的文档都会生成一个结构树,了解这一点,就能根据元素的祖先、属性、兄弟等元素穿件选择器选择元素。
本篇文章将讨论3中机制之间的关系:特殊性、继承和层叠
特殊性
有的时候我们为同一个元素设置了不同的CSS
样式代码,那么元素会启用哪一个CSS
样式呢?
我们来看一下面的代码:
<style type="text/css"> p{ color:red; } .first{ color:green; } </style><p class="first">这是第一个段落</p>
在样式中p
和.first
都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css
样式的,权值高的就使用哪种css
样式。那接下来讲解权值的规则:标签的权值为:1;类的权值为:10;ID的权值为最高:100;
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/
重要性
有时某个声明可能非常重要,超过了其他声明。CSS2.1称之为重要声明,并允许在这些声明的结束分号之前插入!important来标示。
<style type="text/css"> p{ color:red!important; } p{ color:green; } </style> <p class="first">这是第一个段落</p>
这时p
段落中的文本会显示的red红色。
继承
特殊性对于理解如何向文档应用声明很重要,同样还有个很重要的概念就是继承,基于继承机制,样式不仅应用到指定的元素,还会应用到其后代元素。
<script type="text/css"> p{ color:red; } </script> <p>这是一个<span>悲伤地故事</span></p>
这里span是p的子元素。那么p的颜色改变那么其span的颜色也会相应改变;注:有些CSS样式是不具有继承性的。例如border;
<script type="text/css"> p{ border:1px solid red } </script> <p>这是一个<span>悲伤地故事</span></p>
在上面例子中它代码的作用只是给p
标签设置了边框为1像素、红色、实心边框线,而对于子元素span
是没用起到作用的。一般的,大多数框模型属性(包括外边距、内边距、背景和边框)都不能继承。
层叠性
<script type="text/css"> p{ color:red; } p{ color:green; } </script> <p class="first">这是一个<span>悲伤的故事</span></p>
最后p
中的文本会设置为green
,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。所以css
样式优先级就不难理解了:
内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。
Web前端新人笔记之CSS结构和层叠的更多相关文章
- Web前端新人笔记之CSS字体
本章内容是阅读CSS权威指南的一个小积累和随笔.新人必看,老鸟也可查看并指出不足指出以便后人阅读更好地理解.O(∩_∩)O谢谢!!!设置字体属性时样式变的最常见的用途之一:不过,尽管字体选择很重要,但 ...
- Web前端新人笔记之CSS值和单位
数字 颜色——命名颜色 在Css2.1中规范定义了17个颜色名.包括html4.0中定义的16个颜色及外加一个橙色: <h1 style="color=aqua">aq ...
- Web前端新人笔记之文本属性
前一段时间因工作时间减缓了更新笔记的时间.我也不知道有没有会观看并且能不能帮到一些初学者,这只是我的一些小随笔而已.当然我也希望的的每一篇随笔都可以帮到更多的想要学习前端开发的初学者们,更希望你们也可 ...
- Web前端新人笔记之jquery选择符
jquery利用了CSS选择符的能力,让我们能够在DOM中快捷而轻松的获取元素或元素集合.本章将介绍以下内容: 1.网页中的元素结构: 2.如何通过CSS选择符在页面中查找元素: 3.扩展jquery ...
- Web前端新人笔记之了解Jquery
与javaScript相比,Jquery更简洁.浏览器的兼容性更强,语法更灵活,对xpath的支持更强大.一个$符就可以遍历文档中各级元素.例:在页面上有一个无序列表,我们需要将所有列表项中的文本内容 ...
- Web前端新人笔记之height、min-height的区别
浏览器参照基准:Firefox, Chrome, Safari, Opera, IE: * IE6不支持CSS min-height属性.最小高度的定义:1. 元素拥有默认高度:2. 当内容超出元素 ...
- Web前端新人笔记之jquery入门
本章将为大家介绍以下几点内容: 1.jquery的主要特点: 2.建立jquery的编码环境: 3.简单jquery脚本示例: 4.选择jquery而不是纯javaScript的理由: 5.常用的jq ...
- Web前端新人笔记之HeightCharts基础
通常情况下,Highcharts包含标题(Title).坐标轴(Axis).数据列(Series).数据提示框(Tooltip).图例(Legend).版权信息(Credits)等,高级的还包括导出功 ...
- web前端开发笔记(1)
一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必 ...
随机推荐
- 实战:ORACLE SQL Performance Analyzer
通过 SPA,您能够依据各种更改类型(如初始化參数更改.优化器统计刷新和数据库升级)播放特定的 SQL 或整个 SQL 负载,然后生成比較报告,帮助您评估它们的影响. 在 Oracle Databas ...
- 辛星浅谈PHP的混乱的编码风格
我们都知道.各种编程语言都有自己的风格,即使是像C和C++那样一脉相承的语言(C++本意全然兼容C的语法).编程风格上还是有些区别.比方非常典型的就是C++风格的单行凝视和C风格的多行凝视. 而尽管J ...
- 安装Windows SDK7.1时发生的一个错误(附解决办法)
A problem occurred while installing selected Windows SDK components. Installation of the "Micro ...
- jbpm入门样例
1. jBPM的简介 jBPM是JBOSS下的一个开源java工作流项目,该项目提供eclipse插件,基于Hibernate实现数据持久化存储. 參考 http://www.jbos ...
- android开发问题汇总
android开发问题汇总 一. 无法创建新android项目 在eclipse创建新项目时出现: this template depends on the android support libra ...
- linux中的工具
远程连接linux的工具: 命令行: SecureCRT putty XShell(商业环境付费) 图形界面:WinSCP SecureFX 远程连接window服务器工具: FileZilla ...
- iOS 8创建交互式通知
iOS 8提供了一个令人兴奋的新API来创建交互式通知(interactive notifications),它能让你在你的应用之外为用户提供额外的功能.我发现网上还没有关于如何实现它的比较好的示例教 ...
- Android(java)学习笔记135:Android中assets文件夹资源的访问
Android资源文件分类: Android资源文件大致可以分为两种: 第一种是res目录下存放的可编译的资源文件: 这种资源文件系统会在R.java里面自动生成该资源文件的ID,所以访问这种资源文件 ...
- iOS之Git的使用
1.登录Git账号,创建一个新的仓库
- Android_Toast
xml文件: main1: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...