登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

青山妩媚

新的一年,新的心情,新的挑战,新的起点...

 
 
 

日志

 
 

引用 css样式中id定义与类定义的区别  

2008-09-12 16:29:28|  分类: IT常识 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

引用

zhlyameicss样式中id定义与类定义的区别

 

在HTML的css样式中也存在这种情况,共性我们可以用类选择符法定义,而个性就可以用id法来定义样式规则。

回顾css样式的标签属性style用法

我们之前已经初步学习了CSS样式使用方法,以及常用的一些样式规则。使用形式如下:

<标签名 style="规则:规制值;..." > ... </标签名>

<标签名 style="规则:规制值;..." />

我们这种CSS样式的用法虽然已经比传统的HTML标签来的更加优越,但还有许多时候还是存在缺点。譬如下面HTML内容:

<p style="font:12px 宋体;color:green;text-indent:2em;">段落文字1 </p>

<p style="font:12px 宋体;color:green;text-indent:2em;">段落文字2 </p>

<p style="font:12px 宋体;color:green;text-indent:2em;">段落文字3 </p>

我们很明显可以看出段落的样式都定义了完全相同的规则,如此重复,就有些代码冗余,能不能可以再简练点呢


CSS样式定义规则的标签选择符法

为了可以使同样的样式规则定义到相同类型的HTML标签上,我们可以使用标签选择符来实现,在学习之前我们必须要学习一个HTML标签: style。很熟悉是吧,我们之前这个style是标签的属性,但现在是HTML标签。如何使用呢?这个标签必须放在我们以前学过的head标签中,所以形式如下:

<html>

<head>

<style type="text/css">

<!--我们要定义的样式规则在这里-->

</style>

</head>

<body>

</body>

</html>

标签style的type属性指定在style里面定义的文本类型的css内容,虽然可以缺省,但最指定text/css。了我们开始学习标签选择符的css样式规则定义法吧。

HTML内容

<head>

<style type="text/css">

p { font:12px 宋体;color:green;text-indent:2em; }

</style>

</head>

<body>

<p>段落文字1 </p>

<p>段落文字2 </p>

<p>段落文字3 </p>

</body>

通过以上法则,我们就可以使body中的三个p拥有相同的样式规则,不仅如此,以后再添加p标签都会拥有如此样式规则。

标签选择符法的语法规则:标签名 { 样式规则 }。 这里的标签名就是选择符


分组选择符法定义样式规则

那如何使不同的标签可以拥有相同的样式规则呢?

HTML内容:

<head><style type="text/css">

h1,h2,h3,h4,h5,h6 { color:gray; }

</style> </head><body>

<h1>h1标题</h1>

<h2>h2标题</h1>

<h3>h3标题</h1>

<h4>h4标题</h1>

<h5>h5标题</h1>

<h6>h6标题</h1>

</body>

显示结果:

通过分组选择符法,我们定义了6个标题标签h1-h6中内容的字体颜色为灰色(gray)。自从使用了选择法,我们看出,css样式规则定义在style标签中,使的body中的正文内容又显得更加简练了。事情!

分组选择符法语法:选择符,选择符,... { 样式规则 }


类选择符法定义样式规则

虽然前两种选择符法可以批量定义样式规则,但也存在缺点。譬如看以下代码:

<style type="text/css">

p { font:12px 宋体;color:green;text-indent:2em; }

h1,p { background:lightgrey; }

</style>

...

<body>

<p>段落文字1 </p><p style="background:lightblue;">段落文字2 </p><p>段落文字3 </p>

<h1>标题1</h1><h1 style="color:blue;">标题1</h1><h1>标题1</h1>

</body>

显示结果:

可以看出如果要特定指定某个标签的样式规则,我们还是需要使用标签的style属性法。我们发现通过标签style属性定义规则会比其他两种规则定义法来的优先。所谓先,就是指可以覆盖(覆盖就是Cascading Style SheetsCascading的意思)其他规则定义法定义的样式规则标签的style属性法 标签选择符法和分组选择符法的优先级别都要高,并且是所有规则定义法中“最高的”。

我们来看看怎样类选择符法,一种新的样式规则定义法。首先我们要学习一个HTML标签的属性class,这个属性来定义标签的类名,我们可以通过类名来定义样式规则。

HTML内容:

<style type="text/css">

.class1 { font:bold 16px 黑体; color:green; }

.class2 { font:normal 12px 宋体; color:blue; }

</style>

...

<body>

<p class="class1"> class1的风格 </p>

<p class="class2"> class2的风格 </p>

<p class="class1"> class1的风格 </p>

<div class="class2"> class2的风格 </div>

</body>

显示结果:

我们发现属于同一类的具有相同样式风格,通过指定标签相同class的属性值,即使不是相同HTML标签。在一张网页中可能会用到许多各种各样的HTML标签,为了使你需要的标签符合同一种样式风格,我们可以使用类选择符定义法

类选择符定义法语法: .类名 { 样式规则 }


ID选择符法定义样式规则

所谓共性性,我们在生活中经常有这样的说法,譬如猫,狗,羊都是属于哺乳动物,都有哺乳动物的共性,但每种动物都有其个性特征,猫叫,狗叫,羊叫的声音都不一样。在HTML的css样式中也存在这种情况,共性我们可以用类选择符法定义,而个性就可以用id法来定义样式规则。

在这当中我们要学习使用HTML标签的id属性,id是英文单词identifier,意思标识号。单张网页中的HTML标签的id值只能指定一个唯一的名字。就如我们的身份证号码,是唯一标识一个人的。为了单独定义某个指定标签的样式规则,我们可以使用id选择符法。

HTML内容:

<style type="text/css">

.class1 { font:bold 16px 宋体;background:blue; color:yellow;}

#div1 { background:green; text-decoration:underline; }

</style>

...

<div class="class1">内容1</div>

<div id="div1" class="class1">内容2</div>

<div class="class1">内容3</div>

显示结果:


iddiv1div标签背景为绿,而且字体有下划线,覆盖.class1设置的蓝色背景规则,但其他规则都具有。

  评论这张
 
阅读(1505)| 评论(0)

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018