第2章 CSS初体验演示文稿.PPTVIP

第2章 CSS初体验 对于学习一种新的技能来说，最自然的方法就是像婴儿学说话一样，模仿大人的语言和语气，从最简单的发音开始，直到最后逐渐掌握了一定量的词语才能完整地说出一个句子。CSS地学习同样离不开模仿，本章就先从辨别哪里是CSS，CSS有哪些种类开始，由简单到复杂，一步一步走进CSS技术的殿堂。。 下面就让我们出发。 2.1 实验一：寻找CSS 在第1章里，本书对HTML和CSS的一些背景知识，还对浏览网站的过程做了介绍。文本的知识或多或少有点枯燥，既然我们讨论的内容离不开网络，那还是充分发挥它的优势，直接通过浏览一个网站来学习。 我们的第一个任务就是在网络上找到一个实际的CSS。 2.1.1 浏览器与网页的外观 在Windows XP系统中，单击开始，运行，输入iexplore.exe就可以打开默认自带的IE浏览器。如果机器中安装了火狐浏览器，在运行中输入firefox就可以了。浏览器的上方都有一个很长的输入框，也叫做地址栏，我们可以在其中输入想要访问的网址，在本实验中，输入，然后按回车（Enter）键。 2.1.2 找到样式表 读者可能会问，在图2-1中只看到了浏览器和网页，哪里有样式表的存在？ 在第一章我们了解到一个简单HTML页面由内容和格式构成，浏览器根据HTML的格式控制字符来显示页面的内容，所以浏览器一定知道CSS在哪里，实际上，可以通过查看源代码的方法来发现它。 在IE浏览器中单击菜单中的页面，在下拉菜单选择查看源代码，就可以看到一个页面中的格式控制字符。如果使用的是Firefox，则可以通过菜单中的查看?页面源代码来完成同样的工作。 2.1.3 先模仿后进步 前面所讲的这种查看源文件的方法，正是提供了一种模仿的途径，我们可以在碰到认为效果不错的网页时，查看源文件，分析其中CSS的使用，从而提高自己的水平。不过，不能抄袭别人的样式表，毕竟那是辛勤的劳动成果，我们所要做的就是从中学到知识。 由于国外CSS技术应用比较成熟，有必要在学习的过程中以分析模仿国外优秀网站为主，同时还可以提高自己的英文水平。下面列出了一些比较好的学习钻研CSS技术的站点： /Style/CSS/ 这是CSS的老家，CSS的官方站点，从出版信息到具体技术非常全面，英文站点。 / 经典的CSS Zen Garden网站。Zen在日语里就是禅的意思，我们姑且称这个网站为CSS禅意花园吧。网站主要目的就是为了探索CSS所能做到的各种视觉效果，具有探索性质，适合英文阅读能力强，对CSS有兴趣，有一定基础的读者，英文站点。 / 美丽的CSS。该网站列出了一些利用CSS比较出色的站点，配合它们的首页图片。类似的网站还有/。 蓝色理想。这是一个中文的设计类网站，在它的前台栏目和论坛中有一些CSS的文章、求助的帖子等。同时，它还有很多其他关于设计，编程的栏目和文章。 2.2 Hello CSS! – 3种CSS 在上一节中我们找到了网页代码中哪些部分是CSS，那么CSS是否都是这个样子呢？实际上它只是其中的一种。本节将介绍CSS的3个种类，为下一节开始实际编写第一个CSS做一些准备。 2.2.1 CSS的3个种类 CSS是3个字母，恰巧CSS的种类也有3种，分别是外部样式表、内部样式表和行内样式表。 实际上CSS就是以样式表的存在位置来分类的：外部样式表存在于HTML文件的外部，是另外的一个后缀名为.css的文件。内部样式表存在于HTML文件的内部，在head标签内，有具体的样式定义。行内样式表也处于HTML文件的内部，但是在body标签管辖范围内，以属性的形式设置某一个标签的样式。 图描述了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，因此这项菜单项是灰色的，无法单击。 设计时间：使在处理 Dreamweave