【网页设计与制作教程】第7章使用样式修饰页面.ppt

第七章使用样式修饰页面 本章学习目标 熟悉CSS样式面板掌握创建和使用一些常用的CSS样式的方法掌握通过CSS样式管理和修饰页面的方法 1 CSS样式的创建 CSS的全称是CascadingStyleSheets 中文翻译为 层叠样式表 简称样式表 CSS可以扩展HTML的功能 美化页面 展开 设计 面板 并选中 CSS样式 标签 出现 CSS样式 面板 新建特定类型的样式 确定 完成创建 单击面板右下角的 新建CSS样式 按钮 创建CSS样式 弹出 新建CSS样式 对话框 名称 CSS样式的命名类型 自定义或HTML标签属性 超链接属性更改定义在 CSS样式的作用范围和保存位置 2 CSS样式对话框的设置 类型背景区块方框边框列表定位扩展 类型 主要用于定义文字的属性 返回该节 背景 主要用于设置CSS样式的背景 包括背景颜色 背景图像 背景图像的控制等 返回该节 重复 设置图像作为背景时是否需要重复显示 附件 设置背景图像是否跟随内容滚动 区块 主要用于设置文本的文字间距 对齐方式 排列方式 文字缩进等 返回该节 垂直对齐 应用于图像 可以设置图文的对齐方式 方框 主要用于设置元素在页面中的位置 包括元素的边界 宽度 高度和浮动方式等 返回该节 注 方框 盒子 属性把对象作为一个整体看待 装在一盒子里 边框 主要用于设置边框的样式 返回该节 列表 主要用于设置文本列表的类型 列表项图片等 返回该节 定位 主要设置对象在网页中的具体位置 返回该节 扩展 主要用于制作鼠标样式 图片特殊效果 返回该节 3 CSS样式的管理 新建样式应用样式编辑样式删除样式附加样式 套用 选择希望应用所选样式的对象 右键点击样式名称 在菜单中选择 套用 编辑 修改 添加样式的具体内容删除 删除选择的样式附加 链接外部样式表 实例1 重定义特定标签 定义 source 7 目录下的文件夹 7 2 1 为站点目录 打开7 2 1 htm页面 新建CSS样式 保存样式在text1 css样式文件中 设置CSS样式内容 应用样式 实例2 使用CSS选择器 定义文件夹 7 2 2 为站点目录 打开7 2 2 htm页面 新建CSS样式 选择 高级 ID 上下文选择器等 类型 设置a link无下划线 颜色为 333366设置a visited无下划线 颜色为 009999设置a hover有下划线 颜色为 ff9900 选中文本 我的第一个链接 然后在属性面板中设置其链接为 新建CSS样式 选择 高级 ID 上下文选择器等 类型 在选择器栏中直接输入a link2 link 同样设置其他三种状态 a link2 visited a link2 hover a link2 active的颜色和效果选中文本 我的第二个链接 然后在属性面板中设置其链接为 实例3 CSS控制网页背景 定义文件夹 7 2 3 为站点目录 打开7 2 3 htm页面 新建CSS样式 命名为textback 仅对该文档生效 选择 背景 类别 设置颜色为 CCFF66 单击上面一个单元格 应用该样式新建tdback样式 设置 背景 类别下的背景图像 选择 重复 并应用到下面一个单元格中 实例4 CSS区块排列文本 定义文件夹 7 2 4 为站点目录 打开7 2 4 htm页面 新建CSS样式 命名为block1 保存在font css样式文件中 设置 类型 为宋体 大小14px 行高2em区块设置如图所示 对中文文本应用该样式 新建block2样式 类型 中设置字体为Verdana 大小为16px 在 区块 中设置文本对齐为两端对齐 对英文文本应用该样式 实例5 CSS方框对齐对象 定义文件夹 7 2 5 为站点目录 打开7 2 5 htm页面 新建CSS样式 命名为box1 仅对该文档生效 设置 方框 属性 对图片应用该样式 实例6 CSS边框创建漂亮按钮 定义文件夹 7 2 6 为站点目录 打开7 2 6 htm页面 新建CSS样式 命名为bo