IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

HTML使用标签将内容放到网页上，也可使用元素和属性来控制简单的文档外观。如果希望更全面地控制Web页面的外观和布局，则需要使用层叠样式表（简写为CSS）。CSS规范的工作原理在于允许用户制定一些规则，描述文档中元素内容的表现形式，通过设置不同的规则控制页面中每一个元素的外观，包括字体的颜色和大小、线的宽度和颜色、页面中各项之间的空白量，以便使页面看上去更令人感兴趣。CSS和HTML一样是所有网页制作技术的核心与基础，是为HTML制定样式的机制，能控制浏览器如何显示HTML中的每个元素及其内容。CSS是和HTML一起工作的，用来弥补HTML对网页格式化功能的不足。既可以将HTML和CSS写在同一个文件中，也可以分开编写，都是纯文本文件，也都是通过浏览器解析的。本章所介绍的CSS语法只覆盖了本书程序实例中所涉及的内容。

CSS简介

CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言，所以学习CSS之前应该先去了解HTML。CSS的作用是定义网页的外观（例如，字体、背景、文本、位置、布局、边缘、列表及其他），它也可以和JavaScript等浏览器脚本语言合作做出许多动态的效果。

Ø　所谓样式表，是样式化HTML的一种方法。HTML是文档的内容，而样式表是文档的表现，或者说外观。

Ø　所谓层叠，就是将一组样式在一起层叠使用，控制某一个或多个HTML元素，按样式表中的属性依次显示。

一张样式表可以用于多个页面，甚至整个站点，因此CSS具有良好的易用性和扩展性。从总体来说，使用CSS不仅能够弥补HTML对网页格式化功能的不足，例如段落间距、行距、字体变化和大小等，还可以使用CSS动态更新页面格式、进行排版定位等。CSS的特点如下：

Ø　控制页面中的每一个元素（精确定位）。

Ø　对HTML语言处理样式的最好补充。

Ø　把内容和格式处理相分离，减少工作量。

我们可以将CSS定义在HTML文档的每个标记里，或者以<style>标记嵌入在HTML文档中，也可以在外部附加文档作为外加文档。本例使用嵌入样式表，改变同一个HTML文档中1个<h1>和4个<p>标记的输出效果。使用文本编辑器打开一个扩展名为.html的网页文件，将3个字符串分别编写在HTML的1个<h2>和两个<p>标记中。并在该文档中使用<style>标记嵌入CSS代码，控制这三个标记的显示效果。代码如下所示：

使用浏览器直接打开这个文件，就可以看到浏览器对这个网页文件解释后的结果，如图1所示。

图1  简单的CSS实例演示结果

本例中，HTML定义的网页结构使用CSS设置输出格式，可以将格式和结构分离。只要在CSS中改变某些属性，则使用这个样式的所有HTML标记都会更新。