码迷,mamicode.com
首页 > Web开发 > 详细

CSS的四种引入方式

时间:2015-04-22 13:46:23      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:

原文:CSS的四种引入方式

1.标签内的CSS。2.网页内的CSS。3.link引用的CSS。4.import引用的CSS。


下面是源代码:

<!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>
<style type="text/css">
/*h2{ color:white;background-color:blue;}*/
/*要想使网页内的CSS生效,必须注释下一行代码*/
@import "import.css";
</style>
<link href="alone.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h1 style="color:white; background-color:yellow">标签内的CSS</h1>
<h2>网页内的CSS</h2>
<h3>link引用的CSS文件</h3>
<h4>import引用的CSS文件</h4>
<p>link引用和import引用区别是:link是html加载前就引用,而import是html加载后才引用。举例,采用impor引用,会先显示无样式的页面,然后再把样式放进去。如果用JavaScript动态引用CSS,得使用link引用方式才可实现。</p>

</body>
</html>


import.css

@charset "utf-8";
/* CSS Document */
h4
{ color:#000000; background-color:#009900;
}


alone.css

@charset "utf-8";
h3
{ color:white; background-color:red;}
/* CSS Document */

CSS的四种引入方式

标签:

原文地址:http://www.cnblogs.com/lonelyxmas/p/4447071.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!