使用CSS样式控制网页外观.ppt

本章将介绍CSS样式的基本知识以及使用CSS样式控制网页外观的基本方法。,第8章 使用CSS样式控制网页外观,学习目标,了解CSS样式的作用及其类型。 掌握创建和设置CSS样式的方法。 掌握附加样式表的方法。 掌握使用CSS样式控制网页外观的基本方法。,8.1 认识CSS样式,CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，用于定义表现形式的CSS规则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，这样将缩短浏览器的加载时间。,8.1 认识CSS样式,在使用了CSS样式的网页文档的源代码中，“”中间存放的是控制文档外观的CSS代码，位于文档的文件头部分，“”中间是网页文档的内容。,8.1 认识CSS样式,可以更加灵活地控制网页中文本的字体、颜色、大小、间距、风格及位置。 可以灵活地为网页中的元素设置各种效果的边框。 可以方便地为网页中的元素设置不同的背景颜色、背景图片及平铺方式。 可以更加精确地控制网页中各元素的位置，使元素在网页中浮动。 可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊和透明等只有在一些图像处理软件中才能实现的效果。 可以与脚本语言相结合，使网页中的元素产生各种动态效果。,CSS样式可以实现的功能。,8.2 【CSS样式】面板,在Dreamweaver CS3中，【CSS样式】面板是新建、编辑、管理CSS样式的主要工具。在打开文档窗口的情况下，选择【窗口】/【CSS样式】命令可以打开或关闭【CSS样式】面板。,8.3 CSS样式的类型和规则,CSS样式的类型 CSS样式的规则,8.3.1 CSS样式的类型,根据选择器类型的不同，CSS样式通常划分为以下3类。 （1）【类（可应用于任何标签）】 利用该类选择器可创建自定义名称的CSS样式，能够应用在网页中的任何标签上。 在网页文档中可以使用class属性引用“pstyle”类。 ,8.3.2 CSS样式的类型,（2）【标签（重新定义特定标签的外观）】 利用该类选择器可对HTML标签进行重新定义、规范或者扩展其属性。 ,8.3.3 CSS样式的类型,（3）【高级（ID、伪类选择器等）】 利用该类选择器会对标签组合（如“td h2”表示所有在表格单元中出现“h2”的标题）或者是含有特定ID属性的标签（如“#myStyle”表示所有属性值中有“ID=“myStyle“”的标签）应用样式。而“#myStyle1 a:visited,#myStyle2 a:link, #myStyle3”表示可以一次性定义相同属性的多个CSS样式。其中，ID属性用于定义一个元素的独特的样式，如以下CSS规则 可以通过ID属性应用到HTML中： ,8.3.2 CSS样式的规则,样式表的定义 CSS样式表定义的基本语法： CSS声明方式 样式表是由样式规则组成的，每个CSS样式规则由两部分组成：选择器和声明。选择器是标识已设置格式元素的术语，如body、p、类名称或ID；而声明则用于定义样式属性，大多数情况下为包含多个声明的代码块。即通过很多属性来定义一个元素，每个属性带一个值，共同描述选择器应该如何呈现。样式规则组成如下： 选择器 属性 : 值 单一选择器的复合样式声明应该用分号隔开： 选择器 属性1 :值1 ; 属性2 : 值2 ,8.3.2 CSS样式的规则,以下是一段定义“h2”元素的字体、大小、颜色和对齐方式等属性的CSS样式代码： 无标题文档 ,8.3.2 CSS样式的规则,其中，“h2”是选择器，介于大括号“”之间的所有内容都是声明块。通常声明由两部分组成：属性和值。在上面定义的CSS规则中，已经为“h2”标签创建了特定样式。所有设置为“h2”标签的文本字体为黑体、大小为24px、颜色为红色、对齐方式为居中对齐。 任何HTML元素都可以是一个选择器，选择器仅仅是指向特别样式的元素。例如： P text-indent: 3em 其中，选择器是P。 (1) ID选择器能够个别定义每个元素的成分。一个ID选择器的指定要在名字前面有指示符“#”。例如，ID选择器可以指定如下： #pstyle text-indent: 3em 这点可以参考HTML中的ID属性： 文本缩进3em,8.3.2 CSS样式的规则,(2) 关联选择器是一个用空格隔开的两个或更多的单一选择器组成的字符串。这些选择器可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择器大，如下面的代码： P EM background: yellow 这个值表示段落中的强调文本会是黄色背景，而标题的强调文本则不受影响。 为了减少样式表的重复声明，组合的选择器声明是允许的。例如，文档中的所有标题可以通过组合给出相同的声明，如下面的代码： h1, h2, h3, h4, h5, h6 color: red; font-family: sans-serif ,8.3.2 CSS样式的规则,实际上，所有在选择器中嵌套的选择器都会继承外层选择器指定的属性值，除非另外更改。例如，一个“body”选择器定义的颜色值也会应用到段落的文本中。 设置的CSS规则可以单独存放在一个文件中，也可以存放在HTML文档的文件头部分，即外部样式表和内部样式表。外部样式表将CSS规则定义在一个独立的外部样式表文件中（扩展名为“.css”），实现了CSS规则和HTML代码的独立分开存放，样式表文件可以利用文档头部分的链接或“import”规则链接到网站中的一个或多个页面。内部样式表是将CSS规则定义在HTML网页文档内部，通常放在HTML文档头部的“”和“”之间。,8.4.1 创建CSS样式,在Dreamweaver CS3中，创建CSS样式的操作是一个完全可视化的过程。 （1）选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，然后打开【新建CSS规则】对话框。 （2）在【选择器类型】选项组中选择要创建的CSS样式的类型 。 （3）在对话框中的【定义在】下拉列表中选择CSS样式的存放位置。 （4）打开【CSS规则定义】对话框，进行CSS样式设置。,8.4.1 修改CSS样式,创建层叠样式后，可以修改样式中的某些参数。,8.4.2 删除CSS样式,在“CSS样式”面板中，选择要删除的样式名称。 单击面板底部的“删除”按钮即可将样式删除。,8.4.3 复制CSS样式,复制一个已经创建完成的CSS样式，再对其参数进行修改，即可创建一个全新的CSS样式，这样可以提高工作效率。,8.4.4 重命名层叠样式,8.5 CSS样式的属性,类型 背景 区块 方框 边框 列表 定位 扩展,8.5.1 类型,类型属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰效果等。,8.5.2 类型,背景属性主要用于设置背景颜色或背景图像。,8.5.3 区块,区块属性主要用于控制网页元素的间距、对齐方式等。,8.5.4 方框,CSS将网页中所有的块元素都看作是包含在一个方框中的，这个方框共分为4个部分。,8.5.5 边框,网页元素边框的效果是在【边框】分类面板中进行设置的 。,8.5.6 列表,列表属性用于控制列表内的各项元素 。,8.5.7 定位,定位属性可以使网页元素随处浮动，这对于一些固定元素（如表格）来说，是一种功能的扩展，而对于一些浮动元素（如层）来说，却是有效地、用于精确控制其位置的方法 。,8.5.8 扩展,【扩展】分类对话框包含两部分 。,8.6 CSS样式的应用,应用CSS样式 附加样式表,8.6.1 应用CSS样式,一、通过【属性】面板 首先选中要应用CSS样式的内容，然后在【属性】面板的【样式】下拉列表中选择已经创建好的样式。一般情况下，在【CSS样式】面板中创建的样式都会在【属性】面板的【样式】下拉列表中出现，所以需要应用CSS样式时，在这里直接选择它们即可。,8.6.1 应用CSS样式,二、通过菜单栏中的【文本】/【CSS样式】命令 首先选中要应用CSS样式的内容，然后选择【文本】/【CSS样式】命令，从下拉菜单中选择一种设置好的样式，这样就可以将被选择的样式应用到所选的内容上。,8.6.1 应用CSS样式,三、 通过【CSS样式】面板下拉菜单中的【套用】命令 首先选中要应用CSS样式的内容，然后在【CSS样式】面板中选中要应用的样式，再在面板的右上角单击控制按钮，或者直接单击鼠标右键，从弹出的下拉菜单中选择【套用】命令即可应用样式。,8.6.2 附加样式表,外部样式表通常是供多个网页使用的，其他网页文档要想使用已创建的外部样式表，必须通过【附加样式表】命令将样式表文件链接或者导入到文档中。附加样式表通常有两种途径：链接和导入。在【CSS样式】面板中单击 （附加样式表）按钮，打开【链接外部样式表】对话框进行设置即可。,8.7 相关的标记和属性,8.7.1 伪类 8.7.2 span标记,8.8 样式的继承和作用顺序,8.8.1 样式的继承 8.8.2 样式的作用顺序 样式表的作用优先顺序遵循以下原则： 1.内联样式中所定义的样式的优先级最高 2.其他的样式按其中HTML文件中出现或被引用的顺序，越走后面出