大龙的博客

常用链接

统计

最新评论

Css中为对象应用样式的三种方法:id,class,style

我们可以使用三种方法来给一个对象(例如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大小。 

posted on 2011-07-06 22:57 大龙 阅读(2838) 评论(0)  编辑 收藏 引用


只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理