用css样式表美化网.ppt

6.*?2009第6章用CSS样式表美化网页6.*?2009第6章用CSS样式表美化网页第6章

用CSS样式表美化网页了解CSS样式CSS基础创建CSSCSS基本应用链接外部CSS样式文件教学目的CSS样式表简介创建CSS样式表的方法内部CSS样式表的应用链接外部CSS样式表在代码视图编辑CSS样式表本章内容12CSS定义01CSS样式的分类及应用方式02使用“CSS样式”面板03新建CSS样式04设置“CSS规则定义”对话框参数05自定义CSS样式06链接外部CSS样式07编辑CSS样式08复制CSS样式09导出CSS样式10CSS样式转化为HTML标签11CSS样式CSS即CascadingStyleSheets（重叠样式表），是用来控制一个或多个文档显示属性的集合。CSS样式位于页面的head标签中，可以定义页面中HTML标签的属性。使用CSS样式能够定义一些单独使用HTML样式不能定义的属性。除了控制文本的传统属性之外，使用CSS样式也可以控制一些特殊的属性，例如鼠标特效。02010304CSS定义1CSS样式的分类自定义CSS样式（类样式）：可将样式属性应用于页面上的任何元素。HTML标签样式：重新定义特定标签。CSS选择器样式（高级样式）：重新定义特定元素组合的格式。2CSS样式的应用方式局部套用内联式–将CSS规则定义在HTML网页文档的内部。外联式–将CSS规则定义在一个独立的外部样式文件中。CSS样式的分类及应用方式CSS样式的规则1CSS样式的规则由两部分组成选择器–标识已设置格式元素的术语。声明–用于定义样式属性。示例：h1{font-size:16pixels;font-family:宋体;font-weight:bold;}在这个CSS规则中，h1是选择器，介于大括号{}之间的所有内容都是声明块。各个声明由两部分组成：属性（如font-family）和值（如16pixels）。对样式表操作的三种方式执行【窗口】→【CSS样式】命令，打开【CSS样式】面板第二种方式第三种方式在空白处右击第一种方式使用“CSS样式”面板样式表文件名CSS规则列表属性和属性值列表工具按钮栏在Dreamweaver中，“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。类别视图使用“CSS样式”面板选择命令“窗口”→“CSS样式”or单击属性面板中的CSS按钮or使用快捷键Shift+F11附加样式表新建CSS规则编辑样式删除CSS样式新建CSS样式定义样式表选项在【CSS样式】面板上，单击【新建CSS规则】按钮，打开【新建CSS规则】对话框。1．【定义在】选项（1）【新建样式表文件】（2）【仅对该文档】2．【选择器类型】选项（1）【类（可应用于任何标签）】（2）【标签（重新定义特定标签的外观）】（3）【高级（ID、伪类选择器等）】3．【名称】文本框在这个文本框中输入CSS规则名称。根据所选择的“选择器类型”的不同，这里可以输入或者选择不同的名称。新建CSS样式“新建CSS规则”按钮设置“CSS规则定义”对话框参数定义CSS样式的背景属性对元素的背景进行设置，包括背景颜色、背景图像的控制。色盘定义CSS样式的类型属性对文字的字体、大小、颜色、效果等基本样式进行设置。设置“CSS规则定义”对话框参数定义CSS样式的方框属性设置对象的边界、间距、高度、宽度和漂浮方式等。定义CSS样式的区块属性设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等。设置“CSS规则定义”对话框参数定义CSS样式的列表属性1设置列表项样式、列表项图像和位置。2定义CSS样式的边框属性设置对象边框的宽度、颜色及样式。3设置“CSS规则定义”对话框参数设置的内容有两部分：对象的视觉效果。定义CSS样式的扩展属性打印网页时强迫在样式控制的对象前后换页；定义CSS样式的定位属性相当于把对象放在一个层里来定位。自定义CSS样式选择文档中将应用CSS样式的文本1.应用自定义CSS样式01单击文本属性面板选择应用了自定义CSS样式的文本将文本属性面板切换到CSS模式，在“样式”下拉菜单中选择“无”2.删除已应用的自定义C