1、第6章 用CSS样式表美化网页,了解CSS样式CSS基础创建CSS CSS基本应用链接外部CSS样式文件,教学目的,CSS样式表简介创建CSS样式表的方法内部CSS样式表的应用链接外部CSS样式表在代码视图编辑CSS样式表,本章内容,CSS定义 CSS样式的分类及应用方式 使用“CSS样式”面板新建CSS样式 设置“CSS 规则定义”对话框参数 自定义CSS样式 链接外部CSS样式 编辑CSS样式 复制CSS样式 导出CSS样式 CSS样式转化为HTML标签,CSS样式,CSS定义,CSS即Cascading Style Sheets（重叠样式表），是用来控制一个或多个文档显示属性的集合。CS
2、S样式位于页面的标签中，可以定义页面中HTML标签的属性。使用CSS样式能够定义一些单独使用HTML样式不能定义的属性。除了控制文本的传统属性之外，使用CSS样式也可以控制一些特殊的属性，例如鼠标特效。,CSS样式的分类及应用方式,1 CSS样式的分类自定义CSS样式（类样式）：可将样式属性应用于页面上的任何元素。HTML标签样式 ：重新定义特定标签。CSS选择器样式（高级样式）：重新定义特定元素组合的格式。2 CSS样式的应用方式局部套用内联式 将CSS规则定义在HTML网页文档的内部。外联式 将CSS规则定义在一个独立的外部样式文件中。,CSS样式的规则,1 CSS样式的规则由两部分组成选
3、择器 标识已设置格式元素的术语。声明 用于定义样式属性。示例：,h1 font-size: 16 pixels; font-family: “宋体“; font-weight:bold; ,在这个CSS规则中，h1是选择器，介于大括号之间的所有内容都是声明块。 各个声明由两部分组成：属性（如font-family）和值（如16 pixels）。,对样式表操作的三种方式,1第一种方式,执行【窗口】【CSS 样式】命令，打开【CSS 样式】面板,2第二种方式,3第三种方式,在空白处右击,使用“CSS样式”面板,在Dreamweaver中，“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“
4、窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。,使用“CSS样式”面板,选择命令“窗口”“CSS样式” or单击属性面板中的CSS按钮 or使用快捷键Shift+F11,新建CSS样式,定义样式表选项,在【CSS样式】面板上，单击【新建CSS规则】按钮，打开【新建CSS规则】对话框。,1【定义在】选项,（1）【新建样式表文件】,（2）【仅对该文档】,2【选择器类型】选项,（1）【类（可应用于任何标签）】,（2）【标签（重新定义特定标签的外观）】,（3）【高级（ID、伪类选择器等）】,3 【名称】文本框,在这个文本框中输入CSS规则名称。根据所选择的“选择器类型”的不同，这里可以
5、输入或者选择 不同的名称。,新建CSS样式,“新建CSS规则”按钮,设置“CSS 规则定义”对话框参数,1. 定义CSS样式的类型属性,2. 定义CSS样式的背景属性,色盘,对文字的字体、大小、颜色、效果等基本样式进行设置。,对元素的背景进行设置，包括背景颜色、背景图像的控制。,设置“CSS 规则定义”对话框参数,3. 定义CSS样式的区块属性,4. 定义CSS样式的方框属性,设置对象的边界、间距、高度、宽度和漂浮方式等。,设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等。,设置“CSS 规则定义”对话框参数,5. 定义CSS样式的边框属性,6. 定义CSS样式的列表属性,设
6、置对象边框的宽度、颜色及样式。,设置列表项样式、列表项图像和位置。,设置“CSS 规则定义”对话框参数,7. 定义CSS样式的定位属性,8. 定义CSS样式的扩展属性,设置的内容有两部分： 1、打印网页时强迫在样式控制的对象前后换页； 2、对象的视觉效果。,相当于把对象放在一个层里来定位。,自定义CSS样式,1. 应用自定义CSS样式,选择文档中将应用CSS样式的文本,单击文本属性面板,2. 删除已应用的自定义CSS样式,选择应用了自定义CSS样式的文本,将文本属性面板切换到CSS模式，在“样式”下拉菜单中选择“无”,编辑CSS样式,双击选定的CSS样式名称。单击“CSS样式”面板底部工具栏上
7、的“编辑样式表”按钮右击要编辑的CSS样式，在弹出的快捷菜单中选择“编辑”命令。,复制CSS样式,选择要复制的CSS样式,右击，在弹出的快捷菜单中选择“复制”命令,导出CSS样式,打开包含CSS样式的页面,“文件”“导出” “CSS样式” “导出样式为CSS文件”,选择保存位置保存,CSS样式转化为HTML标签,只有将CSS样式转换为HTML标签，才可以在这些浏览器中正确显示页面,打开含有CSS样式的页面,“文件”“转换”,创建和应用CSS样式,1 控制浏览器中的文字大小,2 设置行间距,3 为图片加上边框效果,创建和应用CSS样式,创建基本页面，“CSS样式”面板上右击，选择“新建”命令,打
8、开“CSS 规则定义”对话框,从“光标”下拉菜单中选择鼠标方案,4 利用“自定义样式表”改变鼠标指针的形态,创建和应用CSS样式,hand：是大家所熟悉的手型。 crosshair：是十字型。 text：是平时鼠标移动到文本上的样式。 wait：是等待的效果。 default：是默认的那种效果。 help：是带问号的鼠标样式。 e-resize：是向右的箭头。 ne-resize：是向右上方的箭头。 n-resize：是向上的箭头。 nw-resize：是向左上方的箭头。 w-resize：是向左的箭关。 sw-resize：是向左下的箭头。 s-resize：是向下的箭头。 se-resiz
9、e：是向右下方的箭头。 auto：是系统自动的效果。,参数的设置：,4 利用“自定义样式表”改变鼠标指针的形态,创建和应用CSS样式,“CSS样式”面板上右击“新建”“新建CSS规则”,没有下划线的超链接,5 利用有关链接的样式表修改链接的格式,创建和应用CSS样式,5 利用有关链接的样式表修改链接的格式,为超链接创建动态效果 ： a:link定义了链接文字的样式。 a:visited浏览者已经访问过的链接样式。 a:hover 定义了鼠标悬浮在链接文字上时的样式。 a:active 定义链接被激活时的样式，即鼠标已经单击了链接，但页面还没有跳转时。,创建和应用CSS样式,“CSS样式”面板上
10、右击“新建” “新建CSS规则”,5 利用有关链接的样式表修改链接的格式,创建和应用CSS样式,6 控制页面背景图像的样式,执行【修改】【页面属性】命令，弹出【页面属性】对话框 。,通过重新定义body标签的CSS规则来控制网页的背景图像。,创建和应用CSS样式,7 利用自定义样式表制作项目图标,定义一个类控制器，设置这个 CSS 规则的“列表”属性，然后将CSS规则应用在HTML文档的ul或者ol标签上。,创建和应用CSS样式,8 CSS样式滤镜的应用,下面是各个滤镜的意义： Alpha：设置透明度。 Blur：建立模糊效果 Chroma：把指定的颜色设置为透明。 DropShadow：建立
11、一种偏移的影像轮廓，即投射阴影。 FlipH：水平反转。 FlipV：垂直反转。 Glow：为对象的外边界增加光效。 Grayscale：降低图片的彩色度。 Invert：将色彩、饱和度及亮度值完全反转建立底片效果。 Light：在一个对象上进行灯投影。 Mask：为一个对象建立透明膜。 Shadow：建立一个对象的固体轮廓，即阴影效果。 Wave：在X轴和Y轴方向用正弦波纹打乱图片。 Xray：只显示对象的轮廓,外部CSS样式表,1 建立外部CSS样式表文件并定义文字和段落样式,外部CSS样式表,2 定义表格样式,通过重新定义table标签控制网页中的表格的外观。,外部CSS样式表,3 定义
12、超级链接样式,通过定义a:link 和a:hover 两个高级样式来控制网页中的超级链接的外观。,外部CSS样式表,4 定义特殊段落的样式,网页中经常会有一些特殊段落，比如程序代码等，为了让这些特殊段落和其他段落区分开来，本小节再定义一个特殊段落的样式。,外部CSS样式表,5 链接外部CSS样式表,单击“CSS样式”面板底部工具栏的“附加样式表”按钮,在页面代码中生成标签,在页面代码中生成标签,Internet Explorer和Netscape Navigator都支持链接方式，而Netscape Navigator不支持导入方式,外部CSS样式表,6 在网页中应用外部CSS样式表,因为控制
13、超链接和表格的CSS规则，是用相应的标签重新定义得到的，所以网页中的超链接和表格会自动应用样式。 我们可以将.text样式应用到标签上，这样网页中的文字都被.text这个样式控制外观。 对于网页中的程序代码段落，可以用.teshu样式来控制外观。,在【代码视图】手动添加和编辑CSS,1 CSS样式表的标记和语句格式,1内联样式表的代码结构,样式表的代码一般格式： 样式表名称 属性1:属性1值; 属性2:属性2值; ,2类选择器的CSS代码结构,应用类标识符样式时，都是通过class属性的设置实现的： class=“myCSS_Class“ 在“代码视图”下，通过手动添加代码，编辑某个HTML标
14、签的class属性，就可以让这个HTML标签控制范围内的元素应用类选择符样式。,在【代码视图】手动添加和编辑CSS,3ID选择器的CSS代码结构,应用ID选择器样式时，都是通过HTML标签的id属性的设置实现的：id=“myCSS_ID“ ID属性是HTML标签的一个重要属性，一个网页中的标签的ID属性值不能重复，因此在利用ID属性应用标识选择符CSS样式时，只能应用于一个标签。如果应用于多个标签，就会造成标签的ID属性冲突。,4链接外部样式表的代码结构,网页文档链接了外部CSS样式文件后，在代码视图中，可以观察到head标签中增加了一行类似于下面的代码：这就是链接外部CSS样式文件的代码。,
15、1 CSS样式表的标记和语句格式,在【代码视图】手动添加和编辑CSS,2 通过编辑CSS代码改变网页滚动条的外观,在网页代码和之间插入下面的代码：body SCROLLBAR-FACE-COLOR:#3333FF;/立体滚动条凸出部分的颜色 SCROLLBAR-HIGHLIGHT-COLOR:#505050;/滚动条空白部分的颜色 SCROLLBAR-SHADOW-COLOR:#fc2400;/立体滚动条阴影的颜色 SCROLLBAR-ARROW-COLOR:#666666;/上下按钮上三角箭头的颜色 SCROLLBAR-BASE-COLOR:#333333; /滚动条的基本颜色 SCROLLBAR-DARK-SHADOW-COLOR:#b4fc48;/立体滚动条强阴影的颜色 ,在【代码视图】手动添加和编辑CSS,3 从CSS模板创建CSS文件,选择【文件】|【新建】命令，在弹出的【新建文档】对话框中，选择【示例中的页】，在【示例文件夹】列表中选择【CSS样式表】，然后在对应的列表框中选择【完整设计：Georgia,红色/黄色】（这是Dreamweaver自带的一个CSS模板），然后单击【创建】按钮。,1新建CSS文件,2修改CSS样式,
