第9章 CSS+DIV技术

9.3 样式定义
嵌入样式表 √ 链接外部样式表√ 引入外部的样式表 √ 内嵌样式√
√ CSS样式的优先级 √
嵌入样式表
用<style>标记将样式表嵌入在 标记将样式表嵌入在HTML文件的头部。<style>标记的属性 文件的头部。 标记的属性type指明样式的类别， 指明样式的类别， 标记将样式表嵌入在 文件的头部 标记的属性 指明样式的类别 除了CSS样式表外，还有Netscape浏览器使用的 样式表外，还有 浏览器使用的JSS（JavaScript Style Sheets，Java脚本样 除了 样式表外 浏览器使用的 （ ， 脚本样 式表）样式表，其样式类别为 的默认值为text/css。<style>标记内定义 式表）样式表，其样式类别为text/javascript；type的默认值为 ； 的默认值为 。 标记内定义 的前后加上注释符<!--…-->的作用是使不支持 的作用是使不支持CSS的浏览器忽略样式表的定义。嵌入样式 的浏览器忽略样式表的定义。 的前后加上注释符 的作用是使不支持 的浏览器忽略样式表的定义 表的作用范围是在本HTML文件内。 文件内。 表的作用范围是在本 文件内
第二种是独立Class选择符，它可以被任何HTML标记所应用。 选择符，它可以被任何 标记所应用。 第二种是独立 选择符 标记所应用 它的语法格式如下： 它的语法格式如下：
.Classname{property:value}
例如，可以将样式 应用于H2和 中的代码如下 中的代码如下： 例如，可以将样式blueone应用于 和P中的代码如下： 应用于
tag{property:value}
例如，设置表格的单元格内的文字大小为 ，颜色为蓝色的CSS代码如下： 代码如下： 例如，设置表格的单元格内的文字大小为9pt，颜色为蓝色的 代码如下
td{ font-size: 9pt; color: blue;}
CSS可以在一条语句中定义多个选择符，例如： CSS可以在一条语句中定义多个选择符，例如：将段落文本和单元格内的文字设置为蓝色 可以在一条语句中定义多个选择符 代码如下： 的CSS代码如下： 代码如下
对象概述
环境要求及 编写工具 编写第一个 程序 Ajax概述 实现Ajax的基 本步骤 用Ajax实现无 刷新广告轮显
常用标记
函数的定义 与调用等 窗口对象 文档对象
常用对象
CSS简介 样式定义与使 用 CSS+DIV美化与 布局页面
常用内置函 数 事件基本概念 常用事件
表单对象
【知识框架】 知识框架】 本章学习内容知识框架如图9.2所示。 本章学习内容知识框架如图 所示。 所示
<style> .blueone{color:bule} </style> <h2 class="blueone">有雨的日子</h2> <p class="blueone">不知是无意还是天意，有你的日子总有雨！</p>
显然Class选择符应用起来会方便得多。 选择符应用起来会方便得多。 显然 选择符应用起来会方便得多
【学习导航】 学习导航】 首先介绍什么是CSS，样式的定义与使用，接着重点讲解 对象， 属性， 首先介绍什么是 ，样式的定义与使用，接着重点讲解Style对象，CSS属性，最后介绍如何使用 对象 属性 CSS+DIV美化与布局页面。本章在书中的学习位置如图 所示。 美化与布局页面。 所示。 美化与布局页面 本章在书中的学习位置如图9.1所示
td,p{color: blue;}
选择符的分类
（2）Class选择符 ） 选择符 Class选择符可以分为两种，一种是相关的 选择符可以分为两种， 标记有关系。 选择符可以分为两种 一种是相关的class selector，它只与一种 ，它只与一种HTML标记有关系。 标记有关系 它的语法格式如下： 它的语法格式如下：
链接外部样式表
如果多个HTML文件要共享样式表 ， 可以将样式表定义为一个独立的CSS样式文件 。 如果多个 文件要共享样式表， 可以将样式表定义为一个独立的 样式文件。 文件要共享样式表 样式文件 HTML文件在头部用 文件在头部用<link>标记链接到 标记链接到CSS样式文件。 样式文件。 文件在头部用 标记链接到 样式文件 例如， 标记里用<link>标记链接 标记链接CSS样式文件，代码如下： 样式文件， 例如，在HEAD标记里用 标记里用 标记链接 样式文件 代码如下：
选择符的分类
（3）ID选择符 ） 选择符 ID选择符其实与独立的 选择符其实与独立的Class选择符的功能一样，而他们的区别在于语法和用法不同。 它 选择符的功能一样， 选择符其实与独立的 选择符的功能一样 而他们的区别在于语法和用法不同。 的语法格式如下： 的语法格式如下：
#IDname{property:value}
CSS简介
CSS+DIV
S CSS CSS+DIV
技 术
本章目录
9.1 CSS简介√ 简介 9.2 样式定义√ 9.3 使用样式√
√ 9.4 Style对象 对象
9.5 CSS属性 √ 属性 9.6 CSS+DIV美化与布局页面√ 美化与布局页面
9.1 CSS简介 CSS简介
CSS就是一种叫做样式表（style sheet）的技术，也有人称之为层叠样式表（Cascading Style Sheet）。制作网页时采 就是一种叫做样式表（ 就是一种叫做样式表 ）的技术，也有人称之为层叠样式表（ ） 技术， 用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一 技术 可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。 些简单的修改，就可以改变整个页面的风格。 些简单的修改，就可以改变整个页面的风格。 CSS样式表的特点如下 样式表的特点如下： CSS样式表的特点如下： （1）将显示格式和文档结构分离 ） HTML语言定义文档的结构和各要素的功能 而层叠样式表将定义格式的部分和定义结构的部分分离， 语言定义文档的结构和各要素的功能， HTML语言定义文档的结构和各要素的功能，而层叠样式表将定义格式的部分和定义结构的部分分离，能够对页面的布 局进行灵活的控制。 局进行灵活的控制。 （2）对HTML语言处理样式的最好补充 ） 语言处理样式的最好补充 HTML语言对页面布局上的控制很有限，如精确定位、行间距或者字间距等；CSS样式表可以控制页面中的每一个元 语言对页面布局上的控制很有限， 样式表可以控制页面中的每一个元 语言对页面布局上的控制很有限 如精确定位、行间距或者字间距等；CSS样式表可以 从而实现精确定位，CSS样式表控制页面布局的能力逐步增强 样式表控制页面布局的能力逐步增强。 素，从而实现精确定位，CSS样式表控制页面布局的能力逐步增强。 （3）体积更小加快网页下载速度 ） 样式表是简单的文本，文本不需要图像，不需要执行程序，不需要插件。这样层叠样式表就可以减少图像用量、 样式表是简单的文本，文本不需要图像，不需要执行程序，不需要插件。这样层叠样式表就可以减少图像用量、减少 表格标签及其他加大HTML体积的代码，从而减小文件尺寸加快网页的下载速度。 HTML体积的代码 表格标签及其他加大HTML体积的代码，从而减小文件尺寸加快网页的下载速度。 （4）实现动态更新、减少工作量 ） 实现动态更新、 定义样式表，可以将站点上的所有网页指向一个独立的CSS样式表文件，只要修改CSS样式表文件的内容，整个站点相 定义样式表，可以将站点上的所有网页指向一个独立的CSS样式表文件，只要修改CSS样式表文件的内容， CSS样式表文件 CSS样式表文件的内容 关文件的文本就会随之更新，减轻了工作负担。 关文件的文本就会随之更新，减轻了工作负担。 （5）支持 ）支持CSS的浏览器增多 的浏览器增多 样式表的代码有很好的兼容性，只要是识别串接样式表的浏览器就可以应用CSS样式表。 CSS样式表 样式表的代码有很好的兼容性，只要是识别串接样式表的浏览器就可以应用CSS样式表。当用户丢失了某个插件时不 会发成中断；使用老版本的浏览器代码不会出现乱码的情况。 会发成中断；使用老版本的浏览器代码不会出现乱码的情况。
JavaScript 概述 HTML文档 JavaScript 语言基础 JavaScript 基本语句 函数 对象编程
Ajax技术
CSS+DIV技 术
浏览器对象
事件处理
了解 JavaScript
HTML文档基 础
关键字和标 识符
数据类型、变 量、常量、运 算符等
条件语句、 循环语句和 跳转语句等
了解函数
第9章 CSS+DIV技术
【学习目标】 学习目标】 制作网页时采用CSS技术 可以有效地对页面的布局、字体、颜色、 制作网页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的 CSS技术， 控制。只要对相应的代码做一些简单的修改，就可以改变整个页面的风格。通过本章的学习， 控制。只要对相应的代码做一些简单的修改，就可以改变整个页面的风格。通过本章的学习，读者可 以达到以下学习目的： 以达到以下学习目的： 了解什么是 什么是CSS ● 了解什么是CSS ● 掌握样式的定义及使用 掌握Style Style对象 ● 掌握Style对象 掌握CSS CSS属性 ● 掌握CSS属性 学会使用CSS+DIV CSS+DIV美化与布局页面 ● 学会使用CSS+DIV美化与布局页面
Tag.Classname{property:value}
例如，让一部分而不是全部 的颜色是红色 可以使用以下代码： 的颜色是红色， 例如，让一部分而不是全部H1的颜色是红色，可以使用以下代码：
<style> H1.redone{color:red} </style> <h1 class=redone>吉林省明日科技有限责任公司<h1> This is H1.