adobe_dreamweaver教本课件_第6节_css样式表.pptVIP

为何要用CSS样式表？ Css样式定义的分类说明 类型 对文字的字体、大小、颜色、效果等基本样式进行设置。 背景 对元素的背景进行设置，一般对页面、表格、区域的设置 区块 设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等 方框 设置对象的边界、间距、高度、宽度和漂浮方式等 边框 设置对象边框的宽度、颜色及样式 列表 设置列表样式、列表项图像和位置 定位 相当与对象放在一个层里来定位，它相当于HTML的DIV标记 扩展 设置打印网页时或者是对象视觉显示效果 * * 第6章 CSS样式表入门 本章介绍的主要内容有： CSS样式表简介 创建CSS样式表的方法 内部CSS样式表的应用 链接外部CSS样式表 在代码视图编辑CSS样式表 能给人赏心悦目、工工整整的感觉 内容和形式的分离便于站点的维护 简练代码，缩短浏览器加载的时间 DW很多地方是基于CSS的 6.1 CSS样式表基础 6.1.1 认识CSS CSS是Cascading Style Sheets（层叠样式表）的简称 1．CSS样式的类型(选择器的类型) 类样式：（可应用于页面任何标签）。 HTML标签样式：重定义HTML标签样式。 高级样式：（重新定义特定元素组合的格式， td h2 ,重定义包含特定id属性的标签格式，#mystyle）。 内联样式表 外部样式表 2．CSS规则 CSS格式设置规则由两部分组成：选择器和声明 h1 { font-size: 16 pixels; font-family: 宋体; font-weight:bold; } 在这个CSS规则中，h1是选择器，介于大括号{}之间的所有内容都是声明块。 各个声明由两部分组成：属性（如font-family）和值（如16 pixels）。 6.1.2 对样式表操作的三种方式 1．第一种方式 执行【窗口】→【CSS 样式】命令，打开【CSS 样式】面板 2．第二种方式 3．第三种方式 在空白处右击 6.1.3 “CSS样式”面板 样式表文件名 CSS规则列表 属性和属性值列表 工具按钮栏 在Dreamweaver中，“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。 类别视图 6.2 新建CSS规则和应用CSS样式 6.2.1 定义样式表选项 在【CSS样式】面板上，单击【新建CSS规则】按钮，打开【新建CSS规则】对话框。 1．【定义在】选项 （1）【新建样式表文件】 （2）【仅对该文档】 2．【选择器类型】选项 （1）【类（可应用于任何标签）】 （2）【标签（重新定义特定标签的外观）】 （3）【高级（ID、伪类选择器等）】 3． 【名称】文本框 在这个文本框中输入CSS规则名称。根据所选择的“选择器类型”的不同， 这里可以输入或者选择 不同的名称。 6.2.2 在网页中应用样式 1．在【属性】面板选择应用样式 2．利用【标签选择器】选择样式 3．使用右键快捷菜单(套用) 4．清除样式 6.3 创建和应用CSS样式 6.3.1 控制浏览器中的文字大小：“稳定性” 6.3.2 设置行间距：使不大不小，美观 6.3.3 为图片加上边框效果：可随意设置边框颜色 6.3.4 利用“自定义样式表”改变鼠标指针的形态 hand：是大家所熟悉的手型。 crosshair：是十字型。 text：是平时鼠标移动到文本上的样式。 wait：是等待的效果。 default：是默认的那种效果。 help：是带问号的鼠标样式。 e-resize：是向右的箭头。 ne-resize：是向右上方的箭头。 n-resize：是向上的箭头。 nw-resize：是向左上方的箭头。 w-resize：是向左的箭关。 sw-resize：是向左下的箭头。 s-resize：是向下的箭头。 se-resize：是向右下方的箭头。 auto：是系统自动的效果。 6.3.5 利用有关链接的样式表修改链接的格式 a:link——定义了链接文字的样式。 a:visited——浏览者已经访问过的链接样式。 a:hover ——定义了鼠标悬浮在链接文字上时的样式。 a:active ——定义链接被激活时的样式，即鼠标已经单击了链接，但页面还没有跳转时 。 6.3.6 控制页面背景图像的样式 执行【修改】→【页面属性】命令，弹出【页面属性】对话框 。 通过重新定义body标签的CSS规则来控制网页的背景图像。 6.3.7 利用自定义样式表制作项目图标 定义一个类控制器，设置这个CSS规则的“列表”属性，然后将CSS