第1章CSS是什么

第1章CSS是什么 当今的世界已经全面进入了网络时代 可以说 我们日常生活中每天都离不开网络 通过即时通讯工具 比如MSN QQ等 人们彼此可以方便地沟通 利用Outlook Foxmail等 学生和白领可以自如地处理自己的电子邮件 让工作效率大为提高 在大大小小的电子商务网站上选购自己喜欢的商品 用网上支付的方式 时尚一族可以迅速的得到自己心仪的商品 特别是 每一个网民都会通过网络来快速地获取世界上最新发生的新闻和动态 正是网络把我们拉得更近 让世界更小 可是 在享受网络社会的便利的同时 你有没有想过 在网上冲浪浏览网页的时候 我们的眼睛看到了什么 而又是什么让这些丰富多彩的网页呈现出来 1 1CSS是什么 设想这样一个场景 我们要用Word写一篇文档 首先 打开Word 然后 输入内容 再跟据需要把内容的题目居中 字体变大 最后还会调整各段的字体 大小 颜色甚至每行之间的距离 修改完成 我们会把这篇文档保存 形成一个后缀名为doc或者docx的文件 这个Word文件可以说是由两大部分 内容和格式组成 同样的 我们浏览网页所看到的Html文件也是由内容和格式组成的 网页上的文字和图片是内容 文字的字体 大小 颜色等等都是格式 样式表就是控制网页格式的技术 样式表 英文名称叫做StyleSheet 也有的人称之CascadingStyleSheet 把这三个单词的首字母连起来 就是样式表的英文简称CSS 这正是本章名字中那三个大写字母的来历 在网页制作的时候采用CSS技术 可以有效地对网页的布局 字体 颜色 背景和其它效果实现更加精确的控制 1 1 1什么是Cascade 我们看到 CSS的全称英文中有一个单词Cascading 应该是Cascade的分词形式 那么这个词是什么意思呢 让我们首先查一下英文词典 Cascade名词 小瀑布 喷流 层叠动词 成瀑布落下取名词的含义 所以样式表又叫做层叠样式表 关于层叠在电脑世界中的含义 我们先来看一个小实验 窗口的层叠 Cascade 排列方式 1 1 2层叠的样式 前文解释了层叠在电脑世界中的意思 对于样式表 为什么要在前面加上层叠两字呢 原来 这和样式表的生效方式有关系 我们知道 网页由内容本身以及内容的样式组成 对内容样式的设置可以在某一段内容前面进行 也可以是整个网页的开头部分 这样可以控制整个网页的样式 更可以是单独的一个样式表文件 这样可以控制很多网页的样式 当我们用浏览器打开这个网页的时候 浏览器负责把内容加上样式显示给我们的肉眼 在给内容应用样式的过程中 浏览器首先查看这段内容前面有没有样式的设置 如果没有就会查看网页的开头部分有否样式的设置 如果还没有就最后查看单独的样式表文件是否存在 这个过程好比一个流水线 也好像我们查找桌面上很多层叠窗口从而发现所需要的窗口的过程 因此 样式表也就叫做层叠样式表 1 1 3表的作用 我们大概都见过或者使用过微软的Excel 用它来记录财务上的消费支出真是很方便 比如 某一天 我的个人帐本会记载 早饭吃一个肉夹馍 3元 一碗小米粥 1元 这样就形成了一张表格 当我过了几天回来查看这个文档 我就能对当时的情况有所了解 实际上 类似Excel软件所处理的这类文档统称为SpreadSheet 层叠样式表也是一样 在它里边记录了网页这一段内容该用什么样式来显示 而那一段内容要用什么样式来显示 这样最终也形成了一个表格 当我们看到这个样式表文件时 脑海里也能浮现出网页显示时候的大致样子 讲到这里 我们基本明白了CSS是什么的问题 让我们来温习一下 层叠样式表 又叫做CSS 是在网页制作的时候采用的一种技术 利用它可以有效 灵活地对网页的布局 字体 颜色 背景和其它效果实现更加精确的控制 1 2CSS的发展历程 有句外国谚语说的好 罗马不是一天建立起来的 CSS也是一样 而且它和互联网上的主要文档格式 HTML语言密不可分 因此 了解CSS的发展历程 首先要从互联网和HTML的产生说起 让我们回到互联网诞生初期 1 2 1关于HTML HTML 英文全称HypertextMarkupLanguage 中文意思也就是超文本链接标示语言 是WWW WordWideWeb 的通用描述语言 互联网的基本组成部分就是Web页面 而Web页面一般都是由HTML来书写的 举个比方 我们所生存的世界上生活着很多种民族 但是联合国开会的时候标准语言只有那么几种 英语 汉语等等 这是大家共同交流的基础 HTML就起到了类似这种标准的沟通方式的作用 HTML文本是由HTML命令组成的描述性文本 HTML命令可以说明文字 图形 动画 声音 表格 链接等 HTML的结构包括头部 Head 主体 Body 两大部分 其中头部描述浏览器所需的信息 而主体则包含所要说明的具体内容 1 2 2设计HTML的目的 HTML产生的原因很简单 当年 欧洲粒子物理研究中心 简称CERN 如果你看过丹 布朗的小说 达 芬奇密码 应该对这个缩写有所耳闻 的一位研究员为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起 形成有机的整体 使得使用者不用考虑具体信息是在当前电脑上还是在网络的其它电脑上 设计了HTML语言 在浏览HTML代码编写成的网页时 只需使用鼠标在文档中单击一个图标或者链接 马上就会转到与此图标相关的网页内容 这些信息很可能存放在网络的另一台电脑中 1 2 3HTML的特点 HTML很简单 因此易于学习 它允许网页制作人用简单的文字标记 不需要复杂的逻辑处理就可以建立文本与图片相结合的复杂页面 制作网页不需要了解过程 类 继承 堆栈等等高深的计算机知识 非常适合普通人来学习 HTML语言还需有通用性 用HTML书写的网页可以被网上任何其他人浏览到 无论浏览者使用的是什么系统的电脑或什么版本的浏览器 编辑HTML页面可以用一般的文字处理器 如MicrosoftWord 记事本 写字板等等 以及HTML的语法知识 现在还有很多的专业HTML编辑工具 比如Adobe公司的Dreamweaver等等 有了以上这些工具 你甚至不用手工敲入任何代码 就可以获得一个非常漂亮的网页框架 当然 文字内容还是需要手工输入的 1 2 4CSS的传奇历程 CSS的传奇开始于1994年 当时 由CERN发明的互联网已经有了一些电子出版方面的应用 但是 既然作为一个可以发布电子出版物的平台 互联网还是缺少一个很重要的部分 那就是文档的格式如何规范的问题 传统的印刷文档都有各自的格式 比如报纸 大标题用什么字体 大小多少 图片的位置 都有章可循 互联网上的牡迪匀换共痪弑刚庑 袷 因此 互联网的早期发明人之一 Hakon看到了这样的一种需求 他决定在已经有的成果基础上 朝这个方向努力 1 3建立网站和浏览网站 在具体介绍层叠样式表之前 先了解电脑世界中的几个基本概念以及建立网站 浏览网站的基本过程 将有利于加深对CSS的理解 下面通过到饭馆吃饭的类比 来熟悉服务的概念 1 3 1什么是服务 我们日后编辑的网页文件与Word文档等其他类型的文件一样 都存放在电脑的硬盘上 但是 和供自己使用的文档不同 网页绝大部分是提供给别人看的 如果让其它人通过网络能够看到我们辛辛苦苦编写出来的网页 则必须把自己的电脑变成一台能够提供网页浏览服务的服务器 通俗的说 电脑世界里的服务和我们日常生活中所遇到的服务二字在含义上没有什么区别 假设我们要请自己的朋友吃饭 那么有两种选择 在家里自己动手或者去外面的饭馆 下面分别分析这两种选择 看看我们能否通过这样的类比来深入地了解电脑中服务的概念 1 3 2服务的场所 无论日常生活还是在电脑世界里 服务总是有个请求 反馈的过程 这个过程构成了服务这个词的具体内容 还是拿吃饭来举例子 请朋友到家里吃饭 可能不如请朋友到外面的饭馆去吃 这是因为饭馆的服务更专业 专业的厨师进行烹饪 专业的服务员端茶送水上菜 还有更适合用餐的专业环境等等 同样地 编写提供给别人阅览的网页 也要专业 到位的服务 在IT行业里 类似 饭馆 来提供专业服务的设备 就是服务器 1 3 3创建服务场所 建立网站 建立网站就是一个创建服务场所的过程 还是以前文中举过的饭馆为类比 我们知道 开饭馆需要考虑很多种要素 要考虑市场 价位如何 面对的群体 商务宴请还是小区居民 菜系 四川还是广东 场所 租金地段 厨师服务员 工资 等等 建立网站也是一样的 要考虑网站要做什么的 建立大而全的门户网站 还是小而精的专业信息网站 面对的群体 个人网络购物 个人交友社区还是建立单位的一个窗口 让感兴趣的潜在客户获得有用的信息 菜系 是用什么技术来实现这个网站 场所 网页存放的服务器性能如何 用户流量大不大 方便不方便用户访问 技术人员等等 当然 对于普通的员工来说 用不着考虑那么多的方方面面 但必须需要知道的是技术方面一个网站是如何建立的 1 3 4创建服务内容 网页的上传 编辑好的网页从本地电脑中转移到服务器空间的过程就是上传 上传可以通过多种方式 比如FTP 共享文件夹等 其中最常用的则是FTP方式 FTP 全称是FileTransferProtocol 文件传输协议 我们将在下一部分讲述协议的故事 这里读者只需要知道它是一个可以用来上传文件的国际标准就可以了 而且我们不需要了解它的具体内容 因为有很多支持这个标准的软件可以供我们使用 比如LeapFTP CuteFTP等等 利用这些软件的功能 我们就可以实现网页的上传 下面以CuteFTP为例进行介绍 1 3 5开启网页发布服务 服务器上有了网页文件 相当于饭馆有了做好的饭菜 还需要服务进行客户的服务 这个服务员就是运行在服务器上的网页发布服务程序 这样的程序有很多 比如Windows平台下的InternetInformationServices 简称IIS 图显示了在Windows服务器版中打开IIS管理器后的界面 当然 也可以直接单击开始 运行 在输入框中键入inetmgr来启动它 IIS管理器界面 1 3 6用户浏览网站的过程 网站是架设好了 那么用户浏览网站的过程又是怎样的呢 图显示了用户浏览某网站的基本过程 用户浏览网站的基本过程 1 4CSS在网站开发框架中的地位 前面讲了那么多背景知识 在本节终于可以开始讲述CSS了 首先读者需要了解的是CSS在网站开发框架中的地位 表1 1描述了整个网站开发的基本框架 网站开发中的基本框架 1 5制作CSS需要考虑的问题 从下一章开始 我们就要正式的学习编写CSS来控制网页的显示效果了 在具体做每一件事情之前 最好的方法之一就是对其有个总体的把握 另外对可能出问题的地方有所了解 以下几个小节列出了是需要在具体的编写过程中时常想起的要点 1 5 1对于不同用户的照顾 浏览网站的用户可能来自各个地域 甚至遍布世界各地 因此要充分考虑到他们上网时的习惯 要知道我们制作的网站绝大部分的目的是为了他们浏览的方便 获得有用的信息 在这一点上 这几年也是有相反的案例的 比如 某网站上关于中国的地图 台湾被标成了单独的国家 比如某电子商务网站的价格误标为一个非常的价格 用户定购后 网站又不承认导致产生了官司等等 用户的习惯包括他们使用的语言 风俗 货币单位等等 在网页制作方面 语言相对需要考虑的多一些 如果一个进出口贸易公司的网站只有中文 是不够的 而特别的 如果该网站的浏览用户中来自中东国家的比较多 阿拉伯版本网站页面上的文字就要从右到左边排列 1 5 2对于不同浏览器的照顾 这一点也可以是对不同用户照顾的延伸 因为不同的用户会使用不同的浏览器上网 但是由于这常常被很多的网页和CSS制作者所忽略 有必要单独列为一点以表示重要 由于不同的浏览器对于我们编写的HTML页面处理的结果是不同的 同样的代码 在IE下和在Firefox下可能有一些区别 有的时候 这点点小区别可能造成大的问题 对于目前世界上主流浏览器的市场占有率情况 可以查看下面的网址 1 5 3对于网站浏览速度的关注 除了上面所说的两点之外 用户浏览网站时的速度也是非常重要的一点 通俗的说 响应时间就是用户输入网址直到网页主要部分显现出来的时间 试想一个效果丰富的网站 如果让我们等待1分钟才能打开 这些效果给我们留下的印象也会大打折扣 据专家介绍 在浏览网站的时候 用户比较满意的响应时间大致在8 6秒之内 造成网站响应时间比较慢的原因多种多样 有用户本身机器的问题 不过那样的话 一般来说 用户浏览所有的网站都会有同样的问题 因此和网页制作本身无关 也有服务器和数据库相应的问题 那是程序员等需要考虑的问题 最后一点 就是也和网页制作以及CSS有关系 如果我们在页面中应用了很大的图片 太多的内联样式表 导致文件长度