《网页设计 第5章 CSS技术基础.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第5章CSS技术基础本章知识技能要点：CSS层叠样式表在网页制作中的作用CSS层叠样式表的基本类型如何在HTML文件中使用CSSCSS常用的属性及其取值CSS中的滤镜效果及其应用5.1CSS的基本概念5.1.1了解层叠样式表CSS（CascadingStyleSheets）是层叠样式表的简称。CSS是一系列格式设置规则，它们控制Web页面内容的外观。使用CSS设置页面格式时，请将内容与表现形式分开。页面内容（即HTML代码）驻留在HTML文件自身中，而用于定义代码表现形式的CSS规则驻留在另一个文件（外部样式表）或HTML文档的另一部分（通常为文件头部分）

2、中。使用CSS可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。CSS允许控制HTML无法独自控制的许多属性。例如，可以为选定的文本指定不同的字体大小和单位（像素、磅值等）。通过使用CSS以像素为单位设置字体大小，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。除设置文本格式外，还可以使用CSS控制Web页面中块级别元素的格式和定位。例如，可以设置块级元素的边距和边框、其他文本周围的浮动文本等。5.1CSS的基本概念CSS格式设置规则由两部分组成：选择器和声明。选择器是标识格式元素的术语（如P、H1、类名或ID），声明用

3、于定义元素样式。在下面的示例中，H1是选择器，介于花括号“{}”之间的所有内容都是声明：H1{font-size:16pixels;font-family:Helvetica;font-weight:bold;}声明由两部分组成：属性（如font-family）和值（如Helvetica）。上面的CSS规则为H1标签创建了一个特定的样式：链接到此样式的所有H1标签的文本都将是16个像素大小、Helvetica字体和粗体。5.1CSS的基本概念5.1.2层叠式样式表的类型CSS的每一条定义都有如下的形式:selector{property1:value1;p

4、roperty2:value2;...}其中：selector称为选择器，property:value是属性和属性的取值。选择器selector有三种类型:5.1CSS的基本概念5.1.2.1为某个具体标签定义样式是为HTML的标签定义样式,比如P,BODY,A等等。如：h1{background-color:#336699;color:red}在html文件中应用时的形式为：

大家好

显示的效果是“大家好”使用了背景颜色“#336699”和文字颜色“red”。5.1.2.2为一类标签定义样式又称为“class”类选择器。如定义样式：.text

5、{font-family:隶书;color:#ff00ff}，定义了类名为“text”的样式。在html文件中应用时的形式为：大家好

显示的效果是“大家好”使用了字体“隶书”和文字颜色“#ff00ff”。5.1.2.3为标签设定唯一可用的样式又称为“ID”选择器。如定义样式：#tdcolor{color:red}，定义了ID为“tdcolor”的样式。在html文件中应用时的形式为：大家好5.2在HTML文件中使用CSSCSS与HTML文件的结合使用有下述的三种方式。5.2.1将CSS放

6、在HTML文件的标签之间使用时，将CSS放在HTML文件的标签之间，并且以标签结束。例如：h1{font-size:12pt;color:red}h2{font-size:5pt;color:blue}例5-1：

网

7、页的第一级标题

网页的第二级标题5.2在HTML文件中使用CSS例5-1的运行效果5.2.2在body内的标签中实现在body内的标签中使用属性“style=…”来定义样式。例如：例5-2：网页的第一级标题

网页的第二级标题5.2在HT

8、ML文件中使用CSS例5-2的运行效果5.2.3在HTML文件调用