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

《【网页设计与制作教程】第7章使用样式修饰页面.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第七章使用样式修饰页面本章学习目标熟悉CSS样式面板掌握创建和使用一些常用的CSS样式的方法掌握通过CSS样式管理和修饰页面的方法1.CSS样式的创建CSS的全称是CascadingStyleSheets，中文翻译为“层叠样式表”，简称样式表。CSS可以扩展HTML的功能，美化页面展开“设计”面板，并选中“CSS样式”标签，出现“CSS样式”面板新建特定类型的样式“确定”，完成创建单击面板右下角的“新建CSS样式”按钮，创建CSS样式，弹出“新建CSS样式”对话框。名称：CSS样式的命名类型：自定义或H

2、TML标签属性、超链接属性更改定义在：CSS样式的作用范围和保存位置2.CSS样式对话框的设置类型背景区块方框边框列表定位扩展类型：主要用于定义文字的属性。返回该节背景：主要用于设置CSS样式的背景，包括背景颜色、背景图像、背景图像的控制等。返回该节重复：设置图像作为背景时是否需要重复显示。附件：设置背景图像是否跟随内容滚动。区块：主要用于设置文本的文字间距、对齐方式、排列方式、文字缩进等。返回该节垂直对齐：应用于图像，可以设置图文的对齐方式方框：主要用于设置元素在页面中的位置。包括元素的边界、宽度、高

3、度和浮动方式等。返回该节注：方框（盒子）属性把对象作为一个整体看待，装在一盒子里边框：主要用于设置边框的样式。返回该节列表：主要用于设置文本列表的类型、列表项图片等。返回该节定位：主要设置对象在网页中的具体位置。返回该节扩展：主要用于制作鼠标样式、图片特殊效果返回该节3.CSS样式的管理新建样式应用样式编辑样式删除样式附加样式套用：选择希望应用所选样式的对象，右键点击样式名称，在菜单中选择”套用”编辑：修改、添加样式的具体内容删除：删除选择的样式附加：链接外部样式表实例1：重定义特定标签定义“sourc

4、e/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选中文本“我的第一个链接”，然后在属性面板中设置其链接为“#

5、”。新建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单击上面一个单元格，应用该样

6、式新建tdback样式，设置“背景”类别下的背景图像，选择“重复”，并应用到下面一个单元格中。实例4：CSS区块排列文本定义文件夹“7-2-4”为站点目录。打开7-2-4.htm页面。新建CSS样式，命名为block1，保存在font.css样式文件中。设置“类型”为宋体，大小14px，行高2em区块设置如图所示对中文文本应用该样式。新建block2样式，“类型”中设置字体为Verdana，大小为16px。在“区块”中设置文本对齐为两端对齐。对英文文本应用该样式。实例5：CSS方框对齐对象定义文件夹“7

7、-2-5”为站点目录。打开7-2-5.htm页面。新建CSS样式，命名为box1，仅对该文档生效。设置“方框”属性。对图片应用该样式。实例6：CSS边框创建漂亮按钮定义文件夹“7-2-6”为站点目录。打开7-2-6.htm页面。新建CSS样式，命名为border1，仅对该文档生效。设置“边框”属性以同样的方法设置CSS样式border2、border3对三个按钮分别应用样式。谢谢！接下来的内容：Dreamweaver辅助工具