706-CSS导论.pptVIP

参考: CSS导论 段会川 山东师范大学信息科学与工程学院 2006年10月 目 录 先决知识 何为CSS? CSS综合演示 样式解决了一个带有普遍性的问题 样式可以为您节省很多劳动 多个样式可以级联为一个样式 CSS语法 CSS语法要点 样式组 类(class)选择器 目 录 类(class)选择器 标识(id)选择器 CSS注释(comment) 使用内部样式单 内联样式 多重样式 CSS背景样式 CSS文本样式 CSS字体(font) CSS边框(border) 目 录 CSS边空(margin) CSS填充(padding) CSS列表(list) CSS元素尺寸(dimension) CSS分级定位(classification) CSS定位(positioning) CSS赝类(pseudo-classes) CSS赝元素(pseudo-elements) CSS2媒体类型(media types) CSS综合演示 先决知识 HTML/XHTML 何为CSS? CSS代表层叠样式单(Cascading Style Sheet), 也译作级联样式单, 简称为样式单 样式用于定义如何显示HTML元素 通常样式放在样式单中 样式被HTML 4.0采用是为了解决一个问题 外部样式单可以为您节省许多劳动 外部样式单存储在CSS文件中 多个样式定义可以级联起来构成一个样式 CSS综合演示 CSSDemoA.htm 样式解决了一个带有普遍性的问题 设计HTML标签的本意是定义文档的内容 它们本来想使用诸如h1, p, table等描述”这是一个标题”, “这是一个段落”, “这是一个表格” 而文档的外观由浏览器决定, 不需要借助于任何的格式化标签 随着两种主要的浏览器—Netscape和IE—不断地向原来的HTML规范中增加新的HTML标签和属性, 人们发现创建将HTML文档与其外观展示清楚地分离开来的站点越来越困难 为解决这一问题, W3C(World Wide Consortium, WWW联盟)—负责标准化HTML的非盈利性组织—在创建HTML 4.0的同时引入了样式 目前,所有主流的浏览器都支持CSS 样式可以为您节省很多劳动 如同HTML 3.2中的font标签及其color属性, 样式单定义了HTML元素的显示方式 样式通常存储在外部的.css文件中. CSS是Web设计技术的一个重大突破 因为它使开发者可以快速地控制多个的Web页的样式和外观效果 Web开发者可以为每个HTML元素定义样式, 然后将它应用到所期望的任何数量的Web页上 多个样式可以级联为一个样式 样式单允许将样式定义在单一的HTML元素上, 定义在HTML网页的head部分, 或定义在一个外部的CSS文件中 一个HTML文档也可以引用多个外部样式单 级联次序: 所有的样式将按照如下的规则”级联”为一个新的”虚拟”样式单, 其中4级为最高级, 高级的样式将覆盖低级的样式 浏览器默认值 外部样式单 出现在head部分的内部样式单 出现在HTML元素中的内联样式单 CSS语法 CSS语法由三部分组成 选择器(selector), 参数(property, 也称属性), 值(value) selector {property: value} 选择器是你要定义样式的HTML元素或标签 参数是你期望改变的标签属性(attribute) 值就是你期望参数要取的值 参数和值之间用冒号隔开, 且放在花括号中 如: body {color: black} CSS语法要点 如果值包括多个单词, 则用双引号括起来 p {font-family: sans serif} 多个参数间中分号隔开 p {text-align:center;color:red} 为增强可读性, 你可以使每个参数单独占用一行 p { text-align: center; color: black; font-family: arial } 样式组 你可以将多个选择器以逗号隔开归为一组 h1,h2,h3,h4,h5,h6 { color: green } 类(class)选择器 使用类选择器你可以为一种HTML元素定义不同的样式 如下例子定义了两种类型的段落: 右对齐和居中 p.right {text-align: right} p.center {text-align: center} 这两类段落可以如下方式使用 p class=right 这些文字将右对齐. /pp class=center 这些文字将居中. /p 类(class)选择器 可以为一个元素使用多个类 p class=center bold 这个段落使用”center”和”bold”两个样式类. /p