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. 服务器程序DEBUG

    服务器程序DEBUG 服务器端设定 Tomcat 默认我们启动Tomcat是使用下边的命令 ./catalina.sh start 如果想DEBUG的话,只需要加一个参数打开JPDA(Java Pla ...

  2. nginx+uwsgi+django+celery+supervisord环境部署

    前言 很久没更博客了,最近新写了一个小项目,后边有时间把一些心得放上来,先把环境的部署方式整理出来. 部署过程 先将环境的python升级为2.7 保证有pip 安装了nginx并配置 vim /Da ...

  3. flexbox简介

    flexbox简介 什么是flexbox flexbox是一种新的布局方式,这种布局方式是2009年W3C提出的方案.它可以简便,完整,完成页面的布局.目前,它已经得到所有浏览器的支持. 但是flex ...

  4. HTML5 Web 客户端五种离线存储方式汇总

    最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...

  5. 实现iOS图片等资源文件的热更新化(零): 序

    必要的序 以后在写系列文章,准备把基本的规划和动机等,单独作为一个小的序言部分给独立出来.序言部分,可以较为完整地交待系列文章的写作动机,所展示的编码技术可能的应用场景等.个人,我还是比较看重文章或者 ...

  6. Eclipse窗口总是在最前的解决办法

    Eclipse窗口总是在最前的解决办法 状况: Eclipse在偶然的情况下,会莫名其妙地保持在窗口的最前面,一直保持在最前:然后alt + tab,或者鼠标点击其他窗口.想切换/激活其他窗口时,根本 ...

  7. Javascript对象创建

    一.概述 虽然对象字面量可以用来创建对象,但在创建多个类似的对象时,不够优雅,不符合DRY原则. 二.创建对象 有以下几种模式: 1.工厂模式 2.构造函数模式 3.原型模式 4.组合构造函数和原型模 ...

  8. Insert Plain Text and Images into RichTextBox at Runtime

    Insert Plain Text and Images into RichTextBox at Runtime' https://www.codeproject.com/Articles/4544/ ...

  9. 获取 Chromium 源代码以及环境配置

    一.获取代码 a) 不下载代码,直接浏览,到这里:http://src.chromium.org/viewvc/chrome/ 或者这里:http://code.google.com/p/chromi ...

  10. WCF在编译出现 “错误 3 命令“时解决

    如果你遇到了下面问题解决方案很简单,以管理员身份运行VS就OK了. 错误 3 命令“ mkdir %SystemDrive%\inetpub\wwwroot\servicemodelsamples m ...