CSS引入选择器继承入门教程(一）
CSS文件的引入：
有如下常用的几种方法：
| 代码如下 | 复制代码 |
| 1、@import url(‘base.css’); (引入样式表) 2、<link rel="stylesheet" type="text/css" href="base.css" media="all" />（外链样式表） 3、<style type=”text/css” media=”all”> （内联样式表，一般位于header标签中） /* Css layout
*/ </style> 4、style=” margin:0px; ”（内联样式规则） | |
引入样式表：
使用这种方法之前，我们首先需要把我们的央视规则内容写在一个单独的以CSS为后缀名的文件当中。然后才能使用@import 引入这个CSS样式表文件。通常我们会把@import 写在一个使用
| 代码如下 | 复制代码 |
| <link rel="stylesheet" type="text/css" href="base.css" media="all" /> | |
这种方法引入的样式表文件当中或者如下这样写
| 代码如下 | 复制代码 |
| ：<style type=”text/css”> @import url(‘layout.css’);</style>。 | |
使用这种方法的好处是我们不需要为每个外部的样式表文件写上一句：<
| 代码如下 | 复制代码 |
| link rel="stylesheet" type="text/css" href="base.css" media="all" />。 | |
说能够减少带宽这种说法是骗人的，因为它始终会被加载进来，只不过是加载的时间不同！@import 会在页面body加载完成之后才会加载。所以在网速不太理想的情况下，使用！@import引入CSS样式表的页面开始加载的时候会显示的比较混乱，等待一段时间（也就是@import引入的CSS加载进来之后）页面才会正常的显示！
PS:@import引入的时候可以不写url，例如：@import ‘base.css’; 可以不加引号，样式表的路径可以是相对定位也可以是绝对定位，语句的末尾必须使用’;’进行结尾，不然会报错！@import引入的CSS样式表最好放在其它样式规则的前面，否则会发生覆盖的情况，出现一些奇怪的问题。
外链样式表：
这种链接样式的方式是我们通常最常用的方法！把页面样式规则文件写在不同的文件中，然后使用外链的方式把它们引入到页面当中。我们通常把<link rel="stylesheet" type="text/css" href="base.css" media="all" />语句放在<header></header>中。Link标签中的属性rel的值定义了样式表文件和页面的关系，有：
alternate -- 定义交替出现的链接
appendix -- 定义文档的附加信息
bookmark -- 书签
canonical -- 规范网页是一组内容高度相似的网页的首选版本
chapter -- 当前文档的章节
contents
copyright -- 当前文档的版权
glossary -- 词汇
help -- 链接帮助信息
index -- 当前文档的索引
next -- 记录文档的下一页.(浏览器可以提前加载此页)
nofollow -- 不被用于计算PageRank
prev -- 记录文档的上一页.(定义浏览器的后退键)
section -- 作为文档的一部分
start -- 通知搜索引擎,文档的开始
stylesheet -- 定义一个外部加载的样式表
subsection -- 作为文档的一小部分
此外A标签也有rel属性，所以也会有上面的这些值。这些信息只是稍作了解就行。不用完全记录。
Type属性定义文件的类型一般是text/css，告诉服务器或者需要识别的资源这个是CSS文件.
Href定义外链css文件的位置，可以使用url进行设置。
Media定义的是使用的平台或者说设备。默认情况是screen（浏览器），还可以有:print, projection(投影仪)，aural（扬声器），all(所有的设备)。
PS:有些情况下我们的页面会动态的更改CSS样式文件，我们可以为LINK标签加上一个ID属性，然后使用DOM进行替换href属性的值就可以了。
内联样式表：
<style type=”text/css”>
<!—
Body{
Margin:0;
}
à
</style>
早些的浏览器不能识别style标签会把样式规则显示到页面上，解决方法是为样式表加上<!---->注释标签，可以识别style的浏览器会直接忽略这个注释。
内联样式表中也可以使用@import引入样式表，当然也需要放在规则的第一行位置。
Css3中规定了style标签就是定义css文件的标签，所以我们不需要定义type=”text/css”属性和值了。
行内样式：
定义在html标签中的style属性当中的样式规则。此处定义的CSS样式表在比其它几种方式定义的规则的优先级要高，如果同一元素在不同地方定义了样式规则，此处的样式会覆盖其它定义的样式。
这种方式定义样式不符合我们设计页面的时候所要求的结构、表现、行为分离的元素，所以一般情况下不推荐使用。
我个人通常是使用前三种方式，第四种方式基本不去使用。我个人通常会把文件划分为如下几个部分：
Reset.css（重置页面元素）
golble.css（定义全局常用一般样式）
form.css（定义表单样式）
base.css（基本规则样式表）
然后使用@improt把reset.css,globle.css,form.css引入到base.css的文件当中。
然后再使用,link标签把base.css样式文件应用到html页面当中。
PS:样式表的优先级，行内样式>内联样式>外链样式>引用样式
您可能感兴趣的文章：
实例详解CSS的继承性及其应用
php入门教程(索引)
CSS引入选择器继承入门教程(一）
CSS List 入门教程
实例学习CSS中的优先权的问题
CSS样式表：详细介绍IE7新支持的选择器
jQuery 2.0.3 源码分析Sizzle引擎 – 高效查询
CSS :before 选择器
Jquery选择器实现隔行变色的代码一例
解析Javascript继承机制的设计思想