二、如何将样式表加入您的网页
如果在DreamWeaver中用 中用Styles来书写，以上一些代码会自动生成的。 来书写， 如果在 中用 来书写 以上一些代码会自动生成的。 这种方式的主要用处是，在一些方面统一样式的前提下， 这种方式的主要用处是，在一些方面统一样式的前提下，可针对具体页面 进行具体调整。这两种方式并不相排斥，而是相互结合。 进行具体调整。这两种方式并不相排斥，而是相互结合。 比如： 文件中定义了P标志的字体大小 比如：在CSS文件中定义了 标志的字体大小 文件中定义了 标志的字体大小font-size为10pt,而在内部文 为 而在内部文 档中可定义P标签字体颜色 标签字体颜色font-color为Red;而在另一个 而在另一个HTML文件头部 档中可定义 标签字体颜色 为 而在另一个 文件头部 中定义颜色为Green，你认为这两个 文件中的P标签的字体大小和 中定义颜色为 ，你认为这两个HTML文件中的 标签的字体大小和 文件中的 颜色是什么样的呢？动手做一下看看效果是什么样的。 颜色是什么样的呢？动手做一下看看效果是什么样的。 看到效果了吗？你能明白为什么风格样式表叫层叠样式表了吗？ 看到效果了吗？你能明白为什么风格样式表叫层叠样式表了吗？
二、如何将样式表加入您的网页
2.
内部文档头方式 (Embedding a Style Block)
这种方式与外部文件方式区别在于这种方式是将样式直接定义在文档头内部，而 不是形成文件。这种样式定义产生作用的范围也只局限于本HTML文件。 其格式如下： <Style Type="text/css"> <!-P{ font-family: '宋体 宋体'; 宋体 font-size: 9pt; color: blue; } H2{ font-family: '宋体 宋体'; 宋体 font-size: 13pt; color: red; } --> </style>
第六
1. 2. 3. 4. 5.
清晰理解样式表和HTML的关系。 掌握三种样式表的使用方法和实际中的应用。 掌握样式表的基本结构。 掌握网页中样式表的三种类型（类、标签、ID）的使用。 掌握CSS样式表的常用属性的使用。
课程重点和难点： 课程重点和难点：
.red { color: #FF0000; font-Family: Verdana; bgcolor: #CDCDCD; border-color: #00FF00; }
四、样式表的三种类型（类、标签、ID） 样式表的三种类型（ 标签、 ）
标签样式： 标签规则，重定义特定标签（ 标签样式：HTML 标签规则，重定义特定标签（如 P 或 H1）的格式。创 ）的格式。 规则时， 建或更改 P 或 H1 标签的 CSS 规则时，所有用 P或H1 标签包括着的文本 或 样式都会立即更新。 样式都会立即更新。 例如： 例如：
1. 2. 3. 4.
掌握三种样式表的使用方法和实际中的应用。 掌握网页中样式表的三种类型（类、标签、ID）的使用。 掌握CSS样式表的常用属性的使用。 在实际应用中能够灵活的应用CSS样式表控制网页内容显示。
一、什么是样式表
样式表（ 样式表（Style Sheets）技术延生于 ）技术延生于1996年，CSS是Cascading Style 年 是 Sheet 的缩写。译作「层叠样式表」。是用于（增强）控制网页样式并允 的缩写。译作「层叠样式表」。是用于（增强） 」。是用于 许将样式信息与网页内容分离的一种标记性语言。样式就是格式， 许将样式信息与网页内容分离的一种标记性语言。样式就是格式，对网页 来说，例如文字大小、颜色及图片位置等，都是网页信息显示的样式。 来说，例如文字大小、颜色及图片位置等，都是网页信息显示的样式。层 叠是当在HTML文件中引用多个定义样式文件（CSS文件）时，若多个样 文件中引用多个定义样式文件（ 文件） 叠是当在 文件中引用多个定义样式文件 文件 式文件中所定义的样式发生冲突，则将依据层次处理。 式文件中所定义的样式发生冲突，则将依据层次处理。 样式表CSS在网页中占着极重要的地位，它的使用一直是热门讨论的话题。 样式表CSS在网页中占着极重要的地位，它的使用一直是热门讨论的话题。 在网页中占着极重要的地位 CSS几乎可以定义所有的网页元素，CSS虽然功能强大，但平时我们用到 几乎可以定义所有的网页元素， 虽然功能强大， 几乎可以定义所有的网页元素 虽然功能强大 的是很少的，最常见的有：定义字体大小(用 的是很少的，最常见的有：定义字体大小 用CSS定义的字体大小不会因 定义的字体大小不会因 浏览器的字体设置而改变)、去掉超链下划线、超链接变颜色等等。 浏览器的字体设置而改变 、去掉超链下划线、超链接变颜色等等。
四、样式表的三种类型（类、标签、ID） 样式表的三种类型（ 标签、 ）
类样式： 规则， 类样式：自定义 CSS 规则，使您可以将样式属性应用到任何文本范围或 文本块。 开头。例如， 文本块。所有类样式均以句点 (.) 开头。例如，您可以创建称为 .red 的类 样式， 属性为红色，然后将该样式应用到一个P标签或 样式，设置规则的 color 属性为红色，然后将该样式应用到一个 标签或 一个H1标签上 标签上。 一个 标签上。 例如： 例如：
二、如何将样式表加入您的网页
你可以用以下三种方式将样式表加入您的网页。 你可以用以下三种方式将样式表加入您的网页。而最接近目标标签的样式 定义优先权越高。 定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖 重叠的定义。 重叠的定义。
1.
外部文件方式 (Linking to a Style Sheet)
三、样式表语法
样式表语法 (CSS Syntax) 格式
Selector { property: value; }
说明： 说明： Selector : 选择符 property : value -- 样式表属性的定义。属性和属性值之间用冒号 : 隔开。 样式表属性的定义。 隔开。 隔开。 每个定义之间用分号 ; 隔开。
这几种方式各有用途，在统一整个站点风格上，用第一种方式； 这几种方式各有用途，在统一整个站点风格上，用第一种方式；在整个页 面内的样式统一上，用第二种方式；而在页面内某个标签的具体微调上， 面内的样式统一上，用第二种方式；而在页面内某个标签的具体微调上， 第三种方式也有用武之地，所以各有千秋吧！前两种的目的： 第三种方式也有用武之地，所以各有千秋吧！前两种的目的：一是统一整 个网站、整个页面的样式，二是减少繁琐的标志属性设置， 个网站、整个页面的样式，二是减少繁琐的标志属性设置，真是功不可没 哟!
二、如何将样式表加入您的网页
如当前文件目录下有一CSS 文件名为myStyle.css，内容如下： P{ font-family: '宋体 宋体'; 宋体 font-size: 9pt; color: blue; } H2{ font-family: '宋体 宋体'; 宋体 font-size: 13pt; color: red; } 则在引用时，用下列语句: <Link Rel="StyleSheet" Href="myStyle.css" Type="text/css"> 如果你在DreamWeaver中用styles功能可直接连接(Link)一个CSS文件，这些语句 会自动生成。
先建立外部样式表文件（.css），然后使用HTML的link对象引入样式文件。 示例如下： <head> <title>title of article</title> <Link Rel="StyleSheet" Href="文件名 文件名.CSS" Type="text/css"> 文件名 </head>
五、CSS常用的属性 常用的属性
字体属性（ 字体属性（font-family） ） 语法： 语法： font-family : name; 参数： 参数： name : 字体名称。按使用优先顺序排列。以逗号隔开。如果字体名称包 字体名称。按使用优先顺序排列。以逗号隔开。 含空格或是中文名称，则应使用引号括起。 含空格或是中文名称，则应使用引号括起。 示例： 示例： p { font-family: “宋体”, "Courier New", Verdana; } 宋体” 宋体
二、如何将样式表加入您的网页
3.
直接插入式 (Inline Styles)
直接插入式很简单，只是在每个HTML标签中的Style属性中书写CSS属性就可以 了。这种方式很直接。 例如：想规定一个Table标志中的字为红色，字体大小为10pt，则可书写如下： <Table style=“color:red;font-size:10pt”> 这种方式主要用于对具体的标志做具体的调整,其作用的范围只限于本标签。
td { color: #FF0000; font-Family: Verdana; background-color: #CDCDCD; border-color: #00FF00; }
四、样式表的三种类型（类、标签、ID） 样式表的三种类型（ 标签、 ）
ID样式：CSS 选择器规则，重定义包含特定 ID 属性的标签的格式（例如， 样式： 选择器规则， 属性的标签的格式（例如， 样式 定义的样式可以应用到所有包含属性id=“myStyle” 的标 由 #myStyle 定义的样式可以应用到所有包含属性 签）。 例如把以下样式应用到一个文本框表单： 例如把以下样式应用到一个文本框表单：
五、CSS常用的属性 常用的属性
字体风格（ 字体风格（font-style） ） 语法： 语法： font-style : normal | italic | oblique 参数： 参数： normal : 正常的字体 italic : 斜体。对于没有斜体变量的特殊字体，将应用 斜体。对于没有斜体变量的特殊字体，将应用oblique oblique : 倾斜的字体 示例： 示例： p { font-style: normal; } p { font-style: italic; } p { font-style: oblique; }
