[计算机软件及应用]html第2章： HTML-CSS快速入门.ppt

CSS分类 - 行内样式 - 内嵌式 - 链接式 - 导入样式 3. CSS选择器 标记选择器－也叫直接样式 CSS选择器 ID选择器： CSS选择器－选择器的集体声明： 选择器的嵌套： 1. CSS的概念 - CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言，是实现页面表现（Presentation）的核心元素。 - CSS的引入 2. 使用CSS控制页面显示样式 - 行内样式 - 内嵌式 - 链接式 - 导入样式 3. CSS选择器 标记选择器－也叫直接样式 CSS选择器 ID选择器： CSS选择器－选择器的集体声明： 选择器的嵌套： 子选择器: (注意以下代码IE不适用) 伪样式，IE不能用，但 FF可以： 伪选择器也是CSS标准的一部分，大部分的浏览器都支持，ie6不支持。 :hover － 鼠标停留在某元素上时执行。 在IE上hover事件必须要自己书写JS代码： 3. 元素的定位 - float定位 Position定位： absolute- －绝对。 relative-相对。 Z-index立体空间位置： 2. 盒子模型 - 一个盒子由content、border、padding(空隙)、margin(间隙)这四部分组成 CSS伪属性 CSS的其他问题： 空格和大小写 大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑： body { color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; } 是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。 派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。 在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。 比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器： li strong { font-style: italic; font-weight: normal; } 各种不同的选择器 盒子模型： * 使用CSS的理由 从HTML3.2版本中引入了内建的格式化属性和元素，这对于建立一个复杂点的网站带来了繁重的维护花费。CSS的提出就是想要改变乱用格式化信息的问题。使用样式表把从散落在HTML文档中的格式化信息转移到单独的文档中，或集中在文档的某个部分，如果要修改文档的显示方式，很显然，后一种方式要便捷的多。这也是为什么W3C决定要把HTML的结构和显示分开的原因。 很显然，对整个文档甚至整个网站的所有文档的格式化信息有可能只要说明一次就可以了。这比逐个在标记后面写明字体的风格、颜色要高效的多。HTML元素重大多数都有ID,和CLASS属性。通过它们CSS就可以为具有相同ID或CLASS值的元素定义相同的格式。 HTML语言中原有的控制网页格式的功能十分有限，比如我们不能仅仅通过font元素来控制字体大小为80像素，也不能精确地定位图像的位置。使用CSS几乎可以随心所欲的控制页面的外观。 * CLASS和ID属性的用处 任何一个HTML标记都可以分别指定样式，但是如果希望区分相同标记的不同部分时，这种方法就不方便了，比如希望有的段落(P)使用蓝色的字体，有的段落使用其他颜色的字体，我们该如何指定样式呢。 考虑到这种情况下，引入了两个HTML属性CLASS（类）和ID（标识符）。它们可以区分文档中的每一个标记包围的部分(对于有CLASS和ID 属性的标记来说)。 ID属性的作用是标识文档中一个元素，就像一个人的身份证，所以一个文档中部应该为两个元素赋以相同的ID值。CLASS的作用是将一个元素指定为一个或多个类的成员。属于某个类的元素往往可以赋以相同的特性，比如显示格式。 CLASS主要用于CSS。ID属性的作用则主要是被JAVASCRIPT等脚本语言作为控制页面中某一个元素的手段。注