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

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