CSS新手完全自学教程幻灯片.ppt

第1章 CSS是什么 当今的世界已经全面进入了网络时代，可以说，我们日常生活中每天都离不开网络：通过即时通讯工具，比如MSN、QQ等，人们彼此可以方便地沟通；利用Outlook、Foxmail等，学生和白领可以自如地处理自己的电子邮件，让工作效率大为提高；在大大小小的电子商务网站上选购自己喜欢的商品，用网上支付的方式，时尚一族可以迅速的得到自己心仪的商品；特别是，每一个网民都会通过网络来快速地获取世界上最新发生的新闻和动态。正是网络把我们拉得更近，让世界更小。可是，在享受网络社会的便利的同时，你有没有想过，在网上冲浪浏览网页的时候，我们的眼睛看到了什么？而又是什么让这些丰富多彩的网页呈现出来？ 1.1 CSS是什么 设想这样一个场景：我们要用Word写一篇文档。首先，打开Word，然后，输入内容，再跟据需要把内容的题目居中、字体变大，最后还会调整各段的字体、大小、颜色甚至每行之间的距离。修改完成，我们会把这篇文档保存，形成一个后缀名为doc或者docx的文件。这个Word文件可以说是由两大部分：内容和格式组成。同样的，我们浏览网页所看到的Html文件也是由内容和格式组成的。网页上的文字和图片是内容，文字的字体、大小、颜色等等都是格式。样式表就是控制网页格式的技术。 样式表，英文名称叫做Style Sheet，也有的人称之Cascading Style Sheet，把这三个单词的首字母连起来，就是样式表的英文简称CSS，这正是本章名字中那三个大写字母的来历。 在网页制作的时候采用CSS技术，可以有效地对网页的布局、字体、颜色、背景和其它效果实现更加精确的控制。 1.1.1 什么是Cascade 我们看到，CSS的全称英文中有一个单词Cascading，应该是Cascade的分词形式，那么这个词是什么意思呢？让我们首先查一下英文词典。 Cascade 名词：小瀑布， 喷流，层叠 动词：成瀑布落下 取名词的含义，所以样式表又叫做层叠样式表。关于层叠在电脑世界中的含义。我们先来看一个小实验。 1.1.2 层叠的样式 前文解释了层叠在电脑世界中的意思，对于样式表，为什么要在前面加上层叠两字呢？原来，这和样式表的生效方式有关系。 我们知道，网页由内容本身以及内容的样式组成。对内容样式的设置可以在某一段内容前面进行；也可以是整个网页的开头部分 – 这样可以控制整个网页的样式；更可以是单独的一个样式表文件 – 这样可以控制很多网页的样式。当我们用浏览器打开这个网页的时候，浏览器负责把内容加上样式显示给我们的肉眼。在给内容应用样式的过程中，浏览器首先查看这段内容前面有没有样式的设置，如果没有就会查看网页的开头部分有否样式的设置，如果还没有就最后查看单独的样式表文件是否存在。这个过程好比一个流水线，也好像我们查找桌面上很多层叠窗口从而发现所需要的窗口的过程，因此，样式表也就叫做层叠样式表。 1.1.3 表的作用 我们大概都见过或者使用过微软的Excel，用它来记录财务上的消费支出真是很方便。比如，某一天，我的个人帐本会记载，早饭吃一个肉夹馍，3元；一碗小米粥，1元。这样就形成了一张表格，当我过了几天回来查看这个文档，我就能对当时的情况有所了解。实际上，类似Excel软件所处理的这类文档统称为Spread Sheet。 层叠样式表也是一样，在它里边记录了网页这一段内容该用什么样式来显示，而那一段内容要用什么样式来显示，这样最终也形成了一个表格，当我们看到这个样式表文件时，脑海里也能浮现出网页显示时候的大致样子。 讲到这里，我们基本明白了CSS是什么的问题，让我们来温习一下：层叠样式表，又叫做CSS，是在网页制作的时候采用的一种技术，利用它可以有效、灵活地对网页的布局、字体、颜色、背景和其它效果实现更加精确的控制。 1.2 CSS的发展历程 有句外国谚语说的好：“罗马不是一天建立起来的”。CSS也是一样，而且它和互联网上的主要文档格式 HTML语言密不可分，因此，了解CSS的发展历程，首先要从互联网和HTML的产生说起。让我们回到互联网诞生初期。 1.2.1 关于HTML HTML，英文全称Hypertext Markup Language，中文意思也就是超文本链接标示语言。是WWW（Word Wide Web）的通用描述语言。 互联网的基本组成部分就是Web页面，而Web页面一般都是由HTML来书写的。举个比方，我们所生存的世界上生活着很多种民族，但是联合国开会的时候标准语言只有那么几种：英语，汉语等等，这是大家共同交流的基础。HTML就起到了类似这种标准的沟通方式的作用。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）