在html中使用css樣式的集中方式

admin發表於2017-02-13
HTMLCSS
一個線上應用的網站如果沒有使用css是很難想象的，在html使用css主要以下幾種方式，下面就做一下簡單介紹。

一.使用內聯樣式:

所謂的內聯樣式，就是將css程式碼寫入標籤之內，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<div style="font-size:12px">螞蟻部落</div>

上面的程式碼可以將字型大小設定為12px。

二.使用內部樣式表:

內部樣式表就是將css程式碼單獨寫在style標籤之內，而不是直接寫在要設定樣式的元素標籤之內。

通常style標籤會發在head標籤之內。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">  
div{
  font-size:12px;
  color:red;
}
</style>  
</head>  
<body>  
<div>螞蟻部落</div> 
</body>  
</html>

以上程式碼可以div的字型大小設定為12px，字型顏色設定為紅色。

三.引入外部樣式表:

更多的時候，我們通常將css程式碼單獨放入一個css檔案中，然後通過link標籤將其引入.

link標籤通常放在head標籤之內。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<link rel="stylesheet" href="style.css" type="text/css" >   
</head>  
<body>  
<div>螞蟻部落</div> 
</body>  
</html>

相關文章