网页设计样式.pptVIP

网页设计样式 第1页，共27页。 第6课:CSS样式 学习目标： 学会使用CSS控制页面元素的显示效果 学习任务： 1、掌握CSS样式的创建、编辑和应用 2、掌握滤镜的用法 重难点： 1、CSS样式的设置 2、CSS滤镜的设置和使用 第2页，共27页。 样式 样式是指一组可控制文本块或文本区域外观的格式属性。 字符的样式是指字符外观的显示方式。 Dreamweaver中的常用样式（文本选项卡下） 加粗：文字加粗显示。 斜体：文字显示为倾斜格式。 加强：加强格式根据浏览器不同规定而显示，多为加粗方式显示。 强调：强调格式根据浏览器不同规定显示，多为斜体显示。 第3页，共27页。 段落：标签P/P所定义的显示方式。 引用块：表明选中的文字是被引用的，有缩进。 已编排格式：指的是用户预先对pre/pre标签中的文字排版格式将在浏览器中原样的显示。 字符：插入特殊字符（利用键盘不能直接输入的字符。） 使用菜单“文本”—“样式”下的子菜单设置文本样式。 第4页，共27页。 CSS样式 CSS是一种样式表的技术，全称为“级联样式表”，是用来进行网页风格设计的。 CSS的作用 可以将格式和结构分离 HTML语言只是定义了网页的结构和个别要素的功能，而让浏览器自己决定应该让各要素的显示方式。 CSS通过将定义结构的部分和定义格式的部分分离，能够对页面的布局施加更多的控制。 CSS可以更精确的控制页面的布局。 CSS使网页文件变的更小、下载更快。 CSS可以更快更容易的维护及更新大量的网页。 第5页，共27页。 CSS分类 嵌入式 在独立的文档应用CSS样式 外部链接式 应用于多个文档，生成专门的 *.CSS文件。 创建新CSS样式 打开CSS样式面板：“窗口”—“CSS样式” 或Shift+F11 单击CSS样式面板中的“新建CSS样式”按钮，打开“新建CSS样式”对话框。 第6页，共27页。 1、名称：为新样式命名（名称前必须以英文句点开头，如无此点，Dreamweaver自动添加） 2、选择器类型： 类：自定义一个新的样式，可应用于任何标签。 第7页，共27页。 标签：重新定义HTML标签，定义之后不需要选中对象就直接应用到页面中去了。 高级：针对超级链接状态进行设置。共四种状态。 a:Link：超级链接的正常状态，没有任何动作的时候。 a:Visited：访问过的超级链接状态。 a:Hover：光标移上超级链接状态。 a:Active：选中超级链接状态。 3、定义在： 新建样式表文件：在网页外部定义一个新的CSS样式表文件。 仅对该文档：将CSS样式定义在该文档内部，仅能在该文档中应用。 第8页，共27页。 编辑现有样式： 内部CSS样式的修改：在CSS面板中右击样式，在弹出菜单中选择“编辑”，在“样式定义”对话框中编辑样式。 外部CSS样式的修改：(方法同上) 应用CSS样式： 应用嵌入式CSS样式 如果设置段落将光标定位在段落中或选中段落，如果设置多个段落需要选中这些段落，如果设置字符需要选中字符 在CSS样式面板中，选择某个样式右击选择“套用” 或者在属性面板样式菜单中选择某个样式。 第9页，共27页。 应用外部链接式CSS样式 打开CSS样式面板 单击“附加样式表”按钮，打开“链接外部样式表”对话框。 在“文件/URL”文件域中输入或通过浏览找到外部CSS样式表地址和名称。 链接：通过链接调用外部样式表文件 导入：在页面打开时加载外部样式表文件。 第10页，共27页。 重置：在现有样式的基础上创建新样式。 删除样式：选中样式，单击“删除CSS样式”按钮。 定义CSS样式 设置CSS样式的8个面板：类型、背景、区块、方框、边框、列表、定位、扩展 类型：此面板可定义样式的基本类型设置。 字体：为样式设置字体类型。 大小：定义文本字体的大小。 粗细：对字体应用指定的或相对的粗细度。 样式：指定样式为普通、斜体或偏斜体。 变量：设置字体变量（主要应用于英文）. 第11页，共27页。 行高：设置文本所在地方的行高。 大小写：设置文本的大小写状态（应用于英文。） 装饰：使用下划线、上划线、删除线装饰文本。闪烁效果只在NC浏览器中可以看到。 颜色：定义文本颜色。 背景：此面板主要是对元素的背景进行设置，包括背景颜色、背景图象、背景图象的控制。一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。 背景颜色：设置元素的背景色。 背景图像：设置元素的背景图像。 重复：确定背景图像是否以及如何重复。 第12页，共27页。 重复：在元素的背景部分水平和垂直方向平铺图像。 不重复：在元素的开头显示一遍图像。 横向重复：在水平方向