用css样式表美化网页.ppt

《用css样式表美化网页.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章用CSS样式表美化网页了解CSS样式CSS基础创建CSSCSS基本应用链接外部CSS样式文件教学目的CSS样式表简介创建CSS样式表的方法内部CSS样式表的应用链接外部CSS样式表在代码视图编辑CSS样式表本章内容CSS定义CSS样式的分类及应用方式使用“CSS样式”面板新建CSS样式设置“CSS规则定义”对话框参数自定义CSS样式链接外部CSS样式编辑CSS样式复制CSS样式导出CSS样式CSS样式转化为HTML标签CSS样式CSS定义CSS即CascadingStyleSheets（重叠样式表），是用来控制一个或多个文档显示属性的集合。CSS样式位于页面的<

2、head>标签中，可以定义页面中HTML标签的属性。使用CSS样式能够定义一些单独使用HTML样式不能定义的属性。除了控制文本的传统属性之外，使用CSS样式也可以控制一些特殊的属性，例如鼠标特效。CSS样式的分类及应用方式1CSS样式的分类自定义CSS样式（类样式）：可将样式属性应用于页面上的任何元素。HTML标签样式：重新定义特定标签。CSS选择器样式（高级样式）：重新定义特定元素组合的格式。2CSS样式的应用方式局部套用内联式–将CSS规则定义在HTML网页文档的内部。外联式–将CSS规则定义在一个独立的外部样式文件中。CSS样式的规则1CSS样式的规则由两部分组成

3、选择器–标识已设置格式元素的术语。声明–用于定义样式属性。示例：h1{font-size:16pixels;font-family:"宋体";font-weight:bold;}在这个CSS规则中，h1是选择器，介于大括号{}之间的所有内容都是声明块。各个声明由两部分组成：属性（如font-family）和值（如16pixels）。对样式表操作的三种方式1．第一种方式执行【窗口】→【CSS样式】命令，打开【CSS样式】面板2．第二种方式3．第三种方式在空白处右击使用“CSS样式”面板样式表文件名CSS规则列表属性和属性值列表工具按钮栏在Dreamweaver中，“CSS

4、样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”

5、“CSS样式”命令可以打开或者关闭“CSS样式”面板。类别视图使用“CSS样式”面板选择命令“窗口”→“CSS样式”or单击属性面板中的CSS按钮or使用快捷键Shift+F11附加样式表新建CSS规则编辑样式删除CSS样式新建CSS样式定义样式表选项在【CSS样式】面板上，单击【新建CSS规则】按钮，打开【新建CSS规则】对话框。1．【定义在】选项（1）【新建样式表文件】（2）【仅对该文档】2．【选择器类型】选项（1）【类（可应用于任何标签）】（2）【标签（重新定义特定标签的外观）】（3）【高级（ID、伪类选

6、择器等）】3．【名称】文本框在这个文本框中输入CSS规则名称。根据所选择的“选择器类型”的不同，这里可以输入或者选择不同的名称。新建CSS样式“新建CSS规则”按钮设置“CSS规则定义”对话框参数1.定义CSS样式的类型属性2.定义CSS样式的背景属性色盘对文字的字体、大小、颜色、效果等基本样式进行设置。对元素的背景进行设置，包括背景颜色、背景图像的控制。设置“CSS规则定义”对话框参数3.定义CSS样式的区块属性4.定义CSS样式的方框属性设置对象的边界、间距、高度、宽度和漂浮方式等。设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等。设置“CSS规则

7、定义”对话框参数5.定义CSS样式的边框属性6.定义CSS样式的列表属性设置对象边框的宽度、颜色及样式。设置列表项样式、列表项图像和位置。设置“CSS规则定义”对话框参数7.定义CSS样式的定位属性8.定义CSS样式的扩展属性设置的内容有两部分：1、打印网页时强迫在样式控制的对象前后换页；2、对象的视觉效果。相当于把对象放在一个层里来定位。自定义CSS样式1.应用自定义CSS样式选择文档中将应用CSS样式的文本单击文本属性面板2.删除已应用的自定义CSS样式选择应用了自定义CSS样式的文本将文本属性面板切换到CSS模式，在“样式”下拉菜单中选择“无”编辑CSS样式双击选

8、定的CSS样式名称。单击“CSS样式”面板底部工具栏上的“编辑样式表”按钮右击要编辑的CSS样式，在弹出的快捷菜单中选择“编辑”命令。复制CSS样式选择要复制的CSS样式右击，在弹出的快捷菜单中选择“复制”命令导出CSS样式打开包含CSS样式的页面“文件”→“导出”→“CSS样式”→“导出样式为CSS文件”选择保存位置保存CSS样式转化为HTML标签只有将CSS样式转换为HTML标签，才可以在这些浏览器中正确显示页面打开含有CSS样式的页面“文件”→“转换”创建和应用CSS样式1控制浏览器中的文字大小2设置行间距3为图片加上边框效果创建和