CSS样式代码基础教程 ppt课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<p style="color：#ff0000">内联式样式表</p>
这种样式表只会对使用它的元素起作用，而不会影响 HTML文档中的其他元素。也正因为如此，内联式样式表 通常用在需要特殊格式的某个网页对象上。本案例就一个 应用内联式样式表的一个网页实例，在这个实例中，各段 文字都定义了自己的内联式样式表：
3．CSS的分类
一般情况下，层叠样式表可以分为三种：内联式样 式表、嵌入式样式表和外部样式表。下面我们就分别来看 看这三种样式表。
内联式样式表 嵌入样式表 外部样式表
❖内联式样式表
内联式样式表是在现有HTML元素的基础上，用style属 性把特殊的样式直接加入到那些控制信息的标记中，比如 下面的例子：
2．组合规则 在定义样式的时候，有很多不同的元素需要使用相同
的样式。此时没有必要逐一定义样式规则，可以将他们组 合，并用分号将各个声明隔开即可。如：
h1,h2,p{ font-family:楷体_gb2312;text-align:center } 这样定义之后，在页面中所有使用h1、h2和p的对象
h2 b{ color:#0000FF}/*具有上下文关系的html标记选择器*/
.water{ font-family:"隶书"; font-size:24px; text-align:right}/*类 选择器*/
h3.hello{ font-family:"隶书"; text-align:center; font-size:36px}/* 指定的类选择器*/
<p style="color:#ff0000">这段文字将显示为红色</p>
<p style="color:#000000; background-color:yellow;">这 段文字的背景色为<I>黄色</I></p>
<p style=" font-family: '华文彩云'; font-size:24px">这段 文字将以黑体显示</p>
另外，在STYLE元素中还添加了HTML的注释符"<!-"和"-->"，这么做的好处是为了避免老版本的浏览器在网 页上将这些样式以文字方式显示出来。
嵌入式样式表首先可以为某个HTML标记定义样式， 定义好之后，整个网页中所有的这个标记都会采用这种样 式来显示其中的网页对象。比如本例中对H1元素定义了嵌 入式样式，所以网页中凡是包含在H1元素中的文字都将使 用所定义的样式显示，如图4－1所示。
CSS技术是一种格式化网页的标准方式， 它通过设置CSS属性使网页元素获得各种不同 效果。本节共分9个实例，主要内容包括的基 础知识、CSS创建与导入、CSS的语法结构、 常用CSS的分类、CSS的使用原则等内容。
本章主要的内容包括以下内容:
1.1 样式表基础 实例1-1 样式表简介 实例1-2 样式表的规则 实例1-3样式表中的选择器 1.2 样式表的引用 实例1-4导入CSS文件
定义样式的方式为：
selector{property1:vaIue1;property2:value2;……} 其中，selector表示样式作用的对象（选择器）
property和value则表示相应CSS属性和值。每一对属性和 值用“分号”隔开。
如：h1{font-family:楷体_gb2312;text-align:center}，其 中h1是选择器，font- family:楷体_gb2312;text-align:center” 是声明。在声明中，font-family和text-align是属性，楷体 _gb2312和center是相应的属性值。
二、过程与步骤： 1．通过依次单击任务栏上的【开始】→【程序】→【附 件】→【记事本】菜单命令打开记事本。
2．在记事本的编辑面板中输入以下代码，创建了使用样式 的页面css2.htm：
<html> <head><title>在标记符中直接嵌套样式信息</title>
<style>
<!--
p{font-size:24px;text-align:center} h1{font-family:楷体_gb2312;text-align:center)
这段代码中的第一个P元素中的样式表将文字用华文 彩云显示。还有一个特殊的地方是第二个P元素中还嵌套 了<I>元素，从图中可以看见<I>元素中的文字同样使用了 P元素中的样式。这种性质通常称为继承性，也就是说子 元素会继承父元素的样式。
在浏览器中如图1－1所示。
❖嵌入样式表
嵌入式样式表通常包含在HTML，文档的头部，即 HEAD元素中，并且有一个专门的元素style来标记这种样 式表。它的书写格式通常为：
-->
</style> </head> <body> <h1>一代人</h1> <p>黑夜给了我黑色的眼睛<br>我却用它寻找光明</p> </body> </html> 3．将文件保存为css2.htm。
运行结果如图1－2所示。
图1－2 css的规则示例
三、涵盖知识点：
1．样式规则
在html标记符中直接指定样式信息显然没有发挥出样 式表的主要优势——简化格式设置和维护工作，因为每一 个style属性都必须单独设置。如果能将相类似的样式都统 一定义了。然后再具体应用于网页中的元素，那么就能体 现出CSS的优越性了。实际上，这正是CSS应用于网页的 最常用方式，即在HEAD标记符内使用STYLE标记符，然 后在STYLE标记符中定义样式
1.1 样式表基础
实例1-1 样式表简介 一、要求与目的：
➢掌握什么是样式表 ➢掌握样式表的分类 ➢会简单设计内联样式表和嵌入样式表 ➢会建立外部样式表
二、过程与步骤：
1.通过依次单击任务栏上的【开始】→【程序】→【附件】 →【记事本】菜单命令打开记事本。
2．在记事本的编辑面板中输入以下代码，创建了使用样式 的页面css1.htm： <html> <head> <title>样式表举例</title> <style type="text/css">
</body> </html> 3．将文件保存为css3.htm。
4．运行结果见图1－3所示。
图1－3 CSS选择器的综合使用
三、涵盖知识点：
1．HTML标记符选择器 HTML标记符是最典型的选择器类型，网页设计者可
以为某个或某些具体的HTML元素应用样式定义。对于不 同的标记符选择器，我们可以采用编组的方式简化样式定 义(对于其他选择器，也可以用类似的编组方法)。前面的 实例已有介绍。此例中的标记选择器是<h1>标记，即：
<style type="text/css">
<!--
p{color:red;font-weight:bold}
</style>
在这个格式中，style元素的type属性必须设为 "text/css"，表示这定义的是一个层叠样式表。这样一来， 当不支持层叠样式表的浏览器读到这个属性时，会自动忽 略这个样式表。
链接外部样式表在style标记符中定义样式对于单独网页的格式设置和维护很有效但如果在一个大网站中为每个页面都定义类似的样式显然叉是效率不高的这时最好的办法就是将重复在多个网页中使用的样式放在外部样式文件中不具有重复使用特点的样式仍旧放在单独网页的style标记符中然后通过链接的方式引用其中的样式
CSS样式表
#danger{ color:#990000; font-family:"华文彩云"; fontsize:24px}/*ID选择器*/
/*以下是虚类的定义*/
a:link{ color:red}/*未访问的链接*/
a:visited{ color:blue}/*已访问的链接*/ a:active{ color:yellow}/*活动链接*/ a:hover{ color:#990000; text-decoration:underline }/*鼠标指针
<!-h1{
font-size: 36px; font-family: "隶书"; font-weight: bold; color: #993366; } --> </style> </head> <body>
<p style="来自olor:#ff0000">这段文字将显示为红色</p>
<p style="color:#000000; backgroundcolor:yellow;">这段文字的背景色为<I>黄色 </I></p> <p style=" font-family: '华文彩云'; font-size:24px"> 这段文字将以黑体显示</p> <p><h1 align="center">今天学习样式表的相关知 识。</h1></p>
</body>
</html>
3．将文件保存到确定目录下，文件名为css1.htm。 4．运行结果见图1－1所示。
图1－1样式表示例
三、涵盖知识点：
1．什么是CSS CSS(Cascading Style Sheet,层叠样式表)技术上一种格
式化网页的标准方式，它扩展了HTML的功能，使网页设 计者能够以更有效的方式设置网页格式。
都具有相同的显示方式。
实例1-3样式表中的选择器
一、要求与目的：
➢熟悉样式表定义规则 ➢掌握五种选择器 ➢能灵活使用各种样式来设计网页
二、过程与步骤： 1．通过依次单击任务栏上的【开始】→【程序】→【附
件】→【记事本】菜单命令打开记事本 2．在记事本的编辑面板中输入以下代码，创建了综合了
五种选择器的页面css3.htm：
精品资料
第四章 样式表CSS
• 你怎么称呼老师？ • 如果老师最后没有总结一节课的重点的难点，你
是否会认为老师的教学方法需要改进？ • 你所经历的课堂，是讲座式还是讨论式？ • 教师的教鞭 • “不怕太阳晒，也不怕那风雨狂，只怕先生骂我
笨，没有学问无颜见爹娘 ……” • “太阳当空照，花儿对我笑，小鸟说早早早……”
移到上面链接的颜色*/
--></style>
</head>
<body> <h1>标题1的使用。</h1> <b>测试上下选择器（没有上下文）</b><br> <h2><b>测试上下选择器（具有上下文）</b></h2>
<p class="water">这是黄河的水</p> <p class="hello">这句话没有使用类“hello”的效果。</p> <h3 class="hello">这句话才使用了类“hello”的效果。</h3> <p id="danger">这里危险。</p> <a href="css2.htm">测试链接的颜色，使用了虚类，实际做的过程中读 者自行体会。</a>
2．CSS的优先级
层叠样式表中“层叠”的意思是指在同一个HTML文 档中可以有多层样式表存在，不同层次的样式表根据其所 在的位置拥有不同的优先级，优先级越高，在显示时就被 越后采用。换句话说，一个网页对象(文本、图片或者表 格等)可以被多层的样式表所修饰，但是最终它会以优先 级最高的样式表所定义的格式来显示。
❖外部样式表
外部式样式表是指将样式表作为一个独立的文件保存 在计算机上，这个文件以“.css”作为文件的扩展名。样式 在样式表文件中定义和在嵌入式样式表中的定义是一样的， 只是不再需要style元素，比如要将本例中的嵌入式样式定 义到一个样式表文件mystyle.css中，这个样式表文件的内 容应该为嵌入式样式表中的所有样式，如下所示：
<html> <head> <title>选择器举例</title> <style type="text/css"> <!-h1{ font-size: 36px; font-family: "隶书"; font-weight: bold; color: #993366;
}/*html标记选择器*/
h1{ font-size: 36px; font-family: "隶书"; font-weight: bold; color: #993366;
}
提示：在定义嵌入样式表时，<style>标记必须放在<head>和 </head>标记之间。
实例1-2 样式表的规则
一、要求与目的：
➢掌握样式表定义规则 ➢掌握规则组合
上面所举的例子只是层叠样式表中的一种应用。从中 也可以看出层叠样式表最大的优点就在于把内容和格式分 离开来，使得能够用一种统一的方式来管理各种不同的显 示格式。层叠样式表
把内容和格式分离开来，使得能够用一种统一的方式来管 理各种不同的显示格式。层叠样式表因为是较晚才提出的 一个标准，所以只有4.0及其更高版本的IE浏览器才对CSS 有较好的支持。
这种样式表只会对使用它的元素起作用，而不会影响 HTML文档中的其他元素。也正因为如此，内联式样式表 通常用在需要特殊格式的某个网页对象上。本案例就一个 应用内联式样式表的一个网页实例，在这个实例中，各段 文字都定义了自己的内联式样式表：
3．CSS的分类
一般情况下，层叠样式表可以分为三种：内联式样 式表、嵌入式样式表和外部样式表。下面我们就分别来看 看这三种样式表。
内联式样式表 嵌入样式表 外部样式表
❖内联式样式表
内联式样式表是在现有HTML元素的基础上，用style属 性把特殊的样式直接加入到那些控制信息的标记中，比如 下面的例子：
2．组合规则 在定义样式的时候，有很多不同的元素需要使用相同
的样式。此时没有必要逐一定义样式规则，可以将他们组 合，并用分号将各个声明隔开即可。如：
h1,h2,p{ font-family:楷体_gb2312;text-align:center } 这样定义之后，在页面中所有使用h1、h2和p的对象
h2 b{ color:#0000FF}/*具有上下文关系的html标记选择器*/
.water{ font-family:"隶书"; font-size:24px; text-align:right}/*类 选择器*/
h3.hello{ font-family:"隶书"; text-align:center; font-size:36px}/* 指定的类选择器*/
<p style="color:#ff0000">这段文字将显示为红色</p>
<p style="color:#000000; background-color:yellow;">这 段文字的背景色为<I>黄色</I></p>
<p style=" font-family: '华文彩云'; font-size:24px">这段 文字将以黑体显示</p>
另外，在STYLE元素中还添加了HTML的注释符"<!-"和"-->"，这么做的好处是为了避免老版本的浏览器在网 页上将这些样式以文字方式显示出来。
嵌入式样式表首先可以为某个HTML标记定义样式， 定义好之后，整个网页中所有的这个标记都会采用这种样 式来显示其中的网页对象。比如本例中对H1元素定义了嵌 入式样式，所以网页中凡是包含在H1元素中的文字都将使 用所定义的样式显示，如图4－1所示。
CSS技术是一种格式化网页的标准方式， 它通过设置CSS属性使网页元素获得各种不同 效果。本节共分9个实例，主要内容包括的基 础知识、CSS创建与导入、CSS的语法结构、 常用CSS的分类、CSS的使用原则等内容。
本章主要的内容包括以下内容:
1.1 样式表基础 实例1-1 样式表简介 实例1-2 样式表的规则 实例1-3样式表中的选择器 1.2 样式表的引用 实例1-4导入CSS文件
定义样式的方式为：
selector{property1:vaIue1;property2:value2;……} 其中，selector表示样式作用的对象（选择器）
property和value则表示相应CSS属性和值。每一对属性和 值用“分号”隔开。
如：h1{font-family:楷体_gb2312;text-align:center}，其 中h1是选择器，font- family:楷体_gb2312;text-align:center” 是声明。在声明中，font-family和text-align是属性，楷体 _gb2312和center是相应的属性值。
二、过程与步骤： 1．通过依次单击任务栏上的【开始】→【程序】→【附 件】→【记事本】菜单命令打开记事本。
2．在记事本的编辑面板中输入以下代码，创建了使用样式 的页面css2.htm：
<html> <head><title>在标记符中直接嵌套样式信息</title>
<style>
<!--
p{font-size:24px;text-align:center} h1{font-family:楷体_gb2312;text-align:center)
这段代码中的第一个P元素中的样式表将文字用华文 彩云显示。还有一个特殊的地方是第二个P元素中还嵌套 了<I>元素，从图中可以看见<I>元素中的文字同样使用了 P元素中的样式。这种性质通常称为继承性，也就是说子 元素会继承父元素的样式。
在浏览器中如图1－1所示。
❖嵌入样式表
嵌入式样式表通常包含在HTML，文档的头部，即 HEAD元素中，并且有一个专门的元素style来标记这种样 式表。它的书写格式通常为：
-->
</style> </head> <body> <h1>一代人</h1> <p>黑夜给了我黑色的眼睛<br>我却用它寻找光明</p> </body> </html> 3．将文件保存为css2.htm。
运行结果如图1－2所示。
图1－2 css的规则示例
三、涵盖知识点：
1．样式规则
在html标记符中直接指定样式信息显然没有发挥出样 式表的主要优势——简化格式设置和维护工作，因为每一 个style属性都必须单独设置。如果能将相类似的样式都统 一定义了。然后再具体应用于网页中的元素，那么就能体 现出CSS的优越性了。实际上，这正是CSS应用于网页的 最常用方式，即在HEAD标记符内使用STYLE标记符，然 后在STYLE标记符中定义样式
1.1 样式表基础
实例1-1 样式表简介 一、要求与目的：
➢掌握什么是样式表 ➢掌握样式表的分类 ➢会简单设计内联样式表和嵌入样式表 ➢会建立外部样式表
二、过程与步骤：
1.通过依次单击任务栏上的【开始】→【程序】→【附件】 →【记事本】菜单命令打开记事本。
2．在记事本的编辑面板中输入以下代码，创建了使用样式 的页面css1.htm： <html> <head> <title>样式表举例</title> <style type="text/css">
</body> </html> 3．将文件保存为css3.htm。
4．运行结果见图1－3所示。
图1－3 CSS选择器的综合使用
三、涵盖知识点：
1．HTML标记符选择器 HTML标记符是最典型的选择器类型，网页设计者可
以为某个或某些具体的HTML元素应用样式定义。对于不 同的标记符选择器，我们可以采用编组的方式简化样式定 义(对于其他选择器，也可以用类似的编组方法)。前面的 实例已有介绍。此例中的标记选择器是<h1>标记，即：
<style type="text/css">
<!--
p{color:red;font-weight:bold}
</style>
在这个格式中，style元素的type属性必须设为 "text/css"，表示这定义的是一个层叠样式表。这样一来， 当不支持层叠样式表的浏览器读到这个属性时，会自动忽 略这个样式表。
链接外部样式表在style标记符中定义样式对于单独网页的格式设置和维护很有效但如果在一个大网站中为每个页面都定义类似的样式显然叉是效率不高的这时最好的办法就是将重复在多个网页中使用的样式放在外部样式文件中不具有重复使用特点的样式仍旧放在单独网页的style标记符中然后通过链接的方式引用其中的样式
CSS样式表
#danger{ color:#990000; font-family:"华文彩云"; fontsize:24px}/*ID选择器*/
/*以下是虚类的定义*/
a:link{ color:red}/*未访问的链接*/
a:visited{ color:blue}/*已访问的链接*/ a:active{ color:yellow}/*活动链接*/ a:hover{ color:#990000; text-decoration:underline }/*鼠标指针
<!-h1{
font-size: 36px; font-family: "隶书"; font-weight: bold; color: #993366; } --> </style> </head> <body>
<p style="来自olor:#ff0000">这段文字将显示为红色</p>
<p style="color:#000000; backgroundcolor:yellow;">这段文字的背景色为<I>黄色 </I></p> <p style=" font-family: '华文彩云'; font-size:24px"> 这段文字将以黑体显示</p> <p><h1 align="center">今天学习样式表的相关知 识。</h1></p>
</body>
</html>
3．将文件保存到确定目录下，文件名为css1.htm。 4．运行结果见图1－1所示。
图1－1样式表示例
三、涵盖知识点：
1．什么是CSS CSS(Cascading Style Sheet,层叠样式表)技术上一种格
式化网页的标准方式，它扩展了HTML的功能，使网页设 计者能够以更有效的方式设置网页格式。
都具有相同的显示方式。
实例1-3样式表中的选择器
一、要求与目的：
➢熟悉样式表定义规则 ➢掌握五种选择器 ➢能灵活使用各种样式来设计网页
二、过程与步骤： 1．通过依次单击任务栏上的【开始】→【程序】→【附
件】→【记事本】菜单命令打开记事本 2．在记事本的编辑面板中输入以下代码，创建了综合了
五种选择器的页面css3.htm：
精品资料
第四章 样式表CSS
• 你怎么称呼老师？ • 如果老师最后没有总结一节课的重点的难点，你
是否会认为老师的教学方法需要改进？ • 你所经历的课堂，是讲座式还是讨论式？ • 教师的教鞭 • “不怕太阳晒，也不怕那风雨狂，只怕先生骂我
笨，没有学问无颜见爹娘 ……” • “太阳当空照，花儿对我笑，小鸟说早早早……”
移到上面链接的颜色*/
--></style>
</head>
<body> <h1>标题1的使用。</h1> <b>测试上下选择器（没有上下文）</b><br> <h2><b>测试上下选择器（具有上下文）</b></h2>
<p class="water">这是黄河的水</p> <p class="hello">这句话没有使用类“hello”的效果。</p> <h3 class="hello">这句话才使用了类“hello”的效果。</h3> <p id="danger">这里危险。</p> <a href="css2.htm">测试链接的颜色，使用了虚类，实际做的过程中读 者自行体会。</a>
2．CSS的优先级
层叠样式表中“层叠”的意思是指在同一个HTML文 档中可以有多层样式表存在，不同层次的样式表根据其所 在的位置拥有不同的优先级，优先级越高，在显示时就被 越后采用。换句话说，一个网页对象(文本、图片或者表 格等)可以被多层的样式表所修饰，但是最终它会以优先 级最高的样式表所定义的格式来显示。
❖外部样式表
外部式样式表是指将样式表作为一个独立的文件保存 在计算机上，这个文件以“.css”作为文件的扩展名。样式 在样式表文件中定义和在嵌入式样式表中的定义是一样的， 只是不再需要style元素，比如要将本例中的嵌入式样式定 义到一个样式表文件mystyle.css中，这个样式表文件的内 容应该为嵌入式样式表中的所有样式，如下所示：
<html> <head> <title>选择器举例</title> <style type="text/css"> <!-h1{ font-size: 36px; font-family: "隶书"; font-weight: bold; color: #993366;
}/*html标记选择器*/
h1{ font-size: 36px; font-family: "隶书"; font-weight: bold; color: #993366;
}
提示：在定义嵌入样式表时，<style>标记必须放在<head>和 </head>标记之间。
实例1-2 样式表的规则
一、要求与目的：
➢掌握样式表定义规则 ➢掌握规则组合
上面所举的例子只是层叠样式表中的一种应用。从中 也可以看出层叠样式表最大的优点就在于把内容和格式分 离开来，使得能够用一种统一的方式来管理各种不同的显 示格式。层叠样式表
把内容和格式分离开来，使得能够用一种统一的方式来管 理各种不同的显示格式。层叠样式表因为是较晚才提出的 一个标准，所以只有4.0及其更高版本的IE浏览器才对CSS 有较好的支持。