第08章-使用CSS样式控制网页外观课件

本章将介绍本章将介绍CSSCSS样式的基本知识以及样式的基本知识以及使用使用CSSCSS样式控制网页外观的基本方样式控制网页外观的基本方法。法。第8章使用CSS样式控制网页外观学习目标了解了解CSSCSS样式的作用及其类型。样式的作用及其类型。掌握创建和设置掌握创建和设置CSSCSS样式的方法。样式的方法。掌握附加样式表的方法。掌握附加样式表的方法。掌握使用掌握使用CSSCSS样式控制网页外观样式控制网页外观的基本方法。的基本方法。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样式的类型和规则CSSCSS样式的类型样式的类型CSSCSS样式的规则样式的规则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声明方式 样样式式表表是是由由样样式式规规则则组组成成的的，每每个个CSSCSS样样式式规规则则由由两两部部分分组组成成：选选择择器器和和声声明明。选选择择器器是是标标识识已已设设置置格格式式元元素素的的术术语语，如如bodybody、p p、类类名名称称或或IDID；而而声声明明则则用用于于定定义义样样式式属属性性，大大多多数数情情况况下下为为包包含含多多个个声声明明的的代代码码块块。即即通通过过很很多多属属性性来来定定义义一一个个元元素素，每每个个属属性性带带一一个个值值，共共同同描描述述选选择择器器应应该该如如何何呈呈现现。样样式式规规则则组组成如下：成如下：选择器选择器 属性属性 :值值 单一选择器的复合样式声明应该用分号隔开：单一选择器的复合样式声明应该用分号隔开：选择器选择器 属性属性1:1:值值1;1;属性属性2:2:值值2 2 8.3.2 CSS样式的规则以以下下是是一一段段定定义义“h2”h2”元元素素的的字字体体、大大小小、颜颜色色和和对对齐齐方方式式等等属属性性的的CSSCSS样式代码：样式代码：无标题文档无标题文档!-8.3.2 CSS样式的规则其其中中，“h2”h2”是是选选择择器器，介介于于大大括括号号“”之之间间的的所所有有内内容容都都是是声声明明块块。通通常常声声明明由由两两部部分分组组成成：属属性性和和值值。在在上上面面定定义义的的CSSCSS规规则则中中，已已经经为为“h2”h2”标标签签创创建建了了特特定定样样式式。所所有有设设置置为为“h2”h2”标标签签的的文文本本字字体体为黑体、大小为为黑体、大小为24px24px、颜色为红色、对齐方式为居中对齐。、颜色为红色、对齐方式为居中对齐。任任何何HTMLHTML元元素素都都可可以以是是一一个个选选择择器器，选选择择器器仅仅仅仅是是指指向向特特别别样样式式的的元元素素。例如：例如：P text-indent:3em P text-indent:3em 其中，选择器是其中，选择器是P P。(1)(1)IDID选选择择器器能能够够个个别别定定义义每每个个元元素素的的成成分分。一一个个IDID选选择择器器的的指指定定要在名字前面有指示符要在名字前面有指示符“#”#”。例如，。例如，IDID选择器可以指定如下：选择器可以指定如下：#pstyle text-indent:3em#pstyle text-indent:3em 这点可以参考这点可以参考HTMLHTML中的中的IDID属性：属性：文本缩进文本缩进3em3em8.3.2 CSS样式的规则(2)(2)关关联联选选择择器器是是一一个个用用空空格格隔隔开开的的两两个个或或更更多多的的单单一一选选择择器器组组成成的的字字符符串串。这这些些选选择择器器可可以以指指定定一一般般属属性性，而而且且因因为为层层叠叠顺顺序序的的规规则，它们的优先权比单一的选择器大，如下面的代码：则，它们的优先权比单一的选择器大，如下面的代码：P EM background:yellow P EM background:yellow 这这个个值值表表示示段段落落中中的的强强调调文文本本会会是是黄黄色色背背景景，而而标标题题的的强强调调文文本本则则不不受受影响。影响。为为了了减减少少样样式式表表的的重重复复声声明明，组组合合的的选选择择器器声声明明是是允允许许的的。例例如如，文文档档中的所有标题可以通过组合给出相同的声明，如下面的代码：中的所有标题可以通过组合给出相同的声明，如下面的代码：h1,h2,h3,h4,h5,h6 h1,h2,h3,h4,h5,h6 color:red;color:red;font-family:sans-serif 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.6CSS样式的应用应用应用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文件中出现或被引用的顺序，越走后面出现的，优先级越高。3.选择符的作用优先顺序为上下选择符、类选择符、id选择符，优先级依次降低。4.未知任何文件中定义的样式将遵循浏览器默认的样式。结束语当你尽了自己的最大努力时，失败也是伟大的，所以不要放弃，坚持就是正确的。When You Do Your Best,Failure Is Great,So DonT Give Up,Stick To The End谢谢大家荣幸这一路，与你同行ItS An Honor To Walk With You All The Way演讲人：XXXXXX 时 间：XX年XX月XX日