html页面中引入css的几种方式

最新推荐文章于 2021-06-26 07:52:43 发布

原创最新推荐文章于 2021-06-26 07:52:43 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #import #stylesheet #javascript #border

Web前端专栏收录该内容

10 篇文章

订阅专栏

本文详细阐述了HTML中引入CSS的四种方式：行内式、嵌入式、链入外部样式表文件和导入式，对比了它们的优缺点。

在html中引入css的几种方式及比较。

1. 行内式，即内联式定义。在html标签中通过增加style属性来规定样式，

如： <p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>

2. 嵌入式

在对页面中各种元素的设置集中写在<head>和</head>之间的，对于单个页面来说，这种方式很方便

这种方法的使用情况要少的多，最常见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。优点：速度快，所有的CSS控制都是针对本页面标签的，没有多余的ＣＳＳ命令；再者不用外链ＣＳＳ文件。直接在ＨＴＭＬ文档中读取样式。缺点就是改版麻烦些，单个页面显得臃肿，ＣＳＳ不能被其他ＨＴＭＬ引用造成代码量相对较多，维护也麻烦些。　但是采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进行复杂的维护工作。

3. 链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：
<head>
<title>title of article</title>
<link rel=stylesheet href="http://www.dhtmlet.com/rainer.css" type="text/css">
</head>

这种方法可以说是现在占统治地位的引入方法。如同IE与浏览器。这也是最能体现CSS特点的方法；最能体现DIV+CSS中的内容与显示分离的思想，也最易改版维护，代码看起来也是最美观的一种。

4.导入式
   导入式格式如下：
   <style type="text/css">
         @import "mystyle.css";
</style>

这种方式使用的最少。

link 和@import的区别：

1. 其实link和@import的最根本区别就是，link是一个html的一个标签，而@import是css的一个标签,link除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等，而@import就只能调用css。如果单独从外部引用css来说，他们的作用是基本一样，只不过上面的老大不一样而已。

2. 对于一些较大的网站，为了便于维护，可能会希望把所有的CSS样式分类别放在几个CSS文件中，这样如果使用链接式，就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类，就需要同时调整HTML文件。而使用导入式，则可以只引进一个总的CSS文件，在这个文件中再导入其他独立的CSS文件；而链接式不具备这个性质。

3. 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

4. link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css