1、第六章 使用CSS,内容提要,CSS样式概述 CSS样式的基本使用介绍 设置CSS样式属性 CSS滤镜,CSS样式概述,CSS（Cascading Style Sheet）样式是一系列格式设置规则，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS样式可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式等。,CSS样式的基本使用介绍,CSS格式设置规则由两部分组成：选择器和声明。选择器是标识已设置格式元素(如 P、H1、类名称或 ID)的术语，而声明则用于定义样式元素。在下面的示例中，H1 是选择器，介于大括号 () 之间的所有内容都是声
2、明：H1 font-size: 16 px;font-family: Helvetica;font-weight: bold; 声明由两部分组成:属性和值。上述示例为 H1 标签创建了样式：链接到此样式的所有H1标签的文本都将是 16 像素大小并使用 Helvetica字体和粗体。,在网页中加入CSS样式,在Dreamweaver中，可以使用四种不同的方法在网页中加入CSS样式。 链接外部样式表文件 定义内部CSS样式 导入外部样式表文件 定义内联CSS样式 注意：可以在一个网页中同时使用外部样式表、内部CSS样式和内联CSS样式，如果相互之间存在属性设置冲突，则优先权排列为：内联CSS样式内
3、部CSS样式外部样式表,方法一：链接外部样式表文件,首先建立外部样式表文件(.css)，然后在网页中使用link标签链接样式表文件。这种方法使页面内容与版面设计分开，易于管理整个网站的网页风貌。,H1 font-size: 16px;font-family: Helvetica;font-weight: bold; , 链接外部样式表,style.css,test.htm,方法二：定义内部CSS样式,在网页的.标签间加入CSS样式定义，这种方法适用于指定某个网页的具体外观。,方法三：导入外部样式表文件,导入外部样式表文件是指在定义内部CSS样式时利用“import”来引用外部样式表文件。,方法
4、四：定义内联CSS样式,内联CSS样式是在某个HTML标签内使用style属性定义适用于该标签的个别样式。内联CSS样式的应用,“CSS样式”面板,在Dreamweaver中，可以使用“CSS 样式”面板查看、创建、编辑和删除 CSS样式，并且可以将外部样式表附加到当前文档。 若要打开“CSS 样式”面板， 执行下列操作之一： 选择“窗口”“CSS 样式” 按 Shift+F11键 单击属性检查器中的“CSS” 按钮,CSS样式的创建和应用,用户可以创建一个新的CSS样式嵌入到当前文档中，也可以使用外部样式表文件中的CSS样式来自动完成HTML标签的格式设置。 创建新的CSS样式 在“CSS样
5、式”面板中，单击右下角区域中的“新建CSS规则”按钮，打开“新建CSS规则”对话框。在“选择器类型”单选按钮组中，选择要创建的CSS样式的类型。,类型一：类样式(自定义样式),可应用于任何文本范围或文本块的样式，HTML标签通过自身的class属性来指定应用该样式。应用了类样式的文本 ,类型二：标签样式,应用于指定HTML标签的样式。应用了标签样式的文本 ,类型三：高级样式,高级样式可细分为三种类型： 标签组合样式 多标签共享样式 嵌套标签样式 利用标签的id属性引用的样式 伪类选择器 注意：在CSS样式语法中，标签组合样式被作为标签样式对待，但Dreamweaver将标签组合样式作为高级样式
6、对待。,高级样式-标签组合样式-多标签共享样式,文本 链接 标题,高级样式-标签组合样式-嵌套标签样式,链接文本一链接文本二,高级样式-利用标签id属性引用的样式,定义方法与类样式相似，样式名称以“#”开头，HTML标签通过自身的id属性来应用该高级样式。应用了高级样式的文本 ,高级样式-伪类选择器,用来指定超链接处于不同状态时应用的样式。a:link 文本被指定为超链接时的选择器 a:visited 超链接被鼠标单击后的选择器 a:hover 鼠标经过超链接时的选择器 a:active 在超链接上按下鼠标时的选择器,高级样式-伪类选择器,例如：武汉大学,CSS样式的创建和应用,创建新的CSS
7、样式 在“定义在”单选按钮组中，选择样式定义的位置。若要创建外部样式表，选择“新建样式表文件”单选按钮；若要在当前文档中嵌入样式，选择“仅对该文档”单选按钮。单击“确定”按钮，打开“CSS规则定义”对话框。,设置CSS样式属性,在 “分类”列表中选择不同的类别选项，为CSS样式设置不同的属性。每一类别包含的样式属性的具体解释参考教材6.2节。,CSS样式的创建和应用,设置完样式属性后，单击“确定”按钮，在“CSS样式”面板中将出现指定名称的新样式。如果新建的是一个外部样式表，则会在面板中出现外部样式表文件的名称，单击其左侧的加号按钮，可将其包含的样式展开。,CSS样式的创建和应用,应用类样式
8、在当前文档中，选择要应用类样式的文本。 在“CSS样式”面板中，选择“全部”模式，右键单击要应用的类样式名称，从快捷菜单中选择“套用”。,CSS样式的创建和应用,若要将已应用的类样式从选定内容中删除，可首先选择要从其中删除样式的对象或文本；然后在属性检查器中，从“样式”下拉列表框中选择“无”选项即可。,CSS样式的创建和应用,应用外部样式表 在“CSS样式”面板中，单击其右下角区域中的“附加样式表”按钮，弹出“链接外部样式表”对话框。单击“浏览”按钮查找已有的外部样式表，或在“文件/URL”文本框中输入外部样式表的路径及文件名。,CSS样式的创建和应用,在“添加为”单选按钮组中选择应用外部样式
9、表的方式。 单击“确定”按钮，外部样式表的文件名称出现在“CSS样式”面板中。 导出内部CSS样式可以从文档中导出内部CSS样式来创建新的外部样式表。具体操作如下： 选择“文件”“导出”“CSS 样式”，打开“导出样式为CSS文件”对话框。 在“文件名”文本框中输入样式表的名称，单击“保存”按钮，内部CSS样式随即存放到外部样式表中。,CSS滤镜,滤镜(filter)属性是CSS的一个扩展部分，它能够渲染对象元素，创建出艺术效果。Dreamweaver的CSS样式提供了丰富的滤镜效果，使用这些滤镜能够创建出文本和图像的3D、阴影和淡入淡出等效果，应用在页面中，在一定程度上美化了页面。,CSS滤
10、镜的基本使用方法,滤镜的使用和其它CSS样式的定义方法相似，分为外部引用、内部引用和局部引用三种，语法格式为：filter: filtername(parameters) 其中filter是滤镜属性标识符，filtername是滤镜属性名称，parameters是滤镜属性自带的若干参数。 例如：,CSS滤镜的应用范围,CSS滤镜属性只能用在HTML控件元素上。所谓的HTML控件元素就是它们在页面上定义了一个矩形空间，浏览器窗口可以显示这些空间。HTML控件元素包括、和。,CSS滤镜的分类,Dreamweaver中共含有16种CSS滤镜，可分为无参滤镜和有参滤镜两类。 无参滤镜 Gray：使对象
11、产生灰度图效果。 Invert：使对象产生“底片”效果。 Xray：使对象产生“X光片”效果。 FlipH：使对象产生水平翻转效果。 FlipV：使对象产生垂直翻转效果。 Light：使对象产生一种模拟光源的投射 效果。,无参滤镜实例,Gray,Invert,Xray,FlipH,FlipV,Light,有参滤镜,有参滤镜 Alpha：设置对象的透明度。 Blur：使对象产生模糊效果。 Wave：使对象在垂直方向上产生波纹效果。,原图,Alpha,Blur,Wave,有参滤镜,有参滤镜 Shadow：在指定的方向上建立对象的投影。 Dropshadow：设置对象的阴影效果。,Shadow,Dropshadow,有参滤镜,有参滤镜 Chroma：将对象中指定的颜色设置为透明色。 Glow：在对象的边缘产生类似发光的效果。 Mask：为对象建立一个覆盖于表面的膜，其 效果就好像是戴有色眼镜看物体一样。,Chroma,Glow,Mask,有参滤镜,有参滤镜 BlendTrans：设置对象的淡入淡出效果。 RevealTrans：设置对象之间的切换效果。 例如：,END,
