网页设计 (2)ppt课件.ppt

今日主题 CSS简介CSS语法CSS应用 CSS版本CSS1作为一项W3C推荐 CSS1发布于1996年12月17日 1999年1月11日 此推荐被重新修订 CSS2作为一项W3C推荐 CSS2发布于1999年1月11日 CSS2添加了对媒介 打印机和听觉设备 和可下载字体的支持 CSS3CSS3计划将CSS划分为更小的模块 CSS简介CSS 层叠样式表样式表可描述文档如何被显示 发音或打印 CSS是一种向网页添加样式的机制 CSS样式表 CascadingStyleSheets 简称CSS 又称为层叠式样式表 由W3C WorldWideWebConsortium 组织开发的 CSS样式是预先定义的一个格式的集合 包括字体 大小 颜色 对齐方式等 利用CSS样式可以使整个站点的风格保持一致 是网页设计中用途最广泛 功能最强大的元素之一 CSS简介 2 CSS语法CSS概念 CascadingStyleSheet层叠样式表CSS P CascadingStyleSheet PositionCSS的功能在几乎所有的浏览器上都可使用以前通过图片转换实现的功能 现在通过CSS可以实现使网页字体变得更漂亮 更容易编排可以轻松控制网页布局可以将许多网页风格同时更新CSS定义selector property value property value CSS定义selector property value property value Selector分为三种形式 1 HTMLSelector 等 2 classSelector a相关classSelectortag classname property value td fancy color f60 background 666 b独立classSelector classname property value center text align center Thisparagraphwillalsobecenter aligned 3 IDSelector red color red green color green 这个段落是红色 这个段落是绿色 1 嵌入式样式表 2 行内样式表 3 外部样式表P double line Height 2 P center text align center p greentext color green 在Dreamweaver8可以定义以下的样式类型 自定义CSS规则 指根据用户的需要创建一个CSS样式属性 可应用到文字 图片等网页元素中 HTML标签规则 可以对HTML语言中的某一标签进行重新定义 CSS选择器样式 高级样式 重新定义特定元素组合的格式设置 或重新定义CSS允许的其他选择器的格式设置 还可以重新定义包含特定id属性的标签的格式设置 CSS样式的应用 单击菜单栏中 窗口 CSS样式 命令或用组合键Shift F11键打开CSS样式面板 如图所示 全部 模式 正在 模式 CSS样式面板 CSS样式面板有 全部 和 正在 两种模式 全部 模式 显示两个窗格 所有规则 窗格 上部 和 属性 窗格 下部 正在 模式 显示三个窗格 显示文档中当前所选内容的CSS属性的 所选内容的摘要 窗格 显示所选属性的位置的 规则 窗格 以及CSS属性的 属性 窗格 面板中主要功能按钮如下 表示附加或链接外部样式表 新建样式表 编辑选中的样式表 删除选中的样式表 CSS样式面板 9 2使用CSS样式 9 2 1创建CSS样式9 2 2附加外部CSS样式9 2 3应用CSS样式9 2 4编辑CSS样式9 2 5删除CSS样式 一 创建样式表文件1 单击菜单栏中 文件 新建 命令 打开新建文档对话框 2 在对话框左侧 类别 中选择 CSS样式表 类别 在中间 CSS样式表 栏选择需要的样式 右侧是样式表预览图 3 点击 创建 按钮 新建了一个CSS样式表文件 如图所示 编辑样式表后 单击菜单栏中 文件 保存 命令 则可以保存一个外部的样式表文件 创建CSS样式 二 在CSS样式面板中创建CSS样式表文件1 在CSS样式面板中 单击 新建 按钮 打开 新建CSS规则 对话框 如图 2 设置选择器类型为 类 名字为 dazi 定义在 新建样式表文件 单击 确定 按钮 打开 保存样式表文件 对话框 创建CSS样式 3 保存样式表文件 同时打开 dazi的CSS规则定义的对话框 如图所示 4 在 类型 选项中 设置字体字号等项目 完成后单击 确定 按钮 新建的样式出现在样式面板中 如图所示 创建CSS样式 1 打开CSS样式表面板 2执行以下操作之一 单击CSS面板底部的 附加样式表 按钮 或者右键单击CSS样式面板 在弹出的快捷菜单中选择 附加样式表 命令 3 打开 链接外部样式表 对话框 如图所示 附加外部CSS样式 4 点击 浏览 按扭 选择要添加的样式文件 添加的形式有两种 链接 网页与样式表文件的关系是链接关系 而且不将样式表的信息导入网页中 导入 将外部样式表文件的信息导入到当前网页文档中 5 单击 确定 按钮 这样外部的CSS样式就会链接或导入到当前文档中 附加外部CSS样式 1 首先要打开需要链接CSS样式的文档 选中文字或图片等网页元素 2 执行以下操作之一 在属性检查器中的 样式 下拉列表中选择编辑好的样式 如选择 dazi 如图所示 在CSS样式面板中 右击要应用的样式名称 如 dazi 在弹出的快捷菜单中选择 套用 3 所选的文字应用了CSS样式 4 取消样式的应用 只需在选择己应用样式的文本 在 属性检查器 中的 样式 下拉列表中选择 无 即可 应用CSS样式 在CSS样式面板中选择要编辑的样式名称 然后点击面板下方的按钮 会弹出 CSS规则定义 对话框 在对话框中可以对CSS样式重新编辑 删除CSS样式在CSS样式面板中选择要删除的CSS样式名称 点击按钮 就可以删除掉CSS样式 编辑CSS样式 类型 类别主要用于定义文本属性 具体为 1 字体 设置字体或字体组 2 大小 选择或键入字体的大小 单位可以选择 像素 px 点数 pt 等 3 粗细 设置字体的粗细程度 4 样式 选择文本的字体格式有正常 斜体和偏斜体三种 偏斜体是指文本为倾斜的字体格式 类型 CSS样式设置 5 变量 设置文字变形的字体格式 此项在Dreawmeaver8文档窗口中不显示 InternetExplorer6 0版本以上显示 NetscapeNavigator不支持 6 行高 设置文本的行间距 有两个选项 正常 自动设置文本间行的高度 值 设置文本之间的行距的具体数值 7 大小写 设置字体的大小写方式 8 修饰 选择需要的复选框 给文字添加修饰 9 颜色 设置文字的颜色 类型 在 CSS规则定义 对话框中选择 背景 类别 如图 背景 1 背景颜色 设置背景颜色 2 背景图像 设置背景图像 通过后面的 浏览 按钮可以选择一个图像作为背景 3 重复 表示背景图像的填充方式 有四个选项 不重复 图像不重复 只是应用CSS样式的网页元素前面显示一次 重复 图像会在水平和垂直方向重复 水平重复 背景图像在水平方向上重复 纵向重复 背景图像在垂直方向上重复4 附件 在下拉菜单中选择背景图像的显示方式 5 水平位置 和 垂直位置 设置背景图像相对于元素的初始位置 背景 在 CSS规则定义 对话框中选择 区块 类别 如图 区块 1 单词间距 选择或设置单词间的间距 2 字母间距 选择或设置字母间的间距 3 重直对齐 设置元素在垂直位置上的对齐方式 4 文本对齐 设置文本的对齐方式 5 文字缩进 文本框中输入具体数值 精确设置文本的首行缩进的大小 6 空格 设置文本处理空格的方式 正常 收缩空白 保留 即保留所有空白 包括空格 制表符和回车 不换行 指当用户强行换行时才换行 否则不会自动换行 7 显示 设置是否显示及如何显示元素 区块 在 CSS规则定义 对话框中选择 方框 又称盒子 类别 如图 方框 1 宽和高 设置元素的宽度和高度 宽和高定义的对象多为图片 表格 层等 2 浮动 设置元素的浮动位置 如选择左对齐 则将元素放置到左页面的空白处 3 清除 设置元素的哪一边允许分层 如左对齐 表示不允许分层出现在元素的左侧 4 填充 设置元素内容与元素边框之间的间距 取消选择 全部相同 选项可设置元素各个边填充的具体数值 5 边界 设置元素边界和其他元素间距 方框 在 CSS规则定义 对话框中选择 边框 类别 如图 1 样式 设置边框的外观样式 取消选择 全部相同 选项 可分别设置各边框样式 2 宽度 设置元素边框的粗细 3 颜色 设置边框的颜色 边框 可以定义列表的属性 在 CSS规则定义 对话框中选择 列表 类别 如图 列表 1 类型 设置项目符号或编号的外观 如可以选择圆点 方块 数字 罗马数字等 2 项目符号图像 可以为项目符号指定图像 3 位置 设置列表项文本是否换行和缩进以及文本是否换行到左边距 有二个选项 内 当列表项超出范围后会自动换行 将显示在旁边的空白上 不进行任何缩进 外 当列表项超出范围后会自动换行 以缩进方式显示 列表 在 CSS规则定义 对话框中选择 定位 类别 如图 定位 1 类型 在下拉列表中选择定位层的方式 2 显示 确定层的初始显示条件 如果不指定可见性属性 则默认情况为显示 3 Z轴 设置Z轴层的堆叠顺序 3 溢位 确定在层的内容超出层的宽度和高度时的处理方式 4 置入 设置层的位置和大小 5 裁切 定义层的可见部分 定位 在 CSS规则定义 对话框中选择 扩展 类别 如图 扩展 1 分页 打印时在样式所控制的对象之前或者之后强行分页 2 光标 在下拉列表中 选择光标显示属性设置 当指针位于样式所控制的对象上时光标指针图像会发生改变 光标属性的相关说明见表 扩展 34 3 CSS滤镜 又称过滤器 可以为网页中的元素添加各种效果 主要滤镜及说明见表 扩展 35 改变鼠标的形状是应用 扩展 类别中的光标属性来设置的 操作为 1 新建一个网页插入一幅图像并保存网页 2 在CSS样式面板中 单击按钮 打开 新建CSS规则 对话框 如图所示 3 输入CSS样式的名称 shubiao 选择器类型 选择 类 选项 定义在 选择 仅对该文档 改变鼠标形状 4 点击 确定 打开 shubiao的CSS规则定义 对话框 切换到 扩展 分类 如图 改变鼠标形状 5 在 视觉效果 的 光标 的下拉列表中选择 help 单击 确定 按钮 样式建立完成 6 选中图像 执行以下操作之一 在CSS面板中 右击 shubiao样式 在弹出的快捷菜单中选择 套用 命令 在 属性检查器 的 类 的下拉列表中选择 shubiao 7 保存网页 在浏览器中鼠标指向图像测试效果 改变鼠标形状 不同的超链接效果 可以通过CSS 选择器类型 中的 高级 ID 上下文选择器等 中进行设置 有四个选项可供选择 a link 未访问的链接 a visited 已访问过的超链接 a hover 鼠标指针移到超链接文字上时的超链接 a active 正在访问的超链接 更改超链接的样式 利用CSS样式更改超链接样式的操作为 1 打开一个带有超链接的网页文档 2 在CSS样式面板中 单击按钮 打开 新建CSS规则 对话框 在 选择器类型 选择 高级 在 选择器 中选择 a link 如图所示 更改超链接的样式 3 定义在 选择 仅对该文档 单击 确定 打开 a link的CSS规则定义 对话框 如图所示 更改超链接的样式 4 在 类型 分类中 设置字体 幼圆 颜色 00CC00 修饰 无 无下划线 5 单击 确定 按钮 完成a link样式的创建 6 重复以上操作分别设置 a visited 字体 华文行楷 颜色 660033 修饰 无 无下划线 a hover 字体 幼圆 颜色 FF0000 修饰 下划线 a active 字体 华文新魏 样式 倾斜 颜色 0000CC 修饰 下划线 7 保存并在浏览器中预览网页 效果如图所示 更改超链接的样式 一 模糊效果滤镜 blur 1 新建一个网页并插入两幅相同的图像并保存网页 2 在CSS样式面板中 单击按钮 打开 新建CSS规则 对话框 如图所示 3 名称中输入 blur 选择器类型 选择 类 定义在 选择 仅对该文档 应用CSS滤镜 4 设置完成后 单击 确定 按钮 打开 blur的CSS规则定义 对话框 切换到 扩展 分类 5 在 滤镜 中选择Blur滤镜 参数设置如下 Blur Add true Direction 135 Strength 20 如图所示 应用CSS滤镜 6 设置完成后 单击 确定 创建的CSS样式出现在CSS面板 7 选中文档中的右侧图像 执行以下操作之一 在CSS面板中 右击 blur样式 在弹出的快捷菜单中选择 套用 命令 在属性检查器的 类 的下拉列表中选择 blur 8 保存并在浏览器中预览网页 效果如图所示 应用CSS滤镜 二 阴影效果滤镜 shadow 1 新建一个网页并在网页中插入表格输入文本 如图所示 保存文档 2 在CSS样式面板中 单击按钮 打开 新建CSS规则 对话框 如图所示 应用CSS滤镜 3 名称中输入 shadow 选择器类型 选择 类 定义在 选择 仅对该文档 4 设置完成后 单击 确定 按钮 打开 shadow的CSS规则定义 对话框 切换到 扩展 类别 如图所示 应用CSS滤镜 5 在 滤镜 中选择Shadow滤镜 参数设置如下 Shadow Color 666666 Direction 45 6 设置完成后 单击 确定 创建的CSS样式出现在CSS面板 7 选中文档中左侧单元格 执行以下操作之一 在CSS面板中 右击 shadow样式 在弹出的快捷菜单中选择 套用 命令 在属性检查器的 类 的下拉列表中选择 shadow 8 保存并在浏览器中预览网页 效果如图所示 应用CSS滤镜 回顾CSS的优点之前 我要先介绍一下它的历史 Web管理组织W3C在1996年11月推荐使用CSS 并批准了CSS1级规范 CSS1级规范说明了用于HTML页面的属性 这些属性代替了传统的字体标签和其他 样式 标记 例如颜色和边距 1998年5月 W3C批准了CSS2级规范 将一些附加功能添加到1级规范 并引进了定位属性 这些属性代替了表格标签普遍 但是错误 的用法 用来设计页面元素的表示 CSS规范的最新版本是CSS2 1 它改进了某些属性 并删除了在当前浏览器里没有作用或作用很小的属性 为什么使用CSS 不幸的是 就像很多新技术一样 CSS经历了漫长的过程才被广泛采纳 其中的重要原因在于浏览器 以及为这些浏览器建立站点的Web设计者们 CSS批准期间 NetscapeNavigator NN 仍然是主导浏览器 而该浏览器基本上不支持CSS Microsoft在其第3版浏览器中添加了对CSS非常有限的支持 但当时大多数的Web设计者 本人在内 仍然将NN作为首选平台进行页面编码 很多年来 每发行一个新版本 浏览器制作者们都扩展了对CSS的支持 今天 InternetExplorer6 NetscapeNavigator7 Mozilla Opera和Safari都全面支持CSS 但这并不意味着我们作为Web设计者和开发者的生涯不存在问题 尽管上述所有浏览器都支持CSSLevel2 它们的兼容程度仍然各不相同 而且在某些情况下 特定属性仍然会带给你很多麻烦 也就是说 您仍然需要遵守老的信条 测试再测试 但如果您坚持使用CSS规范的核心属性 您将能够正确地呈现页面 但是为什么W3C认为需要创建CSS规范呢 当我创建基于HTML的Web站点和应用程序时 这一切对我又意味着什么呢 我认为 我们需要使用CSS的理由以及它带来的优势可以分为以下三个主要方面 灵活性 呈现性和可访问性 我确定几乎每个Web设计者和开发者都经历过这样的痛苦时刻 当您小心地布置好页面 完成所有嵌套的表格后 客户要求进行一点 小小的 更改 这小小的更改可能只是 能不能把那个图形稍稍往左移动一点 也可能非常富有戏剧性 我不喜欢这些标题 能把它们的字体弄大一点吗 改字体的时候 顺便把颜色也改了 怎么样 如果只需要处理有限的几个页面 您可以深吸一口气 花上大半个小时做那些让人恼火的改动 但如果涉及到较大的站点 而这已经很常见 一个简单的更改无论如何也简单不了 想象一下 在传统的基于表格的布局中 将站点浏览从页面左侧移到页面右侧将有多么困难 这需要几个小时重复而乏味的