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

1、21世纪电脑系列教程、网页设计实用工具教程电子课、结束、第4章Dreamweaver MX中的CSS样式、学习目的：创建CSS样式的概念CSS样式和HTML样式CSS样式控制面板定义CSS样式、牙齿章节概述：牙齿章节的任务是创建动态链接效果的网页(在中文版本的Dreamweave MX中)在此基础上，牙齿章节在第二部分中介绍了CSS样式的基础知识和在Dreamweaver MX中的具体应用程序。这样，您就可以将CSS样式完全应用于网页，从而设计更精致的web作品。4.1Microsoft China corporation主页上的动态链接效果通常不变，除非在Dreamweaver MX中创建链

2、接后链接的文本经过鼠标时，鼠标的外观从箭头变为手形。但是在互联网上，“当鼠标通过所有链接文字时，文本从蓝色变为红色，当鼠标离开时，链接文字再次变为蓝色。”经常可以看到某些文字链接动态变化的效果，例如。创建4.1动态链接效果，图4-1 Microsoft主页上的文本链接动态效果，以下a:链接颜色： # 003399 a : visited color : # 800080 a : hover牙齿部分介绍如何在Dreamweaver MX中为单个网页创建一致的动态效果。A:active color: # 000000中文仿造歌曲18黑色a3360 hover color : # ff 3300中文

3、彩色云16红色a3360 link color : # 006600中文仿造歌曲12绿色a 3360此知识使您可以使用Dreamweaver MX中的CSS样式控制面板在网页上轻松设计CSS样式的各种效果。什么是4.2.1 CSS样式？1 .CSS样式的概念是“层叠样式表”的缩写，kAs5keid经常翻译为“层叠样式表”或“层叠样式表”，主要用于控制web元素样式设计通过设置样式表，可以统一控制web页上每个对象的显示属性。2 .CSS样式语法，CSS样式表语法如下：HTML标签属性：属性值；标签属性：属性值；标签属性：属性值；示例1: 1:Pfont-family:宋体；font-size

4、:9 pt；Color:blue说明HTML标签：不带尖括号的标签(例如，p不能协作)。标记属性：属性值：属性值用分号分隔。如果属性名称由两个或多个单词组成，则单词由“-”分隔。例如，背景颜色属性写为“background-color”，3 .CSS样式是web文档中存在的三种茄子方法、外部档案方法、内部文档头方法和直接插入方法。三种茄子方法各有妙用，主要区别在于他们规定的风格使用范围不同。对外部档案驱动的CSS文件的引用是在HTML中的标签之间写入以下语句：例如，在当前档案目录中输入yourstyle .有一个名为CSS的CSS档案，其内容为Pfont-family:宋体font-size:

5、9pt。Color :蓝色H2 font-family :导体font-size :13 pt；Color:red可以应用以下语句来引用CSS外部文件：示例：第4章是将CSS样式用作外部文件的示例，3 .CSS样式存在于web文档中的三种茄子方法-内部文档头方法(内嵌样式)-直接在文档头之间定义CSS样式。范围仅限于牙齿文件：3。CSS样式存在于web文档中的三种茄子方法：直接插入方法。在每个HTML标签后创建CSS属性，可以合并整个网站样式。您可以将第一个统一web样式、第二个网页内部的特定标签曹征、第三个、4.2.2 CSS样式和HTML样式、Dreamweaver MX中没有HTML样式

6、的字符颜色、字体、大小、对齐、粗体等属性设置为一个HTML样式等应用于某些字符或整个文本，并通过对HTML样式的引用将其应用于其它文本在Dreamweaver MX中实现HTML样式是通过HTML样式控制面板完成的，如图4-13所示。图4-13 HTML样式控制面板，CSS样式和HTML样式之间的异同，CSS样式比HTML样式强大得多。从某种意义上说，您可以将HTML样式视为CSS样式的子集。提供比HTML样式更多的文本属性控制。可以应用于多个网页或整个网站的网页。更新或修改CSS样式时，使用该样式表的所有文档格式也会自动更新。在Dreamweaver MX中，可以使用CSS样式面板打开CSS

