网页制作经验:id与class的使用原则

2016-02-20 00:05 6 1 收藏

下面是个网页制作经验:id与class的使用原则教程，撑握了其技术要点，学起来就简单多了。赶紧跟着图老师小编一起来看看吧！

【 tulaoshi.com - Web开发】

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）　　在webjx.com前面的文章里讨论过很多DIVCSS布局的技巧。在用CSS来控制网页布局时我们可能都会遇到一个问题：当定义一个属性时，是使用id，还是使用class？今天webjx.com再谈id与class的使用原则，把自己平时做站时的经验给大家简要讲述一下，希望能够对您有所帮助。

　　id的使用原则
　　先来说说id，id具有唯一性，其使用原则也是依据这一特性建立的。id是不能重复的，所以在XHTML的结构中，大结构一定是用id。比如标志、导航、主体内容、版权。这些根据制定的规范命名为#Logo , #nav , #content , #copyright 等等，本着其唯一性的原则园子建议定义id尽量在外围使用。

　　class的使用原则
　　class在CSS的定义中具有普遍性。说白一点就是class具有可重复无限制的使用多次，园子建议大家尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改，这样的做法就会让所有的class都成为id的子级或是孙级。在我们写CSS的时候可以写成这样 #father .child {}，另外需要注意的是尽量不要让class包含id，比如.father #child {}如果写成这样很显然就非常不可取。当然这也只是相对于良好书写习惯的一些建议，仅供大家参考。

　　综上所述，归总起来一句话：id是唯一的并且是父级的，class是可以重复的并且是子级的。保持一个良好的代码书写习惯对于以后的代码维护会有很大的帮助，如果您有更好的建议，欢迎给我留言探讨。

来源:http://www.tulaoshi.com/n/20160220/1631214.html

上一篇： Web开发与设计的 Cheet Sheet
下一篇： CSS制作网页经验:清除网页浮动

看过《网页制作经验:id与class的使用原则》的人还看了以下文章更多>>

DIV+CSS中ID和CLASS

标签： Web开发

先看一段代码： div id="top"Hello Phoenix!/div 其中用到了id属性。对应CSS中的 #top{} 再看一段代码： div class="bottom"a href="#"Hello Phoenix!/a/div 其中用到了class属性。对应CSS中的 .bottom a{} 根据CSS2.0手册规定，伪类中就包括了a，例二中就是通过CSS控制超级链接 a 的属性，然后在div中定义该区域的a对应的类名。因此，...

CSS制作网页经验:清除网页浮动

标签： Web开发

在进行浮动布局时，大多数人都深知，在必要的地方进行浮动清理：div style=clear:both;/div。例如： div style=background:#666; div style=float:left; width:30%; height:40px;background:#EEE; Some Content/div /div 此时预览此代码，我们会发现最外层的父元素float container,并没有显示。这...

CSS规则的结构和Grouping、class和id

标签： Web开发

rules::=selector 左括号declarations右括号declarations::= declaration{SEMICOLONdeclaration}[SEMICOLON]SEMICOLON::=分号declaration::=propertyCOLONvalueCOLON::=冒号value::=keyword listkeyword list::=keyword{SPACEkeyword}SPACE::=空格通常会用空格做为value之间的分隔符，有...

div中的id和class有什么区别

标签： Web开发

class是设置标签的类 id是设置标签的标识 class属性用于指定元素属于何种样式的类。如样式表可以加入 .baobao { color: lime; background: #ff80c0 } 使用方法：class="baobao" id属性用于定义一个元素的独特的样式。如一个CSS规则#binbin { font-size: larger } 使用方法：id="binbin" id是一个标签，用于区分不同的结构和内容，就象你...

CSS教程:设计制作网页的CSS经验

标签： Web开发

我们在网页教学网中向大家介绍过很多CSS经验与技巧，这些东西都发布在http://www.webjx.com/css/的文章中，相信对大家是有一些帮助与启发的。有些习惯显得尤为重要，今天与您分享六个CSS习惯。因为习惯其实是会变的，所以只能写最近的。这些习惯都跟技术无关，如果不遵守，也不会出错。但是我觉得良好的习惯会体现一个人的素质。一、...

查看更多精彩>>