在web页面中引用css的四种方法

作为一名前端开发工程师，平时在制作页面的时候，我们我们会用到很多中将CSS引入页面的方法，那么，今天我将分享一下这些方法，并讨论那种方法更好一些。

1.用标签：

这种方法是最好的一种，在页面的标签中加入如下代码：

<link rel="stylesheet" href="style.css" type="text/css" />

2.用@import规则：

 
<style> 
@import url(style.css); 
</style> 

@import 可以放在页面的style标签里面，也可以方式在css样式表里面。

如果放在css样式文件里面，它必须在其他样式规则的最前面，否则将会无效。

3.用style元素

你可以将任何css样式放置在页面任何位置，但是需要将样式放置在style标签里面

 
<style> 
p {margin: 0 0 20px 0;} 
</style> 

建议将其放置在head标签里面。

4.用内联样式

内联样式可以允许你将任何css样式应用于页面的任何标签上，这些样式仅仅应用于当前样式，如下：

<p style="color: red; padding: 20px;">这里是一些文本</p>

总结：

一般来说，第一种方法是比较好的方法，也是用的最广泛的方法。

@import方法，可以查看linxz写的一篇文章诡异的@import 能够更好的帮你理解。

后面两种方法是最不推崇的方法，一般不要用这两种方法，他们既不利于样式的重用，也不利于后期的修改。