CSS初级教程.docVIP

介绍 级联样式表（Cascading Style Sheets，CSS）是一种为网站添加布局效果的出色工具。它可以省去你大量时间，令你可以采用一种全新的方式来设计网站。CSS是每个网页设计人员所必须掌握的。 本CSS教程能够让你在数小时内入门CSS。它很容易理解，而且将向你介绍所有高级技巧。 学习CSS是很有趣的。你在学习本教程的过程中，记得留有充分的时间来实践你在每一课中学到的知识。 使用CSS要求你有基本的HTML经验。如果你不熟悉HTML，那么请在开始学习CSS之前先学习我们提供的HTML教程。 我需要什么软件？ 在学习本教程时，请不要使用类似FrontPage、DreamWeaver或Word这样的软件。这些高级软件对你学习CSS没有帮助。相反，它们会限制你，并显著减慢你的学习进度。 你所需要的只是一个免费的简易文本编辑器。 例如，微软视窗操作系统（Microsoft Windows）自带的记事本（Notepad）程序。你可以依次点击“开始菜单→程序→附件”找到该程序。如果你用的是其他操作系统，那么也有类似的简易文本编辑器可用，比如Linux上的Pico或Mac（苹果机）上的Simple Text。 采用简易文本编辑器来学习编写HTML和CSS是非常好的，因为它不会影响或修改你所输入的代码。这样，代码的对错完全取决于你自己，而不是软件。 你可以使用任何浏览器。但我们建议你把浏览器升级至最新版本。 你所需要的全部软件就是一个浏览器和一个简易文本编辑器。 我们现在开始学习CSS吧！ 第1课：CSS是什么？ 也许你曾听说过CSS，但并不真正清楚CSS到底是什么。在这一课，你将学到更多CSS的知识，并了解CSS可以做些什么。 CSS是Cascading Style Sheets（级联样式表）的缩写。 可以用CSS做什么？ CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。拭目以待吧！ HTML可以用于为网站添加布局效果，但有可能被误用。而CSS则提供了更多选择，而且更为精确、完善。现在所有浏览器都支持CSS。 经过下面若干课的学习之后，你将能够制作自己的CSS样式表，为自己的网站增添花样了。 CSS跟HTML的区别在哪里？ HTML用于结构化内容；CSS用于格式化结构化的内容。 嗯，这听上去有点技术性并令人疑惑。不过没关系，我们继续学习。过会儿你就明白了。 在Tim Berners-Lee发明万维网（World Wide Web）的那个年代，HTML语言是唯一用于给文本添加结构的语言。作者可以通过声明“这是一个标题”（利用h1标签）或“这是一个段落”（利用p标签）的方式来标记文本。 随着Web逐渐流行起来，网页设计者们开始寻求为网页增添布局的可能性。为此，当时的浏览器厂商们（网景公司和微软公司）发明了一些新的HTML标签（比如font等），以引入了新的布局——而非新的结构。 这也导致了原本用于进行文本的结构化的标签（比如table等）越来越多地被误用于进行页面的布局。许多新的布局标签（比如blink）只有一种浏览器支持。“您需要使用某某浏览器来浏览本页面”成为当时常见于许多网站的声明。 CSS的发明正是为了改善这一状况，它为Web设计师们提供了完善的、所有浏览器都支持的布局能力。而且，文档的表现样式与内容的分离，也令网站维护容易了许多。 采用CSS有哪些好处？ CSS是Web设计界的一次革命。CSS的具体优点包括： 通过单个样式表控制多个文档的布局； 更精确的布局控制； 为不同的媒体类型（屏幕、打印等）采取不同的布局； 无数高级、先进的技巧。 在下一课，我们将深入考察CSS的工作原理，以及如何上手。 第2课：CSS的工作原理 在这一课，你将学习如何制作自己的第一个样式表。你将了解基本的CSS模型，以及在HTML文档里使用CSS所必需的代码。 级联样式表（CSS）里用到的许多CSS属性都与HTML属性相似，所以，假如你熟悉采用HTML进行布局的话，那么这里的许多代码你都不会感到陌生。我们先来看一个具体的例子。 基本的CSS语法 比方说，我们要用红色作为网页的背景色： 用HTML的话，我们可以这样： body bgcolor=#FF0000 用CSS的话，我们可以这样获得同样的效果： body {background-color: #FF0000;} 你会注意到，HTML和CSS的代码颇有几分相似。上例也向你展示了基本的CSS模型： 但是把CSS代码放在哪里呢？这正是我们下面要讲的。 为一个HTML文档应用CSS 为HTML文档应用CSS，有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法（即外部样式表）予以关注。 方