首頁 > web前端 > css教學 > CSS的四種引入方式

CSS的四種引入方式

高洛峰
發布: 2016-12-16 15:34:14
原創
2492 人瀏覽過

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的四種引入方式相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板