网上商店系统
首    页 | 电商资讯 | 电商作品 | 成功案例 | 电商方案 | 系统演示 | 电商建设 | 电商索引 | 电商问题
当前位置: 首 页 > 电商建设

精通CSS(2)-使用有意义的标记 二

文章来源:北京宇光宏达       浏览次数:1219次        发布日期:2011-7-19 10:33:07

1. ID和类名

有意义的元素提供了很好的基础,但是可用元素的列表并不全面。(X)HTML是作为简单的文档标记语言创建的,而不是界面语言。因此,没有用于内容区域或导航栏等的专用元素。虽然可以使用XML创建自己的元素,但是由于太复杂,这在目前还不太现实。

次优的解决方案是使用现有的元素,并且通过添加ID或类名给它们赋予额外的意义。这会在文档中添加额外的结构,并给样式提供有用的“钩子”。因此,可以建立一个简单的链接列表,并且给它分配ID mainNav,从而创建出定制的导航元素:

使用ID名标识页面上的单独元素(比如站点导航),ID必须是惟一的。ID可以用来标识持久的结构性元素,例如主导航或内容区域。ID还可以用来标识一次性元素,例如某个链接或表单元素。

在整个站点上,ID名应该应用于概念上相似的元素以避免混淆。从技术上说,如果联系人表单和联系人详细信息在不同的页面上,那么可以给它们分配同样的IDcontact。但是,如果以后需要根据每个元素的上下文环境设置它们的样式,那么就会遇到问题。所以,使用不同的ID名(比如contactFormcontactDetails)就会简单得多。

一个ID名只能应用于页面上的一个元素,而同一个类名可以应用于页面上任意数量的元素。类非常适合标识内容的类型或相似的条目。例如,假设有一个新闻页面,其中包含每条新闻的日期。不必给每个日期分配不同的ID,而是可以给所有日期分配类名date

在分配ID和类名时,一定要尽可能保持名称有意义并与表现方式无关。例如,可以给导航元素分配ID rightHandNav,因为你希望它出现在右边。但是,如果以后将它的位置改到左边,那么CSS(X)HTML就会不同步。所以,将这个元素命名为subNavsecondaryNav更合适。这种名称解释了这个元素是什么,而没有涉及如何表现它。对于类名,也是这样的。即使你希望所有错误消息以红色显示,也不要使用类名red,而应该选择更有意义的名称,比如errorfeedback(见图1-3)。

在写类名和ID名时,需要注意区分大小写。CSS大体上是不区分大小写的语言。但是,在标记中实体(比如类名和ID名)是否区分大小写取决于标记语言是否区分大小写。如果使用XHTML,那么类名和ID名是区分大小写的;如果使用常规的HTML,那么是不区分大小写的。处理这个问题最好的方式是保持一致的命名约定。所以,如果在(X)HTML类名中使用驼峰式大小写(camel case,那么在CSS中也采用这种形式。

由于类具有灵活性,它们是非常强大的。同时,它们也可能被过度使用或滥用。CSS新手常常在几乎所有东西上添加类,从而试图更精细地控制它们的样式。早期的WYSIWYG编辑器也倾向于在应用样式的每个地方都添加类。许多开发人员在使用编辑器生成的代码学习CSS时继承了这个坏习惯。这种现象称为“多类症”(classitis),在某种程度上,这和使用基于表格的布局一样糟糕,因为它在文档中添加了无意义的代码。

在前面的示例中,每个元素都通过使用一个与新闻相关的类名标识为新闻的一部分。这使新闻标题和正文可以采用与页面其他部分不同的样式。但是,不需要用这么多类来区分各个元素。可以将新闻条目放在一个部分中,并且加上类名news,从而标识整个新闻条目。然后,可以使用层叠识别新闻标题或文本。

以这种方式删除不必要的类有助于简化代码,使页面更简洁。稍后,将讨论CSS选择器和为样式寻找目标。无论如何,这种对类名的过度依赖是不必要的。我常常只在不适合使用ID的情况下对元素应用类,而且尽可能少使用类。我创建的大多数文档常常只需要添加几个类。如果你发现自己添加了许多类,那么这很可能意味着你的(X)HTML文档的结构有问题。

2. divspan

有助于在文档中添加结构的一个元素是div元素。许多人误以为div元素没有语义意义。但是,div实际上代表部分division),它提供了将文档分割为有意义的区域的方法。所以,通过将主要内容区域包围在div中并分配ID mainContent,就可以在文档中添加结构和意义。

为了将不必要的标记减到最少,应该只在没有现有元素能够实现区域分割的情况下使用div元素。例如,如果使用主导航列表,那么不需要将它包围在div中。

可以完全删除div,直接在列表上应用ID

过度使用div常常称为“多div症”(divitus),这是代码结构不合理而且过分复杂的一个信号。一些CSS新手会尝试用div重建自己原来的表格结构。但是,这只是用一套不必要的标签替换了另一套不必要的标签。实际上,应该使用div根据条目的意义或功能(而不是根据它们的表现方式或布局)对相关条目进行分组。

