1_CSS基础知识ppt课件.ppt

1、CSS基础知识,CSS+DIV布局系列课程,1,课程安排,第一天 第1节课 CSS基础知识 包括CSS基本规则、选择符的类型等介绍 第2节课 CSS样式属性(一) 文本属性 第3节课实战练习辅导,2,课程安排,第二天 第1节课 CSS样式属性(二) 列表属性 第2节课 CSS样式属性(三) 背景属性 第3节课实战练习辅导 第4节课实战练习辅导 第5节课 CSS+DIV布局简单介绍 第6节课 实例讲解(一) 有关菜单制作,3,课程安排,第三天 第1节课 实例讲解(二) 有关网页布局 第2节课实例讲解(三) 综合示例讲解 第3节课实例讲解(四) 综合示例讲解 第4节课完成综合练习辅导 第5节课 完

2、成综合练习辅导 第6节课 完成综合练习辅导,4,本章内容,CSS简介 CSS基本规则 CSS选择符的类型 在网页中运用CSS的方法,5,CSS简介,CSS（Cascading Style Sheets）译为层叠样式表，是对HTML的补充。在当今的网页制作中，几乎所有漂亮的网页都用了CSS。有了CSS的控制，网页变得更加赏心悦目，生动活泼。打个比方，CSS好比网页的美容师。 用CSS画的机器猫,6,CSS基本规则,CSS的基本规则由选择符（selector）和声明组成，而声明又由属性（property）和值（value）组成。 selector property: value 参数说明： sel

3、ector - 选择符property : value - 样式表定义，属性和属性值之间用冒号(:)隔开，多个定义之间用分号(;)隔开，最后一条声明可以没有分号，但为了以后修改方便，一般也加上分号。,7,选择符的类型,HTML选择符：pcolor: blue; 类选择符：.bluecolor: blue; id选择符：#bluecolor: blue; 包含选择符：相关网络资料 #menu bcolor:blue; demo1-1 群组选择符：h4,p,spancolor: blue;,8,选择符的类型,伪类选择符：demo1-2 a:linkcolor: green; a:hovercolo

4、r: yellow; a:activecolor: red; a:visitedcolor: gray; 通配选择符：*color: blue;,9,a:link color: #FF0000 /* unvisited link */ a:visited color: #00FF00 /* visited link */ a:focus color: #FFFFFF /* focused link */ a:hover color: #FF00FF /* mouse over link */ a:active color: #0000FF /* selected link */ 提示： 按照次

5、序定义规则很重要的：未点击(link)、已访问(visited)、焦点(focus)、鼠标停留(hover)、激活(active)（缩写为LVFHA）,网页中运用CSS的方法,内联样式 在 HTML 元素内部 嵌入式样式表(内部样式表) 位于 标签内部 外部样式表,10,网页中运用CSS的方法,内联样式 内联样式,11,网页中运用CSS的方法,嵌入式样式表 h1 color: green; font-family: 隶书; ,12,网页中运用CSS的方法,外部样式表 有关 ,13,网页中运用CSS的方法,link与import的区别 link属于HTML标签，而import完全是CSS提供的一

6、种方式。link标签还可以做很多其它的事情，import就只能加载CSS了。 当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而import引用的CSS会等到页面全部被下载完再被加载。 由于import是CSS2.1提出的所以老的浏览器不支持，import只有在IE5以上的才能识别，而link标签无此问题。,14,网页中运用CSS的方法,link与import的区别 当使用javascript控制DOM去改变样式的时候，只能使用link标签，因为import不是DOM可以控制的。 import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：,15,main.cssimport “sub1.css”;import “sub2.css”; sub1.css sub2.cssp color:red; .myclass color:bl