1、行内式：
直接在元素的style属性中，添加CSS样式：
<p id="article" style="color:#ffffff;font-family:'Microsoft JhengHei','微软雅黑' ">
Hello World
</p>
优点：分散、灵活、方便、直观。
缺点：缺乏整体性和规划性和可重用性。
2、内嵌式（内部样式）：
包含在<style>元素内的CSS样式，可以出现在<html>元素内的任意位置，但是为了规范起见，通常在<head>元素内加入<style>元素，并在<style>内写CSS样式，规则不变：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#article{color:#ffffff;font-family:"Microsoft YaHei UI" , "微软雅黑";}
</style>
</head>
缺点：在多个页面之间的可重用性不够高。
3、链接式：
将CSS代码写在一个单独的文件中，在<head>元素中，使用<link>元素直接引入该文件到页面中，建议使用相对
路径。一个页面可以多次使用<link>元素引入多个外部CSS文件。当引入多个CSS文件且不同的CSS文件有相同的
选择器，那么在位置上越靠后的CSS选择器优先级越高（覆盖原则）：
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="style/reset.css" type="text/css">
<link rel="stylesheet" href="style/main.css" type="text/css">
</head>
缺点：CSS代码由于分离到单独的CSS文件，容易出现CSS代码过于集中，若维护不当则极容易造成混乱。
4、导入式：
也是将一个外部CSS文件引入页面，在<style>元素内（为了规范性，通常也写在<head>元素中），使用@import关键字引入，CSS文件路径写在url（）中：
<style type="text/css">
@import url("style/reset.css");
@import url("style/main.css");
</style>
优缺点同链接式。
顺便一提：
导入式和链接式虽然结果一样，用法相似，但是他们也有很多区别：
1：<link>是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2：<link>引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
2：<link>引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3：<link>是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4：<link>支持使用Javascript控制DOM去改变样式；而@import不支持。
4：<link>支持使用Javascript控制DOM去改变样式；而@import不支持。
5：在兼容性和功能性上，<link>要比@import更好。
扫一扫
1650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
