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

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

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

【 tulaoshi.com - Web开发】

（本文来源于图老师网站，更多请访问https://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是可以重复的并且是子级的。保持一个良好的代码书写习惯对于以后的代码维护会有很大的帮助，如果您有更好的建议，欢迎给我留言探讨。

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

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

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

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,并没有显示。这...

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规则的结构和Grouping、class和id

标签： Web开发

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

网页设计中关于衬线的使用经验

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

如题，设计，靠的就是细致还有与生俱来的审美能力，加之不屈不挠的耐心和沉着。以下是笔者关于衬线一些粗浅的共总结，拿出来供读者分享指正。这是一套关于Button的实现，如果对HTML有了解的话，应该知道active和hover伪类，并且在网页体现中，他们也起到了很大的作用，以至于牵扯到现在就是设计上也不仅仅只是一个button样式那么简单，还要考...

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

标签： Web开发

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

查看更多精彩>>