预览加载中，请您耐心等待几秒...

样式表CSS.ppt

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共55页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

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