我們可以使用三種方法來給一個對象(例如div,span,table)應用樣式。
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大小。