不错的教程-CSSDIV教程范本.pptxVIP

Internet与网页设计1第五章样式表统一网站风格、制作基本特效

主要内容Internet与网页设计CSS样式表?2CSS的高级应用CSS样式在网页中的应用CSS样式的单位CSS属性的理解与应用CSS与HTML文档的结合方法样式表(CSS)的基本概念EDCBAF

一、CSS的基本概念Internet与网页设计CSS样式表?3编写CSS样式的方法使用CSS编辑器如Dreamweaver、Frontpage等都会自带CSS编辑器。使用超文本编辑器如Dreamweaver、Frontpage等超文本编辑器均可编辑样式表；记事本

一、CSS的基本概念Internet与网页设计CSS样式表?42、基本语法选择符{属性:值}选择符{属性1:值1;属性2:值2;……}单一选择符的复合样式声明应该用“;”隔开，为便于阅读也可以分行写。几乎所有的HTML标记符形式都可以作为选择符。HEADTITLECSS例子/TITLESTYLETYPE=“text/css”H1{font-size:x-large;color:red}H2{font-size:large;color:blue}/STYLE/HEADH1{font-size:x-large;color:red}H2{font-size:large;color:blue}

一、CSS的基本概念Internet与网页设计CSS样式表?5CSS样式的组合、继承和关联性样式的组合：把具有相同声明定义的选择符组合在一起，并用逗号隔开。例如：段落元素p、单元格元素td和类c1可以使用相同样式：1p,td,.c1{font-size:12pt;font-family:黑体;color:red}2

一、CSS的基本概念Internet与网页设计CSS样式表?6样式的继承：若子元素未定义，则它将继承上级元素的样式的定义。但存在少数属性不能继承，见P119。HEADTITLECSS例子/TITLEstyle!--p{color:red;font-size:20px;font-family:华文仿宋,ComicSansMS}b{text-decoration:underline}--/style/HEAD

一、CSS的基本概念Internet与网页设计CSS样式表?7样式表的关联性：样式表的关联性指在某些样式定义中，可以定义某样式仅在某个特定元素范围内才有效。。例如：pb{font-size:12pt;font-family:黑体;color:red}b元素仅在p元素作用范围内会套用上述的样式设定。而在其他地方不具有这些属性。

一、CSS的基本概念Internet与网页设计CSS样式表?8p{font-size:12pt}/*P标签的样式定义*/注释CSS文字的注释形式与C语言类似。

一、CSS的基本概念Internet与网页设计CSS样式表?9选择符样式表的基本语法形式：selector{property1:value1;property2:value2;…}需要应用的样式的内容样式的属性样式的属性的值Select的五种合法的类别：HTML标记符、用户定义的类Class、用户定义的ID、虚类和虚元素P119123456

选择符的类别Internet与网页设计CSS样式表?10HTML标记符应用比较多，注意继承性、组合性和关联性（P119）的应用。用户定义的类选择符可以使用任何名称命名类。body里所有的元素都可以定义“类”。语法如下：selector.classname{property1:value1;property2:value2;…}.classname{property1:value1;property2:value2;…}1、两种定义形式的区别？2、在标签中使用类选择符样式的使用方式如何？

ID选择符选择符的类别Internet与网页设计CSS样式表?11应用的形式基本与类选择符类似，定义时用“#”替代”.”。因此应用时一般选取其中的一种。见P120例子。01虚类和虚元素02在html的页面元素中没有这种属性，故称其为虚类，仅在IE5.0以上的浏览器版本才支持虚类选择符。03语法如下：页面元素名：元素虚属性名{样式表内容}04

a:link{color:#000000}a:visited{color:#cccccc}a:hover{color:#000000;font-style:italic}a:active{color:#aaaaaa}:link{color:#000000}:visited{color:#cccccc}:hover{color:#000000;font-style:ital