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>
阅读(4542) | 评论(0) | 转发(0) |