CSS级联和继承
2016-11-06
《CSS入门经典》第七章
1.在HTML中使用CSS样式表的三种方式:
(1)内联的样式表。
eg:<em style="background-white">LIN</em>
(2)嵌入式样式表。
即在<head>标签内嵌入<style>标签及具体的样式设置内容。
(3)外部链接的样式表。
2.级联的顺序
(1)
首先要根据起源(origin)将规则分类。
具体优先顺序如下:
页面作者(author)设置的规则 > 用户(user)规则 > 浏览器(browser)规则
(2)
然后是基于选择符和特殊性的规则排序:
1.内联样式表的优先级最高。
2.id选择符,当有多个id选择符时,具有id选择符多的规则胜出。
3.如果没有id选择符,或者数量相同,那么规则中有最多类或伪类的规则有较高优先级。
4.如果类(或是没有类),那么规则中有最多元素数量的,优先级较高。
5.如果id,class,和元素数量都相同,则最近声明的原则有最高优先级。
(3)嵌入式样式表和外部链接样式表的优先级,当其他权重相当时,最近声明的规则优先级高。
即<head>标签中,link标签与style标签的先后顺序,第二个声明的优先级高。
3.级联和HTML属性
HTML中的align,color,face,vlink,background也会影响页面的外观。
<img> 标签的 align 属性定义了图像相对于周围元素的水平和垂直对齐方式。
HTML 4.01 不推荐使用 align 属性,XHTML 1.0 Strict DTD 不支持该属性,同时 HTML 5 也不再支持该属性。
color 属性规定 font 元素中文本的颜色。
在 HTML 4.01 中,不赞成使用 font 元素的 color 属性;在 XHTML 1.0 Strict DTD 中,不支持 font 元素的 color 属性。
请使用 CSS 代替。
CSS 语法:<p style="color:red">
[
<font> 规定文本的字体、字体尺寸、字体颜色。
eg:<font size="3" color="red">
This is some text!</font>
<font size="2" color="blue">
This is some text!</font>
<font face="verdana" color="green">
This is some text!</font>
在 HTML 4.01 中,font 元素不被赞成使用。
在 XHTML 1.0 Strict DTD 中,font 元素不被支持。
]
face 属性规定 font 元素中文本的字体。
eg:<font face="verdana"
>This is some text!</font>
在 HTML 4.01 中,不赞成使用 font 元素的 face 属性;在 XHTML 1.0 Strict DTD 中,不支持 font 元素的 face 属性。
请使用 CSS 代替。
CSS 语法:<p style="font-family: verdana">
vlink 属性文档中已被访问链接的颜色。
eg:<body vlink="red"
>
在 HTML 4.01 中,不赞成使用 body 元素的 vlink 属性;在 XHTML 1.0 Strict DTD 中,不支持 body 元素的 vlink 属性。
请使用 CSS 代替。
CSS 语法(在 <head> 部分):<style>a:visited {color: #FF0000}</style>
这些属性与css规则相冲突时,总是被css规则覆盖。
4.在规则中使用!important
用!important 指定的规则比其他规则都重要。
eg: em { color :bule !important;}
注意:用户首创的!important规则优先于作者的规则。
用户定义的样式表应该声明是!important。
5. @import规则,导入文件。
eg:h1 {color:red;}
@import url(“style.css”);
/*style.css*/
h1{color:green;}
以上代码,最终h1为红色。因为默认使用导入的样式表出现在原始样式表规则之前。
6.继承
(1)注意display,border,margin,padding属性是不继承的。
(2)background-color不是继承,在没有设置时,它的默认值是特别值transparent。
(3)继承相对值时,在传递给子代之前,首先计算该值。
(4)指定继承:inherit特殊值
eg:div .standout{ border :1px solid blue ;}
div .standout{ border:inhert;}
注意:css 1发行时,作者的!important样式优先于用户的!important样式。
css2中,用户的!important样式优先于作者的!important样式。
CSS级联和继承的更多相关文章
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
- 前端css优先级以及继承
1.css优先级以及继承 css具有两大特性:继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 有一些属性是可以继承下来 : color . fo ...
- css——样式的继承
css的样式继承 在上面这段代码中,p{}为父类,b{}为子类.b{}将继承p{}. 因为<b>在<p>里面,p{}为父类,b{}为子类. 继承方式: 如果子类没有,父类有,则 ...
- CSS札记(二):级联与继承
一.级联 概念:级联(The cascade),CSS是Cascading Style Sheet的简写,说明级联是非常重要的.从表层来看,级联表明CSS规则的顺序问题,但是级联远比这个复杂,在所有的 ...
- CSS_级联和继承
2016-11-06 <CSS入门经典>第七章 1.在HTML中使用CSS样式表的三种方式: (1)内联的样式表. eg:<em style="background-whi ...
- CSS 高级语法 ---- 继承和选择器的分组
1. 选择器的分组 ————————————————————————— 可以对选择器进行分组,被分组的选择器享用共同的声明. h1,h2,h3,h4,h5,h6 { color: green; ...
- CSS特性: 继承 和 层叠
在css中也存在着继承关系,与面向对象的编程语言不同,css的继承很简单,而且主要指的是在CSS盒模型中,外围的盒子的样式会被内部所包含的盒子所继承.具体来了解一下. HTML元素之间存在一个”树型“ ...
- css中的继承、层叠、样式优先级机制
一.继承与层叠:
- 举例详解CSS中的继承
CSS的继承是由所使用的样式属性定义的.换句话说,当你查看CSS属性backgruound-color,你会看到一栏「继承性」,也许你几乎没有在意过它,但是它还是十分有用的.什么是CSS继承 每一个元 ...
随机推荐
- JSP网站开发基础总结《三》
经过前两篇的总结,我想大家一定迫不及待的想学习今天的关于jsp与mysql的数据库连接的知识了.既然需要连接mysql数据库,你首先需要保证你的电脑已经安装过mysql数据库,mysql数据库的安装步 ...
- codeforces B. Pasha and String(贪心)
题意:给定一个长度为len的字符序列,然后是n个整数,对于每一个整数ai, 将字符序列区间为[ai,len-ai+1]进行反转.求出经过n次反转之后的序列! /* 思路1:将区间为偶数次的直接去掉!对 ...
- 解决jquery和prototype库冲突问题
在项目中同时引入了jquery.js和prototype.js两个文件,在方法调用时启了冲突. 我们在使用 jQuery 的过程中我们会频繁使用 $ 符号,$是JQuery的别名,所有使用$的地方也都 ...
- MyBaits学习
一:配置MyBaits的开发环境 1.1.核心配置文件 正如hibernate一样,MyBaits也有一个核心的配置文件,它包含着数据源地址,用户名,密码等,还有着各个实体类的配置文件,配置文件是xm ...
- APPSCAN使用外部浏览器
在使用appscan扫描时,自带浏览器可能存在兼容性问题(比如HTML5),故需要用到其他浏览器.在做139邮箱HTML5项目,需要使用chrome浏览器进行扫描.因此分享下如何使用外部浏览器,将之前 ...
- Azure Redis Cache (3) 创建和使用P级别的Redis Cache
<Windows Azure Platform 系列文章目录> 在笔者之前的文档里面已经说明了,Azure Redis Cache分为三个不同的级别: - 基本,Basic,不包含SLA ...
- 20个设计精致的用户界面 PSD 源文件免费下载
今天这篇文章收集了20个新鲜出炉的用户界面 PSD 源文件素材,你可以免费下载使用.这些免费素材不仅能帮助设计师们节省大量的时间,而且能有很好的效果.感谢那些很有才华的设计师分享它们的劳动成果,让更多 ...
- Struts2 源码分析——核心机制
MVC和三层的看法 通过上一章我们明白我们要学习的知识点和目标.所以这章我将从使用者来讲struts2的机制原理.我们都清楚的知道struts2的核心思想是MVC思想.MVC全名是Model View ...
- 音频文件解析(二):WAV格式文件波形绘制
解析WAV头部信息后,接下来就可以根据相关参数和DATA块数据绘制波形. 1.重新编码(转换为8bits,单声道数据) Public Function GetFormatData(ByVal pDat ...
- iis 不能访问json文件
我从网上查的资料,解决方案都是设置MIME 映射和“处理脚本映射”. 我按照网上的解决方案执行之后还没有解决我的这个问题,所以我想会不会是其他的原因. 在那么一瞬间,灵光一闪,我把json文件放到新建 ...