CSS入门教程(最新整理版).pdfVIP

第8章CSS入门

CSS，层叠样式表(CascadingStyleSheets)，是指通过定义样式，规定了页面如何显示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

linkrel=stylesheettype=text/csshref=mystyle.css

/head

2、内部样式表

当单个文件须要特殊样式时，就可以运用内部样式表。你可以在head部分通过style标签定义

内部样式表。

head

styletype=text/css

body{background-color:red}

p{margin-left:20px}

/style

/head

3、内联样式

当特殊的样式须要应用到个别元素时，就可以运用内联样式。运用内联样式的方法是在相关的标签

中运用样式属性。样式属性可以包含任何CSS属性。以下实例显示出如何变更段落的颜色和左外边距。

pstyle=color:red;margin-left:20px

Thisisaparagraph

/p

8.1.2如何运用CSS

CSS语法由三部分构成：选择器、属性和值：

selector{property:value}

选择器(selector)通常是你希望定义的HTML元素或标签，属性(property)是你希望变更的属性，

并且每个属性都有一个值（value）。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的

样式声明（declaration）：

body{color:blue}

上面这行代码的作用是将body元素内的文字颜色定义为蓝色。在上述例子中，body是选择器，而包

括在花括号内的的部分