div可以用来对块级元素进行分组,而span可以用来对行内元素进行分组或标识:

一般不需要对行内元素进行分组或标识,所以使用span的情况比div少。在实现图像替换等效果时会看到span,在这种情况下,它们用做额外的钩子,可以应用额外的样式。

尽管目标是保持代码尽可能简洁且有意义,但是有时候为了以希望的方式显示页面,无法避免添加额外的无语义的divspan。如果是这种情况,那么也不必过分为此担心。我们正处在一个过渡时期,CSS 3有望提供更强大的文档控制能力。在目前,现实世界的需要常常比理论出现得早。关键是知道在什么时候必须进行折中,并且要根据正确的原因进行折中。

<DIV style="BORDER-RIGHT: windowtext 1pt solid; PADDING-RIGHT: 4pt; BORDER-TOP: windowtext 1pt solid; PADDING-LEFT: 4pt; BACKGROUND: #dfdfdf; PADDING-BOTTOM: 4pt; MARGIN-LEFT: 5.5pt; BORDER-LEFT: windowtext 1pt solid; MARGIN-RIGHT: 5.5pt; PADDING-TOP: 2pt; BORDER-BOTTOM: windowtext 1pt solid">

CSS有各种版本(即“level”),所以知道要使用哪个版本是很重要的。CSS 11996年末成为推荐标准,其中包含非常基本的属性,比如字体、颜色、空白边。CSS 2在此基础上添加了高级概念(比如浮动和定位)以及高级的选择器(比如子选择器、相邻同胞选择器和通用选择器)。在编写本书时,CSS 2仍然是CSS的最新版本,尽管它早在1998年就已经成为推荐标准。

万维网联盟(W3C)的行动非常缓慢,所以尽管CSS 3的开发工作在新千年开始之前就开始了,但是距离最终的发布还有相当长的路要走。为提高开发和浏览器实现的速度,CSS 3被分割为模块,这些模块可以独立发布和实现。CSS 3包含一些令人兴奋的新特性,包括一个用于多列布局的模块。但是,选择器模块最接近于完成,可能在2006年成为推荐标准。

因为预期从CSS 2CSS 3的发布之间时间会很长,2002年人们启动了CSS 2.1的开发。这是CSS 2的修订版,它计划纠正一些错误,并且更精确地描述CSS的浏览器实现。CSS 2.1正在逐渐接近完成,但是可能在2006年年底之前无法实现。然而,它更准确地反映了CSS当前的状态,我当前就使用这个版本。

</DIV>

特别提示:如需转载此篇文章请注明文章来源企策互通
文章关键词:
上一篇:
精通CSS(2)-使用有意义的标记 (2011-7-18 关注度:1190)
下一篇:
精通CSS(3)-文档类型、DOCTYPE切换和浏览器模式 (2011-7-17 关注度:1211)
 
 相关文章
 
互联网赚钱的基本模式(2011-6-9 关注度:1391)
精通CSS(4)-常用的选择器(2011-7-17 关注度:1203)
网站策划人员如何对企业网站进行规划?(2011-6-9 关注度:1396)
企业网站建设需要提供哪些资料?(2011-6-10 关注度:775)
Photoshop巧修曝光问题照片(2011-7-16 关注度:1157)
精通CSS(6)-层叠和特殊性(2011-7-16 关注度:1206)
企业网站的三种基本形式(2011-6-14 关注度:1674)
网站设计论文下载(2011-7-20 关注度:2060)
 
行业观点类别
 

开店疑难(94)
电商建设(143)
电商运营(217)
电商发展趋势(96)
售后服务(10)

电商建设关注排行 
  1.网页设计页面大小分析 不同分辨率下的网页大小
  2.网站建设合同模板 标准网站建设合同下载
  3.网站设计论文下载
  4.便宜网站建设 便宜网站建设分析
  5.网站建设业务营销策略 企业网站建设业务营销分析
  6.小议中英文网站排版设计的视觉差异
  7.提高网站友好度的十点建议
  8.十大网站设计错误 - 2006
  9.深度分析 企事业单位网站建设问题严重
  10.网站可信度建设十大准则 如果建立可信度高的企业公
电商建设最新文章 
  1.基于SMS的移动电子商务存在哪些安全问题?
  2.国内首个电子商务调解中心获批并正式成立
  3.关键词对网站的运营有什么影响?怎么分析网站关键词?
  4.什么是网上商城前端设计与网店前台设计?
  5.网页META标签内容写作规范要点
  6.Asp中通用函数
  7.探讨网站获得盈利的前提条件
  8.网站建设三步:申请空间编写网页上传文件
  9.明定网站的优化设计
  10.披露创业秘密 网站的盈利方式有哪些
首    页  |  关于我们  |  定制开发  |  购买流程  |  网店系统特性  |  商城系统策划  |  开店疑问问题  |  网店建设观点  |  友情链接  |  联系我们
  Copyright 2005-2007 51system 网上商城系统 All Rights Reserved 北京宇光宏达 版权所有 地址:北京市朝阳区东三环北路戊2号A1505室。
京ICP备11007506号