css网站布局实录学习笔记第一部分

前端  /  管理员 发布于 7年前   284

今天开始，认真学习前端技术，哈哈哈~~~加油~~~

推荐这本《CSS网站布局实录》（第2版）给初级入门选手，虽然这本书年代有点久远，不过很经典。

注明一下：这里讲述的CSS均为CSS 2.0版本。

第一章 Web标准与CSS布局概述

1.1 Web标准的历史及发展

1.1.1 Web标准

Web标准是由W3C(World Wide Web Consortium)和其他标准化组织制定的一套规范集合，包含一系列标准，包含了HTML、XHTML、JavaScript以及CSS等。

Web标准的目的在于创建一个统一的用于Web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。

1.1.2 Web表现层技术

Web本身是由一套非常复杂的技术架构组成，但其最终目的是面向浏览器或应用程序的用户，并为后者提供一个可视化的、便于操作的信息交互平台。而表现层技术指的就是将信息展示给用户并提供给用户交互行为的技术。简单理解为表现就是样式，技术层面上是一堆程序代码，而表现层带带来的是视觉上所看到的东西。

目前，由W3C制定的Web标准正是这样一个表现层技术的集合，同时也是目前唯一的跨平台跨客户端的技术。

1.2 Web标准的构成

Web标准由三大部分组成的标准集：结构(Structure)、表现(Presentation)以及行为(Behavior)。

1.2.1 结构(Structure)

结构用来对网页中用到的信息进行整理与分类。用于结构化设计的Web标准技术主要有这几种：HTML、XML、XHTML。

1. HTML(Hyper Text Mark-up Language)超文本标记语言

这是Web最基本的描述语言。HTML文本是由HTML命令标签组成的描述性文本，HTML标签可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分。头部描述浏览器所需的信息，主体包含所要展现的具体内容。

2. XML(The Extensible Markup Language)可扩展标记语言

XML最初设计的目的是为了弥补HTML的不足，以其强大的扩张性满足网络信息发布的需要，后来逐渐用于网络数据的转换及描述。

3. XHTML(The Extensible HypterText Markup Language)可扩展超文本标记语言

XHTML是更严谨更纯净的HTML版本。简单来说，建立XHTML的目的就是实现HTML向XML的过渡。

1.2.2 表现(Presentation)

表现技术用于对已经被结构化的信息进行显示上的控制，包含版式、颜色、大小等样式控制。目前的Web展示中，用于表现的Web标准技术主要就是CSS技术。

CSS(Cascading Style Sheets)层叠样式表
W3C创建CSS标准的目的是希望以CSS来描述整个页面的布局设计，与HTML所负责的结构分开。使用CSS布局与XHTML所描述的信息结构相结合，能够帮助设计师分离出表现与内容，使站点的构建及维护更加容易。

1.2.3 行为(Behavior)

行为是指对整个文档内部的一个模型进行定义及交互行为的编写，用于编写用户可以进行交互式操作的文档。表现行为的Web标准技术主要有：DOM和ECMAScript。

1. DOM(Document Object Model)文档对象模型

根据W3C DOM规范，DOM是一种让浏览器与Web内容结构之间沟通接口，使得可以访问页面上的标准组件。给予Web设计师和开发者一个标准的方法，让他们来访问站点中的数据、脚本和表现层对象。

2. ECMAScript脚本语言（JavaScript的扩展脚本语言）

它是由CMA(Computer Manufacturers Association)制定的一种标准脚本语言(JavaScript)，用于实现具体界面上对象的交互操作。

1.3 CSS布局与table布局的区别

从目前的Web标准来看，最理想的技术结构式使用HTML或XHTML来设计网页，推荐使用XHTML以更严谨的语言编写结构，并使用CSS来完成网页的布局表现。

1.3.1 CSS的优势

CSS是控制网页布局样式的基础，并真正能够做到网页表现与内容分离的一种样式设计语言。相对于传统HTML对样式的控制而言，CSS能够对网页中的对象的位置进行像素级的精确控制，支持几乎所有的字体、字号样式，以及拥有对网页对象盒模型样式的控制能力，并能够进行初步页面交互设计。归纳起来，CSS有以下几个主要优势：

浏览器支持完善：CSS样式设计出来的网页，在众多平台及浏览器下对样式的表现最为接近。
表现与结构分离；在CSS设计代码中，通过CSS的内部导入(Import)特性，可以使设计代码根据设计需求进行二次分离。
样式设计控制功能强大：对网页对象的位置排版，能够进行像素级的精确控制等。
继承性能优越（层叠处理）：CSS的代码在浏览器的解析顺序上，具有类似OOP面向对象的基本特性，浏览器能根据CSS的级别，按照对同一元素定义的先后进行应用多个样式。
1.3.2 传统的table布局与CSS布局

实际上，传统table布局方式只是利用了HTML的table元素所具有的零边框特性。由于table元素可以在显示时，使得单元格的边框和间距被设置为0，即不显示边框，所以可以将网页中的各个元素按照版式划分后，分别放入表格的各个单元格中，从而实现了复杂的排版组合效果。

table表格布局代码最常见的是在HTML标签之间嵌入一些设计代码，比如width="100%", border="0"等，而这种混合式编写的大量样式设计代码混杂在表格单元格中，使得其可读性大大降低，维护起来成本也很高。

table布局的核心在于设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格则通过许多透明gif进行占位来实现，最终的结构式一个复杂的表格，而这样复杂的表格设计使得网页文件量庞大，不利于设计与修改，最终导致浏览器下载及解析速度过慢。

