style class id 讲解-xueliangfei-ChinaUnix博客

Leungffy XUExueliangfei.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

xueliangfei

博客访问： 2321093
博文数量： 252
博客积分： 5472
博客等级：大校
技术积分： 3107
用户组：普通用户
注册时间： 2011-09-17 18:39

文章分类

全部博文（252）

未分配的博文（252）

文章存档

2012年（96）

2011年（156）

我的朋友

相关博文

style class id 讲解

分类：系统运维

2011-11-15 11:30:00

1. class是设置标签的样式 id是设置标签的唯一标识。

2. class可以反复在网页中使用而id在页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个id不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的显示问题。

3. id可以供js或其它脚本程序来访问该元素对象，而class是该元素的css类名,不能被调用。

de_type="Xml" editor_component="code_highlighter"><DD><LABEL>
<input id=readme type=checkbox checked name=readme>
已阅读并同意本网站注册条款</LABEL>
必须同意以上条款才能注册 </DD>
if(!document.getElementById("readme").checked){
alert("请勾选,才能完成注册\n");
return false;
}

4. id 的优先级要高于class,下面的例子就可说明

de_type="Xml" editor_component="code_highlighter"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
</style>
</head>
<body>
<div id="aa" class="aa">测试:看看谁的优先级高? </div>
</body>
</html>

5. 在CSS中写法不同, .aaa 表示class="aaa" #aaa表示id="aaa"

6. 在实际应用的时候，class可能对文字的排版等比较有用，而id则对宏观布局和设计放置各种元素较有用;在页面大的模块里面尽量用id，用id来区分不同的模块。

========================================================

共性我们可以用类选择符法定义，而个性就可以用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 Sheets中Cascading的意思）其他规则定义法定义的样式规则。标签的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>

阅读(4568) | 评论(0) | 转发(0) |

上一篇：JSP 注释

下一篇：html 中 dl标签

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6