网页设计之第6讲层叠样式表ppt课件.ppt

第6讲层叠样式表 6 1CSS概述6 2创建和编辑CSS样式6 3设置CSS样式参数 6 1CSS概述 6 1 1CSS基本概念6 1 2CSS基本语法 6 1 1CSS基本概念 所谓CSS样式就是层叠样式表 是用来控制一个文档中某一文本区域外观的一组格式属性 CSS样式可以一次性对若干个文档所有的样式进行控制 同HTML样式相比 使用CSS样式表的好处除了在于它可以同时连接多个文档之外 还在于当CSS样式有所更新或被修改以后 所有应用了该样式表的文档都会被自动更新 CSS样式表的功能一般可以归纳为以下几点 1 可以更灵活地控制网页中文字的字体 颜色 大小 间距 风格和位置 2 可以灵活地设置一段文字的行高 缩进 并可以为其加入三维效果的边框 6 1 1CSS基本概念 3 可以方便地为网页中的任何元素设置不同的背景颜色和背景图像 4 可以精确地控制网页中各元素的位置 5 可以为网页中各元素设置过滤器 从而产生如阴影 模糊 透明等效果 6 可以与脚本语言结合 从而产生各种动态效果 7 由于是直接的HTML格式的代码 因此网页打开的速度非常快 6 1 2CSS基本语法 样式表的脚本语法结构是 HTML标记 标记属性 属性值 标志属性 属性值 标志属性 属性值 现在首先讨论在HTML页面直接引用样式表的方法 这个方法必须把样式表信息包含在和标记中 为了使样式表在整个页面中产生作用 应把该组标记及内容放到和标记中 6 1 2CSS基本语法 在使用样式表的过程中 经常会有几个标记用到同一个属性 例如规定HTML中凡是粗体字 斜体字 1号标题字均显示为红色 按照上面介绍的方法应该书写为 B color red I color red H1 color red 显然这样书写比较麻烦 引进分组的概念就会使其变得非常简单 可以写成 B I H1 color red 用逗号分隔各个HTML标志 把三行代码合并为一行 6 1 2CSS基本语法 此外同一个HTML标记 还可以定义多个属性 例如把H1 H6各级标题定义为红色 黑体字 带下划线 则应写为 H1 H2 H3 H4 H5 H6 color red text decoration underline font family 黑体 6 2创建和编辑CSS样式 6 2 1创建自定义CSS样式6 2 2动态链接CSS样式6 2 3导出CSS文件6 2 4导入CSS文件6 2 5链接外部CSS样式 6 2 1创建自定义CSS样式 下面介绍如何创建一个自定义的CSS样式 并将其应用于网页文字的美化 步骤如下 1 选择菜单命令 文件 新建 弹出 新建文档 对话框 在此对话框中选择 常规 选项卡 然后选择类别为 基本页 在右边选项卡中选择 CSS 单击 确定 按钮 即可创建一个新的CSS样式表文件 2 单击 文本 CSS样式 新建 命令 弹出 新建CSS规则 对话框 3 在 选择器类型 中选择 类 可用于任何标签 单选按钮 4 在 名称 文本框中输入自定义的样式名称 这里输入 td 6 2 1创建自定义CSS样式 5 在 定义 中选择 仅对该文档 单选按钮 6 单击 确定 按钮 弹出 td的CSS规则定义 对话框 7 在 分类 列表中选择 类型 选项 右边显示对应的参数设置 8 在 字体 列表中单击 编辑字体列表 选项 6 打开 编辑字体列表 对话框 在 可用字体 列表中点击 新宋体 选项 然后将其加入到 选择的字体 列表中 10 单击 确定 按钮返回 td的CSS规则定义 对话框 6 2 1创建自定义CSS样式 11 设置字体为 新宋体 大小为12像素 颜色设置为 CCCCCC 12 单击 确定 按钮 完成对CSS样式的创建 此时在 CSS样式 面板中会出现一个名为 td的自定义样式 13 在网页中选定一段要应用样式的文字 14 在 属性 面板的 样式 下拉列表中单击 td 选项 为文字应用自定义的样式 15 保存后浏览的效果 6 2 2动态链接CSS样式 应用动态链接CSS样式 可以美化页面文字的链接效果 具体的操作步骤如下 1 定义超链接的HTML标签 2 单击 文本 CSS样式 新建 选项 打开 新建CSS规则 对话框 3 在 选择器类型 中选择 标签 重新定义特定标签的外观 单选按钮 4 在 标签 下拉列表中选择 a 选项 因为超链接都在标签内 5 在 定义在 中选择 仅对该文档 单选按钮 6 单击 确定 按钮 打开 a的CSS规则定义 对话框 6 2 2动态链接CSS样式 7 在 分类 列表中选择 类型 选项 设置大小为12像素 选中 无 复选框 颜色设置为 00CCFF 8 单击 确定 按钮 完成标签的样式定义 9 下面定义超链接的样式 单击 文本 CSS样式 新建 选项 打开 新建CSS规则 对话框 10 在 选择器类型 中选中 高级 ID 伪类选择器等 单选按钮 11 在 选择器 下拉列表中选择 a link 选项 12 在 定义在 中选择 仅对该文档 单选按钮 6 2 2动态链接CSS样式 13 单击 确定 此时将会打开 a link的CSS规则定义 对话框 14 在 分类 列表中选择 类型 选项 设置大小为12像素 选中 无 复选框 设置颜色为 0066CC 15 单击 确定 按钮 完成链接样式的定义 16 下面定义当鼠标移到超链接上的样式 单击 文本 CSS样式 新建 选项 打开 新建CSS规则 对话框 17 在 选择器类型 中选中 高级 ID 伪类选择器等 单选按钮 18 在 选择器 下拉列表中选择 a hover 选项 6 2 2动态链接CSS样式 19 在 定义在 中选择 仅对该文档 单选按钮 20 单击 确定 按钮 此时将会弹出 a hover的CSS规则定义 对话框 21 在 分类 列表中选择 类型 选项 设置大小为12像素 选中 无 复选框 设置颜色为 FF6633 22 此时在 CSS样式 面板中就会出现所设置的动态链接样式 23 在浏览器中预览网页 可以看到网页的动态链接效果 6 2 3导出CSS文件 下面介绍如何导出CSS样式表 具体操作步骤如下 1 选择菜单命令 文件 导出 CSS样式表 2 打开 导出CSS样式为CSS文件 对话框 在 保存在 下拉列表中设置文件的保存路径 在 文件名 文本框中设置保存CSS的文件名 3 单击 保存 按钮 导出网页中的CSS文件 6 2 4导入CSS文件 下面介绍如何导入CSS样式表 具体步骤如下 1 在 CSS样式 面板中单击鼠标右键 从弹出的菜单中选择 附加样式表 选项 2 打开 链接外部样式表 对话框 3 单击 浏览 按钮 打开 选择样式表文件 对话框 选择要导入的CSS文件 4 单击 确定 按钮返回到 链接到外部样式表 对话框中 5 选中 导入 单选按钮 6 单击 确定 按钮 将CSS文件导入到编辑的网页中 6 2 5链接外部CSS样式 下面介绍如何链接外部CSS样式 操作步骤如下 1 在 CSS样式 面板中单击鼠标右键 从弹出的菜单中选择 附加样式表 选项 2 在打开的 链接外部样式表 对话框中单击 浏览 按钮 3 打开 选择样式文件 对话框 选择一个CSS文件 4 单击 确定 按钮返回 链接外部样式表 对话框 5 选中 链接 单选按钮 6 单击 确定 按钮 将CSS样式文件链接到网页中 6 3设置CSS样式参数 6 3 1文本样式设置6 3 2背景样式设置6 3 3区块样式设置6 3 4方框样式设置6 3 5边框样式设置6 3 6列表样式设置6 3 7定位样式设置6 3 8扩展样式设置 6 3 1文本样式设置 使用CSS样式最常用的是设置文本的样式 打开文档中定义好的要编辑的样式 单击CSS面板中的 编辑样式 按钮 在打开的 CSS规则定义 对话框 选择分类中的 类型 选项进行文本样式的设置 在对话框中该类别的各项参数设置如下 字体font family 在下拉列表框中选择相应的字体 或使用编辑字体列表进行添加 大小font size 设置字体的大小 常使用正文字号为12px 14px 6pt 10 5pt等 粗细font weight 设置文字的粗细 可以使列表中默认的值 也可以手动输入 样式font style 设置字体的外观 如正常 粗体 偏斜体 变体font variant 设置为正常或小型大写字母 设置为小型大写字母时 将大写字母缩小 行高line height 设置文本的高度 默认状态为系统自行调整行高 行高可设置为 或数值 修饰text decoration 可以为文本设置添加下划线 上划线 删除线 闪烁 无等 常用于设置链接的样式 颜色color 设置文本的颜色 使用颜色拾取器或在文本框中直接输入颜色值 6 3 2背景样式设置 在CSS规则定义的类型中选择 背景 可以设置背景的样式 在对话框中各参数设置如下 背景颜色background color 选择颜色作为背景 使用颜色拾取器或在文本框中直接输入颜色值 背景图片background image 选择背景图片 在文本框中输入背景图片路径或单击浏览按钮选择路径 重复background repeat 设置背景图片时此项有用 此列表框用以设置图片的重复方式为不重复 重复 横向重复 纵向重复 附件 设置背景图片时此项有用 用以设置背景图像 当网页长度超过一屏时是否随网页滚动 可以设置为固定 滚动 水平位置 设置文本的水平方向位置 可以使用数值或像素等其他单位 来表示水平位置 也可以设置左对齐 居中 右对齐 垂直位置 设置同水平位置 设置为顶部 底部 居中或数值 6 3 3区块样式设置 在分类中选择 区块 可以设置区块中的样式 对话框中各参数设置如下 单词间距word spacing 是指英文单词间的距离 一般选择默认 如需设置时 使用数字和后面的单位相结合 正值为增加间距 负值为缩小间距 字母间距letter spacing 是指英文单词字母间的距离 一般选择默认 如需设置时 使用数字和后面的单位相结合 正值为增加间距 负值为缩小间距 垂直对齐vertical align 设置对象的垂直对齐方式 可以设置为基线 下标 上标 顶部 文本顶对齐 中线对齐 底部和文本底对齐 当设置使用数值时 后面对应的单位只有 可选 文本对齐align 设置对象的水平对齐方式 可设置为左对齐 右对齐 居中对齐和两端对齐 6 3 3区块样式设置 文字缩进letter indent 这是设置段落排版时最重要的设置 如段落首行缩进 空格 此处设置网页源代码中的空格 有正常 保留和不换行3个选项 正常表示忽略源代码之间的所有空格 保留表示保留由空格键 Tab键Enter键产生的空格 不换行表示文本不自动换行 显示 设置对象如何显示或是否显示 在实际制作中一般不常使用 在下拉列表框可以选择的选项有无 内嵌 列表项 run in 紧凑 标记 表格 内嵌表格 表格行组 表格标题组 表格注脚组 表格行 表格列组 表格列 表格单元格和表格标题 6 3 4方框样式设置 选择CSS样式规则定义左侧的类型为 方框 在设置图像距离 所在单元格四周的距离或图文混排时 会用到这一设置 在对话框中该类别的各项参数设置如下 宽width 设置对象的宽度 浮动float 设置对象的环绕效果 可以设置为左对齐 右对齐 无 选择 无 则无环绕效果 高height 设置对象的高度 清除clear 设置对象的一侧不可有层 可以选择左对齐 右对齐 两者或无 如果清除层的一侧还有层 则对象将自动移到层的下面 选择 两者 指两侧都不可有层 选择 无 表示不限制左右是否有层 填充padding 如果对象有边框 且图像设为边框为1 那么填充指的就是边框于图像之间的空白区域 边界margin 如果对象有边框 且图像设为边框为1 那么边界指的就是边框外面的空白区域 6 3 5边框样式设置 在CSS规则定义左侧的 分类 列表框中选择 边框 选项 通过边框样式的设置 可以将对象的边框颜色 粗细等各项参数按如下设置 样式 此项可以设置边框的样式 可以选择样式有无 点划线 实线 双线 槽状 脊状 凹陷 凸出 宽度 设置边框在是个方向的宽度 可以选择细 中 粗或整数的数值配合对应的单位 颜色 设置边框的颜色 仅当边框设置宽度存在值时才有效 如选中 全部相同 复选框 那么上 下 左 右的样式相同 6 3 6列表样式设置 应用CSS规则定义的列表样式 可以设置多种列表的外观样式 在分类中选择 列表 则在右侧可以设置列表样式 在对话框中各项参数的设置如下 类型list style type 设置列表的符号类型 可以选择的类型 项目符号图像 可以自定义项目列表的图像 在文本框中 输入图像的路径或单击 浏览 按钮 选择本地图像源文件 位置list style position 有 内 和 外 两个选择 选择 内 时列表缩进 浏览时效果不明显 选择 外 时列表贴近左边框 有明显的缩进 6 3 7定位样式设置 选择 定位 选项 定位样式在实际中是对层的设置使用 因为在Dreamweaver8中 有专门关于层的可视化控制面板 因此这个设置一般用不到 关于定位样式各参数的设置如下 类型position 设置层的定位方式 有绝对 固定 相对