资源描述
第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有关系。如果我们在页面中应用了很大的图片，太多的内联样式表，导致文件长度变大，在同样的网络条件下，从服务器端发送到用户的浏览器这个过程中需要的时间就相应延长，从而导致相应时间变长，用户体验变差。更多精彩教程就在：彼岸苏安,1.6小结,本章首先介绍了HTML的简单历史和CSS的一些背景知识，重点是介绍服务的概念、建立网站的过程、用户浏览网站的一般过程。所谓服务，是一些程序，运行在服务器上，为别的程序、或者最终用户提供所需要的信息。建立网站就是一种实现服务的过程。浏览网站则主要包括以下两个步骤：用户请求网页。服务反馈网页。本章最后在总体上介绍了CSS制作需要注意的一些问题，主要有如下3点：对于不同用户的照顾。对于不同浏览器的照顾。对于网站浏览速度的关注。,第2章CSS初体验,对于学习一种新的技能来说，最自然的方法就是像婴儿学说话一样，模仿大人的语言和语气，从最简单的发音开始，直到最后逐渐掌握了一定量的词语才能完整地说出一个句子。CSS地学习同样离不开模仿，本章就先从辨别哪里是CSS，CSS有哪些种类开始，由简单到复杂，一步一步走进CSS技术的殿堂。下面就让我们出发。,2.1实验一：寻找CSS,在第1章里，本书对HTML和CSS的一些背景知识，还对浏览网站的过程做了介绍。文本的知识或多或少有点枯燥，既然我们讨论的内容离不开网络，那还是充分发挥它的优势，直接通过浏览一个网站来学习。我们的第一个任务就是在网络上找到一个实际的CSS。更多精彩教程就在：彼岸苏安,2.1.1浏览器与网页的外观,在WindowsXP系统中，单击开始，运行，输入iexplore.exe就可以打开默认自带的IE浏览器。如果机器中安装了火狐浏览器，在运行中输入firefox就可以了。浏览器的上方都有一个很长的输入框，也叫做地址栏，我们可以在其中输入想要访问的网址，在本实验中，输入，然后按回车（Enter）键。,HTML与浏览器的外观,2.1.2找到样式表,读者可能会问，在图2-1中只看到了浏览器和网页，哪里有样式表的存在？在第一章我们了解到一个简单HTML页面由内容和格式构成，浏览器根据HTML的格式控制字符来显示页面的内容，所以浏览器一定知道CSS在哪里，实际上，可以通过查看源代码的方法来发现它。在IE浏览器中单击菜单中的页面，在下拉菜单选择查看源代码，就可以看到一个页面中的格式控制字符。如果使用的是Firefox，则可以通过菜单中的查看页面源代码来完成同样的工作。,2.1.3先模仿后进步,前面所讲的这种查看源文件的方法，正是提供了一种模仿的途径，我们可以在碰到认为效果不错的网页时，查看源文件，分析其中CSS的使用，从而提高自己的水平。不过，不能抄袭别人的样式表，毕竟那是辛勤的劳动成果，我们所要做的就是从中学到知识。由于国外CSS技术应用比较成熟，有必要在学习的过程中以分析模仿国外优秀网站为主，同时还可以提高自己的英文水平。下面列出了一些比较好的学习钻研CSS技术的站点：http:/www.w3.org/Style/CSS/这是CSS的老家，CSS的官方站点，从出版信息到具体技术非常全面，英文站点。,2.2HelloCSS!3种CSS,在上一节中我们找到了网页代码中哪些部分是CSS，那么CSS是否都是这个样子呢？实际上它只是其中的一种。本节将介绍CSS的3个种类，为下一节开始实际编写第一个CSS做一些准备。更多精彩教程就在：彼岸苏安,2.2.1CSS的3个种类,CSS是3个字母，恰巧CSS的种类也有3种，分别是外部样式表、内部样式表和行内样式表。实际上CSS就是以样式表的存在位置来分类的：外部样式表存在于HTML文件的外部，是另外的一个后缀名为.css的文件。内部样式表存在于HTML文件的内部，在标签内，有具体的样式定义。行内样式表也处于HTML文件的内部，但是在标签管辖范围内，以属性的形式设置某一个标签的样式。图描述了3种CSS和HTML文件的关系。,3种CSS在HTML文件中的位置,2.2.2在Dreamweaver中创建CSS-利用Dreamweaver提供的模版,在Dreamweaver中，有两类创建CSS的方法，一种是根据软件提供的模版进行创建，另外一种是自定义创建CSS。打开Dreamweaver8，选择文件-新建菜单，弹出对话框界面如图2-4所示，其他版本的Dreamweaver也是类似的操作顺序和界面。,新建文档对话框,2.2.3在Dreamweaver中创建CSS-自定义创建,如果不想利用Dreamweaver提供的模版CSS，觉得有些死板的话，我们完全可以自行创建CSS，方法也非常简单。首先单击文件-新建菜单，选择基本页，HTML文件，Dreamweaver处于编辑状态，单击文本菜单，选择CSS样式，可以看到在它的子菜单中有如下几项，如图2-6所示。新建：用于新建样式表。附加样式表：用于附加已经编辑好的外部样式表，也就是后缀为CSS的文件。导出：由于我们的HTML代码中还没有包含任何的CSS，因此这项菜单项是灰色的，无法单击。设计时间：使在处理Dreamweaver文档时可以显示或隐藏CSS样式表所应用的设计。,2.3实验二：你的第一个样式表,在熟悉了Dreamweaver里有关CSS的相关界面后，我们就可以通过实验二自己来创建第一个样式表了。由于样式表有三种：外部样式表，内部样式表和行内样式表，实验中将分别用这三种方式来实现同一种显示效果，并从中体会下面一句话的含义：外部样式表，内部样式表和行内样式表三种方法都能够实现相同的显示效果，它们之间的区别在于写法、应用场合和个人偏好的不同。我们以第一章中创建的html.html文件为蓝本，控制文字内容的显示。,2.3.1使用行内样式表,行内样式表，顾名思义，它和样式所定义的内容在同一代码行内。比如代码所示。应用了行内样式表的HTML页面：html.html一个简单网页你好!HTML!(行内样式表),2.3.2使用内部样式表,内部样式表是指样式表的定义处于HTML文件一个单独的区域，与HTML的具体标签分离开来，从而可以实现对整个页面范围的内容显示进行统一的控制与管理。与行内样式表只能对所在标签进行样式的设置不同，内部样式表处于页面的与标签之间，如代码所示。代码2-2应用了内部样式表的HTML页面：html-inner.html一个简单网页你好!HTML!(内部样式表),2.3.3使用外部样式表,外部样式表是相对于内部样式表而言，它实际上一个后缀名为.css的文件，独立于HTML页面，放置于网站文件夹内某个位置，我们也把这样的外部样式表称为样式表文件。样式表文件的内容和内部样式表类似，都是样式的定义。在本书中，为以示区别，在提到样式表文件的时候有时候也用css文件来代替，而具体的层叠样式表则用CSS这三个大写的缩写代称。外部样式表通过在某个HTML页面中添加连接的方式生效。同一个外部样式表可以被多个网页甚至是整个网站的所有网页所采用，这就是它最大的优点。如果说前面介绍的内部样式表在总体上定义了一个网页的显示方式，那么外部样式表可以说在总体上定义了一个网站的显示方式。,2.3.4各种样式表的优先级,假设一个网页拥有多个样式表，那么浏览器该如何决定最终用什么效果来显示呢？看来有必要给这些样式表进行一个座次的排队，省得彼此互不服气，将整个网页弄乱。其实，这样的排序已经有了，从最不重要到最重要的顺序依次是：浏览器默认显示：比如链接的蓝色字体和下划线等。外部样式表。内部样式表。行内样式表。这样的排序实际上也很好理解，如果格式离内容越近，自然是该段内容需要这样的格式，因此浏览器要优先按照这样的样式规则来显示。这也算是“近水楼台先得月”吧。,2.4小结,在本章中我们对CSS有了总体上的了解，通过浏览实际的网页，知道了在源代码中CSS可以出现的位置，大概的样子。我们还学习了3种CSS，分别是行内样式表，内部样式表和外部样式表。这3种样式表的区别在于位置不同，相同在于内容都是根据样式的定义规范。3种样式表在实际应用中各有千秋，外部样式表方便整个网站风格的统一和日后的修改维护；内部样式表方便特别页面的个性显示；行内样式表方便页面内标签级别的个性显示。虽然目前还没有涉及到具体的样式定义规则，但3种样式表的优缺点必须牢记在心中，总体设计页面样式的时候要作为一点提前考虑。我们在后面的几章中将开始具体学习CSS样式定义的规则。更多精彩教程就在：彼岸苏安,第3章开启CSS的大门,从本章开始，我们将正式进入CSS的大门，系统地学习这方面的知识。对于学习一种新的技能来说，最自然的方法就是从最简单的开始学起。我们这章就是这样，简单但是非常重要。下面就让我们出发，一步一步走进CSS的殿堂。,3.1背景让HTML页面更漂亮,我们在前面的章节中已经对HTML的样子有了大概的了解，知道了它是如何发布出来，而我们又是如何去访问它从而得到所需要的信息的过程。还是用同样的类比，HTML就好比我们每天要看的报纸或者手机订阅的新闻短信，如果总是白底黑字，岂不是非常单调，提不起我们阅读的兴趣？如果页面能够更丰富多彩一些，肯定更吸引人，从而能将信息更有效地发送到每一个需要它的人的眼中。一句话，为了吸引眼球，HTML必须更漂亮。我们都有这样的经验，在报亭中，几乎所有的报纸都是白色的，但是有那么几种报纸，纸张是某种黄色的，一下子就能让我们从一堆报纸中看到。这就是颜色的作用之一。对于HTML网页，这样的窍门同样适用。我们的第一个任务，也就是让我们的网页背景颜色发生变化，从而在众多的网页中脱颖而出。,3.1.1控制网页的背景,网页的背景可以是一种颜色，也可以是一张背景图片。我们首先来看控制网页的背景颜色。【设置HTML背景为预定义颜色】其实很简单，简单的只要几个字符就可以了。请看代码代码HTML增加背景颜色：background.html网页增加背景颜色同事周末爬山,3.1.2HTML的颜色表示方法,HTML语言中对于颜色不限于上面和附录中所列出的有限种类，它可以用如下的方法来表示：颜色名称：也就是我们介绍过的，red，black等等。#RRGGBB方式：使用两位十六进制数字表示颜色中的红，绿，蓝含量。R是Red的简称，G是Green的简称，B是Blue的简称。比如我想表示红色（red），那么用这种方法就是#FF0000。F是十六进制中最大的数，表示最多的程度，0是十六进制中最小的数，表示没有。我们知道，每一种颜色都是由三元色（红色、绿色、蓝色）按照一定比例互相调和而来的，那么在红色的方面最多，而其它的两种颜色都没有，这自然就是代表红色了。其他的颜色同样可以这样表示。绿色就是#00FF00，蓝色就是#0000FF。如果一种颜色不是那么红，也不是那么绿，也不是那么蓝，那么就是按照各自的比例形成色号，比如#CA2712。RGB（rrr,ggg,bbb）：这种表示颜色的方法在网页制作中实际是比较少用的，倒是编程的时候用的多些，实际上它和第二种方法是一样的，不过是将代表每一种三原色的两位十六进制数字变成了十进制数字进行表示。为了方便起见，表3-1列出了十六进制数字和十进制数字的转换表。RGB（rrr%,ggg%,bbb%）：这种表示颜色的方式实际上是对第三种方法的进一步变化，rrr%代表了红色占整个颜色的百分比。比如RGB（50%,0,50%）则相当于RGB（128,0,128）。,3.1.3如何获取屏幕颜色,我们在某个网页上看到一种颜色很喜欢，那么如何得到它的色号呢？我们可以用这样一款免费的软件-颜色采集器。颜色采集器v1.0的安装和使用方法都很简单：运行即可。如果我们想自己寻找一种合适的颜色，则可以通过系统的调色板或者软件来获取。下面介绍一下这两种方法：（1）用系统的调色板察看颜色的方法。我们单击开始程序附件，选择画图程序（我们也可以通过开始运行输入mspaint直接打开画图程序）。在界面的菜单中选择颜色编辑颜色，就会看到Windows系统的颜色对话框。（2）用Fireworks或者Photoshop等图像处理软件来察看颜色的方法。这里举Fireworks为例。这种方法只能取得当前已经用图像处理软件打开文件中某点的色号。,3.1.4网页文件的路径,前面介绍网页背景可以是颜色，也可以是图片。那么，该如何浏览器背景图片的位置呢？,文件属性中的物理路径,3.1.5控制页面上的文字,有关网页的背景和颜色前面已经介绍的不少了。网页由内容和格式组成，下面就来学习一下网页最重要却又最容易被忽视的一部分文字。控制页面上的文字显示效果主要是通过控制文字的字体，大小，风格，颜色这几个方面。那么,在网页中常用的字体有哪些呢？,英文字体中的衬线第一种没有衬线的字体Futura字体,3.1.6给文字增加更多效果,在代码3-5中，我们做到了在页面上显示一定大小，一定颜色的文字，如果只能做到这一点，那还是非常不够的。文字效果还可以更加丰富，比如：粗体。斜体。添加下划线。添加删除线。所谓粗体，就是指文字的每一比划比标准的要粗。粗体文字主要用来表示段落的题目，章节的开始等重要内容，笔划加粗是为了吸引读者的注意力。我们如果使用过Word的话，可以看到在工具栏中有图的按钮。,Word中对文字进行加粗，倾斜和添加装饰线的工具栏,3.2文本的排版,一个网页也类似于一张报纸，内容的排版非常重要。既然要对内容进行排列，就要需要很多处理段落文字的实际问题，比如，文字是否居中，段落之间的间隔大概多少，图片和内容如何排列，等等。我们首先学习如何设置文字内容的位置。,3.2.1文本的缩进,上小学的时候，老师教过我们写信的格式。一般来说，中文书信或者书籍等任何文档每一段的开头都是要缩进两个汉字的，这样在空间上就可以和上一段落隔开，由于每一个段落一般表达同一个思想，从而有利于读者转换一下思维，休息一下，以达到更好的阅读效果。在HTML中也是同样。文本的缩进有几种方法：空格法：空格法应该是最直接的方法了，那就是利用在内容中插入两个汉字长度的空格，来实现段落文本的首行缩进。空格，在HTML语言中属于特殊符号，用来组成。CSS样式控制法：通过CSS样式控制段落首行缩进如代码所示。,3.2.2文本的对齐,在前面一节的末尾已经稍微涉及到一点文本的对齐问题，下面我们将学习利用CSS使文本居中、左对齐和右对齐的方法，正如可以在Word中可以做到的那样。文字的对齐是通过text-align属性来设置的。【文字的居中】令text-align属性的值为center，就可以使应用此样式的文字居中。代码3-8是一个包含标题和内容的网页，通过内部样式表使内容文字居中，通过行内样式表使得标题居中，并且加粗。我们可以通过这个示例复习行内样式表、内部样式表的写法以及HTML标签中字体加粗的实现。,3.2.3改变文本字符间距,有的时候，我们需要将文本内容每行或者每个字、单词之间的距离加以改变以实现特殊效果。行间距相当于上下两行字符之间的垂直距离，而字间距则是相邻两个字符之间的水平距离，因此它们都可以归为一类。改变文本字符间距的方法如代码所示。,改变行间距、字间距，单词间距,3.2.4文字的其他设置,除了前面几节在实际工作中可能经常遇到的情况之外，我们对文字样式还可以有更多的修改，比如：对于英文文字内容来说，设置一段文字首字母的大小写。对于英文和中文内容来说，创建引用文字。当然，还可能遇到其他的情况，不过在读者了解了更多的CSS知识后自己不难找到解决办法。【设置段落首字母大写】,设置更美观的段落首字母大写,3.3关于HTML的链接,截至目前为止，我们已经了解了不少关于HTML和CSS的知识，能够写出一个简单的网页。但是，光有网页内容，彼此独立，就能构成一个网站吗？换句话说，网页和网页之间如何联系起来才能形成一个整体呢？这个问题引出了网页中最重要的一个标签，链接标签，或者叫做a标签。有了它，孤立的网页才能够组织起来，串在一起，形成形形色色的网站。,3.3.1链接和A标签,HTML的主要功能并不在于提供单个文档，而在于它可以从文档的某一部分（包括图像），连接到另外一个文档，从而构成一个虚拟的世界。默认情况下，浏览器用蓝颜色并且加下划线来表示单击当前位置可以连接到别处。这样的链接也叫超文本链接（之所以称为“超”，是因为它不光提供了文字内容，还提供了链接信息），英文名称为hyperlinks或就叫做links。HTML网页中超文本链接标签是,意思是anchor，中文名为锚。我们知道锚可以使船和码头相连接，A标签也可以使当前网页和其他的网页相连接。识别网页上的链接也是比较直观的，由于有的时候链接应用了样式表，不再具有蓝色的下划线，我们在绝大多数情况下依然可以通过鼠标放在链接位置时候的形状变成一只手的样子来判断，如图所示。,鼠标停留在链接上的样子,3.3.2A标签的实例,介绍了很多文字，下面具体来看两个文件，我们的目标是把这两个文件用超级链接联系起来。,代码3-12在浏览器中的显示单击第二个链接返回404错误,3.3.3A标签的几种状态,有的时候，当我们单击网页上某个链接会发现，链接文字能随着鼠标的动作发生一些变化，很有意思。比如，当鼠标停在链接的位置时，链接文字会加上一条下划线；当鼠标滑过链接文字时，文字会变颜色等等。实际上，这就是链接的几种状态，可以通过不同的状态显示不同的链接样式，来给用户以更加丰富的信息和体验。用类似黑客帝国中的动作分解方法，回想整个鼠标靠近链接，单击链接和离开链接的全过程，我们能够列举出A标签的几种状态应该如下：链接正常状态。这时鼠标并未单击它。链接被掠过的状态。鼠标运动过程中某时刻处于链接之上，但尚未单击。链接被单击的状态。单击鼠标左键，链接产生作用，根据链接的设置，打开目标网页。链接单击后的状态。假如目标网页在新建窗口中打开，当前链接的状态。,3.4利用图片丰富HTML外观,本章第一节就讲到了如何给网页增加背景图片，那么是否图片只能出现在背景上呢？答案肯定是否定的，在现在这个读图时代，网页如果失去了图片，肯定是干巴巴的，没有多少人愿意浏览。本节就来介绍如何在网页中插入图片，另外，如何插入Flash动画也是内容之一。更多精彩教程就在：彼岸苏安,3.4.1在网页中插入图片,浏览器刚发明的时候并不支持图片，那时候的网页也都是文本的，直到20世纪90年代，浏览器的先驱Netscape实现了图片的显示。说一句题外话，只支持文本的古董级浏览器，比如Lynx，现在依然有人在更新和使用（主要是面向残障人士等），而Netscape浏览器则已经由于后来竞争的激烈等原因，停止开发新版本了。,代码在浏览器中的效果,3.4.2网页中能显示所有的图片吗？,我们知道，日常的电脑处理中离不开各种各样的文件，而文件之间的区别又是靠它们记录信息的方法，也就是文件格式来区分的。这些格式都是人为定义的，可以是组织、公司，有的最后还形成了标准。文件格式体现在我们普通人看到的外观上，就是不同文件的后缀名不同，或者它们在文件夹中显示的图标不同。而不同后缀名的文件往往需要不同的软件来打开。比如大家所熟悉的文件格式.doc或.docx，一般用Word才能打开。图片也是一样，有很多种图像格式，比如我们用Windows自带的画笔程序保存的Bmp文件，用Photoshop保存的Psd文件等。随着IT业和网络的发展，有一些图像文件格式由于自身的特点，网络环境的特点等诸多原因，渐渐得被绝大多数的人所接受，被众多厂商的浏览器所支持，成为网络世界里通用的图片文件格式,3.4.3改进图片的显示-给图片镶边,网页中加入图片就是为了提供更多的信息，丰富页面的效果，如果都如图3-22那样，未免非常单调。本节将介绍一些CSS技巧，使得网页上的图片更吸引人，达到更好的宣传效果。现实生活中家里摆放的照片，绘画作品外边都有一个画框，就是中国传统的水墨画，没有画框也要用卷轴等装裱起来，网页图片也是一样。,各种边框式样，通过border值指定,3.4.4防止图片被盗用的一个技巧,我们知道，在浏览网页的时候，遇到图片，可以单击右键，选择“图片另存为”就可以将图片保存到本地指定的一个文件夹中。有时候，我们可能不希望别人很轻易地就这样把辛苦制作出来的图片拷贝到别处使用，可以采取代码的方法。,防止图片被盗用的一种方法,3.4.5实验：制作一页包含图文的电子简历,为了复习本章学习的知识，我们来做一个小实验：为张三制作一页包含图文的电子简历。（1）确认一下手中的材料是否准备齐全：简历的内容，张三的照片。（2）确定简历的总体结构，外观，图片的位置等，这需要和张三进行一定程度的沟通，既照顾到张三的个人喜好，能够反映出他的个性，也要考虑到简历浏览者的习惯，做到信息清楚，一目了然，有利于招聘单位对张三的全面了解。目前，我们假定这个步骤已经结束。张三的要求就是：网页最上方是粗体的简历二字。简历二字左下方是个人信息，右下方是张三的个人照片。紧接着是教育背景、工作经历和个人专长。每一栏都用横线隔开。其他的我们可以自行设计。,3.5小结,在本章中，我们学习了如何设置网页的背景，通过设置颜色背景对网页上可以使用的颜色有所了解；通过设置图片背景得到了有关绝对路径和相对路径的知识。接下来学习了设置网页上文字样式的方法，还能够写出HTML和CSS的注释以方便其他人阅读源代码。最后一部分，我们学习了在网页中引入图片和Flash动画，还通过给张三制作电子简历的过程熟悉了网页制作的流程，网页需求的简单分析。本章中我们还接触到了一些名词，比如伪类。类似这样的术语，CSS中还有几个，在下一章，我们将学习它们。,第4章学习一点CSS的语法,我们在前三章中已经熟悉了一些HTML和CSS的基本知识，还给张三做出了一个效果不错的电子简历。但是，如果面对更加复杂的需求，目前我们所了解的这些标签用法就有点捉襟见肘了，同时，我们在前几章中也遇到了一些不明白的名词，比如：伪类，选择符，等等。为了更扎实的学习CSS，有必要停下脚步，将前面的疑难解决之后再进行下一步的学习。本章的目的就是讲解CSS的几个重要名词，熟悉CSS的写法，为今后学习更多的HTML标签和CSS技巧做准备。,4.1再访HTML,4.1.1组成HTML页面的细胞-标签,再复杂的事情也是由相对简单的部分组合而成的，HTML也不例外。构成HTML页面的细胞，就是一个又一个的标签。我们在本节首先将截至目前学习过的HTML和CSS知识总结提炼一下。在前面的三章中，我们已经介绍了若干基本的标签，它们是：表示段落。表示正文表示字体的设置等。当然HTML的标签还有很多，在今后的章节中我们将陆续见到。不过，既然它们都被称作标签，肯定有一些共性，其中书写的语法都是类似的，即如下的样子：,4.1.2CSS规则的具体写法,具体而言，对某个标签应用CSS有如下两种方法：行内样式表：在标签定义中增加style=”CSS属性”这样的代码。外部样式表和内部样式表：首先在页面首部链接样式表文件或者直接编写样式表定义，然后在标签定义中增加class=”CSS选择器”来实现。CSS属性和CSS选择器就构成了一条CSS规则。那么，CSS属性和CSS选择器有什么区别呢？举个日常生活中的例子就比较好理解了。假设我们所在的单位要招聘员工，一名销售人员，一名网页设计师，其中网页设计师要求大学毕业，精通CSS/HTML，熟练使用Dreamweaver软件等；销售人员则要求与人沟通能力强，有一定的客户群体，有销售经验等。这条广告放置在招聘网站之后，单位的人事部门就收到了不少人的简历。那么，如何从这些简历中找到符合条件的人呢？,4.1.3标签应用CSS规则的具体写法,CSS规则已经有了，那么该如何让标签应用这个规则呢？上节已经提到了两种情况，下面分别讲述。【CSS规则处于内部样式表和外部样式表之中时】在这种情况下，我们需要在标签中增加一个属性，声明class=”CSS选择器”即可。代码包含了代码中的内部样式表，同时还有两个h2标签。代码应用CSS规则：applycss-innerout.html在标签中应用内部样式表中的CSS规则这是一个在标签中声明style=h2的标题。这是一个在标签中没有声明style=h2的标题。,4.1.4CSS选择器的种类-八种武器,上一节我们遗留了一个问题，本节的末尾相信能够解决它。首先，介绍一下CSS选择器的种类。我们知道，选择器就好比招聘工作职位时的条件一样，是为了从众多的HTML标签中挑选出我们所需要设置样式的标签。因此，CSS选择器的分类就是根据选择HTML标签方法的不同而区分的。CSS选择器共有如下两大类八种。简单选择器。包括：类型选择器（TypeSelectors）属性选择器（AttributeSeletors）ID选择器（IDSelectors）类选择器（ClassSelectors）通配选择器（UniversalSelectors）组合选择器后代选择器（DescendantCombinators）子选择器（ChildCombinators）兄弟选择器（SiblingCombinators）,4.1.5伪类,还记得在第3章我们所讲的链接4个状态吗？这里简单的复习一下，链接的状态一共有4种：链接正常状态。这时鼠标并未单击它。链接被掠过的状态。鼠标运动过程中某时刻处于链接之上，但尚未单击。链接被单击的状态。单击鼠标左键，链接产生作用，根据链接的设置，打开目标网页。链接单击后的状态。假如目标网页在新建窗口中打开，当前链接的状态。对应地，就有4种伪类，A:link表示链接正常状态。A:hover表示链接被鼠标掠过的情况。A:active表示链接被单击时的状态。A:visited表示链接单击后的状态。,4.1.6伪类的排列顺序,由于不同浏览器对于伪类支持的细节不同，伪类的不同顺序在个别情况下也会造成一些小麻烦，约定俗成的顺序就如代码4-12中所写的那样：A:linkColor:Blue;A:visitedColor:Purple;A:hoverColor:Yellow;A:activeColor:Green;,4.2盒模型,讲完了选择器这个重要的概念，下面来讲另一个同样重要，但理解起来不那么复杂的名词-盒模型。在开始之前，首先要明白HTML标签可以被分为块元素、内联元素和可变元素。,4.2.1块元素、内联元素和可变元素,块元素、内联元素和可变元素是HTML标签的3种不同类型。其中，块元素（blockelement）和内联元素（inlineelement）是主要的，它们的最大差异就是块元素一般都从新行开始。下面来分别介绍。【块元素】块元素（blockelement）顾名思义，它好比一块砖或者一个盒子，方方正正，同时能够包含其他元素，也就是可以成为其他标签的容器。块元素一般来说，都以一个新行开始，块元素标签内部是内联元素或者其他块元素的组合。常见块元素是段落标签,等等。当然，也有特殊情况，比如我们在后面章节将要讲到的表单标签，它只能用来容纳其他块元素。如果没有特别设置CSS样式，多个块元素的显示将会按照顺序以每次另起一行的方式一直往下排-这是默认的布局方式。我们可以通过设置CSS改变它，把块元素摆放到想要的位置上去，而不是每次都单独另起一行。总结一下，块元素的特点就是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。如果与我们日常写的文章相类比，块元素类似一个段落。,4.2.2盒模型,块元素或者以块元素方式显示的其他标签在浏览器中显示的时候，如果背景色和网页背景色不相同，可以看出有上、下、左、右四个边界，好像一个盒子，如图所示。,一些块级元素：h2、div、p、span标签,4.3文档类型,在第三章的末尾，我们用Dreamweaver为张三制作了一个电子简历，在代码中，我们发现有这样一行：这句代码是Dreamweaver自动为每一个新创建的网页加入的，如果有机会使用别的网页制作网站开发软件，比如VisualStudio等，都会发现它们也会增加类似的一行。那么，这行看起来很怪异的代码到底有什么作用呢？,4.4小结,本章介绍了CSS技术中几个重要的概念和它们的应用：HTML页面的树形结构；选择器和它的种类；伪类；盒模型以及文档类型。选择器是用来选择页面上符合条件的标签的，只有将这些标签选择出来，才能有的放矢的应用样式。选择器的分类标准根据选择标签的方法而定，对于我们初学者，要熟练掌握如下的3种选择器：类型选择器：定义网页上某一种标签的样式，一次能定义一类标签，方便但不灵活。ID选择器：定义网页上某一个ID的标签样式，精确，但只能定义一个，用得多了会比较麻烦。类选择器：可以灵活的设置样式，不限于某一类的标签，只要在标签属性中加上Class=类选择器名称就可以应用样式，是最常用的一种选择器。,第5章组织：熟悉Span与Div,Span标签和Div标签都是HTML中很常用的组织标签之一，我们可以在绝大部分的页面中找到他们的身影。和其他绝大多数的HTML标签兄弟一样，这两个标签各自也是要成对使用的，就像这样：成双和成对。这样的设计其实也是符合咱们人类的说话方式的，毕竟说话得有头有尾，前后呼应，不能虎头蛇尾，否则对方不知道你的意思会有误解，计算机再聪明也还是机器，就更不知道了。Span和Div标签是页面中的组织标签，在浏览器中观察并没有什么直接的显示效果，但是对于内容的安排、网页的布局等却能发挥了很大作用，特别是Div标签，它在现代网页排版中起到了决定性的作用。有关这部分的内容，将在第13章进行详细介绍。,5.1属性与事件,本节首先介绍标签的属性与事件这两个概念，理解这两个概念是今后学习使用CSS制作个性网页很重要的基础。本章开头就说了，属性和事件是绝大多数HTML标签都具有的，好比我们人类所都具有的会思考、能劳动、能直立行走等特点一样。了解了这两个概念和具体的使用方法，我们就可以在网页上随心所欲的实现一些很有趣的效果和功能。,5.1.1什么是属性,我们学习一件新鲜的事物前，大概都遵循这样一个过程：先了解它是什么，它能为我们做什么，它怎么才能为我们所用。因此我们学习属性，也从属性是什么说起。【属性是什么】首先我们来学习什么是属性。属性就是一些能够描述一种物体特征的词语。这句话可能抽象一些，还是用我们自己来打个比方吧。你打算把漂亮的女同学小丽介绍你的铁哥们儿张三认识。你可能会对小丽说，小丽啊，张三是一个很好的中国男生。这句描述张三的简单的话中就包含了张三的多个特征，也就是说出了张三这件“事物”的多种属性：国籍是中国的，性别是男生的，性格是很好的。国籍、性别、性格就是人的属性。再比如，我们在参加考试的时候，开始答题之前都要填写很多信息，姓名、籍贯、准考证号等等，这些要填写的项目都是不同属性的名称。由此可见，属性就是用来描述特征的词语。【属性有值才有用】读到了这里，读者自然就会想了，光有属性的名字也不行啊。是的，好比我们参加考试，属性的名称：姓名、籍贯、准考证号等等，都在试卷上列出了，但我们不填，交卷后老师还是不知道这么优秀的答卷是出自于我们的手，那该有多亏。所以，有了属性，还要有属性的值，也就是属性的具体内容，才完美。还是上面介绍张三那句话，国籍、性别、性格是属性的名字，那么中国、男性、很好就是相对应属性的值。只有属性的名称和值都齐全了，我们的小丽才能对张三有个大概的了解。,5.1.2属性的种类：基本属性，扩展属性,【基本属性和扩展属性的定义】基本属性一般来说都是指好多事物都共同具备的那些属性。比如上文中所说的，国籍，性别等都可以说是基本属性。大家一起参加考试，所有人都具有这样的特点，有国籍，有性别。但扩展属性就不同了，它是和每一件事物联系在一起的，不同的一类事物会有不同的扩展属性。也就是说，基本属性和扩展属性有点类似于我们日常生活中所说的“共性”和“个性”。【不要小看扩展属性】让我们再回到你要介绍张三给小丽这件事上来。如果光说上一节提到的那句“张三是个很好的中国男生”这句话，小丽可能会生气，因为她会觉得这基本和没有说一样。我们需要修改上面的句子，比如变成这样：“张三是个身材超有形，性格超温柔，工作单位一级棒，爱好极为广泛的帅哥”。这样的话说出来，效果就会好很多，张三这个人的形象也高大鲜活了起来。由此可见，扩展属性能够让我们对事物的描述更加具体。,5.1.3什么是事件,除了属性之外，对于一个HTML标签来说，另外一个很重要的部分就是事件了。【事件就是一件事】事件看起来似乎是一个很严重的词。我们日常生活是怎么用到它的呢？历史书上见到过，还有我们看动漫的时候也看到过，比如柯南，他总是和各种各样奇怪的事件打交道。事件，说白了就是事情，有开头、有结尾，由一系列的动作组成。那么在计算机世界里，事件又是什么呢？计算机世界中的事件是指一个操作或者程序检测到的一个变化。听上去可能有点深奥，不过对于HTML来说，我们可以说事件就是指HTML页面上的一个操作，特别是用户在页面上的一个操作。,5.1.4特别的属性：事件属性,事件既然这么重要，那么我们在实际中怎么应用它呢？【谁动了我的鼠标】根据上面举出的网络搜索的例子，有人可能会问这样的问题，页面怎么知道我是单击了鼠标，挪动了鼠标还是在文本框中输入了文字呢？还好，这样的问题并不需要我们来处理，浏览器本身都已经处理了，毕竟我们单击鼠标，敲打键盘都是在浏览器和系统的管辖范围内，强龙压不过地头蛇，谁的地盘谁做主，它愿意管理更好，我们还省心了。【事件属性做什么】但是，我们制作网页的人必须清楚，浏览器虽然替我们管理以上谁动了鼠标这些问题，但它只管了一半，也就是说它只告诉了网页，有人在这个按钮上点了一下，有人在那个文本框上输入了一些怪异的文字，在那之后网页该做出什么特别的反应它并没有指明，如果我们不亲自为网页写一个规范，让它知道遇到这类的事件该如何处理，网页还是不会做任何事情的。,5.2Span是什么,Span是HTML语言中的一个内嵌标签。内嵌标签是和块标签相对应的。他们之间的区别是块标签前后各有一个回车键来使标签内的内容和之前之后的内容隔开，形成了一个单独的块；而内嵌标签则没有这样的前后隔离带，和页面上的其他内容相处的很好。图就是一个包含两种不同类型标签的网页的显示效果。,包含内嵌标签和块标签的网页：显示效果与源代码,5.2.1Span有名字-ID属性,我们每个成年人都有一张身份证，在HTML的世界里也可以如此。【一座编号为魂断蓝的桥】我国的长江，黄河都是世界上著名的大河，为了交通方便，现在它们上都建有很多桥梁。比如在武汉，就有武汉长江一桥、武汉长江二桥等等。如果你的HTML稍微长了一点（虽然我不希望有长江那么长），有多个Span标签；或者虽然只有一个Span，但你还是想让它特别一些，就可以在Span标签代码中增加一个ID属性。然后指定一个任意的值作为你给这一段Span标签所做的记号。比如这样，桥这表明这是本网页中编号为001的span标签，好比我们的身份证号码一样，唯一标识了这段Span代码。当然，不一定是数字，可以是文字，比如桥桥,5.2.2Span的所在班级Class属性,说完了Span的身份证号码：ID属性，下面该说说它的所在班级-Class属性了。我们大家都知道Class是什么意思，班级。另外它还有
展开阅读全文