作为一名前端开发工程师,平时在制作页面的时候,我们我们会用到很多中将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 能够更好的帮你理解。
后面两种方法是最不推崇的方法,一般不要用这两种方法,他们既不利于样式的重用,也不利于后期的修改。