第四章样式表CSS.ppt

第四章 样式表CSS CSS技术是一种格式化网页的标准方式，它通过设置CSS属性债周页元素获得各种不同效果。本章共分9个实例，主要内容包括的基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容。 本章主要的内容包括以下内容: 4.1 样式表基础 实例4-1 样式表简介 实例4-2 样式表的规则 实例4-3样式表中的选择器 4.2 样式表的引用 实例4-4导入CSS文件 4.1 样式表基础 实例4-1 样式表简介 一、要求与目的： 掌握什么是样式表 掌握样式表的分类 会简单设计内联样式表和嵌入样式表 会建立外部样式表 二、过程与步骤： 1.通过依次单击任务栏上的【开始】→【程序】→【附件】→【记事本】菜单命令打开记事本。 2．在记事本的编辑面板中输入以下代码，创建了使用样式的页面css1.htm： html head title样式表举例/title style type=text/css !-- h1{ font-size: 36px; font-family: 隶书; font-weight: bold; color: #993366; } -- /style /head body p style=color:#ff0000这段文字将显示为红色/p p style=color:#000000; background-color:yellow;这段文字的背景色为I黄色/I/p p style= font-family: 华文彩云; font-size:24px这段文字将以黑体显示/p ph1 align=center今天学习样式表的相关知识。/h1/p /body /html 3．将文件保存到确定目录下，文件名为css1.htm。 4．运行结果见图4－1所示。 三、涵盖知识点： 1．什么是CSS CSS(Cascading Style Sheet,层叠样式表)技术上一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。 上面所举的例子只是层叠样式表中的一种应用。从中也可以看出层叠样式表最大的优点就在于把内容和格式分离开来，使得能够用一种统一的方式来管理各种不同的显示格式。层叠样式表 把内容和格式分离开来，使得能够用一种统一的方式来管理各种不同的显示格式。层叠样式表因为是较晚才提出的一个标准，所以只有4.0及其更高版本的IE浏览器才对CSS有较好的支持。 2．CSS的优先级 层叠样式表中“层叠”的意思是指在同一个HTML文档中可以有多层样式表存在，不同层次的样式表根据其所在的位置拥有不同的优先级，优先级越高，在显示时就被越后采用。换句话说，一个网页对象(文本、图片或者表格等)可以被多层的样式表所修饰，但是最终它会以优先级最高的样式表所定义的格式来显示。 3．CSS的分类 一般情况下，层叠样式表可以分为三种：内联式样式表、嵌入式样式表和外部样式表。下面我们就分别来看看这三种样式表。 ?内联式样式表 ?嵌入样式表 ?外部样式表 ?内联式样式表 内联式样式表是在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些控制信息的标记中，比如下面的例子： p style=color：#ff0000内联式样式表/p 这种样式表只会对使用它的元素起作用，而不会影响HTML文档中的其他元素。也正因为如此，内联式样式表通常用在需要特殊格式的某个网页对象上。本案例就一个应用内联式样式表的一个网页实例，在这个实例中，各段文字都定义了自己的内联式样式表： p style=color:#ff0000这段文字将显示为红色/p p style=color:#000000; background-color:yellow;这段文字的背景色为I黄色/I/p p style= font-family: 华文彩云; font-size:24px这段文字将以黑体显示/p 这段代码中的第一个P元素中的样式表将文字用华文彩云显示。还有一个特殊的地方是第二个P元素中还嵌套了I元素，从图中可以看见I元素中的文字同样使用了P元素中的样式。