《第三部分CSS(精品)》由会员分享，可在线阅读，更多相关《第三部分CSS(精品)（24页珍藏版）》请在金锄头文库上搜索。
1、第三篇 CSS一、教学目的：通过本章学习，掌握以下内容：1、 了解CSS的概念、作用和特点；2、 掌握CSS的基本结构和使用规则；3、 熟悉CSS的文字和文本属性、背景属性、BOX属性；4、 掌握CSS元素的定位和显示属性；5、 学会使用CSS滤镜。二、重点：CSS的基本结构和使用规则， CSS的文字和文本属性、背景属性、BOX属性。三、难点：CSS滤镜。四、教学内容：第一讲 CSS基础教学目的和要求：了解CSS的特点、优势、类型，掌握CSS的基本语法、CSS的设置方法。重点：CSS的基本语法、CSS的设置方法教学内容：1、CSS概念 2、CSS的使用 3、CSS使用的案例一、CSS概念1、定
2、义CSS是Cascading Style Sheet的缩写，译为“层叠样式表”，简称“样式表”，它是一种制作网页的新技术。样式表用来设置网页格式，即美化页面，并对页面元素进行精确定位，“层叠”是指当页面中定义的多个样式表样式发生冲突时，按层叠顺序进行处理。1996年12月17日，W3C推出了CSS1。1998年5月12日，W3C推出了CSS2。2、作用（1） CSS可以定义网页的多种样式，美化网页，如文字的大小颜色、段落格式、排版定位、对象位置、图片特效、鼠标指针样式等；（2） 样式与文档分离，通过修改样式表，实现页面格式的自动更新；（3） CSS可以独立于网页文件，从而实现网站页面风格的批量
3、修改。3、CSS的特点（1）将格式和结构分离；（2）控制页面布局；（3）简化HTML文档标记；（4）网站页面格式批量处理；（5）浏览器兼容性很好。4、CSS的优点 （1）HTML文档更加简洁 （2）网页维护更加方便 （3）网站开发更具灵活性注意：CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持，有些效果需要更高版本的浏览器支持。二、CSS的使用1、CSS的基本结构CSS的基本结构由选择符和样式规则组成。选择符 属性1：属性值1； 属性2：属性值2； .属性n：属性值n；2、CSS选择符的使用CSS选择符的使用有四种情况：（1）单
4、元素名作为选择符元素名样式规则（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,.cfont-family: 隶书; color:yellow;#1,#2color:blue; font-family: 楷
5、体;#2font-size=100pt;.cfont-size=100pt; html文档 css例子安徽工业职业技术学院欢迎你的光临！信息工程系 资源开发系 机电系css样式文件 样式文件3、CSS的类型l 自定义CSS类：将CSS样式应用于任何文本或文档的任何区域。如： .bg background-image:url(bg1.gif) .base font-family: 黑体;font-size: 9px; color: #0000FF;你好l 重定义标签的CSS：针对某个HTML标签来定义CSS样式。如：img border: thick double;l CSS选择符（高级）：为特
6、殊的组合标签定义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: A:link font-family:arial;color:red; font-size:20pt; A:
7、visitedfont-family:arial;color:blue;font-size:40pt; A:hoverfont-family:arial; color:green; font-size:80pt; A:activefont-family:arial;color:yellow; font-size60pt;常态链接访问过的链接光标悬停光标单击时4、CSS的基本语法（样式文件的引用）l 在中定义CSS l 在BODY中的标记中直接定义CSS 你好 l 链接外部CSS样式 说明：样式表文件是一个纯文本文件，文件名为*.cssl 嵌入外部样式表 注意：import语句后面的“；”一定要
8、加上。5、CSS的冲突 层叠样式表的处理原则： （1）当两个不同的样式应用于同一段文本时，浏览器会显示所有的样式属性。如：一个样式定义字体为宋体，另一个样式定义颜色为红色，则这段文本显示为红色宋体，（2）如果两个样式发生冲突，则根据样式与文本的远近关系来选择样式。越近越优先。（3）产生直接冲突时，CSS样式比HTML定义的样式具有优先权。（4）当内部样式与外部样式冲突时，优先顺序是：内部样式、嵌入外部样式、链接外部样式。6、CSS的继承继承是指当某个元素没有定义某些属性时，它将具有它的上级元素所定义的相关属性和属性值。例11-3: css继承样式表的内容样式表的内容第2讲 CSS字体设置教学目
9、的和要求：掌握用CSS设置字体格式的方法。重点：CSS中属性值的单位教学内容：1、字体 2、字号 3、字体样式 4、字体重量 5、字体大小写一、CSS中的单位1、 长度单位：相对类型：em:相对当前字符的高度； px:像素绝对类型：in 英寸 cm 厘米 mm 毫米 pt 点数 pc 印刷单位2、百分比单位。二、字体属性：属性含义属性值font-family字体所有字体font-size字体大小absolute-size | relative-sizefont-style字体样式normal | italic | obliquefont-weight字体重量normal | bold | bo
10、lder | lighter | 100-900font-variant字体大小写normal | small-caps1、字体（字体族）语法： font-family:字体1，字体2，； P font-family:华文楷体,幼圆,华文细黑注：如英文字体中有空格，一定要在字体上加引号 font-family:Arial, Arial Black, Georgia, Times New Roman;例12-1:P font-family:华文楷体,幼圆,华文细黑2、字号语法：font-size: | ； absolute-size：绝对值单位 ，如pt(点)、in(英寸)、px(像素)、cm(厘米)、mm(毫米或大小关键字)等。 relative-size：相对值单位，使用%、em、ex、larger、smaller表示。例12-2:#pt font-size:30pt #xx-s font-size:xx-small #x-s font-size:x-small #s font-size:small #med font-size:medium #l font-size:large #x-l font-size:x-large #xx-l font-size:xx-large3、
