null 4.4 网页布局与CSS 4.4 网页布局与CSS学习目标学习目标理解CSS样式表对网页布局的作用
掌握CSS样式表的运用方法网页布局与层叠样式表 网页布局与层叠样式表 样式表的概念并不是新创造的，文字处理器和桌面印刷系统长期以来都在使用做某种特殊样式的排版
样式表最重要的作用是提供了一种能使所有Web页面的样式保持一致的方法CSS的必要性 CSS的必要性 许多HTML元素都有外观属性，如果在元素中没有指定相应的值，那么浏览器将使用这些属性的默认值。
例如，
元素中包含font-size属性，某个浏览器可能将这个属性的默认值设定为30个点（pt）
而通过样式表则可以将该默认值更改为26个，这种改动可以只对某个元素有效，也可以对这个文档中所有的元素都有效。 CSS的必要性CSS的必要性样式表的某些功能可能需要借助元素的各种属性、字体的样式以及字体的尺寸元素来实现
然而，利用样式表可以对这些样式说明进行更精确、更一致的描述
目前已经不提倡直接绝大多数用于描述外观的元素属性，而是建议使用样式表。
样式表的层次样式表的层次样式表的三个层次按照从低层到高层的顺序依次是:
内置(inline)样式表
文档层(document level)样式表
外部(external)样式表。样式表的层次 样式表的层次 HTML样式表之所以被称为层叠样式表，是因为文档样式可以三个不同层次上进行定义
低层样式表可以取代高层样式表，所以某个元素
内容
财务内部控制制度的内容财务内部控制制度的内容人员招聘与配置的内容项目成本控制的内容消防安全演练内容
的样式是由样式表的叠加来确定的。 样式表的层次样式表的层次内置样式表适用于单个元素的内容
文档层样式表适用于整个文档的主体
外部样式表则可以应用在多个文档的主体中。
在使用时，内置样式表优先于文档样式表，而文档样式表又优先于外部样式表。
在出现冲突的情况下，低层次的样式表具有使用上的优先权。
CSS可能遇到的问题CSS可能遇到的问题与元素和元素属性所面临的情况一样，某种特殊的浏览器可能不能处理样式表中指定的一些属性值。
对于这种情况，浏览器要么用一个可选择的值进行替代，要么将简单地忽略所给出的这些属性值。
内置样式内置样式内置样式说明出现在元素中，并且仅适用于那个元素中的内容。
这种细粒度的样式应用背离了样式表的主要
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
思想——对完整文档的各种元素进行样式统一
对内置样式说明应当谨慎使用。
文档层样式文档层样式文档层样式说明出现在文档的头部分，并且适用于文档的整个主体。
这是对文档所有内容的显示外观进行格式统一的一种方法。
外部样式表外部样式表在网站建设中，往往希望网站的整体风格能够一致，这就是外部样式表的主要应用目的
外部样式表并不是它们所适用的文档的一部分。外部样式表单独存储，并且在所有使用它们的文档中都要进行说明。 外部样式表外部样式表可以用MIME类型text/css将外部样式表编写成一些文本文件，它们可以存储在因特网上的任何一台计算机中，浏览器获取外部样式表就如同获取文档一样。
网页首部的元素也可用于指定外部样式表，在元素中，rel属性用于指定被链接的文档与包含该链接的文档之间的关系，而href属性用于指定样式表文档的URL地址外部样式表的引用外部样式表的引用
指向一个外部样式表的链接必须放在HTML基本文档的头部（header容器中）。
样式说明格式 样式说明格式 一个样式说明的格式取决于该样式表的层次。在一个元素中内置样式说明是以style属性值的形式出现的，其一般形式如下：
style = “property_1:value_1；property_2:value_2;...;property_n:value_n;”
样式说明格式样式说明格式内置样式说明的作用范围只限于所处元素中的内容部分。
文档层样式说明在文档头部以一个
样式说明格式样式说明格式
样式类样式类然后在某个文档的主体中可以包含下面这些代码：
第3章
首先, 需要注意的是:…
但是, 还需要提醒的是: …
属性和属性值 属性和属性值 HTML元素中的属性可以分成六大类：
字体
颜色及背景
文本
边框与布局
列表
元素符等。 属性和属性值属性和属性值属性值可以有多种表示形式。当关键字属性值的可选范围有限并且均进行了预定义，那么就可以使用这些关键字属性值，例如underline和small。
属性和属性值属性和属性值属性值度量
标准
excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载
与前述相同。
但长度属性值后面必须紧跟着用两个字符的缩写词表示的单位名，在数字和单位名之间不能留有空格。
可能出现的单位名包括：px(像素)/ in(英寸)/ cm(厘米)/ mm(毫米)/ pt(点)和百分比，百分比形式的值是在数字后面加上百分号。属性和属性值属性和属性值URL属性值的形式与链接中所使用的URL的形式则不同，这些URL属性值的一般形式如下：
url(protocol://server/pathname)
在url与左括号之间不能留有空格。
属性和属性值属性和属性值在元素中定义属性值之后，该元素中内嵌的所有元素将通过继承获得这些属性值。
因此，在元素中使用一个内置样式表设置某个属性值将会有效地影响整个文档中该属性值的设置。
除非发生属性值的替代现象，否则文档中的每个元素都将继承中的属性值。
和元素
和元素在许多情况下，要求某些特殊的字体属性只应用于整个段落中的部分文本。
例如，将同一行中的某个字或词组使用不同的字体尺寸或颜色显示出来通常是很有帮助的。
元素元素元素就是针对此目的设计的。例如，在下例中，“全面”这个词与段落中的其他部分并没有区别显示。
能够对文本进行全面控制是一件很有意思的事
元素元素元素的惟一用法是使用内置样式表更改属性值，例如：
能够对文本进行全面控制是一件很有意思的事
元素
元素在网页中，节是很常见的形式，每节由若干段落构成，而且每节都有各自的外观表示样式。
虽然在段落中使用样式类。然而，往往在设计中希望不仅是对各个段落，而且可以对网页中的节进行样式设置。
这里，
元素可以实现这个要求。因此它的主要用途是指定网页中某节或某区域的外观展示细节。 小结小结本讲主要介绍CSS的用途、特点
CSS可以用来控制网站的风格
样式类同一个元素使用来自文档样式表或外部样式表的样式说明
CSS中HTML元素的属性、属性值表达方法
的基本用途
本文档为【4.4 CSS样式表应用】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。
该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。
[版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
格式：ppt
大小：135KB
软件：PowerPoint
页数：0
分类：高中其他
上传时间：2011-08-31
浏览量：19
浙公网安备 33021202002483