《网页设计实用教程》第04章

21世纪计算机系列教程退出第4章DreamweaverMX的CSS样式学习目的：CSS样式的概念CSS样式与HTML样式CSS样式控制面板定义CSS样式本章概述：本章的任务是制作一个动态链接效果的网页，通过动态链接效果的实际制作，可以初步感受中文版DreamweaveMX中CSS样式的应用，在此基础上，本章在第二节中就CSS样式的基本知识及其在DreamweaverMX中的具体应用作了介绍，这样，举一反三，把CSS样式在网页中的应用完全发挥，从而设计出更精美的网页作品。4.1Microsoft中国公司主页的动态链接效果通常在DreamweaverMX中做好链接后，链接的文字在鼠标经过时，除了鼠标的形状由箭头形变为手形外，文字一般不会发生变化。但在网上，经常会看到一些文字链接富有动态变化的效果，如通过网址“”访问Microsoft中国公司的主页时，如图4-1所示，当鼠标经过所有的链接文字时，文字会由蓝色变成红色，当鼠标离开时，链接文字又变回蓝色。4.1制作动态链接效果图4-1Microsoft主页的文字链接动态效果在head与/head多了如下内容styletype=text/cssa:link{color:#003399}a:visited{color:#800080}a:hover{color:#FF3300}/stylea:link{color:#003399}蓝链接文字的颜色(未单击)a:visited{color:#800080}暗紫访问过链接文字(已单击)a:hover{color:#FF3300}红鼠标经过链接文字(悬停)4.1.2为网页制作动态链接效果为网页制作动态链接效果，不是用代码复制与粘贴的方法，而利用DreamweaverMX的CSS样式控制面板来实现。利用DreamweaverMX的CSS样式控制面板，可以设计出远比Microsoft中国公司的主页中的动态链接好效果好的效果。本小节将介绍在DreamweaverMX中为一个网页制作具有统一动态效果的操作方法。a:active{color:#000000}华文仿宋18黑a:hover{color:#FF3300}华文彩云16红a:link{color:#006600}华文仿宋12绿a:visited{color:#CC6600}华文仿宋12棕4.2知识要点上一节，通过一个网页动态链接效果制作的实例，读者对CSS样式在DreamweaverMX网页设计中应用有了一个初步的认识。本小节将在此基础上，进一步对CSS样式的知识要点作系统介绍。通过这些知识的学习，可以借助DreamweaverMX的CSS样式控制面板，轻易设计出CSS样式在网页中的各种效果。4.2.1什么是CSS样式1.CSS样式的概念是“CascadingStyleSheet”的缩写，[kAs5keid]常被译作“级联样式表”或“层叠样式表”，其作用主要用于控制网页元素风格设计。比如，链接文字未单击时是绿色，当鼠标移上去后字变成红色且字体变大，这就是一种风格。通过设立样式表，可以统一地控制网页中各对象的显示属性。2.CSS样式的语法CSS样式表的句法如下：HTML标签{标签属性：属性值；标签属性：属性值；标签属性：属性值；...}例1：P{font-family:‘宋体’;font-size:9pt;color:blue}说明HTML标签：标签不带尖括号，如P不能协作P。“标签属性：属性值”：对属性值之间用分号隔开。凡属性名为两个或两个以上的单词构成时，单词之间以“-”隔开，如背景颜色属性写为“background-color”3.CSS样式在网页文档中的三种存在方式外部文件方式、内部文档头方式、直接插入方式。三种方式各有妙用，主要的差别在于它们规定的风格使用范围不同。外部文件方式CSS文件的引用是在HTML的head/head标签之间写下列语句：linkhref=文件名.cssrel=stylesheettype=text/css如在当前文件目录下有一个CSS文件名为YourStyle.css，其内容如下：P{font-family:'宋体'font-size:9pt;color:blue}H2{font-family:'宋体'font-size:13pt;color:red}要引用CSS外部文件，可以适用下列语句：LinkRel=“STYLESHEET”Href=“YourStyle.CSS”Type=“text/css”举例：第四章用外部文件方式使用css样式示例3.CSS样式在网页文档中的三种存在方式内部文档头方式（内嵌样式）将CSS样式直接定义在文档头head/head之间，范围仅限于本文件。StyleType=text/css!--P{font-family:'宋体'font-size:9pt;color:blue}H2{font-family:'宋体'font-size:13pt;color:red}--/StyleStyleType=text/css!--P{font-family:'宋体'font-size:9pt;color:blue}}--/Style3.CSS样式在网页文档中的三种存在方式直接插入方式。只需要在每个HTML标签后书写CSS属性就可以Tablestyle=color:red;font-size:10pt统一整个网站风格，用第一种统一某个网页风格，用第二种网页内部某个标签的具体调整上，用第三种4.2.2CSS样式与HTML样式可略DreamweaverMX中有，2004中没有可略HTML样式是一种文字属性的集合，可以将其应用于某些文字或整段文字上，如将文字颜色、字体、大小、对齐、加粗等属性设置在一种HTML样式里，可以通过HTML样式的引用让其他的文字或段落也可以套用这些属性。在DreamweaverMX中实现HTML样式是靠HTML样式控制面板如图4-13所示。图4-13HTML样式控制面板字符样式段落样式快捷菜单新建样式自动应用HTML样式列表删除样式CSS样式与HTML样式异同可略CSS样式与HTML样式相比，其功能强大得多，在某种意义上，可把HTML样式看作是CSS样式的子集，其至少具有以下两个突出的优点：提供比HTML样式更多的文字属性控制：CSS样式几乎可控制所有文字的属性。可以套用到多个网页，甚至整个网站的网页上。当CSS样式更新或修改时，所有使用该样式表的文档格式也会自动更新。4.2.3CSS样式控制面板DreamweaverMX中使用CSS样式面板将自定义CSS样式应用到当前选择，CSS样式控制面板可以通过选择主菜单“窗口”/“CSS样式”命令来打开。如图4-14所示。取消样式快捷菜单附加样式表CSS样式列表新建样式删除样式编辑样式表图4-14CSS样式面板Dreamweaver2004中注意：CSS样式面板只显示自定义CSS样式，可略（重定义HTML标签2004中不用）和（CSS选择器样式）并不出现在CSS样式面板中。4.2.4定义CSS样式定义CSS样式，即创建一个CSS样式表。可分为新建样式的类型选择与CSS样式定义两个阶段。1.新建样式的类型选择首先需要打开“新建样式”对话框，进行类型选择。两种方式：如图4-15所示。可以选择主菜单“文本”/“CSS样式”/“新建样式”命令，也可以在CSS样式面板上单击“新建样式”按钮，图4-15打开“新建样式”对话框2004打开“新建样式”对话框DreamweaverMX中CSS表有三种可用类型：创建自定义样式（class）:可以应用到以class属性标签范围内的文本中必须以句点.开头重定义HTML标签:重定义某标签的格式使用CSS选择器2004中称上下文选择器重定义一些标签的特定组合格式“定义在”有两个可选项“外部”：创建一个外部CSS文件，创建之前会要求存为一个文件“仅对该文档”：创建一个CSS内嵌样式，在创建时不要求存为一个文件2.CSS样式定义单击“新建样式”对话框的“确定”按钮后，会出现一个“CSS样式定义”对话框，如图4-16所示，“样式定义”对话框是实现DreamweaverCSS样式的核心所在。图4-16“样式定义”对话框2004“样式定义”对话框分类：类型、背景、区块、盒子（方框）边框、列表、定位、扩展类型：字体大小样式：正常、斜体、偏斜体行高修饰：下划线、上划线、删除线、文本闪烁粗细：变量：选取字体的变体大小写：颜色：背景：背景色或背景图片的设置区块：页面上的文字段落或图片放置位置的设置盒子（方框）：定义控制页面元素位置的设置边框：设置页面元素的边框列表：定义样式中列表的设置（项目符号）定位：参数中设置层的默认标签，将选取文本的标签或块更改为新层扩展：正在发展的各项设置，可能不受多数浏览器的支持，慎重使用。在样式定义对话框中各选项旁边注明有（*），表示在Dreamweaver编辑窗口中无法显示，需要在浏览器中才能正确看到效果。4.3本章小结本章首先利用DreamweaverMX的CSS样式功能制作了一个网页上的链接文字的动态效果，这是CSS样式在网页上应用的重要内容之一，在此基础上，进一步就CSS样式的基本概念、CSS样式与HTML样式的异同、CSS样式的分类、CSS样式的创建等知识作了介绍。习题【选择题】（1）样式定义类型中的（）主要用来作背景色或背景图片的各项设置。A、背景B、区块C、列表D、扩展（2）主要用来作页面上的文字段落或图片的放置位置的设置。A、盒子B、边框C、区块D、定位（3）CSS样式表只能工作在（）及以上版本的浏览器中。A、3.0B、4.0C、3.5D、2.0（4）（）几乎可以控制所有文字的属性，它也可以套用到多个网页，甚至整个网站的网页上。A、CSS样式B、HTML样式C、页面属性D、文本属性面板（5）几种CSS方式各有用途，在统一整个站点风格上，用（）方式。A、外部文件式B、内嵌入式C、独立式（6）外部CSS样式文件的引用是通过（）来实现的。A、新建样式B、附加样式C、编辑样式D、自动应用（7）CSS样式表存在于文档的（）区域中。A、HTMLB、BODYC、HEADD、TABLE4.4习题与操作题【填空题】（1）创建一个CSS样式表可分为（）与（）两个阶段。（2）自定义样式（class）名称，必须以（）作为开头。但如果不输入，Dreamweaver会自动输入。（3）在“新建样式”对话框中可用的选择器有（）、（）、（）、（）共4个。（4）可略（重定义HTML标签2004中不用）CSS样式面板只显示自定义CSS样式，（）和（）并不出现在CSS样式面板中。（5）CSS样式面板中的快捷菜单包括：（）、（）、（）、（）、（）、（）、（）、（）。（6）在样式定义对话框中各选项旁边注明有（），表示在Dreamweaver编辑窗口中无法显示，需要在浏览器中才能正确看到效果。（7）CSS样式外部文件的扩展名是（）。（8）（）的“HTML标签”不带尖括号。【简答题】（1）CSS样式的语法是什么？（2）什么是CSS样式？（3）CSS样式与HTML样式有何不同？（4）CSS样式在网页中的存在可分为哪几种方式？（5）在新建样式对话框中CSS样式可为哪几种类型？（6）CSS样式在“样式定义”对话框中有几种分类？操作题（1）设计一个内嵌式CSS样式，并用于本页的文本。（2）打开一个做了链接的普通网页，并为之添加文字链接的动态效果。（3）创建一个外部CSS样式文件，并将之应用于两个以上的网页。