第10章 使用CSS样式美化网页

第十章使用CSS样式美化网页2010-4-18学习要点CSS类型与基本语法CSS定义的方式CSS属性设置应用CSS样式美化网页经常上网的人都会有这样的经验，将浏览器的显示字体变大或变小，网页中的文字也会随之发一改变。虽然有时候会给浏览者带来帮助，但是也会对网页的布局产生影响，网页的版面会因为字体的改变而变得参差不齐。但是如果使用CSS，网页中的文本始终不随之发生改变，总是保持着原有的外观。现代网页制作离不开CSS技术，使用CSS技术，可以有关键所在的对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。用CSS不仅可以制作出令浏览者赏心悦目的网页，还能给网页添加许多特效。创建CSS样式表的过程，就是对各种CSS属性的设置过程，所以了解和掌握CSS属性设置非常重要。10.1CSS概述CSS是CascadingStyleSheet的缩写，有些书上称为“层叠样式表”或“级联样式表”。样式表是对以前的HTML语法的一次重大革新。如今风页的排版格式越来越复杂，很多效果需要通过CSS来实现，DW8在CSS功能设计上有了很大的改进。10.1.1CSS的基本概念CSS即层叠样式表，用来控制一个文档中的某一文本区域外观的一组格式属性。CSS样式可以用来一次对若干个文档所有的样式进行控制。同HTML样式相比，使用CSS样式表的好处除了在于它可以同时链边多个文档之外，当CSS样式有所更新或被修改之后，所有应用了该样式表的文档都会被自动更新。CSS样式表的功能：1）修饰页面的元素时，避免了对HTML元素的改动(也就是现在流行的一个概念：“语义化”结构与表现分享了)每个浏览器对HTML的解析都不同。HTML原来设计的时候定位于定义文档的内容，通过使用p,table,b各类标签，所要表达的初衷是“段落”、“表格”之类的信息。但随着各大浏览器的出现，也逐渐将新的HTML标签和属性到HTML规范中，以至于使得创建一个合理的语义化的页面结构变得困难许多。通过使用CSS样式，可以定义字体、颜色，那么就可以让这些原本不需要的表现形式的标记消失，使合理的语义化标记处于更好的位置，更好的发挥标记的作用。2)使我们能够更轻松的控制页面结构和布局网站重构随着这个概念的出现，也带来了DIV结构的流行，因此也就出现了我们现在口头常说的“DIV+CSS做网站”。单从这个DIV+CSS的叫法来分析，可以了解到CSS已经被大家用在了页面布局上了。但一个页面不是只有控制DIV就控制了全面，还有很多其它的HTML标记，以前用table布局的页面，一样可以用CSS来控制它。3）最根本的也是我们开发人员关心的，提高开发和维护的效率一个网站，如果有很多相同的结构的文件需要修改，涉及到的工作量是巨大的，但如果通过改CSS来实现页面的灵活变换，只需要修改某个样式就可以上，效率上大大提升。10.1.2CSS的类型的基本语法CSS的属性可分为类型、背景、区块、方框、边框、列表、定位、扩展8个部分。在建立样式表之前，必须要了解一些HTML的基础知识。HTML语言由标志和属性构成，CSS也是如此。样式表基本语法如下所示：HTML标志{标志属性：属性值；标志属性：属性值；标志属性：属性值；。。。。}现在首先讨论在HTML页面内直接引用样式表的方法。这个方法属性把样式表信息包括在style/style标记中，为了使样式表在整个页面中产生作用，应该把组标记及其内容话到head和/head中去。例如要设置HTML页面中所有的H1标题字显示为蓝色，其代码如下：htmlheadtitleThisaCSSsamples/titlestyletype=“text/css”!—H1{color:blue}--/style/headbody页面内容。。。/body/html提示：style标记中包括了type=“text/css”，这是让浏览器知道是使用CSS样式规则。加入!—和--这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该段代码忽略不计。在使用样式表过程中，经常会有几个标志用到同一属性，例如规定HTML页面中凡是粗体字、斜体字、1号标题显示为红色，按照上面介绍的方法书写成如下形式：B{color:red}I{color:red}H1{color:red}显然这样书写十分麻烦，引进分组的概念会使其变得简洁明了，可以写成如下形式：B,I,H1{color:red}用逗号分隔各个HTML标志，把三行代码合并成一行。此外，同一个HTML标志，可能定义到多种属性，例如规定把从H1~H6各级标题定义为红色黑体字，带下划线，则应写成如下形式：H1,H2,H3,H4,H5,H6{Color:red;Text-decoration:underline;Font-family:”黑体”}10.2CSS样式面板在DW8中，执行选择“窗口》CSS样式”命令，打开“CSS样式”面板在CSS样式面板的底部排列有几个按钮，它们的功能分别如下：附加样式表，可以在HTML文档中链接一个外部的CSS文件新建CSS样式，可以编辑新的CSS样式文件编辑样式表，可以编辑原有的CSS规则删除CSS样式，删除选中的已有的CSS规则10.3CSS定义的方式定义新的CSS的时候，会看到DW提供的3种选择方式，即类样式、标签样式和高级样式。在“CSS样式”面板中单击“新建CSS样式”按钮，弹出如图所示的“新建CSS样式”对话框。选择器类型有以下3种：类：定义了一种通用的方式，所有应用了该方式的元素在浏览器中都遵循该类定义的规则。类名称必须以句点开头，可以包含任何字母和数字组合。如果没有输入开头的句点，DW8将自动输入。标签：该选项可以对某一具体标签进行重新定义，这种方式对HTML中的代码进行设置，其作用是创建或修改某个标签的CSS后，所有用到该标签进行格式化的文本都将被立即更新。若要重新定义特定HTML标签的默认格式，在“选择器类型”中选择“标签”选项，然后在“标签”文本框中输入一个HTML标签，或从下拉菜单中选择一个标签。高级：该选项会对某一具体的标签组合或者含有特定ID属性的标签应用样式。若要为具体某个标签组合或所有包含特定ID属性的标签定义格式，在“选择器类型”中选择“高级”选项，然后在“选择器”文本框中输入一个标签，或从下拉菜单中选择一个标签，下拉菜单中提供的选择器分为4种。a:active:定义了链接被激活时的样式，即鼠标已经单击了链接，但页面还没有跳转时。a:hover:定义了鼠标停留在链接的文字上时的样式。常见设置有文字颜色改变、下划线出现等a:link：定义了设置有链接文字的样式。常见的有带下划线（或没有带下划线）a:visited:浏览者已经访问过的链接样式，一般设置其颜色不同于a:link的颜色，以便给浏览者明显的提示。10.4设置CSS的样式使用“CSS样式定义”对话框中的“类型”类别可以定义CSS样式的基本字体。在“新建CSS样式”对话框“选择器类型”中选择“类”选项，单击“确定按钮”，弹出如图所示对话框，在对话框中设置所需的样式属性。10.5应用CSS样式美化网页DW是最早使用CSS的网页工具之一。通过直观的界面可以定义多种不同的CSS设置，这些设置可以影响到网页中的任何元素，从文本的间距到类似于多媒体的转换，可以随时创建自己的样式，然后再链接调用它。10.5.1创建嵌入式CSS网页本节讲述利用CSS样式对网页文档进行美化，具体操作步骤如下：步骤1：在网页中输入一段文字，选择“文本》CSS样式》新建”命令，弹出“新建CSS样式”对话框。步骤2：保持默认的设置，单击“确定”，弹出“.unnamed1的CSS样式定义”对话框，在左边的列表中选择“类型”选项，在右边的“字体”下拉列表中选择“宋体”，“大小”设置为12，“行高”设置为24像素。步骤3：单击“确定”，可以看到“CSS样式”面板中增加了新建的CSS样式。步骤4：在文档中按住鼠标左键向下拖动选中要套用CSS的文字，在“CSS样式”面板中单击鼠标右键，在弹出的菜单中选择“套用”选项。步骤5：套用CSS后，按F12键预览。10.5.2链接外部现有CSS样式文件这个方法最方便管理整个网站的网页风格，它让网页的文字内容和版面设计分开。只要在一个CSS文档中定义好网页的外观风格，所有链接到此CSS文档的网页，便会按照定义好的风格显示网页。链接外部CSS样式文件具体操作步骤如下所示。步骤1：打开网页，在“CSS样式”面板中选中样式单击鼠标右键，在弹出的菜单中选择“附加样式表”步骤2：选择“附加样式表”后弹出“链接外部样式表”对话框，在对话框中的“添加为”选项中选择“链接”选项，单击“文件/URL”文本框右边的“浏览”按钮，选项相应的文件，单击“确定按钮”10.6.3导出为外部CSS样式表CSS样式完成为，还可以导出作为单独的文件，具体操作步骤如下：步骤1：在“CSS样式”面板中选中样式单击鼠标右键，在弹出的下拉菜单中选择“导出”选项步骤2：选择“导出”选项后，弹出“导出样式为CSS文件”对话框，在该对话框中将文件名指定为style110.6实战演练10.6.1利用CSS固定字体大小10.6.2利用CSS创建精美网页导航10.6.1利用CSS固定字体大小利用CSS可以固定字体大小，使网页中的文本始终不随浏览器改变而发生改变，总是保持着原有的大小。10.6.2利用CSS创建精美网页导航利用CSS不仅可以固定字体大小，还可以创建精美的导航。