1_css基础知识.ppt

《1_css基础知识.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

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

3、EC;/*背景颜色*/5选择符的类型HTML选择符：p{color:blue;}类选择符：.blue{color:blue;}id选择符：#blue{color:blue;}包含选择符：#menub{color:blue;}demo1-1群组选择符：h4,p,span{color:blue;}6（class）类选择符与id选择符的比较定义方式：.blue{color:blue;}#blue{color:blue;}。引用方式：class=blue；id=blue；。功能上用法相同。对于id和class而言，i

4、d的定义优先于class的定义。7选择符的类型伪类选择符：demo1-2a:link{color:green;}a:hover{color:yellow;}a:active{color:red;}a:visited{color:gray;}通配选择符：*{color:blue;}8a:link{color:#FF0000}/*unvisitedlink*/a:visited{color:#00FF00}/*visitedlink*/a:focus{color:#FFFFFF}/*focusedlink*/a:

5、hover{color:#FF00FF}/*mouseoverlink*/a:active{color:#0000FF}/*selectedlink*/提示：按照次序定义规则很重要的：未点击(link)、已访问(visited)、焦点(focus)、鼠标停留(hover)、激活(active)（缩写为LVFHA）网页中引入CSS的方法内联样式在HTML元素内部嵌入式样式表(内部样式表)位于标签内部外部样式表9网页中引入CSS的方法内联样式

6、mily:微软雅黑”>内联样式10网页中引入CSS的方法嵌入式样式表h1{color:green;font-family:隶书;}11网页中引入CSS的方法外部样式表—有关12

7、网页中引入CSS的方法link与@import的区别link属于HTML标签，而@import完全是CSS提供的一种方式。link标签还可以做很多其它的事情，@import就只能加载CSS了。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。13CSS的继承所谓继承，就是父元素的规则也会适用于

8、子元素。比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色。14CSS的继承因为CSS格式作用在包含在它的范围内的所有内容，CSS的继承是肯定存在的，但是由于在定义属性的时候可能会有重复的现象，所以内容在选择属性的时候就是个问题但是CSS规定了一个原则：就近原则。15CSS的继承在调用属性的时候，如果有重复定义，就会选择最近的属性内联样式>嵌入式样式表>外