1、第十二章创建样式表网页* 1中原工学院信息商务学院计科系12.1 CSS概述o CSS的产生背景及概念的产生背景及概念n HTML 标签标签 原本被设计原本被设计 为用于为用于 定义页面内容定义页面内容 。通过使用通过使用 、 、 这样的标这样的标签，签， HTML 的初衷是表达的初衷是表达 “这是标题这是标题 ”、 “这是这是段落段落 ”、 “这是表格这是表格 ”之类的信息。文档布局由之类的信息。文档布局由 浏浏览器览器 来完成，而来完成，而 不使用不使用 任何的任何的 格式化格式化 标签。标签。n 由于两种主要的浏览器（由于两种主要的浏览器（ Netscape 和和 IE）不断地不断地 将
2、新的将新的 HTML 标签和属性（比如字体标标签和属性（比如字体标签和颜色属性）添加到签和颜色属性）添加到 HTML 规范中，创建规范中，创建 内内容容 和和 表现表现 相分离相分离 的页面越来越困难。的页面越来越困难。Date 2中原工学院信息商务学院计科系n 为了解决这个问题，万维网联盟（ W3C）（ 非营利的 ）肩负起了 HTML 标准化的使命，在1996年底创造了一种所有的主流浏览器 均支持的技术（ Cascading Style Sheets层叠样式表，简称 CSS），它是一种可对 网页元素实现更加 精确控制 的技术， 不仅可用在一个页面，且可 同时 用于 多个页面 。Date 3中
3、原工学院信息商务学院计科系CSS的功能o 将内容和样式分离n HTML元素只表达网页内容，样式交给 CSS来控制。o 前所未有的能力控制页面布局o 制作 体积更小 、 下载更快 的网页n 使用样式表可以减少表格标签、格式化标签等，页面代码量大大减少。o 将许多网页 同时更新 ，比以前 更快更容易Date 4中原工学院信息商务学院计科系CSS样式的 3种定义方式o 内联样式n 定义在 HTML标签的 style属性 的样式；n 应用范围：定义时使用，只能应用于 该元素。o 内部样式n 定义在 标签内样式，通过 标签 来定义；n 应用范围：只能应用于定义该样式的 页面 。o 外部样式n 定义在单独
4、的 样式文件 （ .css）中的样式，可以通过在标签内用 标签来引用；n 应用范围：可以应用于 任何页面 。Date 5中原工学院信息商务学院计科系CSS样式的优先级o 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？n 将会按照如下顺序应用：内联样式 内部样式 外部样式o 因此， 内联样式 优先级 最高 ， 外部样式 优先级最低， 内部样式 优先级 居中 。o 提示： 为了提高构建网站的可维护性和可重用性， 建议采用外部样式 。Date 6中原工学院信息商务学院计科系12.2 CSS基础语法o CSS 语法由三部分构成： 选择器 、 属性 和 值 ：o 选择器 (select
5、or) 通常是你希望定义样式的 HTML元素标签、元素的 id或 class属性值，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：selector property: value Date 7中原工学院信息商务学院计科系o 上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色， body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值， color 为属性， blue 为值。o 提示： 如果要定义不止一个声明，则需要用 分号 将每个声明分开。
6、body color: blue Date 8中原工学院信息商务学院计科系o 选择器的分组n 可以对选择器进行 分组 ，这样，被分组的选择器就可以 共享 相同的声明 。用 逗号 将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 color: green; Date 9中原工学院信息商务学院计科系o ID 选择器 n ID 选择器可以为 标有特定 ID 的 HTML 元素指定特定的样式。n ID 选择器以 “#” 来定义。o 下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：#red color:red; #green color:green; 注意 ： ID 属性只能在每个 HTML 文档中出现 一次 。 定义Date 10中原工学院信息商务学院计科系
