CSS 标准解决方案(1)--基础知识

Posted by liveipool on January 26, 2017

基础知识

ID 和 类名

ID用于标识页面上的特定元素,而且必须是惟一的。ID也可以用来标识持久的结构性元素。ID还可以用来标识一次性元素,例如某个链接或表单元素。
一个ID名只能应用于页面上的一个元素,而同一个类名可以应用于页面上任意多个元素,因此类的功能强大得多。类非常适合标识内容的类型或其他相似的条目。

为元素命名:
应该根据“它们是什么”来为元素命名,而不应该根据“它们外观如何”来命名。这种方式会让代码更有意义,并且避免代码与设计不同步,比如,不要给通知分配类名“red”,而是应该分配更有意义的名称,比如“warning”或“notification”。

一些差名称和好名称对比的例子

  • red 和 error
  • leftColumn 和 secondaryContent
  • topNav 和 mainNav
  • firstPara 和 intro

ID 还是 类

常常很难决定一个元素应该使用ID还是类名。一般原则是,类应该应用于概念上相似的元素,这些元素可以出现在同一页面上的多个位置,而ID应该应用于不同的唯一的元素。
只有在目标元素非常独特,绝不会对网站上其他地方别的东西使用这个名称时,才会使用ID。只有在绝对确定这个元素只会出现一次的情况下,才应该使用id。如果你认为以后可能需要相似的元素,就使用类。

<h2 class="news-head">a</h2>
<p class="news-text">b</p>

在使用类名时,如果发现出现了重复的单词,如news-head和news-text,但其实,并不需要这么多的类来区分各个元素,即上面的例子中,可以将新闻条目放在一个部分中,并加上类名news从而标识整个新闻条目,然后可以使用层叠(cascade)来识别新闻标题和文本:

<div class="news">
	<h2>a</h2>
	<p>b</p>
</div>

div 还是 span

div表示的是部分(division),它可以将文档分割为几个有意义的区域,但新手容易犯的错误就是过度使用div,这也常常被称为“多div症(divitus)”,这会导致代码结构不合理而且过分复杂的一个信号。

如:

<div>
	<ul>
		<li></li>
		<li></li>
	</ul>
</div>

其中的div是完全可以省略的:

<ul>
	<li></li>
	<li></li>
</ul>

微格式

由于HTML缺少相应的元素,很难突出显示人、地点或日期等类型的信息。为了解决这个问题,右一组开发人员决定开发一套标准的命名约定和标记模式来表示这些数据。这些命名约定基于vCard和iCalendar等现有的数据格式,称为微格式(microformat)。

CSS版本

  • CSS 1在1996年末成为推荐标准,其中包含非常基本的属性,比如字体、颜色、外边距。
  • CSS 2在1998年发布,它添加了高级概念以及高级的选择器。
  • CSS 2.1修改了 CSS2 中的一些错误,删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。CSS 2.1的开发于2002年启动。
  • CSS 3里增加了不少功能,如:“border-radius”、“text-shadow”、“transform”以及“transition”。它正在发展中。

文档类型、DOCTYPE切换、浏览器模式

DTD(文档类型定义)是一组机器可读的规则,它们定义HTML的特定版本中允许有什么,不允许有什么。在解析网页时,浏览器将使用这些规则检查页面的有效性并采取相应的措施。浏览器通过分析页面的DOCTYPE声明来了解要使用哪个DTD,由此知道要使用HTML的哪个版本。可查阅网站:不同浏览器如何根据DOCTYPE声明来选择呈现方法