css入门教程分析.pdfVIP

第 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进行布局的话，那么 这里的许多代码你都不会感到陌生。我们先来看一个具体的例子。 1 基本的 CSS语法 比方说，我们要用红色作为网页的背景色： 用 HTML的话，我们可以这样： body bgcolor=#FF0000 用 CSS的话，我们可以这样获得同样的效果： body {background-color: #FF0000;} 你会注意到， HTML和 CSS的代码颇有几分相似。上例也向你展示了基本的 CSS模型： 但是把 CSS代码放在哪里呢？这正是我们下面要讲的。 为一个 HTML文档应用 CSS 为 HTML文档应用 CSS，有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法（即外部样 式表）予以关注。 方法 1：行内样式表（ style 属性） 为 HTML应用 CSS的一种方法是使用 HTML属性 style 。我们在上例的基础之上，通过行内样式表将页面背景设为红 色： html head title 例子 /title /head body style=background-color: #FF0000; p这个页面是红色的 /p /body /ht