CSS样式表在TML文档中的应用.doc

CSS样式表在HTML文档中的应用 利用CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。这就避免了象表格嵌套那样将整个页面圈在一个大表格里，使得页面体积变小，浏览速度变快。 如何插入样式表 当浏览器读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有三种： 外部样式表 顾名思义，外部样式表是指储存在html文档之外的独立CSS文件中的样式表。当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用link元素链接到样式表。link 元素在（文档的）头部head/head中： head link rel=stylesheet type=text/css href=mystyle.css / /head 浏览器会从文件mystyle.css中读到样式声明，并根据它美化HTML文档。外部样式表可以在任何文本编辑器中进行编辑，但该文件中不能包含任何的html元素。样式表应该以.css 扩展名进行保存。下面是一个样式表文件的例子： hr {color: sienna;} p {margin-left: 20px;} body {background-image: url(images/back40.gif);} 不要在属性值与单位之间留有空格。例如使用“margin-left: 20 px” 而不是“margin-left: 20px”，它仅在IE6中有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。 内部样式表 对于小范围应用的样式，为了精简外部样式表的规模，常常在该html文档中直接定义样式表，故命名为内部样式表。此时可以使用style 元素在HTML文档头部head /head中定义内部样式表，如下所示： head style type=text/css hr {color: sienna;} p {margin-left: 20px;} body {background-image: url(images/back40.gif);} /style /head 内联样式 由于要将样式和内容混杂在一起，内联样式会损失掉样式表的许多优势，请慎用这种方法。例如仅当样式需要在某个元素上应用一次时采用内联样式。 要使用内联样式，你需要在相关的元素内使用样式（style）属性。Style属性可以包含任何CSS属性。如下代码改变段落的颜色和左外边距： p style=color: sienna; margin-left: 20px This is a paragraph /p 了解DOM 文档对象模型DOM（Document Object Model）以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。是对Web文档进行应用开发、编程的应用程序接口（API）。作为W3C公布的一种跨平台、与语言无关的接口规范，DOM提供了在不同环境和应用中的标准程序接口，可以用任何语言实现。作为表示和处理一个HTML或XML文档的常用方法，通过对DOM操作可以重构整个HTML文档，包括添加、移除、改变或重排页面上的项目。根据 DOM，HTML文档中的每个成分都是一个节点。DOM 是这样规定的： 整个文档是一个文档节点 每个HTML标签是一个元素节点 包含在HTML元素中的文本是文本节点 每一个HTML属性是一个属性节点 注释属于注释节点 !DOCTYPE html meta charset=utf-8 html head title什么是DOM /title /head body h1DOM中一切都是节点/h1 pDocument：文档，是个平面文件/p pObject：将平面文件抽象为可处理的对象/p pModel：模型，从文档到对象的建模过程/p /body /html 上述HTML中：html节点无父节点；它是根节点（想想家谱中祖先的位置）。head和body的父节点是html节点，文本节点 Document：文档，是个平面文件的父节点是p节点。并且html节点拥有两个子节点：head和body；head节点拥有一个子节点：title 节点。title节点也拥有一个子节点：文本节点 DOM中一切都是节点。h1和p节点是同胞节点，同时也是body的子节点 此外head元素是html元素的首个子节点；body元素是html元素的最后一个子节点；h1元素是body元素的首个子节点；p元素是body元素的最后一个子节点。 选择器的使用 CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素就需要我们所说的选择器。选择器主要是