[你必须知道的css系列]第二回：HTML的救星CSS

　　CSS对HTML的作用我在[你必须知道的css系列]第一回：冠冕堂皇：CSS的作用及其基本结构 中稍微说了一点，这篇说下，如何让CSS文件正常的用于HTML页面及如何去管理CSS样式？

　　一、CSS引入到HTML文件中，是个基础简单的提一下

　　　　把CSS文件引入到HTML一般有下面几种方式，他们任何一种都其特有的作用：

1. 直接写在HTML元素的style属性中，通常称为行间样式。
2. 将样式写在<style></style>元素内，这称之为内嵌样式表。
3. 通过<link>方式外链CSS文件，称为外联样式表。
4. 通过@import关键字导入外部CSS样式文件，通过称之为导入样式表。

 

　　　　1):行间样式的应用范围很小，只对其设置的元素有效，而且优先级别极高，也不符合结构与表现分离的语义化思想，建议少用。

　　　　　　<strong style="color:Blue">加粗蓝色文字</strong>

　　　　2):内嵌样式表是将样式文件写入到<style></style>标签之内，一般适用于访问量比较大的页面以减少服务器的HTTP请求数而减少对服务器的负担，缺点是如果需要修改的话，就只能对页面进行修改。

　　　　<style type="text/css">

　　　　body{.....}

　　　　</style>

　　　　记得刚刚学CSS的时候，研究新浪的源代码，怎么也想不通，难道新浪的程序员水平这么低，不知道把样式表独立开，郁闷了我好长时间，这下可算明白了。

　　　　外联样式表可谓是目前使用最多也是这几种方式中较好的方式，将CSS文件独立开，统一管理方便修改。而且能够实现结构与表现的分离。

　　　　

<link href="demo.css" type="text/css" rel="Stylesheet" media="all" />

　　　　解释一下各个属性的意思：

　　　　　　rel:定义该标签关联的样式表标签;

　　　　　　href：定义该标签所链接的外部CSS文件的位置，可以是相对地址，也可以是绝对地址;

　　　　　　type:定义文档的类型;

　　　　　　media:定义调用样式文件的主要是什么设置。如screen是针对电脑显示器的，all是针对所有设置.....具体的查手册

　　　　导入样式表类似于外联样式表，都是利用外部CSS文件改变页面的表现的，但跟外联样式表有个不同的是，需要存在于样式表文件或者<style></style>之路使用@import导入。

        <style type="text/css">
        @import url("demo.css");
        </style>

　　　　在某abc.css文件中：

　　　　@import url("demo.css");

 导入样式表的主要优点体现在能在一个样式文件中再次导入其他样式表，可以降低HTML文档的复杂性，并允许在一个样式表中管理所有的样式表。导入样式表的方式必须放在样式表的最前面，否则它们可能无法正常运行。当同时导入多个样式表的时候，要考虑一下它的优先级问题。

　　二、样式表的规则、维护及管理

　　对于一些简单的小网站可能一个CSS文件就搞定了。但对于复杂点的站点，如何处理呢，这可能是我们关心的问题。

　　对CSS文件的规划方式将直接影响到后期对web站点维护的效率，对于大型的复杂站点一般将CSS文件分为两个部分：页面的全局定义及处理页面基本布局的CSS样式文件和处理细节方面的CSS样式文件。这样的话，在布局之后，很少需要再次更改而已结构，可以减少修改样式过程中意外地改动而破坏页面布局的可能性。

　　当然了对于处理细节方面的CSS文件可以再细分，如：处理表单，处理文字....都可以独立成一个样式表。但说实话如果项目不是特别大的话不建议这样分，虽然对后期的维护效率会有所提高，但是却增加了不必要的HTTP请求，增加服务器压力。这会影响到性能。

　　在编写CSS的过程中，未发布的站点之前可以在CSS文件中适当的添加注释，便于开发过程中的问题排查，正式发现之后，可以删除注释，减少文件的代码量。

　　　　　　

　　行了，这篇就讲到这里，很基本的东西，没啥技术含量。主要是为了整个系列的一个完整性，有必要介绍一下。大家有问题留言。