而使用CSS布局则可以从根本上改变这种状况。CSS布局的思维方法不再放入table元素的设计中，取而代之的是HTML中的另一个元素div。div可以理解为图层或者一个块，div是一种比表格更加简单的元素。div的功能仅仅用于将一段信息给标记出来，用于后期的样式定义。

在使用div时，无须像表格那样通过其内部的单元格来组织版式。通过CSS强大的样式定义功能，可以比表格更简单、更自由地控制页面的版式及样式。下面列出一部分div样式设计代码：

XHTML部分：

复制代码代码如下:
/* 表示页面中定义了一个div，并使用content这个class名称 */
<div class="content">....</div>

CSS部分：

复制代码代码如下:
[CSS]</p><p>.content {
float: right; /* 表示div浮动在当前位置的右侧 */
margin: 10px 20px 10px 10px; /* 设置外边距属性 */
text-align: center; /* div里的文字居中显示 */
line-height: 160%; /* div中的文字行高为原高的160% */
width: 50%; /* 表示这个div的宽度为所处的上一层位置的50% */
background-color: blue; /* 表示div的背景色为蓝色 */
}

.content{}区域表示在CSS中定义了一个名为content的样式名称，它用于对页面中所有class为content的对象进行样式控制。

1.4 向Web标准过渡

Web标准的目的是实现网页结构、表现、行为的分离，达到最佳架构，提供网站可用性与用户体验。用下面几个标准及方法进行网站构建是最为理想的选择。

1.4.1 从HTML转向XHTML

为什么要使用XHTML

事实上，XHTML就是HTML的下一个版本，用于替代HTML并帮助转向XML的一套过渡型标记语言。XHTML的设计目的并不是为了最终表现，它主要用于对网页内容进行结构设计，其严谨语法结构有利于浏览器进行解析出来，它是一门面向文档结构的设计语言。

目前，XHTML的使用标准主要包含Transitional、Strict和Frameset三种应用方式。

Transitional方式：一种松散过渡型的XHTML应用，它允许用户使用部分HTML标签来编写XHTML文档。推荐使用这种方法。
Strict方式：一种严格型的应用方式，XHTML中不能使用任何样式表现的标签及属性。
Frameset方式：针对框架网页的应用方式。

1.4.2 发挥CSS的作用

1. 合理的CSS文件结构

虽然CSS做到了样式设计与内容的分离，但CSS文件本身也应该拥有良好的层次结构及规范，目的是进一步改善样式设计的可维护性。

2. 继承与重用的优势

使用CSS的优势就在于其良好的重用特性，一段CSS设计代码可以供多个区域同时使用。除了重用功能外，CSS还可以实现类似于面向对象程序设计中的继承机制，通过继承机制能够进一步地完善网站的样式结构。

3. 设计跨平台的代码

CSS也有美中不足，由于不同品牌浏览器及不同版本之间的渲染方式不同，各自对CSS的解析也存在着一定差异。针对这些原因，CSS设计也应当具有一定的跨平台兼容特性，编码时应尽量减少生僻属性的使用，如果想兼容旧版本的浏览器，也应当注意留有一定的CSS hack代码。

CSS hack可以简单地翻译为CSS黑客程序。这种类似于期盼浏览器的编码收到，可以有效的修补浏览器的解析问题。

4. 具有良好可用性的CSS样式设计

可用性的目标是使得交互产品（软件、网站）对用户的需求提供最大限度的满足。具有良好可用性的CSS样式设计的目的就是希望通过良好的设计，创造出更好的交互式网站，以便用户使用。

5. 使用基于DOM的脚本语言来编写交互

DOM的产生同样是为了实现脚本语言的跨平台与跨浏览器应用。就目前来说，大部分浏览器都支持标准的DOM。使用符合DOM的脚本语言，基本上不再需要检测浏览器的不同版本而去编写几套不同的代码，只要符合DOM的浏览器，相同的代码就能够完成所有可支持的操作。目前的JavaScrit是符合DOM标准的脚本语言。

1.5 常见问题

1.5.1 使用Web标准后表格还有用吗

1. 关于表格

使用Web标准后，并不是说排除表格的使用，只是使用表格作为网页排版，布局页面元素是不合理的，表格式用来显示数据的。表格职能不在于进行网页布局，布局任务应该交给CSS来处理。

2. 关于其他元素

按照使用经验，把XHTML标准中的一些元素分为三大类。

辅助布局设计元素
指的是div、span等元素，他们的主要功能是用来布局整个页面。

结构化元素或者信息元素
指的是table、ul、pre、code等元素，他们是一些信息显示与控制方面的元素。

a、meta元件
使用它们可用来实现一些特殊功能。

1.5.2 可以继续使用HTML来设计网页吗

答案是肯定的。只所以推荐使用XHTML是因为HTML的设计形式已经不能满足表现与内容分离的网站架构原则。如果继续使用HTML来构建网站，从最终目标上说是没有差别的。

1.5.3 为什么不直接使用到XML

XML是未来数据的描述格式，就目前而言，不适合直接应用XML来构建网站，因为在技术上难度较高。

1.5.4 什么叫网站重构

网站重构可以理解为改变老式的HTML表格布局方式，使用新的符合Web标准的网站结构及代码编写方法。更深一层的意义时，希望通过Web标准来提供一个加大网站效益的接口，这个效益可以简单理解为两个方面：可扩充性及可维护性。