第三部分 CSS.docVIP

第三篇 CSS 一、教学目的： 通过本章学习，掌握以下内容： 了解CSS的概念、作用和特点； 掌握CSS的基本结构和使用规则； 熟悉CSS的文字和文本属性、背景属性、BOX属性； 掌握CSS元素的定位显示属性CSS滤镜CSS滤镜 第一讲 CSS基础 教学目的和要求：了解CSS的特点、优势、类型，掌握CSS的基本语法、CSS的设置方法。 重点：CSS的基本语法、CSS的设置方法 教学内容：1、CSS概念 2、CSS的使用 3、CSS使用的案例 一、CSS概念 1、定义 CSS是Cascading Style Sheet的缩写，译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。注意：CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持，有些效果需要更高版本的浏览器支持。……………….. 属性n：属性值n；} 2、CSS选择符的使用 CSS选择符的使用有四种情况： （1）单元素名作为选择符 元素名{样式规则} （2）CLASS（类）作为选择符 .class名称{样式规则} （3）ID(标识符)作为选择符 ＃ID号{样式规则} （4）元素组合作为选择符 元素名1，元素名2，…….元素名n{样式规则} 或 .class名称1，.class名称2，……. .class名称n{样式规则} 或 ＃ID号1，＃ID号2，……. ＃ID号n{样式规则} 例11-1: style.css文档 H1,H2{ font-family: arial; text-align:center; color:red;} .a,.b,.c{font-family: 隶书; color:yellow;} #1,#2{color:blue; font-family: 楷体;} #2{font-size=100pt;} .c{font-size=100pt;} html文档 html headtitlecss例子/title link rel=stylesheet href=style.css type=text/css /head body h1安徽工业职业技术学院/h1 h2欢迎你的光临！/h2p class=a信息工程系 p class=b 资源开发系 p class=c 机电系 p id=1css样式文件 p id=2 样式文件 /body/html 3、CSS的类型 自定义CSS类：将CSS样式应用于任何文本或文档的任何区域。 如： .bg {background-image:url(bg1.gif)} body class=”bg” .base { font-family: 黑体; font-size: 9px; color: #0000FF; } p class=base你好/p 重定义标签的CSS：针对某个HTML标签来定义CSS样式。 如：img { border: thick double; } CSS选择符（高级）：为特殊的组合标签定义CSS，常用ID号作为属性。 如：a:link {color: #000000;text-decoration: none;} 链接常态 a:visited {color: #FF0000;text-decoration: underline;} 访问过的链接 a:hover {color: #00CC00; text-decoration: underline;} 光标悬停 a:active {color: #CC0000;text-decoration: none;} 光标单击时 例11-2: HTML HEAD STYLE type=text/css A:link {font-family:arial;color:red; font-size:20pt;} A:visited{font-family:arial;color:blue;font-size:40pt;} A:hover{font-family:arial; color:green; font-size:80pt;} A:active{font-family:arial;color:yellow; font-size60pt;} /STYLE /HEAD BODY a href=”11-1.html”常态链接/ap a href=”11-1.html”访问过的链接/ap a href=”11-1.html”光标悬停/ap a href=