第5章网页制作教程.pptVIP

第 5 章 CSS技术基础 本章知识技能要点： CSS层叠样式表在网页制作中的作用 CSS层叠样式表的基本类型 如何在HTML文件中使用CSS CSS常用的属性及其取值 CSS中的滤镜效果及其应用 5.1 CSS的基本概念 5.1.1 了解层叠样式表 CSS（Cascading Style Sheets）是层叠样式表的简称。 CSS是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，请将内容与表现形式分开。页面内容（即 HTML 代码）驻留在 HTML 文件自身中，而用于定义代码表现形式的 CSS 规则驻留在另一个文件（外部样式表）或 HTML 文档的另一部分（通常为文件头部分）中。使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。 CSS 允许控制 HTML 无法独自控制的许多属性。例如，可以为选定的文本指定不同的字体大小和单位（像素、磅值等）。通过使用 CSS 以像素为单位设置字体大小，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。 除设置文本格式外，还可以使用 CSS 控制 Web 页面中块级别元素的格式和定位。例如，可以设置块级元素的边距和边框、其他文本周围的浮动文本等。 5.1 CSS的基本概念 CSS 格式设置规则由两部分组成：选择器和声明。选择器是标识格式元素的术语（如 P、H1、类名或 ID），声明用于定义元素样式。在下面的示例中，H1 是选择器，介于花括号“{}”之间的所有内容都是声明： H1 { font-size:16 pixels; font-family:Helvetica; font-weight:bold; } 声明由两部分组成：属性（如 font-family）和值（如 Helvetica）。上面的 CSS 规则为 H1 标签创建了一个特定的样式：链接到此样式的所有 H1 标签的文本都将是 16 个像素大小、Helvetica 字体和粗体。 5.1 CSS的基本概念 5.1.2 层叠式样式表的类型 CSS 的每一条定义都有如下的形式: selector {property1:value1; property2:value2; ...} 其中：selector称为选择器，property:value是属性和属性的取值。 选择器selector有三种类型: 5.1 CSS的基本概念 5.1.2.1 为某个具体标签定义样式 是为HTML 的标签定义样式, 比如 P, BODY, A 等等。如： h1{ background-color:#336699; color:red } 在html文件中应用时的形式为： h1大家好h1 显示的效果是“大家好”使用了背景颜色“#336699”和文字颜色“red”。 5.1.2.2 为一类标签定义样式 又称为“class”类选择器。如定义样式： .text{ font-family:隶书; color:#ff00ff }，定义了类名为“text”的样式。 在html文件中应用时的形式为：p class=text大家好/p 显示的效果是“大家好”使用了字体“隶书”和文字颜色“#ff00ff”。 5.1.2.3 为标签设定唯一可用的样式 又称为“ID”选择器。如定义样式： #tdcolor{ color:red }，定义了ID为“tdcolor”的样式。 在html文件中应用时的形式为：td id=tdcolor大家好/td 5.2 在HTML文件中使用CSS CSS与HTML文件的结合使用有下述的三种方式。 5.2.1 将CSS放在HTML文件的标签head/head之间 使用时，将CSS放在HTML文件的标签head/head之间，并且以标签style开始，以/style结束。例如： style type=text/css h1{font-size:12pt;color:red} h2{font-size:5pt;color:blue} /style 5.2 在HTML文件中使用CSS 例5-1： html head style h1{font-size:20pt;color:red} h2{font-size:10pt;color:blue} /style /head body h1网页的第一级标题/h1 h2网页的第二级标题/h /body /html 5.2 在HTML文件中使用CSS 5.2.2 在body内的标签中实现 在body内的标签中使用属性“style=…”来定义样式。例如： h3 style=font-size:10pt; color:red 例5-