Chinaunix首页 | 论坛 | 博客
  • 博客访问: 2316293
  • 博文数量: 252
  • 博客积分: 5472
  • 博客等级: 大校
  • 技术积分: 3107
  • 用 户 组: 普通用户
  • 注册时间: 2011-09-17 18:39
文章分类

全部博文(252)

文章存档

2012年(96)

2011年(156)

分类: 系统运维

2011-11-15 11:30:00

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

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

3. id可以供js或其它脚本程序来访问该元素对象,而class是该元素的css类名,不能被调用。
  1. de_type="Xml" editor_component="code_highlighter"><DD><LABEL>
  2.  <input id=readme type=checkbox checked name=readme>
  3.     已阅读并同意本网站注册条款</LABEL>
  4. 必须同意以上条款才能注册 </DD>
  5. if(!document.getElementById("readme").checked){
  6.   alert("请勾选,才能完成注册\n");
  7.   return false;
  8. }

4. id 的优先级要高于class,下面的例子就可说明
  1. de_type="Xml" editor_component="code_highlighter"><html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4.  <style type="text/css">
  5.   
  6.  </style>
  7. </head>
  8. <body>
  9.  <div id="aa" class="aa">测试:看看谁的优先级高? </div>
  10. </body>
  11. </html>

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

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


========================================================
共性我们可以用类选择符法定义,而个性就可以用id法来定义样式规则。
回顾css样式的标签属性style用法
我们之前已经初步学习了CSS样式使用方法,以及常用的一些样式规则。使用形式如下:
  1. <标签名 style="规则:规制值;..." > ... </标签名>
  2. <标签名 style="规则:规制值;..." />

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

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

我们很明显可以看出段落的样式都定义了完全相同的规则,如此重复,就有些代码冗余,能不能可以再简练点呢?
--------------------------------------------------------------------------------
CSS样式定义规则的标签选择符法
为了可以使同样的样式规则定义到相同类型的HTML标签上,我们可以使用标签选择符来实现,在学习之前我们必须要学习一个HTML标签: style。很熟悉是吧,我们之前这个style是标签的属性,但现在是HTML标签。如何使用呢?这个标签必须放在我们以前学过的head标签中,所以形式如下:

  1. <html>

  2. <head>

  3. <style type="text/css">



  4. </style>

  5. </head>

  6. <body>

  7. </body>

  8. </html>

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

HTML内容

  1. <head>

  2. <style type="text/css">

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

  4. </style>

  5. </head>

  6. <body>

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

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

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

  10. </body>

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

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


--------------------------------------------------------------------------------
分组选择符法定义样式规则
那如何使不同的标签可以拥有相同的样式规则呢?

HTML内容:

  1. <head>
  2. <style type="text/css">
  3. h1,h2,h3,h4,h5,h6 { color:gray; }
  4. </style>
  5. </head>

  6. <body>

  7. <h1>h1标题</h1>

  8. <h2>h2标题</h1>

  9. <h3>h3标题</h1>

  10. <h4>h4标题</h1>

  11. <h5>h5标题</h1>

  12. <h6>h6标题</h1>

  13. </body>

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


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

  1. <style type="text/css">

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

  3. h1,p { background:lightgrey; }

  4. </style>

  5. ...

  6. <body>

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

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

  9. </body>

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

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

HTML内容:

  1. <style type="text/css">

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

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

  4. </style>

  5. ...

  6. <body>

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

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

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

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

  11. </body>

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

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

 

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

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

HTML内容:

 

  1. <style type="text/css">

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

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

  4. </style>

  5. ...

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

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

  8. <div class="class1">内容3</div>
阅读(4542) | 评论(0) | 转发(0) |
0

上一篇:JSP 注释

下一篇:html 中 dl标签

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