css（层叠样式表）的引入

来源：互联网发布：java中级工程师暑期班编辑：程序博客网时间：2024/05/21 06:29

注意：css样式引入时用的<style>标签，以及<link>标签放在页面的任何位置都可以。

css（层叠样式表，Cascade Style sheet）的引入方式有如下几种：

第一种：在style标签中编写css代码。只能用于本页面中，复用性不强。

格式：

编写的css代码。。。

</style>

例如：

color:#FF0000;

text-decoration:none;

}

</style>

第二种：可以引入外部的css文件。

方式1：使用link标签推荐使用

格式：

例如：

方式2：使用<style>引入

格式：

@import url("css文件的路径");

</style>

例如：

@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可以控制的。

<!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;
}

0 0