1_CSS基础知识.ppt

1、CSS基础知识,本章内容,CSS简介 CSS基本规则 CSS的属性和值 CSS选择符的类型 在网页中引入CSS的方法 CSS的继承,2,CSS简介,CSS（Cascading Style Sheets）译为层叠样式表，是对HTML的补充。在当今的网页制作中，几乎所有漂亮的网页都用了CSS。有了CSS的控制，网页变得更加赏心悦目，生动活泼。打个比方，CSS好比网页的美容师。,3,CSS基本规则,CSS的基本规则由选择符（selector）和声明组成，而声明又由属性（property）和值（value）组成。 selector property: value ; 参数说明： selector -

2、选择符property : value - 样式表定义，属性和属性值之间用冒号(:)隔开，多个定义之间用分号(;)隔开，最后一条声明可以没有分号，但为了以后修改方便，一般也加上分号。,4,CSS的属性和值,字体属性：(font)大小 font-size: x-large;(特大) 常用字体font-family：Courier New“, Courier, monospace； font-size : 9px; /*文字大小*/ CSS背景样式：background-color:#F5E2EC; /*背景颜色*/,5,选择符的类型,HTML选择符：pcolor: blue; 类选择符：.blu

3、ecolor: blue; id选择符：#bluecolor: blue; 包含选择符： #menu bcolor:blue; demo1-1 群组选择符：h4,p,spancolor: blue;,6,（class）类选择符与id选择符的比较,定义方式： .bluecolor: blue; #bluecolor: blue; 。引用方式：class=blue；id=blue； 。功能上用法相同 。对于id和class而言，id的定义优先于class的定义。,7,选择符的类型,伪类选择符：demo1-2 a:linkcolor: green; a:hovercolor: yellow; a:a

4、ctivecolor: red; a:visitedcolor: gray; 通配选择符：*color: blue;,8,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 元素内部 嵌入式样式表(内部样式表) 位于 标签内部 外部样式表,9,网页中引入CSS的方法,内联样式 内联样式,10,网页中引入CSS的方法,嵌入式样式表 h1 color: green; font-family: 隶书; ,11,网页中引入CSS的方法,外部样式表 有关 ,12,网页中引入CSS的方法,link与import的区别 link属于HTML标签，而import完全是CSS提供的一种方式。link标签还可以做很

6、多其它的事情，import就只能加载CSS了。 当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而import引用的CSS会等到页面全部被下载完再被加载。 由于import是CSS2.1提出的所以老的浏览器不支持，import只有在IE5以上的才能识别，而link标签无此问题。,13,CSS的继承,所谓继承，就是父元素的规则也会适用于子元素。 比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色。,14,CSS的继承,因为CSS格式作用在包含在它的范围内的所有内容，CSS的继承是肯定存在的，但是由于在定义属性的时候可能会有重复的现象，所以内容在选择属性的时候就是个问题 但是CSS规定了一个原则：就近原则。,15,CSS的继承,在调用属性的时候，如果有重复定义，就会选择最近的属性 内联样式