1.行内样式(直接在标签内部通过使用style属性添加CSS样式)
<p style="color:red;font-size:12px;">这是一个段落</p>
2.内部样式(在head标签里面通过使用style标签引进CSS样式)
<head>
<style>
p{
corlor:red;
font-size:12px;
}
</head>
3.外部样式(先在外部建一个css格式的外部样式表,然后在标签里面用标签引入外部样式表)
<head>
<link rel="stylesheet" type="text/css" href="base.css"/>
</head>
或者用@import引入
<style type="text/css" >
@import url("CSS文件");
</style>
link和@import的区别:
1.老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link 标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
2.加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载,网速慢时会影响视觉效果.
link确保并行下载css文件，@import是一个一个下载。在IE中，link会阻断@import延长加载时间，多个@import的使用还会打乱资源文件的下载顺序引发js问题。
3.兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4.使用DOM控制样式的区别.当使用javascript控制dom去改变样式的时候，只能使用 link标签，因为@import不是dom可以控制的。
使用link: link可以选定要加载的媒体media。由于上述加载、兼容与IE的原因，普通站点应当尽量使用link
使用@impo:大型门户网站（如淘宝）多个页面link同一个css文件会造成速度下降，@import可以在css中调入样式表，方便对css进行模块化管理.