web程序设计第6节.ppt

第六章 使用CSS 内容提要 CSS样式概述 CSS样式的基本使用介绍 设置CSS样式属性 CSS滤镜 CSS样式概述 CSS（Cascading Style Sheet）样式是一系列格式设置规则，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS样式可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式等。 CSS样式的基本使用介绍 CSS格式设置规则由两部分组成：选择器和声明。选择器是标识已设置格式元素(如 P、H1、类名称或 ID)的术语，而声明则用于定义样式元素。在下面的示例中，H1 是选择器，介于大括号 ({}) 之间的所有内容都是声明： H1 { font-size: 16 px; font-family: Helvetica; font-weight: bold; } 声明由两部分组成:属性和值。上述示例为 H1 标签创建了样式：链接到此样式的所有H1标签的文本都将是 16 像素大小并使用 Helvetica字体和粗体。 在网页中加入CSS样式 在Dreamweaver中，可以使用四种不同的方法在网页中加入CSS样式。 链接外部样式表文件 定义内部CSS样式 导入外部样式表文件 定义内联CSS样式 注意：可以在一个网页中同时使用外部样式表、内部CSS样式和内联CSS样式，如果相互之间存在属性设置冲突，则优先权排列为： 内联CSS样式内部CSS样式外部样式表 方法一：链接外部样式表文件 首先建立外部样式表文件(.css)，然后在网页中使用link标签链接样式表文件。这种方法使页面内容与版面设计分开，易于管理整个网站的网页风貌。 方法二：定义内部CSS样式 在网页的HEAD.../HEAD标签间加入CSS样式定义，这种方法适用于指定某个网页的具体外观。 head style type=text/css !-- H1 { font-size: 16px; font-family: Helvetica; font-weight: bold; } -- /style /head 方法三：导入外部样式表文件 导入外部样式表文件是指在定义内部CSS样式时利用“@import”来引用外部样式表文件。 head style type=text/css !-- @import style.css; 其它CSS样式定义 -- /style /head 方法四：定义内联CSS样式 内联CSS样式是在某个HTML标签内使用style属性定义适用于该标签的个别样式。 body style=background-color: #cbcbcb h1 style=font-size: 16px; font-family: Helvetica; font-weight: bold; 内联CSS样式的应用 /h1 /body “CSS样式”面板 在Dreamweaver中，可以使用“CSS 样式”面板查看、创建、编辑和删除 CSS样式，并且可以将外部样式表附加到当前文档。 若要打开“CSS 样式”面板，执行下列操作之一： 选择“窗口”“CSS 样式” 按 Shift+F11键 单击属性检查器中的“CSS”按钮 CSS样式的创建和应用 用户可以创建一个新的CSS样式嵌入到当前文档中，也可以使用外部样式表文件中的CSS样式来自动完成HTML标签的格式设置。 创建新的CSS样式 在“CSS样式”面板中，单击右下角区域中的“新建CSS规则”按钮，打开“新建CSS规则”对话框。 在“选择器类型”单选按钮组中，选择要创建的CSS样式的类型。 类型一：类样式(自定义样式) 可应用于任何文本范围或文本块的样式，HTML标签通过自身的class属性来指定应用该样式。 style type=text/css !-- .mystyle1 { font-family: 华文楷体; font-size: 24px; font-weight: bold; color: #6633FF; text-decoration: underline; } -- /style p class=mystyle1 应用了类样式的文本 /p 类型二：标签样式 应用于指定HTML标签的样式。 style type=text/css !-- p { font-family: 华文楷体; font-size: 24px; font-weight