網頁中應用CSS樣式的幾種方式

admin發表於2017-02-19
網頁CSS
網頁使用CSS樣式的方法有多種，下面簡單介紹一下:

一.將樣式直接寫在標籤之內，例如:

[HTML] 純文字檢視 複製程式碼
<div style="color:red;font-weight:bold">螞蟻部落</div>

此中方式的優點是使用靈活，但是缺點也很明顯，比如不能夠統一管理樣式，容易造成頁面體積龐大等等問題。

二.在<style>與</style>標籤內寫CSS樣式，例如:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>螞蟻部落</title> 
<style type="text/css"> 
.mytest{ 
  color:red; 
  font-weight:bold 
} 
</style> 
</head> 
<body> 
<div class="mytest">螞蟻部落</div> 
</body> 
</html>

此方式和第一種方式相比克服了不能夠統一管理樣式的缺點，也能夠是網頁的內容部分更加清晰，但是也能夠增加網頁的體積。

三.使用link標籤引入外部樣式表，例如:

[HTML] 純文字檢視 複製程式碼
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS教程</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>

四.@import方式，類似於第二種方式，需要放在<style></style>之中，例如:

[HTML] 純文字檢視 複製程式碼
<style type="text/css">
@import url(mytest/style.css);
</style>

注意:分號是必需的。

相關文章