网页制作第7章-css样式.ppt

第七章 使用样式修饰页面;本章学习目标;1. CSS样式的创建;展开“设计”面板，并选中“CSS样式”标签，出现 “CSS样式”面板;单击面板右下角的“新建CSS样式”按钮 ，创建CSS样式，弹出“新建CSS样式”对话框。;2. CSS样式对话框的设置;类型：主要用于定义文字的属性。 ;背景：主要用于设置CSS样式的背景，包括背景颜色、背景图像、背景图像的控制等 。 ;区块：主要用于设置文本的文字间距、对齐方式、排列方式、文字缩进等。 ;方框：主要用于设置元素在页面中的位置。包括元素的边界、宽度、高度和浮动方式等。 ;边框：主要用于设置边框的样式。 ;列表：主要用于设置文本列表的类型、列表项图片等。 ;定位：主要设置对象在网页中的具体位置。 ;扩展：主要用于制作鼠标样式、图片特殊效果;3. CSS样式的管理;套用：选择希望应用所选样式的对象，右键点击样式名称，在菜单中选择”套用” 编辑 ：修改、添加样式的具体内容 删除 ：删除选择的样式 附加 ：链接外部样式表 ;实例1：重定义特定标签;新建CSS样式，保存样式在text1.css样式文件中;应用样式;实例2：使用CSS选择器;新建CSS样式，选择“高级（ID、上下文选择器等）” 类型。;选中文本“我的第一个链接”，然后在属性面板中设置其链接为“#”。 新建CSS样式，选择“高级（ID、上下文选择器等）” 类型。在选择器栏中直接输入a.link2:link ;同样设置其他三种状态：a.link2:visited、a.link2:hover、 a.link2:active 的颜色和效果 选中文本“我的第二个链接”，然后在属性面板中设置其链接为“#”。;实例3：CSS控制网页背景;新建CSS样式，命名为textback，仅对该文档生效。;单击上面一个单元格，应用该样式 新建tdback样式，设置“背景”类别下的背景图像，选择“重复”，并应用到下面一个单元格中。;实例4：CSS区块排列文本;新建CSS样式，命名为block1，保存在font.css样式文件中。;对中文文本应用该样式。 新建block2样式， “类型” 中设置字体为Verdana，大小为16px。在“区块” 中设置文本对齐为两端对齐。对英文文本应用该样式。;实例5：CSS方框对齐对象 ;新建CSS样式，命名为box1，仅对该文???生效。;对图片应用该样式。;实例6：CSS边框创建漂亮按钮;新建CSS样式，命名为border1，仅对该文档生效。;以同样的方法设置CSS样式border2、border3 对三个按钮分别应用样式。;谢 谢！ 接下来的内容：Dreamweaver辅助工具