CSS样式表及行为.ppt

第八章 CSS样式表和行为 使用CSS可以精确定位网页上的元素，轻易地控制由文字、图片等元素的位置，使网页版式的排列变得简单。另外，CSS可以把网页上的内容结构和格式控制相分离，使得网页可以光由内容构成，而将所有网页的格式控制指向某个CSS样式表文件。这样做可以简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量。 创建自定义样式 单击“窗口”，选择“CSS样式”，打开CSS样式面板，如图15.1所示。单击“”按钮，打开“新建CSS样式”对话框，如图15.2所示。 “类型”分类 选择“类”，设定新样式名称后，单击“确定”打开类型样式定义对话框，如图15.3所示。 “背景”分类 在“分类”列表里选择“背景”，打开背景样式定义对话框，如图15.4所示。 “区块”分类 在“分类”列表里选择“区块”，打开区块样式定义对话框，如图15.5所示。 “方框”分类 在“分类”列表里选择“方框”，打开方框样式定义对话框，如图15.6所示。 “边框”分类 在“分类”列表里选择“边框”，打开边框样式定义对话框，如图15.7所示。 “列表”分类 在“分类”列表里选择“列表”，打开列表样式定义对话框，如图15.8所示。 “定位”分类 在“分类”列表里选择“定位”，打开定位样式定义对话框，如图15.9所示。 “扩展”分类 在“分类”列表里选择“扩展”，打开扩展样式定义对话框，如图15.10所示。 使用和编辑样式 选中要应用CSS样式的对象，单击“窗口”，选择“CSS样式”，打开CSS样式面板，在要应用的样式上单击鼠标右键，选择弹出菜单中的“套用”命令，如图15.11所示，将样式应用在所选对象上，如图15.12所示。 重定义HTML标签 在网页中很多效果是添加在HTML标签中的，要更改这些对象的样式，需要对标签进行重新定义。单击按钮，打开“新建CSS样式”对话框，选择“选择器类型”为“标签”，在标签列表中选择“body”，如图15.15所示。 编辑超链接样式 网页内默认的超链接样式比较单调，使用CSS的选择器可以任意设定链接各种状态的样式，使页面内容更加美观。单击按钮，打开“新建CSS样式”对话框，选择“选择器类型”为“高级”，在选择器中选择要设定的链接状态，如图15.18所示。 外部CSS样式文件的使用 在“创建CSS样式”对话框中，选择“定义在”为“新建样式表文件”，在打开的“保存样式表文件为”对话框中输入样式表文件的名称，如图15.21所示。 * * CSS样式面板 新建CSS样式 类型样式定义对话框 背景样式定义对话框 区块样式定义对话框 方框样式定义对话框 边框样式定义对话框 列表样式定义对话框 定位样式定义对话框 扩展样式定义对话框 套用CSS样式 应用样式后的效果 重定义body标签 固定背景图片 设定超链接状态 建立样式表文件