`

css学习手册

阅读更多

选择什么样的DOCTYPE
开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。
查看本站首页原代码,可以看到第一行就是:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 


  打开一些符合标准的站点,例如著名web设计软件开发商Macromedia,设计大师Zeldman的个人网站,会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 

  那么这些代码有什么含义?一定要放置吗?
  什么是DOCTYPE
  上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。
  其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。
  要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择:

  •   过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
  •   严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
  •   框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 


  我们选择什么样的DOCTYPE
  理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。
  注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag,例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。
  打个比方:人体模特换衣服。模特就好比数据,衣服则是表现形式,模特和衣服是分离的,这样你就可以随意换衣服。而原来HTML4中,数据和表现是混杂在一起的,要一次性换个表现形式非常困难。呵呵,有点抽象了,这个概念需要我们在应用过程中逐步领会。
  补充
  DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。

分享到:
评论

相关推荐

    CSS学习手册,CSS学习

    **CSS学习手册** 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它负责定义网页元素的样式,包括颜色、字体、布局以及页面的呈现方式。本手册将帮助初学者深入理解和掌握CSS的基本概念和技术...

    CSS学习手册

    **CSS学习手册** 在网页设计领域,层叠样式表(Cascading Style Sheets,简称CSS)是不可或缺的一部分,它赋予HTML或XML文档以视觉样式,让网页内容更加丰富多彩且易于维护。作为史上最全的CSS学习手册,我们将深入...

    400实例html+css 学习手册

    在"400实例html+css 学习手册"中,你将深入了解到这两门技术的精髓。这本手册通过400个具体实例,旨在帮助初学者和有一定基础的学习者更好地掌握HTML和CSS的应用技巧。以下是一些关键的知识点: 1. **HTML基础**:...

    Div+css 学习手册

    《Div+CSS学习手册》是一份综合性的资源集合,涵盖了网页设计与重构的关键技术。这份压缩包包含了多种格式的文件,如CHM和PDF,专为深入理解和实践Div+CSS布局设计而准备。以下是其中涉及的主要知识点: 1. **Div...

    非常实用的CSS学习手册

    【CSS学习手册】是一份非常实用的资源,它旨在帮助初学者和有一定基础的学习者深入理解和掌握CSS(层叠样式表)这一核心技术。CSS作为网页设计的重要组成部分,用于定义网页的布局、颜色、字体等视觉样式,使得网页...

    css 学习手册........

    《CSS学习手册——结合Div布局》 在网页设计领域,CSS(Cascading Style Sheets)是一种不可或缺的语言,它用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。本手册将深入浅出地介绍CSS,特别是...

    html+CSS学习手册

    本套学习手册全面涵盖了HTML与CSS5的核心概念、语法以及应用。 HTML4 参考手册.chm:这份手册详细讲解了HTML4的结构元素、属性和标记,包括文本格式化、图像插入、链接、表格、框架以及表单控件等。HTML4是互联网...

    前端常用开发手册-css学习手册

    学无止境,坚持整理我们经常使用的学习手册,加油!

    html手册+css手册

    这份“html手册+css手册”压缩包提供了关于这两种语言的详细参考资料,对于页面开发人员来说是极具价值的学习材料。 HTML是用于创建网页内容的标记语言,它定义了网页的结构,比如标题、段落、图片、链接等元素。`...

    css2.0使用手册

    13. **学习手册**:`css学习手册.chm`应提供了一个逐步学习CSS的指南,从基础到高级,帮助读者全面掌握CSS2.0的各个方面。 14. **配色常识**:配色是设计中的重要一环。`配色常识.chm`可能涵盖色彩理论、配色原则、...

    CSS离线手册、W3Cschool离线手册.rar

    W3Cschool是一个广受欢迎的学习资源网站,其离线手册可能包含了大量的CSS教程、实例和参考材料。用户可以通过这个离线版本学习CSS语法、选择器、布局技术、动画、过渡等,并进行实践操作。 **总结** 这个压缩包...

Global site tag (gtag.js) - Google Analytics