css框架简易实例教程(适于初学).pdf

介绍 级联样式表（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 的具体优点包括： • 通过单个样式表控制多个文档的布局； • 更精确的布局控制； • 为不同的媒体类型（屏幕、打印等）采取不同的布局； • 无数高级、先进的技巧。 • 第2 课：CSS 的工作原理 • 在这一课，你将学习如何制作自己的第一个样式表。你将了解基本的CSS 模型，以及在HTML 文档里使用CSS 所必需的代码。 • 级联样式表（CSS）里用到的许多CSS 属性都与HTML 属性相似，所以，假如你熟悉采用HTML 进行布局的话，那么这里的许多代码你都不会感到陌生。我们 先来看一个具体的例子。 • 基本的CSS 语法 • 比方说，我们要用红色作为网页的背景色： • 用HTML 的话，我们可以这样： • • body bgcolor=#FF0000 • • 用CSS 的话，我们可以这样获得同样