注意：css样式引入时用的<style>标签，以及<link>标签放在页面的任何位置都可以。
css（层叠样式表，Cascade Style sheet）的引入方式有如下几种：
第一种：在style标签中编写css代码。 只能用于本页面中，复用性不强。
格式：
<style type="text/css">
编写的css代码。。。
</style>
例如：
<style type="text/css">
a{
color:#FF0000;
text-decoration:none;
}
</style>
第二种：可以引入外部的css文件。
方式1：使用link标签 推荐使用
格式：
<link href="css文件的路径" type="text/css" rel="stylesheet" />
例如：
<link href="css1.css" type="text/css" rel="stylesheet" />
方式2：使用<style>引入
格式：
<style type="text/css">
@import url("css文件的路径");
</style>
例如：
<style type="text/css">
@import url("css1.css");
</style>
第三种：直接在html标签中使用style属性编写。
只能用于本标签中，复用性较差。
不推荐使用
例如：
<a href="#" style="color:#00FF00; text-decoration:none">新闻的标题1</a>
link和@import引入外部样式的区别：
隶属上的差别
@import次数限制
@import只能引入31次css文件。
加载顺序的不同
兼容性上的差别
使用DOM控制样式时的差别
<!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=utf-8" />
<title>css的引入方式</title>
<!--
方式1：
<style type="text/css">
a{
color:#FF0000;
text-decoration:none;
}
</style>
方式3：
<style type="text/css">
@import url("css1.css");
</style>
方式2：
-->
<link href="css1.css" type="text/css" rel="stylesheet" />
<style type="text/css">
/*
html的注释：<!-- html的注释内容 -->
css的注释： /* css的注释内容 */
/*
*/
</style>
</head>
<!--
第一种：在style标签中编写css代码。 只能用于本页面中，复用性不强。
格式：
<style type="text/css">
编写的css代码。。。
</style>
例如：
<style type="text/css">
a{
color:#FF0000;
text-decoration:none;
}
</style>
第二种：可以引入外部的css文件。
方式1：使用link标签 推荐使用
格式：
<link href="css文件的路径" type="text/css" rel="stylesheet" />
例如：
<link href="css1.css" type="text/css" rel="stylesheet" />
方式2：使用<style>引入
格式：
<style type="text/css">
@import url("css文件的路径");
</style>
例如：
<style type="text/css">
@import url("css1.css");
</style>
第三种方式：直接在html标签中使用style属性编写。 只能用于本标签中，复用性较差。 不推荐使用
例如：
<a href="#" style="color:#00FF00; text-decoration:none">新闻的标题1</a>
link和@import引入外部样式的区别：
隶属上的差别
link属于HTML标签，而@import完全是CSS提供的一种方式。
@import次数限制
@import只能引入31次css文件。
加载顺序的不同
当页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显。
兼容性上的差别
由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题
使用DOM控制样式时的差别
当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
-->
<body>
<a href="#" style="color:#00FF00; text-decoration:none">新闻的标题1</a>
<a href="#">新闻的标题2</a>
<a href="#">新闻的标题3</a>
<a href="#">新闻的标题4</a>
</body>
</html>
css1.css 文件代码：
@charset "utf-8";
/* CSS Document */
a{
color:#FF0000;
text-decoration:none;
}
