咱們先來看看一張總括圖
1 使用串連的形式調用
有兩種發方式調用：
A 使用link標籤
將樣式規則寫在.Css的樣式文檔中，再以<link>標籤引入
如法如下：
<link rel="stylesheet"href="http://www.php1.cn/">
通常是直接將css檔案拖拽到html頁的方法
集中rel="stylesheet"指這個link和href之間的關聯樣式為樣式表檔案。 Type=“text/css”指的是檔案類型是樣式表
放置的位置通常是在網頁的<head></head>部分之中。
B 使用@import匯入
就如匯入命名空間一樣。放在zai<style>...</style>中
STYLETYPE="text/css">
<!--
@importurl(引入的樣式表的位址、路徑與檔名);
-->
</STYLE>
例如：
<STYLETYPE="text/css">
<!--
@importurl(http://yourweb/ example.css);
-->
</STYLE>
要注意的是，行末的分號是絕對不可少的！
2使用style屬性
將style屬性直接添加到個別的元素標籤裡或行內
調用方式如下：
<元素名稱 style="屬性1 : 屬性值1;屬性2 :屬性值2;...."></元素名稱>
樣式的文法和獨立的樣式文法完全相同。例如
<divstyle=" width:30px;color:red;font-size:15px;"></div>
這種用法的優點是靈巧應用標籤中，蛋松缺點則是沒有整篇檔案的統一性；
3使用style標籤
將樣式放在head元素中的style標籤內，與body平級
文法如下：
<style type="text/css">
<!-- css
樣式表
-->
</style>
[html]
下面我們來用一個樣本示範一下。
<head>
<title>CSS調用方法</title>
<style>
.content{
background-color: #cccccc;
font-size: 14px;
width: 240px;
height: 80px;
color: Blue;
text-align: center;
}
</style>
</head>
<body>
<div class="content">樣本：從頁面頭部調用。</div>
</body>
下面我們來用一個樣本示範一下。
<head>
<title>CSS調用方法</title>
<style>
.content{
background-color: #cccccc;
font-size: 14px;
width: 240px;
height: 80px;
color: Blue;
text-align: center;
}
</style>
</head>
<body>
<div class="content">樣本：從頁面頭部調用。</div>
</body>
通常是將整個的 <STYLE>...</STYLE>結構寫在網頁的<HEAD></HEAD>部份之中。這種用法的優點就是在於整篇檔案的統一性，只要是有聲明的的元件即會套用該樣式規則。缺點就是在個別元件的靈活度不足。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
