css中的id,class,style三種應用程式樣式用法詳解-html教學-PHP中文網

css中的id,class,style三種應用程式樣式用法詳解

伊谢尔伦

發布： 2017-07-19 13:33:18

原創

2135 人瀏覽過

1：使用#定義樣式，並使用id為物件套用樣式。
範例：

<!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=gb2312" /> 
<title>Id</title> 
<style type="text/css"><!-- 
#STYLE_1 { font-size: 20px; } 
--></style> 
</head> 
<body> 
<div id="STYLE_1">用Id来给对象应用样式</div> 
</body> 
</html>

登入後複製

2：使用.定義樣式，並使用class為物件套用樣式。
範例：

<!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=gb2312" /> 
<title>Id</title> 
<style type="text/css"><!-- 
.STYLE_1 { font-size: 20px; } 
--></style> 
</head> 
<body> 
<div class="STYLE_1">用class来给对象应用样式</div> 
</body> 
</html>

登入後複製

3：不定義樣式，直接使用style為物件套用樣式。
範例：

<!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=gb2312" /> 
<title>Id</title> 
</head> 
<body> 
<div style="font-size:20px">用style来给对象应用样式</div> 
</body> 
</html>

登入後複製

使用這三種方法所產生的效果是相同的，但我們需要注意的是，這三種方法間的優先問題。
如果我們對一個物件同時使用上述三種方法定義樣式，會怎麼樣呢？
例如我們先定義一個#STYLE { font-size:12px; }再定義一個.STYLE { font-size:14px; }最後在物件上使用style="font-size:16px;"程式碼如下：

<!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=gb2312" /> 
<title>Id</title> 
<style type="text/css"><!-- 
#STYLE { font-size: 12px; } 
.STYLE { font-size: 14px; } 
--></style> 
</head> 
<body> 
<div id="STYLE" class="STYLE" style="font-size:16px">用三种方式同时来给对象应用样式</div> 
</body> 
</html>

登入後複製

這種情況下，瀏覽器會根據三種方式的優先權，也就是style>id>class來為物件套用樣式。上述例子中，div中的文字會顯示為16px大小。

以上是css中的id,class,style三種應用程式樣式用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！