结构中id与class的使用原则与技巧

2016-02-19 18:30 5 1 收藏

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐结构中id与class的使用原则与技巧,无聊中的都看过来。

【 tulaoshi.com - Web开发 】

在前几日的文章中我提到过XHTML的重要性,在那篇文章中我讲了为什么说XHTML结构重要,重视XHTML结构的好处。但是那篇文章从开发的效率入手,并没有深入细节,而今天的这篇文章是讲XHTML中的细节部分的,可以说是上一篇的续述。这篇续述的主题就是ID与CLASS怎么用,在标题中有提及使用原则与技巧,这里的使用原则与技巧是我的经验总结,并非摘自哪本典籍,所以并不是什么权威论述,请各位网友在看到这篇文章时需要有主见的阅读,不要被我的妖言所迷惑。

ID与CLASS的使用原则

据说W3C对于ID与CLASS的设定是ID具有唯一性,CLASS具有普遍性。所以我们这里的使用原则也是依据这一特性建立的。ID是不能重复的,所以在XHTML的结构中,大结构一定是用ID。比如标志、导航、主体内容、版权。这些呢接我自己制定的规范命名为#Logo , #nav , #content , #copyright 这些是雷打不动的命名。有人说布局排版用ID,配色背景用CLASS,其实这是不正确的,ID与布局排版没有直接关系,CLASS与配色也下是对等的。有人呢为了麻烦全都用ID或是全都用CLASS,全都用CLASS呢还有可理解,全都用ID就不正常了,这有悖ID唯一性。如果每个ID都不一样,那非累死不可。我通过实践总结的使用原则是:ID需要具有唯一性,并且尽量在外围使用。而CLASS具有可重复性,并且尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改,这样的做法就会让所有的CLASS都成为ID的子级或是孙级。你可以有两个儿子但你能有两个爸爸吗,就是这个道理。在我们写CSS的时候可以写成这样 #father .child  {…} 尽量不要让Class包含ID,.father #child  {…}如果写成这样显得有点可笑 。当然这也不是铁定的,特殊情况需要特殊对待嘛。但是通常情况下这种形式的必要性不大。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

以上就是ID与CLASS使用原则,归总起来一句话:ID是唯一的并是父级的,CLASS是可以重复的并是子级的。

ID与CLASS的使用技巧

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

子级的命名的包含父命名中的部分为开头。这样方便在编写CSS时明确层次关系。

CLASS中的子级最好不用ID。当然特殊情况特殊对待。

CLASS的命名最好命名用大小写合用。例 .newMovie 这样的写法与第一条结合起来使用明确关系最合适。要需要注意的是IE以外的浏览器对于大小写是很敏感的。还有就是一定要以字母开头。

来源:https://www.tulaoshi.com/n/20160219/1617901.html

延伸阅读
标签: Web开发
表单的name与id其实是同一个意思,都是为了标记对象名称。 它们所不同的是:name是Netscape的、id是Microsoft的。 表单元素(form input textarea select)与框架元素(iframe frame)用name。 这些元素都与表单(框架元素作用于form的target)提交有关, 在表单的接收页面只接收有name的元素。 赋ID的元素通过表单...
标签: Web开发
结合了富有新的语义化标记的HTML5,CSS3为web设计师们的网页提供了神一般的力量。有了HTML5的能量,我们将得到更多的对文档代码的控制权,有了CSS3的能量,我们的控制权将趋于无穷大! 即使没有那些高级的CSS选择器,我们仍然可以通过强大的HTML5条调用不同的容器而不劳驾class和id这类属性。像以往的DIV布局,我们在css中可能要这...
标签: flash教程
1. 最基本的Class定义方面我不多说了, 就举个例子直接开始: class Flash8 { private var user:String; //定义变量 private var pass:String; private var age:Number; public function Flash8(x:String, y:String) { //class的结构函数 user = x; pass = y; trace("用户名 = "+user+", 密码 = "+pass); } public function setAge(x:Num...
本文目录 类与结构的实例比较 类与结构的差别 如何选择结构还是类 一.类与结构的示例比较: 结构示例: public struct Person { string Name; int height; int weight public bool overWeight() { //implement something } } 类示例: public class T...
每个网站都有自己的链接结构,也可以叫做信息架构,比如首页是一级页面,列表是二级页面,内容是三级页面等。这其实就是网站链接中的广度与深度,当访问一个页面需要点击好几个页面的时候,那么这个页面就属于深层次的网页,对于搜索引擎来说越难发现的页面可以被收录的概率也越低,因此大多数网站都会把网站链接结构中的广度做宽,而深度则保...

经验教程

937

收藏

36
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部