C07-CSS(网页设计).pdf

信息系统开发(面向对象开发平台) 层次样式表(CSS) 管理学院 吕成功 03:44 1 CSS概述 • CSS ，层叠样式表 (Cascading Style Sheets) – 样式定义如何显示 HTML 元素 – 样式通常存储在样式表中 – 样式表可以单独存储为一个文件，与HTML文件分离 – 样式表为了解决内容与表现分离的问题 – 而且多个样式定义可以层叠为一个 03:44 1 CSS概述 • HTML 标签原本被设计为用于定义文档内容。 例如：对于h1、p、table 等标签，HTML 的初衷 是表达“这是标题”、“这是段落”、“这是表格”之 类的信息。希望，浏览器完成文档的布局由，而不是由 这些标签完成显示或文字格式化工作。 • 内容与样式的分离原则 (Separation of Concerns) – XML与XSL – 内容独立与样式 – 同一内容，可以应用不同的样式 （显示、打印） 03:44 1 CSS概述 • 样式可以层叠为一个 – 样式表允许以多种方式规定样式信息。 • 层叠次序 (数字越高，优先级越高) 1 浏览器缺省设置 2 外部样式表 3 内部样式表（位于head 标签内部） 4 内联样式（在 HTML 元素内部） 03:44 1 CSS概述 • 外部样式表 head link rel=stylesheet type=text/css href=mystyle.css / /head • 内部样式表 head style type=text/css hr {color: sienna;} p {margin-left: 20px;} body {background-image: url(images/back40.gif);} /style /head 03:44 1 CSS概述 • 内联样式 p style=color: sienna; margin-left: 20px This is a paragraph /p 03:44 2 CSS简单语法 • 一个选择器和多条声明 selector {declaration1; declaration2; ... declarationN } • 声明是一对属性名与属性值的组合。 selector {property: value} 03:44 2 CSS简单语法 一个稍微复杂一些例子： 值为若干单词，则要给值加引号 p { font-family: sans serif; text-align: center; color: black; font-family: arial; 声明通过分号隔开 } CSS 对大小写不敏感，允许任意空格 03:44 3 选择器 • 元素选择 • 类(class)选择 • 标识id选择 • 属性选择 • 后代元素选择 • 子元素选择 • 相邻元素选择 • 选择器的分组 03:44 3.1 CSS 元素选择器 • 用来选取HTML元素的 – 元素选择器又称为元素类型选