网站设计与建设-第15章_层叠样式表CSS.pptVIP

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材 山东大学计算机科学与技术学院 《 网 站 设 计 与 建 设 》 《 网 站 设 计 与 建 设 》 普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材 山东大学计算机科学与技术学院 第15章 层叠样式表CSS * 介绍样式表的基本概念 CSS1 CSS2 介绍5种使用CSS的方法 概 述 * 1.样式表 是放置在网页HEAD部分的格式指令的集合 允许改变单一文件能改变整个网站的外观 通过改变样式表可以改变网站的外观 W3C Recommendation for HTML 3.2开始支持样式表 * 2.层叠样式表 在一个单一文件中使用多个样式定义 Cascading（层叠）指的是继承或者在链接的、导入的、内嵌的以及内联样式之间的等级关系。 在同一个文档中，区域样式(SPAN)格式定义优于样式表定义。 CSS可用在ptdfontbodyspan等标签里 * 3.CSS的一个简单实例 %@ page contentType=text/html; charset=gb2312 language=java import=java.sql.* errorPage= % html head meta http-equiv=Content-Type content=text/html; charset=gb2312 titleCSS的一个简单实例/title style type=text/css !-- a {text-decoration:none; /* 下划线：underline; none */ background:green; /* 背景色*/ color:blue; /* 前景色*/ corsur:hand; font-size:20pt} /* 字体大小*/ body {text-decoration:underline;background-color:#ddccff ; color:blue;font-weight:bold} -- /style /head body 使用CSS的一个简单实例。br /body /html * 4.CSS的区域样式优于CSS实例 html head meta http-equiv=Content-Type content=text/html; charset=gb2312 titleCSS的一个简单实例/title style type=text/css !-- a {text-decoration:none; /* 下划线：underline; none */ background:green; /* 背景色*/ color:blue; /* 前景色*/ corsur:hand; font-size:20pt} /* 字体大小*/ body {text-decoration:underline;background-color:#ddccff ; color:blue;font-weight:bold} -- /style /head body 使用CSS的一个简单实例。br span style=background-color:#ff0000;color:yellow; font-size:30pt这是一个使用CSS修饰文字的简单实例/span /body /html * 5.嵌入式样式 html head meta http-equiv=Content-Type content=text/html; charset=gb2312 titlelink css/title style type=text/css 　!-- body {color:green;text-decoration:none;font-size:15;font-family:黑体} 　　a:link{color:green;text-decoration:none} 　　a:visited{color:red;text-decoration:none} 　　a:hover{color:blue;text-decoration:underline;font-size:20pt} 　-- /style /head body 　 p style=font-family:隶书;font-size:18pt a href=未访问的链接/a/p 　 p a href=访问过的链接/a/p