《ch08-应用CSS样式美化网页.pptx》由会员分享，可在线阅读，更多相关《ch08-应用CSS样式美化网页.pptx（23页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver CS5网页设计与制 作基础教程 第8章 应用CSS样式美化网页 8 1 认识CSS样式表 8 1 1 CSS的基本概念 8 1 2 CSS样式的类型 8 1 3 CSS样式基本语法 8 1 1 CSS的基本概念 CSS Cascading Style Sheet 中文译为 层叠样式表 是用于控制网页样 式并允许 将样式信息与网页内容分离的一种标记 性语 言 简单 的说CSS的引入就是为了使得HTML 能够更好的适应页 面的美工设计 8 1 2 CSS样式的类型 1 自定义CSS 类样 式 2 重定义标签 的CSS 3 CSS选择 器样式 高级样 式 8 1 3 CSS样
2、式基本语法 CSS的基本语法由三部分构成 选择 器 Selector 属性 Property 和属性值 Value 三个部分 8 2 创建CSS样式 8 2 1 建立标签 样式 8 2 2 建立类样式 8 2 3 建立复合内容样式 8 2 4 建立ID样式 8 2 5 链接外部样式表 8 2 1 建立标签样 式 启动Dreamweaver CS5 在菜单栏中 选择 文件 打开 菜单项 打开素材文件 在 CSS样式 面板上 单击 新建CSS规则 按钮 弹出 新建CSS规则 对话框 单击展开 选择器类型 下拉按钮 选择 标签 重新定义HTML元素 单击 确定 按钮 弹出 CSS规则定义 对话框 在
3、 分类 列表中 选择各项进行设置 单击 确定 按钮 切换至代码视图 可以看到在代码中 添加了相应的代码 保存文档 按下键盘上的 F12 键 即可在浏览器中浏览到网页的视觉效 果 8 2 2 建立类样式 在 CSS样式 面板上 单击 新建CSS规则 按钮 弹出 新建CSS规则 对话 框 单击 展开 选择 器类型 下拉按钮 选择 类 可应用于任何HTML元素 单击 确定 按钮 弹出 CSS规则 定义 对话 框 在 分类 列表中 选择 各项进 行 设置 单击 确定 按钮 切换至代码视图 可以看到在代码中 添加了相应的代码 保存文档 按下键盘 上的 F12 键 即可在浏览 器中浏览 到网页 的视觉 效
4、果 8 2 3 建立复合内容样式 在 新建CSS规则 对话框中 单击展开 选择器类型 下拉按钮 选择 复合内容 基于选择的内容 选 项 在 选择器名称 下拉选项中 包括了4个选项 8 2 4 建立ID样式 在 CSS样式 面板上 单击 新建CSS规则 按钮 如图8 13所 示 弹出 新建CSS规则 对话 框 单击 展开 选择 器类型 下拉按钮 选择 类 可应用于任何HTML元素 单击 确定 按钮 弹出 CSS规则 定义 对话 框 在 分类 列表中 选择 方框 选项 设置参数 单击 确定 按钮 在 插入 面板中 单击 插入Div标签 按钮 弹出 插入Div标签 面板 单击 展开 插入 下拉选项
5、选择 在 结束标签 之前 选项 单击 ID 下拉选项 选择 top 选项 下 单击 确定 按钮 此时 已经插入ID名称为top的Div 在页面中看到刚刚创 建的 top 的CSS样式表 8 2 5 链接外部样式表 单击 CSS样式 面板下方的 附加样式表 按钮 弹出 链接外部样式表 对话 框 单 击 文件 URL 后面的 浏览 按钮 插入 文件 选中 链接 单选项 单击 确定 按钮 即可完成添加外部链接样式表的操 作 8 3 将CSS应用到网页 8 3 1 内联样 式表 8 3 2 内部样式表 8 3 3 外部样式表 8 3 1 内联样式表 内联式样式表是在现有HTML元素的基础上 用styl
6、e属性把特殊的样式直接加入到那些控制 信息的标记 中 8 3 2 内部样式表 内部样式表是把样式表放到页面的区 里 这些定义的样式就应用到页面中 样式 表是用标记 插入的 8 3 3 外部样式表 外部式样式表是指将样式表作为一个独立的 文件保存在计算机上 这个文件以 css 作为 文件的扩展名 样式在样式表文件中定义和 在嵌入式样式表中的定义是一样的 只是不 再需要style元素 8 4 设置CSS样式 8 4 1 设置文本样式 8 4 2 设置背景样式 8 4 3 设置区块样式 8 4 4 设置方框样式 8 4 5 设置边框样式 8 4 6 设置列表样式 8 4 7 设置定位样式 8 4 1
7、 设置文本样式 在 CSS规则 定义 对话 框的 分类 区域 选择 类型 选项 可以对文本的样式进 行设置 8 4 2 设置背景样式 启动Dreamweaver CS5 在菜单栏中 选择 文件 打开 菜单项 打开素材文件 在 CSS样式 面板上 单击 新建CSS规则 按钮 弹出 新建CSS规则 对话框 单击展开 选择器类型 下拉按钮 选择 类 可应用于任何HTML元素 在 选择器名称 文本框输入文本 单击 确定 按钮 弹出 CSS规则定义 对话框 在 分类 列表中 选择 背景 选项 设置参数 单击 确定 按钮 在页面中选中需要应用背景样式的内容 在 属性 面板中 单击展开 类 下拉按钮 选择刚
8、刚定义的CSS样式 此时 在页面中 即可看到刚刚定义的背景样式效果 通过以上步骤即可 完成操作 8 4 3 设置区块样式 使用 区块 类别 可以定义段落文本中文字 的字距 对齐 方式等格式 在 CSS规则 定义 对话 框左侧 选择 区块 选项 即可进 行相应的设置 8 4 4 设置方框样式 在图像的属性面板上 可以设置图像的大小 图 像水平和垂直方向上的空白区域等 方框样式完 善并丰富了这些属性设置 定义特定元素的大小 及其与周围元素间距等属性 8 4 5 设置边框样式 在Dreamweaver CS5中 使用 边框 类别 可以定义元素周围的边框的宽度 颜色和样 式等设置 8 4 6 设置列表样式 在Dreamweaver CS5中 列表 类别为 列 表标记 定义项目符号 大小和类型等列表设 置 8 4 7 设置定位样式 定位 类别用于设置层的相关属性 使用定位样式可 以自动新建一个层并把页面中使用该样式的对象放到层 中 并且用在对话框中设置的相关参数控制新建层的属 性
