用css样式表美化网.ppt

《用css样式表美化网.ppt》由会员分享，可在线阅读，更多相关《用css样式表美化网.ppt（40页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第6章章用用CSS样式表美化网页样式表美化网页6.2 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页 了解了解了解了解CSSCSS样式样式样式样式 CSSCSS基础基础基础基础 创建创建创建创建CSS CSS CSS CSS基本应用基本应用基本应用基本应用 链接外部链接外部链接外部链接外部CSSCSS样式文件样式文件样式文件样式文件教学目的教学目的教学目的教学目的6.3 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页r CSS样式表简介样式表简介r 创建创建CSS样式表

2、的方法样式表的方法r 内部内部CSS样式表的应用样式表的应用r 链接外部链接外部CSS样式表样式表r 在代码视图编辑在代码视图编辑CSS样式表样式表本章内容本章内容本章内容本章内容6.4 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页v CSS定义定义 v CSS样式的分类及应用方式样式的分类及应用方式 v 使用使用“CSS样式样式”面板面板v 新建新建CSS样式样式 v 设置设置“CSS 规则定义规则定义”对话框参数对话框参数 vv 自定义自定义自定义自定义CSSCSS样式样式样式样式 vv 链接外部链接外部链接外部链接外部CSS

3、CSS样式样式样式样式 vv 编辑编辑编辑编辑CSSCSS样式样式样式样式 vv 复制复制复制复制CSSCSS样式样式样式样式 vv 导出导出导出导出CSSCSS样式样式样式样式 vv CSSCSS样式转化为样式转化为样式转化为样式转化为HTMLHTML标签标签标签标签 CSS样式样式 6.5 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页CSS定义定义 lCSS即即Cascading Style Sheets（重叠样式表），是用来控制一个或（重叠样式表），是用来控制一个或多个文档显示属性的集合。多个文档显示属性的集合。lCSS样式

4、位于页面的样式位于页面的标签中，可以定义页面中标签中，可以定义页面中HTML标签的标签的属性。属性。l使用使用CSS样式能够定义一些单独使用样式能够定义一些单独使用HTML样式不能定义的属性。样式不能定义的属性。l除了控制文本的传统属性之外，使用除了控制文本的传统属性之外，使用CSS样式也可以控制一些特殊样式也可以控制一些特殊的属性，例如鼠标特效。的属性，例如鼠标特效。6.6 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页CSS样式的分类及应用方式样式的分类及应用方式1 CSS样式的分类样式的分类l 自定义CSS样式（类样式）：可将

5、样式属性应用于页面上的任何元素。l HTML标签样式：重新定义特定标签。l CSS选择器样式（高级样式）（高级样式）：重新定义特定元素组合的格式。2 CSS2 CSS样式的应用方式样式的应用方式样式的应用方式样式的应用方式l l 局部套用局部套用l l 内联式内联式 将CSS规则定义在HTML网页文档的内部。l l 外联式外联式 将CSS规则定义在一个独立的外部样式文件中。6.7 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页CSS样式的规则样式的规则1 CSS样式的规则由两部分组成样式的规则由两部分组成l 选择器 标识已设置格式元

6、素的术语。l 声明 用于定义样式属性。示例：示例：h1 font-size:16 pixels;font-family:宋体;font-weight:bold;在这个CSS规则中，h1是选择器，介于大括号之间的所有内容都是声明块。各个声明由两部分组成：属性（如font-family）和值（如16 pixels）。6.8 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页对样式表操作的三种方式对样式表操作的三种方式1第一种方式第一种方式执行执行【窗口窗口】【CSS 样式样式】命命令，打开令，打开【CSS 样式样式】面板面板 2第二种方式第

7、二种方式3第三种方式第三种方式在空白处右击在空白处右击6.9 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页使用使用“CSS样式样式”面板面板 样式表文件名CSS规则列表属性和属性值列表工具按钮栏在Dreamweaver中，“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。类别视图6.10 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页使用使用“CSS样式样式”面板面板 选择命令“窗口”“CSS样式”

