CSS样式代码基础教程解析.ppt

CSS样式代码基础教程解析.ppt

ID:55827752

大小:850.50 KB

页数:51页

时间:2020-06-09

CSS样式代码基础教程解析.ppt_第1页
CSS样式代码基础教程解析.ppt_第2页
CSS样式代码基础教程解析.ppt_第3页
CSS样式代码基础教程解析.ppt_第4页
CSS样式代码基础教程解析.ppt_第5页
资源描述:

《CSS样式代码基础教程解析.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、CSS样式表CSS技术是一种格式化网页的标准方式,它通过设置CSS属性使网页元素获得各种不同效果。本节共分9个实例,主要内容包括的基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容。本章主要的内容包括以下内容:1.1样式表基础实例1-1样式表简介实例1-2样式表的规则实例1-3样式表中的选择器1.2样式表的引用实例1-4导入CSS文件1.1样式表基础实例1-1样式表简介一、要求与目的:掌握什么是样式表掌握样式表的分类会简单设计内联样式表和嵌入样式表会建立外部样式表二、过程与步骤:1.通过依次单击任务栏上的【开始】→【程序】→

2、【附件】→【记事本】菜单命令打开记事本。2.在记事本的编辑面板中输入以下代码,创建了使用样式的页面css1.htm:样式表举例这段文字将显示为红色

3、r:yellow;">这段文字的背景色为黄色

这段文字将以黑体显示

今天学习样式表的相关知识。

3.将文件保存到确定目录下,文件名为css1.htm。4.运行结果见图1-1所示。图1-1样式表示例三、涵盖知识点:1.什么是CSSCSS(CascadingStyleSheet,层叠样式表)技术上一种格式化网页的标准方式,它扩展了HTML的功能,使网页设计者能够以更有

4、效的方式设置网页格式。上面所举的例子只是层叠样式表中的一种应用。从中也可以看出层叠样式表最大的优点就在于把内容和格式分离开来,使得能够用一种统一的方式来管理各种不同的显示格式。层叠样式表把内容和格式分离开来,使得能够用一种统一的方式来管理各种不同的显示格式。层叠样式表因为是较晚才提出的一个标准,所以只有4.0及其更高版本的IE浏览器才对CSS有较好的支持。2.CSS的优先级层叠样式表中“层叠”的意思是指在同一个HTML文档中可以有多层样式表存在,不同层次的样式表根据其所在的位置拥有不同的优先级,优先级越高,在显示时就被越后采用。换句话说,一个网页对象(文本、图

5、片或者表格等)可以被多层的样式表所修饰,但是最终它会以优先级最高的样式表所定义的格式来显示。3.CSS的分类一般情况下,层叠样式表可以分为三种:内联式样式表、嵌入式样式表和外部样式表。下面我们就分别来看看这三种样式表。内联式样式表嵌入样式表外部样式表内联式样式表内联式样式表是在现有HTML元素的基础上,用style属性把特殊的样式直接加入到那些控制信息的标记中,比如下面的例子:内联式样式表

这种样式表只会对使用它的元素起作用,而不会影响HTML文档中的其他元素。也正因为如此,内联式样式表通常用在需要

6、特殊格式的某个网页对象上。本案例就一个应用内联式样式表的一个网页实例,在这个实例中,各段文字都定义了自己的内联式样式表:这段文字将显示为红色

这段文字的背景色为黄色

这段文字将以黑体显示

这段代码中的第一个P元素中的样式表将文字用华文彩云显示。还有一个特殊的地方是第二个P元素中还嵌套了元素,从

7、图中可以看见元素中的文字同样使用了P元素中的样式。这种性质通常称为继承性,也就是说子元素会继承父元素的样式。在浏览器中如图1-1所示。嵌入样式表嵌入式样式表通常包含在HTML,文档的头部,即HEAD元素中,并且有一个专门的元素style来标记这种样式表。它的书写格式通常为: