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级联和继承的更多相关文章

  1. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  2. 前端css优先级以及继承

    1.css优先级以及继承 css具有两大特性:继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 有一些属性是可以继承下来 : color . fo ...

  3. css——样式的继承

    css的样式继承 在上面这段代码中,p{}为父类,b{}为子类.b{}将继承p{}. 因为<b>在<p>里面,p{}为父类,b{}为子类. 继承方式: 如果子类没有,父类有,则 ...

  4. CSS札记（二）：级联与继承

    一.级联 概念:级联(The cascade),CSS是Cascading Style Sheet的简写,说明级联是非常重要的.从表层来看,级联表明CSS规则的顺序问题,但是级联远比这个复杂,在所有的 ...

  5. CSS_级联和继承

    2016-11-06 <CSS入门经典>第七章 1.在HTML中使用CSS样式表的三种方式: (1)内联的样式表. eg:<em style="background-whi ...

  6. CSS 高级语法 ---- 继承和选择器的分组

    1. 选择器的分组 —————————————————————————   可以对选择器进行分组,被分组的选择器享用共同的声明.   h1,h2,h3,h4,h5,h6 { color: green; ...

  7. CSS特性： 继承 和 层叠

    在css中也存在着继承关系,与面向对象的编程语言不同,css的继承很简单,而且主要指的是在CSS盒模型中,外围的盒子的样式会被内部所包含的盒子所继承.具体来了解一下. HTML元素之间存在一个”树型“ ...

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

    一.继承与层叠:

  9. 举例详解CSS中的继承

    CSS的继承是由所使用的样式属性定义的.换句话说,当你查看CSS属性backgruound-color,你会看到一栏「继承性」,也许你几乎没有在意过它,但是它还是十分有用的.什么是CSS继承 每一个元 ...

随机推荐

  1. JSP网站开发基础总结《三》

    经过前两篇的总结,我想大家一定迫不及待的想学习今天的关于jsp与mysql的数据库连接的知识了.既然需要连接mysql数据库,你首先需要保证你的电脑已经安装过mysql数据库,mysql数据库的安装步 ...

  2. codeforces B. Pasha and String（贪心）

    题意:给定一个长度为len的字符序列,然后是n个整数,对于每一个整数ai, 将字符序列区间为[ai,len-ai+1]进行反转.求出经过n次反转之后的序列! /* 思路1:将区间为偶数次的直接去掉!对 ...

  3. 解决jquery和prototype库冲突问题

    在项目中同时引入了jquery.js和prototype.js两个文件,在方法调用时启了冲突. 我们在使用 jQuery 的过程中我们会频繁使用 $ 符号,$是JQuery的别名,所有使用$的地方也都 ...

  4. MyBaits学习

    一:配置MyBaits的开发环境 1.1.核心配置文件 正如hibernate一样,MyBaits也有一个核心的配置文件,它包含着数据源地址,用户名,密码等,还有着各个实体类的配置文件,配置文件是xm ...

  5. APPSCAN使用外部浏览器

    在使用appscan扫描时,自带浏览器可能存在兼容性问题(比如HTML5),故需要用到其他浏览器.在做139邮箱HTML5项目,需要使用chrome浏览器进行扫描.因此分享下如何使用外部浏览器,将之前 ...

  6. Azure Redis Cache (3) 创建和使用P级别的Redis Cache

    <Windows Azure Platform 系列文章目录> 在笔者之前的文档里面已经说明了,Azure Redis Cache分为三个不同的级别: - 基本,Basic,不包含SLA ...

  7. 20个设计精致的用户界面 PSD 源文件免费下载

    今天这篇文章收集了20个新鲜出炉的用户界面 PSD 源文件素材,你可以免费下载使用.这些免费素材不仅能帮助设计师们节省大量的时间,而且能有很好的效果.感谢那些很有才华的设计师分享它们的劳动成果,让更多 ...

  8. Struts2 源码分析——核心机制

    MVC和三层的看法 通过上一章我们明白我们要学习的知识点和目标.所以这章我将从使用者来讲struts2的机制原理.我们都清楚的知道struts2的核心思想是MVC思想.MVC全名是Model View ...

  9. 音频文件解析(二)：WAV格式文件波形绘制

    解析WAV头部信息后,接下来就可以根据相关参数和DATA块数据绘制波形. 1.重新编码(转换为8bits,单声道数据) Public Function GetFormatData(ByVal pDat ...

  10. iis 不能访问json文件

    我从网上查的资料,解决方案都是设置MIME 映射和“处理脚本映射”. 我按照网上的解决方案执行之后还没有解决我的这个问题,所以我想会不会是其他的原因. 在那么一瞬间,灵光一闪,我把json文件放到新建 ...