CSS的四種引入方式

來源:互聯網
上載者:User

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 */
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.