7、样式控制面板，方法是将自定义CSS样式应用于当前选择，然后选择主菜单“窗口/CSS样式”命令。图4-14所示。图4-14 CSS样式面板，Dreamweaver 2004注：CSS样式面板仅显示自定义CSS样式(复盖HTML标签)和(CSS选择器样式)不显示在CSS样式面板中。4.2.4定义CSS样式并定义CSS样式以创建CSS样式表。可以分为两个步骤：选择新样式的类型和定义CSS样式。1.选择新样式的类型之前，必须打开“新建样式”对话框选择类型。两种茄子方法：如图4-15所示。您可以选择主菜单“文本/”CSS样式/新建样式”命令，或单击“CSS样式”面板中的“新建样式”按钮。图4-15打开“

8、新建样式”对话框，2004打开“新建样式”对话框，Dreamweaver MX中有三种类型的茄子允许使用CSS表格。您可以将创建自定义样式(class):应用于class属性标签范围内的文本。必须以句点开头。您可以使用HTML标签：复盖标签格式CSS选择器复盖某些标签的特定组合格式。”“定义位置”包含两个茄子选项，创建前应将文件另存为“仅限牙齿文档”文件的CSS档案：创建文件时，创建无需保存的CSS内联样式；2 .创建CSS样式定义，然后在“新建样式”对话框中单击“确定”按钮，将出现“CSS样式定义”，“图4-16样式定义”对话框，“2004样式定义”对话框，分类：类型、背景、块、框(框)边界

9、、列表、布局、扩展类型：字体大小样式：普通背景：背景颜色或背景地物的设置块：页面上的文本段落或地物布局将选定文本的标签或块更改为扩展新图层：在开发中的项目样式定义对话框中，选项旁边将显示(*)，表明它不显示在Dreamweaver剪辑窗口中，必须在浏览器中才能正确查看效果。在4.3牙齿章节中，首先使用Dreamweaver MX中的CSS样式功能创建链接到网页的文本的动态效果。这是CSS样式应用于网页的重要内容之一。在此基础上，我们将详细介绍CSS样式的基本概念、CSS样式和HTML样式的相似之处、CSS样式的分类、CSS样式，并且练习“选择题”(1)样式定义类型中的()主要用作背景色或背景图

10、的各种设置。a、背景B、块C、列表D和扩展(2)主要用作页面上文本段落或图的放置位置。a、方块b、边框c、区块d、定位(3)CSS样式表只能在()以上的浏览器中使用。a、3.0 B、4.0 C、3.5 D、2.0 (4)()您几乎可以控制所有文本的属性，并且可以应用于多个网页或整个网站的网页。a、CSS样式b、HTML样式c、页面属性d和文本属性面板(5)许多CSS方法都有各自的用途，并且在整个网站样式中使用()方法。a、外部档案B、嵌入式C、独立(6)外部CSS样式文件的引用通过()实现。a、新样式b、样式c附件、样式d剪辑、自动应用(7)CSS样式表位于文档的()区域中。a、HTML B、

11、BODY C、头D、表、4.4练习和操作问题、“空白填充”、(1)创建CSS样式表可分为两个步骤：()和()。(2)自定义样式(类)名称必须以()开头。但是，如果不输入，Dreamweaver会自动导入。(3)“新建样式”对话框中提供了四个选择器：()、()、()、()、()、()。(4)(复盖HTML标签)“CSS样式”面板仅显示自定义CSS样式；()和()不显示在“CSS样式”面板中。(5)“CSS样式”面板的快捷菜单包括()、()、()、()、()、()、()、()、()等。(6)在样式定义对话框中的选项旁边会显示()，表示无法在Dreamweaver剪辑窗口中显示此效果，必须在浏览器中正确显示此效果。(7)CSS样式外部文件的扩展名为()。(8)()的“HTML标签”没有尖括号。短答案 (1)CSS样式的语法是什么？(2)什么是CSS样式？(3)CSS样式与HTML样