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