网站内容及实现方式(用四种方法引入CSS样式表效果，让浏览器识别并正确调用CSS)

　　网站内容及实现方式(用四种方法引入CSS样式表效果，让浏览器识别并正确调用CSS)

　　我们都知道HTML和CSS是两种功能不同的语言，但是它们可以同时对一个网页产生影响，网页（webPage）=内容（html）+性能（css）+行为（javascript） . 因此，有必要将 CSS 引入 HTML 并一起使用。为了在浏览器中显示预期的 CSS 样式表效果，浏览器必须正确识别和调用 CSS。浏览器读取样式表时，应该按照文本格式来读取，而CSS样式表放置在不同的地方时，产生的效果范围也不同。在 HTML 中，引入 CSS 的方法主要有四种：inline、inline、import 和 link。

　　(1）内联样式

　　如何在网页中导入css

　　即在标记的style属性中设置CSS样式。这种方式本质上没有体现CSS的优点，所以不推荐。

　　(2）嵌入式

　　页面中各种元素的设置写在中间。对于单个页面，这种方法非常方便。不过这种方法的使用要少得多，最长的大概就是访问量最大的门户网站了。或者访问量更大的公司网站的主页。与第一种方法相比，优点突出，缺点也很明显。优点：速度快，所有的CSS控件都是针对这个页面的标签，没有多余的CSS命令；此外，无需链接 CSS 文件。直接在 HTML 文档中读取样式。缺点是修改比较麻烦，单个页面显得臃肿，CSS不能被其他HTML引用，导致代码量比较大，维护起来比较麻烦。但大多数采用这种方法的公司都是有钱人。

　　(3）简介

　　(4）已链接

　　导入和链接几乎相同，因为 CSS 文件是从外部导入的。但是，当客户端用户浏览网站时，链接类型的效果更好。

　　链接可以说是现在主流的引入方式。就像IE和浏览器一样。这也是最能体现CSS特性的方法；最能体现DIV+CSS中内容和显示分离的思想，也最容易修改和维护，代码看起来最漂亮。

　　如果要使用javascript动态确定导入哪个css文件，必须使用连接类型来实现。大多数网站仍然喜欢使用链接来引用外部 CSS。

　　导入和链接的区别： 1、导入：加载整个页面后，才会加载CSS文件。对于某些浏览器，在某些情况下，如果网页文件的大小比较大，会先出现一个没有样式的页面，然后闪烁后出现设置样式的效果。从观众的经验来看，这是*敏*感*词*风格的缺陷。

　　2、链接样式：在页面主要部分加载之前加载CSS文件，使显示的网页从一开始就有样式效果。

　　对于一些比较大的网站，为了方便维护，你可能想把所有的CSS样式都归类到几个CSS文件中，所以如果使用级联导入，就需要用几条语句分别导入CSS文件。如果要调整CSS文件的分类，需要同时调整HTML文件，这是维护工作的缺陷。如果使用导入方式，则只能导入一个总的CSS文件，然后在这个文件中导入其他独立的CSS文件；但是链接类型没有这个功能。

　　所以给大家的建议是：如果只需要导入一个css文件，就使用link方式，如果需要导入多个css文件，先用link方式导入一个“目录”的css文件，然后使用这个“目录” CSS 文件 导入其他 CSS 文件。

　　链接和@import的区别

　　引用链接的定义

　　HTML 和 XHTML 都具有允许网页作者添加与 HTML 文档相关的附加信息的结构。这些附加资源可以是样式信息 (CSS)、导航辅助、另一种形式的信息 (RSS)、联系信息等。

　　引用 @import 的定义

　　指定导入的外部样式表和目标设备类型。其实link和@import最根本的区别就是link是HTML的标签，@import是CSS的标签。link除了可以调用CSS之外，还可以有声明页面链接属性、声明目录、rss等其他功能，而@import只能调用CSS。如果单独从外部引用CSS，它们的功能基本相同，只是上面的boss不同。

　　哪个更好，链接或导入？

　　上面说了，因为上面的boss不同，使用上会有一些细节上的差异。不能说一般谁好，只能具体分析。

　　1、如果你想使用javascript进行样式选择：

　　这时候就需要用到link了，因为ink是一个html元素，可以用javascript来控制dom元素来达到改变样式的效果。

　　2、如果要应用打印样式；

　　顾名思义，打印样式就是打印页面时的样式。

　　该样式在正常浏览下没有效果，只有在打印时才生效。

　　如果要为页面单独引用打印样式，link 和@import 都可以。

　　3、如果要引用多个样式；

　　如果要在一个页面上引用多个样式组合来产生效果，link 和@import 都是可以的。

　　最后，其实这种导入@import文件的方式很少使用，推荐使用link方式。原因是链接加载的时候是和HTML的加载同步加载的，而@import是在页面内容加载后引用的。如果网速慢，可能会导致页面样式混乱。另外在使用@import的时候要注意添加地方。CSS手册中提到，这条规则必须首先在样式表的头部声明。并且需要以下分号。如果省略此分号，则外部样式表将无法正确导入并生成错误消息。IE 不能使用@import 导入超过 35 个样式表。