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. 仿SGI STL的traits技法

    首先是iterator traits,这个是用来萃取迭代器的特性的 #ifndef _STL_ITERATOR_H_ #define _STL_ITERATOR_H_ #include <cst ...

  2. Android Service小记

    Service 是Android 的一种组件,跟线程无关. Service 分两种启动方式 startService()和bindService() 两种都需要在Androidmanifest.xml ...

  3. Cocos2d-x 3.2 学习笔记（十四）保卫萝卜之界面UI

         保卫萝卜~上一篇说了使用CocoStudio制作主界面,这里来完善主界面动画及后续界面(主题界面ThemeUI.场景选择界面SelectMapUI),主要涉及的控件PageView. 学习要 ...

  4. Spark入门实战系列--6.SparkSQL（下）--Spark实战应用

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .运行环境说明 1.1 硬软件环境 线程,主频2.2G,10G内存 l  虚拟软件:VMwa ...

  5. 使用 CSS3 动画实现的 3D 图片过渡特效

    这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...

  6. Android监听来电和去电

    要监听android打电话和接电话,只需下面2步骤1.第一步,写一个Receiver继承自BroadcastReceiver import android.app.Service; import an ...

  7. js基础篇——localStorage使用要点

    localStorage主要用来替代cookie,解决cookie(可参考cookie使用要点)读写困难.容量有限的问题.localStorage有以下几个特点 1.localStorage是一个普通 ...

  8. 第16/24周 SQL Server 2014中的基数计算

    大家好,欢迎回到性能调优培训.上个星期我们讨论在SQL Server里基数计算过程里的一些问题.今天我们继续详细谈下,SQL Server 2014里引入的新基数计算. 新基数计算 SQL Serve ...

  9. HT for Web 3D游戏设计设计--汉诺塔（Towers of Hanoi）

    在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏. 汉诺塔的游戏规则及递归算法分析请参考http://en.wikipedia.org/wiki/Towe ...

  10. 能不能用javascript实现素数求和问题呢？

    先自己试试吧 好吧,下面这段代码用了别人所说的最笨的方法,身为小白的我只能呵呵.待会再尝试用其他算法. <!DOCTYPE html> <html lang="en&quo ...