DIV+CSS中id和class的使用原则

本文向大家描述一下DIV CSS中id与class使用原则,在前面的文章里讨论过很多DIV CSS布局的技巧,我们在用CSS来控制网页布局时我们可能都会遇到一个问题:当定义一个属性时,是使用id,还是使用class?这里和大家说明一下,相信本文介绍一定会让你有所收获。

  DIV CSS中id与class使用原则

  在51cto.com前面的文章里讨论过很多DIV CSS布局的技巧。在用CSS来控制网页布局时我们可能都会遇到一个问题:当定义一个属性时,是使用id,还是使用class?今天51cto.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是可以重复的并且是子级的。保持一个良好的代码书写习惯对于以后的代码维护会有很大的帮助,如果您有更好的建议,欢迎给我留言探讨。

时间: 2024-10-25 18:11:56

DIV+CSS中id和class的使用原则的相关文章

CSS中id和class的区别和用法

在一个网页里ID只能使用一次.当然即使一个id在一个网页内被使用多次,其CSS样式仍然可以实现生效,但是一般规定W3C标准是使用一次.因为ID在html里可以赋予html标签特殊的属性如一下JS动作.表单传值等特性所以区别于一个class可以使用多少的次,而一个CSS 命名的id只能使用一次避免一些特定动作.传的表单值的兼容性特性错误即使没有其它JS脚本动作.表单传值特性但是我们也一定执行一个页面只能使用一次. id 选择器以 "#" 来定义,命名CSS选择器. 定义命名css id选

html-本人菜鸟一枚,请教大神一个关于CSS中ID和类选择器不能用,而标签选择器能用的问题

问题描述 本人菜鸟一枚,请教大神一个关于CSS中ID和类选择器不能用,而标签选择器能用的问题 FIREFOX浏览器,代码如下: HTML代码片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> @import url(template/default/styl

DIV+CSS中浏览器兼容方法及div+css的使用技巧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 相信很多的朋友在div+css的页面制作当中都会遇到这个问题,由于IE系列浏览器对于HTML标签和CSS样式表的解释与其他浏览器会有所区别,所以在制作页面的时候经常会出现一些小BUG,和网页错位等现象,下面站长好站为大家讲解一写,在div+css中如何兼容各大浏览器. 首先我们先要检查相应的HTML标签,如果你的标签错误,无论你如何修改CSS

DIV CSS网页布局中id与class的使用原则与技巧

css|技巧|网页 ID与CLASS怎么用,在标题中有提及使用原则与技巧,这里的使用原则与技巧是我的经验总结,并非摘自哪本典籍,所以并不是什么权威论述,请各位网友在看到这篇文章时需要有主见的阅读,不要被我的妖言所迷惑. ID与CLASS的使用原则 据说W3C对于ID与CLASS的设定是ID具有唯一性,CLASS具有普遍性.所以我们这里的使用原则也是依据这一特性建立的. ID是不能重复的,所以在XHTML的结构中,大结构一定是用ID.比如标志.导航.主体内容.版权.这些呢接我自己制定的规范命名为#

掌握CCS中ID与Class的使用原则

你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习:&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp; 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化.  另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.alig

div+css中Class与ID的区别_经验交流

一个Class是用来根据用户定义的标准对一个或多个元素进行定义的.打个比较恰当的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,Javascript等来使用这个类.因此你可以在一个页面上使用class="Frodo" ,class="Gandalf",class="Aragorn"来区分不同的故事线.还有一点非常重要的是你可以在一个文档中使用任意次数的Class.    至于ID,通常用于定义页面上一个仅出现一次的标

重新认识网站制作过程中采用div+css的布局方式

伴随着"div+css"在互联网的流行,"网站重构"的春风吹遍了华夏大地,一时间互联网上风声鹤唳,"div+CSS"俨然已成为一种网站制作过程中采用一种布局的"时尚",数一万计的网站都不约而同地开始了自己的"网站重构".然而打开这些网站的源代码,看到哪些形形色色源代码,却时常令人哑然失笑-- 当我们看到有嵌套6.7层的div布局,有成百上千的表现css--现在关于div+css标准的书籍也是越来越多,除了极

div布局-DIV + CSS设计中的DIV是指的html中的div标签吗?

问题描述 DIV + CSS设计中的DIV是指的html中的div标签吗? 在DIV+CSS设计中的DIV如果是div标签的话, 那么DIV+CSS的意思就是换行标签与层叠样式表. 这个意思好像有些别扭. 解决方案 DIV+CSS是WEB设计标准,它是一种网页的布局方法.不是指页面的div标签的. 参考:http://baike.baidu.com/link?url=lf2dUBDDlOdMJHnoAr-bUvWbZQ_JBgQr8z__vWe3mUr5XesIP_2Gf65cXxgENgzCS

div设计中的文字垂直居中的方法

CSS中怎样设置才能使对象中的文字垂直居中于对象,这个问题也是捆扰很多朋友的难题.现在网上的很多代码都做不到浏览器兼容.我把网上有关的方法整理了一下,做了些改动,完全可以兼容各主流浏览器. 下面具体说一下在不同情况下垂直居中的方法. 一.一行文字垂直居中 看一下下面的代码: Code Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh