(CSS入门教程.doc

第8章 CSS入门 CSS，层叠样式表(Cascading Style Sheets)，是指通过定义样式，规定了页面如何显示HTML元素。这些CSS描述往往脱离与HTML文档的内容，从而达到内容与形式的分离。样式表定义如何显示HTML元素，而且通常保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。 从某些角度来讲，CSS实际上是一门博大精深的学问。和Java语言不一样，CSS更偏重与设计，一些专业的WEB开发人员除了掌握CSS的基本知识外，还需要有一定的艺术功底，甚至心理学知识，因为他们不仅仅要让页面漂亮，更重要的是要让用户拥有更好的体验。由于篇幅的关系，在本章只能让大家对CSS有一个大致的了解，仅仅是一个入门，对CSS感兴趣的读者，可以参考一些专业的CSS书籍。 本章主要讲解： CSS的简单介绍 如何使用CSS控制页面显示 使用CSS的注意点和技巧 CSS应用实例 8.1 认识和使用CSS HTML标签原本被设计为用于定义文档内容。通过使用 h1、p、table 这样的标签，HTML的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息，而文档的布局由浏览器来完成。但是现实中，由于很多的程序员（这些程序员通常不是专门的页面设计师，而是后台Java或是.NET程序员）对这点理解得不够，让HTML做了太多不应该让它来完成的工作。 比如很多开发者会使用一个表格嵌套表格的方式来进行页面布局。当文档比较简单的时候，或许这种方法不存在太大的问题，但是当文档复杂超过一定程度之后，这种使用表格布局的方法愈发显示出弊端：调整起来十分困难，无用的标签越来越多等等。另外，很多人在标签内部控制页面元素的表现形式，比如字体、颜色、对齐方式等等。同样的，当页面复杂到一定程度，或者页面个数多到一定的程度之后，你想修改任意一个样式，都要花很多的时间和精力，而且还容易漏改或者改错。 以上是两种常见的不科学的WEB客户端编程方式，这样的做法使得创建文档内容与文档表现形式分离的站点变得越来越困难。为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在HTML4.0之外创造出层叠样式表CSS。 8.1.1 如何引入样式表 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表： 1、外部样式表 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。 head link rel=stylesheet type=text/css href=mystyle.css /head 2、内部样式表 当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过style 标签定义内部样式表。 head style type=text/css body {background-color: red} p {margin-left: 20px} /style /head 3、内联样式 当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。 p style=color: red; margin-left: 20px This is a paragraph /p 8.1.2 如何使用CSS CSS语法由三部分构成：选择器、属性和值： selector {property: value} 选择器 (selector)通常是你希望定义的HTML元素或标签，属性(property)是你希望改变的属性，并且每个属性都有一个值（value）。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）： body {color: blue} 上面这行代码的作用是将body元素内的文字颜色定义为蓝色。在上述例子中，body是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color为属性，blue为值。 如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，不过建议每条声明的末尾都加上分号，好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样： p {text-align:center; color:red;} 建议每行只描述一个属性，这样可以增强样式定义的可读性，就像这样： p { text-align: center; color: black; font-family: