关于CSS如何控制HTML：4种方法（行内式，内嵌式，外部链接式，导入式））

朱雀 2022-01-16 01:53 374阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

1）行内样式  
行内样式是4种样式中最直接最简单的一种，直接对HTML标签使用style=""，例如：  
 01.<p style="color:\#F00; background:\#CCC; font-size:12px;"></p>  
虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，从而导致后期维护成本高。  
2）内嵌样式  
内嵌样式就是将CSS代码写在<head></head>之间，并且用<style></style>进行声明，例如：  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
<head>  
  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  
<title>W3CFuns.com:打造中国Web前端开发人员最专业的贴心社区！</title>  
  
<style type="text/css">  
.body,div,a,img,p\{margin:0; padding:0;\}  
a\{color:\#FFF;\}  
img\{float:left;\}  
\#container\{width:500px; height:350px; background:url(http://www.w3cfuns.com/static/image/cm/demo/2d121/w3cBg.jpg) no-repeat; position:relative; margin:0 auto;\}  
\#container p\{width:380px; height:40px; position:absolute; left:60px; bottom:60px; color:\#fff; font-size:12px; line-height:18px; text-align:center; font-family:"微软雅黑", Verdana, Geneva, sans-serif;\}  
\#reg\{display:block; width:114px; height:27px; position:absolute; left:191px; bottom:28px;\}  
</style>  
</head>  
<body>  
<div id="container">  
<p>全国的Web前端开发工程师欢聚于<a href="http://www.w3cfuns.com/" target="\_blank">W3CFuns.com</a><br />我们的口号是“打造中国Web前端开发人员最专业的贴心社区！”</p>  
<a href="http://www.w3cfuns.com/member.php?mod=register" target="\_blank" id="reg"></a>  
</div>  
</body>  
</html>  
内嵌样式，大家也许已经意识到，即使有公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种样式还是很不错的。  
3）链接样式  
链接样式是使用频率最高，最实用的样式，只需要在<head></head>之间加上<link…/>就可以了，如下：  
<link type="text/css" rel="stylesheet" href="style.css" />  
举个例子：  
  
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
02.<html xmlns="http://www.w3.org/1999/xhtml">  
  
03.<head>  
  
04.<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  
05.<title>W3CFuns.com:打造中国Web前端开发人员最专业的贴心社区！</title>  
  
06.<link rel="stylesheet" type="text/css" href="http://www.w3cfuns.com/static/image/cm/demo/2d121/style.css"/>  
  
07.</head>  
  
08.<body>  
  
09. <div id="container">  
  
10. <p>全国的Web前端开发工程师欢聚于<a href="http://www.w3cfuns.com/" target="\_blank">W3CFuns.com</a><br />我们的口号是“打造中国Web前端开发人员最专业的贴心社区！”</p>  
  
11. <a href="member.php?mod=register" target="\_blank" id="reg"></a>  
  
12. </div>  
  
13.</body>  
  
14.</html>  
这种样式将HTML文件和CSS文件彻底分成两个或者多个文件，实现了页面框架HTML代码与表现CSS代码的完全分离，使得前期制作和后期维护都 十分方便，并且如果要保持页面风格统一，只需要把这些公共的CSS文件单独保存成一个文件，其他的页面就可以分别调用自身的CSS文件，如果需要改变网站 风格，只需要修改公共CSS文件就OK了，相当的方便，这才是我们xHTML+CSS制作页面提倡的样式。  
4)导入样式  
导入样式和链接样式比较相似，采用import样式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌 样式。 具体导入样式和链接样式有什么区别，可以参看这篇文章《CSS:@import与link的具体区别》，不过我还是建议大家用链接样式！  
  
导入样式与链接样式的区别：  
  
link  
link就是把外部CSS与网页连接起来。  
  
[@import][import]  
import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件。  
  
为什么使用[@import][import]  
大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.  
另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.这样看起来更容易管理.  
  
为什么使用link  
使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持 rel="alternate stylesheet"属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.  
  
@import的小毛病  
如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.  
04-11更新: @import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.  
  
到底要用那种方式  
就目前看来小型的网站还是使用link比较合适(或者说比较流行),当然如果将来我们需要把CSS进行模块化管理也肯定要用到@import.

转载于:https://my.oschina.net/fuckBAT/blog/317749

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220115/d8fa357379214d939e1c8d4d83cbee1e.png
[import]: http://my.oschina.net/import