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