8、or单击属性面板中的CSS按钮or使用快捷键Shift+F11 附加样式表 新建CSS规则 编辑样式 删除CSS样式 6.11 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页新建新建CSS样式样式 定义样式表选项定义样式表选项在在【CSS样式样式】面板面板上，单击上，单击【新建新建CSS规则规则】按钮，打开按钮，打开【新建新建CSS规则规则】对对话框。话框。1【定义在】选项（1）【新建样式表文件】（2）【仅对该文档】2【选择器类型】选项（1）【类（可应用于任何标签）】（2）【标签（重新定义特定标签的外观）】（3）【高级（ID、伪类选

9、择器等）】3【名称】文本框在这个文本框中输入CSS规则名称。根据所选择的“选择器类型”的不同，这里可以输入或者选择 不同的名称。6.12 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页新建新建CSS样式样式“新建CSS规则”按钮6.13 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页设置设置“CSS 规则定义规则定义”对话框参数对话框参数 1.定义定义CSS样式的类型属性样式的类型属性2.定义定义CSS样式的背景属性样式的背景属性色盘色盘色盘色盘对文字的字体、大对文字的字

10、体、大小、颜色、效果等小、颜色、效果等基本样式进行设置。基本样式进行设置。对元素的背景进对元素的背景进行设置，包括背行设置，包括背景颜色、背景图景颜色、背景图像的控制。像的控制。6.14 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页设置设置“CSS 规则定义规则定义”对话框参数对话框参数3.定义定义CSS样式的区块属性样式的区块属性4.定义定义CSS样式的方框属性样式的方框属性设置对象的边界、设置对象的边界、间距、高度、宽度间距、高度、宽度和漂浮方式等。和漂浮方式等。设置对象文本的文字设置对象文本的文字间距、对齐方式、上间距、对齐

11、方式、上标、下标、排列方式、标、下标、排列方式、首行缩进等。首行缩进等。6.15 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页设置设置“CSS 规则定义规则定义”对话框参数对话框参数5.定义定义CSS样式的边框属性样式的边框属性6.定义定义CSS样式的列表属性样式的列表属性 设置对象边框的宽设置对象边框的宽度、颜色及样式。度、颜色及样式。设置列表项样式、设置列表项样式、列表项图像和位置。列表项图像和位置。6.16 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页设置设置“

12、CSS 规则定义规则定义”对话框参数对话框参数7.定义定义CSS样式的定位属性样式的定位属性8.定义定义CSS样式的扩展属性样式的扩展属性设置的内容有两部分：设置的内容有两部分：1、打印网页时强迫在样式、打印网页时强迫在样式控制的对象前后换页；控制的对象前后换页；2、对象的视觉效果。、对象的视觉效果。相当于把对象放相当于把对象放在一个层里来定在一个层里来定位。位。6.17 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页自定义自定义CSS样式样式1.应用自定义应用自定义CSS样式样式选择文档中将应用CSS样式的文本 单击文本属性面板

13、2.删除已应用的自定义删除已应用的自定义CSS样式样式选择应用了自定义CSS样式的文本将文本属性面板切换到CSS模式，在“样式”下拉菜单中选择“无”6.18 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页编辑编辑CSS样式样式 双击选定的CSS样式名称。单击“CSS样式”面板底部工具栏上的“编辑样式表”按钮右击要编辑的CSS样式，在弹出的快捷菜单中选择“编辑”命令。6.19 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页复制复制CSS样式样式 选择要复制的CSS样式 右击

14、，在弹出的快捷菜单中选择“复制”命令 6.20 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页导出导出CSS样式样式 打开包含CSS样式的页面 “文件”“导出”“CSS样式”“导出样式为CSS文件”选择保存位置保存6.21 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页CSS样式转化为样式转化为HTML标签标签 只有将CSS样式转换为HTML标签，才可以在这些浏览器中正确显示页面 打开含有CSS样式的页面“文件”“转换”6.22 2009第第第第6 6章章章章 用用用用C

15、SSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页创建和应用创建和应用CSS样式样式 1 控制浏览器中的文字大小控制浏览器中的文字大小2 设置行间距设置行间距 3 为为图片加上边框效果图片加上边框效果6.23 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页创建和应用创建和应用CSS样式样式创建基本页面，“CSS样式”面板上右击，选择“新建”命令 打开“CSS 规则定义”对话框 从“光标”下拉菜单中选择鼠标方案 4 利用利用“自定义样式表自定义样式表”改变鼠标指针的形态改变鼠标指针的形态6.24 2009第第第第6 6

16、章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页创建和应用创建和应用CSS样式样式 hand：是大家所熟悉的手型。：是大家所熟悉的手型。crosshair：是十字型。：是十字型。text：是平时鼠标移动到文本上的样式。：是平时鼠标移动到文本上的样式。wait：是等待的效果。：是等待的效果。default：是默认的那种效果。：是默认的那种效果。help：是带问号的鼠标样式。：是带问号的鼠标样式。e-resize：是向右的箭头。：是向右的箭头。ne-resize：是向右上方的箭头。：是向右上方的箭头。n-resize：是向上的箭头。：是向上的箭头。nw-res

17、ize：是向左上方的箭头。：是向左上方的箭头。w-resize：是向左的箭关。：是向左的箭关。sw-resize：是向左下的箭头。：是向左下的箭头。s-resize：是向下的箭头。：是向下的箭头。se-resize：是向右下方的箭头。：是向右下方的箭头。auto：是系统自动的效果。：是系统自动的效果。参数的设置：参数的设置：4 利用利用“自定义样式表自定义样式表”改变鼠标指针的形态改变鼠标指针的形态6.25 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页创建和应用创建和应用CSS样式样式“CSS样式”面板上右击“新建”“新建CSS规

18、则”没有下划线的超链接 5 利用有关链接的样式表修改链接的格式利用有关链接的样式表修改链接的格式6.26 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页创建和应用创建和应用CSS样式样式5 利用有关链接的样式表修改链接的格式利用有关链接的样式表修改链接的格式为超链接创建动态效果：a:link定义了链接文字的样式。a:visited浏览者已经访问过的链接样式。a:hover 定义了鼠标悬浮在链接文字上时的样式。a:active 定义链接被激活时的样式，即鼠标已经单击了链接，但页面还没有跳转时。6.27 2009第第第第6 6章章章章

19、用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页创建和应用创建和应用CSS样式样式“CSS样式”面板上右击“新建”“新建CSS规则”5 利用有关链接的样式表修改链接的格式利用有关链接的样式表修改链接的格式6.28 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页创建和应用创建和应用CSS样式样式6 控制页面背景图像的样式控制页面背景图像的样式执行执行【修改修改】【页面属性页面属性】命令，命令，弹出弹出【页面属性页面属性】对话框对话框。通过重新定义通过重新定义body标签的标签的CSS规则来控制网页规则来控制

20、网页的背景图像。的背景图像。6.29 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页创建和应用创建和应用CSS样式样式7 利用自定义样式表制作项目图标利用自定义样式表制作项目图标定义一个类控制器，设置这个 CSS 规则的“列表”属性，然后将CSS规则应用在HTML文档的ul或者ol标签上。6.30 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页创建和应用创建和应用CSS样式样式8 CSS样式滤镜的应用样式滤镜的应用下面是各个滤镜的意义：Alpha：设置透明度。Blur：建

21、立模糊效果Chroma：把指定的颜色设置为透明。DropShadow：建立一种偏移的影像轮廓，即投射阴影。FlipH：水平反转。FlipV：垂直反转。Glow：为对象的外边界增加光效。Grayscale：降低图片的彩色度。Invert：将色彩、饱和度及亮度值完全反转建立底片效果。Light：在一个对象上进行灯投影。Mask：为一个对象建立透明膜。Shadow：建立一个对象的固体轮廓，即阴影效果。Wave：在X轴和Y轴方向用正弦波纹打乱图片。Xray：只显示对象的轮廓6.31 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页外部外部CS

22、S样式表样式表1 建立外部建立外部CSS样式表文件并定义文字和段落样式样式表文件并定义文字和段落样式6.32 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页外部外部CSS样式表样式表2 定义表格样式定义表格样式通过重新定义table标签控制网页中的表格的外观。6.33 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页外部外部CSS样式表样式表3 定义超级链接样式定义超级链接样式 通过定义a:link 和a:hover 两个高级样式来控制网页中的超级链接的外观。6.34 20

