1、第2章 CSS初体验,对于学习一种新的技能来说，最自然的方法就是像婴儿学说话一样，模仿大人的语言和语气，从最简单的发音开始，直到最后逐渐掌握了一定量的词语才能完整地说出一个句子。CSS地学习同样离不开模仿，本章就先从辨别哪里是CSS，CSS有哪些种类开始，由简单到复杂，一步一步走进CSS技术的殿堂。 下面就让我们出发。,2.1 实验一：寻找CSS,在第1章里，本书对HTML和CSS的一些背景知识，还对浏览网站的过程做了介绍。文本的知识或多或少有点枯燥，既然我们讨论的内容离不开网络，那还是充分发挥它的优势，直接通过浏览一个网站来学习。 我们的第一个任务就是在网络上找到一个实际的CSS。,2.1.
2、1 浏览器与网页的外观,在Windows XP系统中，单击开始，运行，输入iexplore.exe就可以打开默认自带的IE浏览器。如果机器中安装了火狐浏览器，在运行中输入firefox就可以了。浏览器的上方都有一个很长的输入框，也叫做地址栏，我们可以在其中输入想要访问的网址，在本实验中，输入，然后按回车（Enter）键。,HTML与浏览器的外观,2.1.2 找到样式表,读者可能会问，在图2-1中只看到了浏览器和网页，哪里有样式表的存在？ 在第一章我们了解到一个简单HTML页面由内容和格式构成，浏览器根据HTML的格式控制字符来显示页面的内容，所以浏览器一定知道CSS在哪里，实际上，可以通过查看
3、源代码的方法来发现它。 在IE浏览器中单击菜单中的页面，在下拉菜单选择查看源代码，就可以看到一个页面中的格式控制字符。如果使用的是Firefox，则可以通过菜单中的查看页面源代码来完成同样的工作。,2.1.3 先模仿后进步,前面所讲的这种查看源文件的方法，正是提供了一种模仿的途径，我们可以在碰到认为效果不错的网页时，查看源文件，分析其中CSS的使用，从而提高自己的水平。不过，不能抄袭别人的样式表，毕竟那是辛勤的劳动成果，我们所要做的就是从中学到知识。 由于国外CSS技术应用比较成熟，有必要在学习的过程中以分析模仿国外优秀网站为主，同时还可以提高自己的英文水平。下面列出了一些比较好的学习钻研CS
4、S技术的站点： http:/www.w3.org/Style/CSS/ 这是CSS的老家，CSS的官方站点，从出版信息到具体技术非常全面，英文站点。 http:/ 经典的CSS Zen Garden网站。Zen在日语里就是禅的意思，我们姑且称这个网站为CSS禅意花园吧。网站主要目的就是为了探索CSS所能做到的各种视觉效果，具有探索性质，适合英文阅读能力强，对CSS有兴趣，有一定基础的读者，英文站点。 http:/ 美丽的CSS。该网站列出了一些利用CSS比较出色的站点，配合它们的首页图片。类似的网站还有http:/ 蓝色理想。这是一个中文的设计类网站，在它的前台栏目和论坛中有一些CSS的文章
5、、求助的帖子等。同时，它还有很多其他关于设计，编程的栏目和文章。,2.2 Hello CSS! 3种CSS,在上一节中我们找到了网页代码中哪些部分是CSS，那么CSS是否都是这个样子呢？实际上它只是其中的一种。本节将介绍CSS的3个种类，为下一节开始实际编写第一个CSS做一些准备。,2.2.1 CSS的3个种类,CSS是3个字母，恰巧CSS的种类也有3种，分别是外部样式表、内部样式表和行内样式表。 实际上CSS就是以样式表的存在位置来分类的：外部样式表存在于HTML文件的外部，是另外的一个后缀名为.css的文件。内部样式表存在于HTML文件的内部，在标签内，有具体的样式定义。行内样式表也处于H
6、TML文件的内部，但是在标签管辖范围内，以属性的形式设置某一个标签的样式。 图描述了3种CSS和HTML文件的关系。,3种CSS在HTML文件中的位置,2.2.2 在Dreamweaver中创建CSS-利用Dreamweaver提供的模版,在Dreamweaver中，有两类创建CSS的方法，一种是根据软件提供的模版进行创建，另外一种是自定义创建CSS。 打开Dreamweaver8，选择文件-新建菜单，弹出对话框界面如图2-4所示，其他版本的Dreamweaver也是类似的操作顺序和界面。,新建文档对话框,2.2.3 在Dreamweaver中创建CSS-自定义创建,如果不想利用Dreamwe
7、aver提供的模版CSS，觉得有些死板的话，我们完全可以自行创建CSS，方法也非常简单。 首先单击文件-新建菜单，选择基本页，HTML文件，Dreamweaver处于编辑状态，单击文本菜单，选择CSS样式，可以看到在它的子菜单中有如下几项，如图2-6所示。 新建：用于新建样式表。 附加样式表：用于附加已经编辑好的外部样式表，也就是后缀为CSS的文件。 导出：由于我们的HTML代码中还没有包含任何的CSS，因此这项菜单项是灰色的，无法单击。 设计时间：使在处理 Dreamweaver 文档时可以显示或隐藏CSS样式表所应用的设计。,2.3 实验二：你的第一个样式表,在熟悉了Dreamweaver
8、里有关CSS的相关界面后，我们就可以通过实验二自己来创建第一个样式表了。由于样式表有三种：外部样式表，内部样式表和行内样式表，实验中将分别用这三种方式来实现同一种显示效果，并从中体会下面一句话的含义： 外部样式表，内部样式表和行内样式表三种方法都能够实现相同的显示效果，它们之间的区别在于写法、应用场合和个人偏好的不同。 我们以第一章中创建的html.html文件为蓝本，控制文字内容的显示。,2.3.1 使用行内样式表,行内样式表，顾名思义，它和样式所定义的内容在同一代码行内。比如代码所示。 应用了行内样式表的HTML页面：html.html一个简单网页你好!HTML!(行内样式表),2.3.2
9、 使用内部样式表,内部样式表是指样式表的定义处于HTML文件一个单独的区域，与HTML的具体标签分离开来，从而可以实现对整个页面范围的内容显示进行统一的控制与管理。 与行内样式表只能对所在标签进行样式的设置不同，内部样式表处于页面的与标签之间，如代码所示。 代码2-2 应用了内部样式表的HTML页面：html-inner.html一个简单网页你好!HTML!(内部样式表),2.3.3 使用外部样式表,外部样式表是相对于内部样式表而言，它实际上一个后缀名为.css的文件，独立于HTML页面，放置于网站文件夹内某个位置，我们也把这样的外部样式表称为样式表文件。样式表文件的内容和内部样式表类似，都是
10、样式的定义。在本书中，为以示区别，在提到样式表文件的时候有时候也用css文件来代替，而具体的层叠样式表则用CSS这三个大写的缩写代称。 外部样式表通过在某个HTML页面中添加连接的方式生效。同一个外部样式表可以被多个网页甚至是整个网站的所有网页所采用，这就是它最大的优点。如果说前面介绍的内部样式表在总体上定义了一个网页的显示方式，那么外部样式表可以说在总体上定义了一个网站的显示方式。,2.3.4 各种样式表的优先级,假设一个网页拥有多个样式表，那么浏览器该如何决定最终用什么效果来显示呢？看来有必要给这些样式表进行一个座次的排队，省得彼此互不服气，将整个网页弄乱。 其实，这样的排序已经有了，从最
11、不重要到最重要的顺序依次是： 浏览器默认显示：比如链接的蓝色字体和下划线等。 外部样式表。 内部样式表。 行内样式表。 这样的排序实际上也很好理解，如果格式离内容越近，自然是该段内容需要这样的格式，因此浏览器要优先按照这样的样式规则来显示。这也算是“近水楼台先得月”吧。,2.4 小结,在本章中我们对CSS有了总体上的了解，通过浏览实际的网页，知道了在源代码中CSS可以出现的位置，大概的样子。我们还学习了3种CSS，分别是行内样式表，内部样式表和外部样式表。这3种样式表的区别在于位置不同，相同在于内容都是根据样式的定义规范。 3种样式表在实际应用中各有千秋，外部样式表方便整个网站风格的统一和日后的修改维护；内部样式表方便特别页面的个性显示；行内样式表方便页面内标签级别的个性显示。虽然目前还没有涉及到具体的样式定义规则，但3种样式表的优缺点必须牢记在心中，总体设计页面样式的时候要作为一点提前考虑。 我们在后面的几章中将开始具体学习CSS样式定义的规则。,