23、09第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页外部外部CSS样式表样式表4 定义特殊段落的样式定义特殊段落的样式 网页中经常会有一些特殊段落，比如程序代码等，为了让这些特殊段落和其他段落区分开来，本小节再定义一个特殊段落的样式。6.35 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页外部外部CSS样式表样式表5 链接外部链接外部CSS样式表样式表单击“CSS样式”面板底部工具栏的“附加样式表”按钮 在页面代码中生成标签 在页面代码中生成标签 Internet Explorer

24、Internet Explorer和和NetscapeNavigatorNetscapeNavigator都支都支持链接方式，而持链接方式，而Netscape Netscape NavigatorNavigator不支持导入方式不支持导入方式 6.36 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页外部外部CSS样式表样式表6 在网页中应用外部在网页中应用外部CSS样式表样式表1.因为控制超链接和表格的CSS规则，是用相应的标签重新定义得到的，所以网页中的超链接和表格会自动应用样式。2.我们可以将.text样式应用到标签上，这样网页

25、中的文字都被.text这个样式控制外观。3.对于网页中的程序代码段落，可以用.teshu样式来控制外观。6.37 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页在在【代码视图代码视图】手动添加和编辑手动添加和编辑CSS1 CSS样式表的标记和语句格式样式表的标记和语句格式1内联样式表的代码结构CSS样式代码样式表的代码一般格式：样式表名称属性1:属性1值;属性2:属性2值;2类选择器的CSS代码结构应用类标识符样式时，都是通过class属性的设置实现的：class=myCSS_Class“在“代码视图”下，通过手动添加代码，编辑某个

26、HTML标签的class属性，就可以让这个HTML标签控制范围内的元素应用类选择符样式。6.38 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页在在【代码视图代码视图】手动添加和编辑手动添加和编辑CSS3ID选择器的CSS代码结构应用ID选择器样式时，都是通过HTML标签的id属性的设置实现的：id=myCSS_ID“ID属性是HTML标签的一个重要属性，一个网页中的标签的ID属性值不能重复，因此在利用ID属性应用标识选择符CSS样式时，只能应用于一个标签。如果应用于多个标签，就会造成标签的ID属性冲突。4链接外部样式表的代码结构网

27、页文档链接了外部CSS样式文件后，在代码视图中，可以观察到head标签中增加了一行类似于下面的代码：这就是链接外部CSS样式文件的代码。1 CSS样式表的标记和语句格式样式表的标记和语句格式6.39 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页在在【代码视图代码视图】手动添加和编辑手动添加和编辑CSS2 通过编辑通过编辑CSS代码改变网页滚动条的外观代码改变网页滚动条的外观在网页代码和之间插入下面的代码：body SCROLLBAR-FACE-COLOR:#3333FF;/立体滚动条凸出部分的颜色SCROLLBAR-HIGHLIG

28、HT-COLOR:#505050;/滚动条空白部分的颜色SCROLLBAR-SHADOW-COLOR:#fc2400;/立体滚动条阴影的颜色SCROLLBAR-ARROW-COLOR:#666666;/上下按钮上三角箭头的颜色SCROLLBAR-BASE-COLOR:#333333;/滚动条的基本颜色SCROLLBAR-DARK-SHADOW-COLOR:#b4fc48;/立体滚动条强阴影的颜色 6.40 2009第第第第6 6章章章章 用用用用CSSCSS样式表美化网页样式表美化网页样式表美化网页样式表美化网页在在【代码视图代码视图】手动添加和编辑手动添加和编辑CSS3 从从CSS模板创建模板创建CSS文件文件选择【文件】|【新建】命令，在弹出的【新建文档】对话框中，选择【示例中的页】，在【示例文件夹】列表中选择【CSS样式表】，然后在对应的列表框中选择【完整设计：Georgia,红色/黄色】（这是Dreamweaver自带的一个CSS模板），然后单击【创建】按钮。1新建CSS文件2修改CSS样式