推荐教程CSSDIV教程范本课件.ppt

《推荐教程CSSDIV教程范本课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第五章样式表统一网站风格、制作基本特效1Internet与网页设计主要内容一、样式表(CSS)的基本概念二、CSS与HTML文档的结合方法三、CSS属性的理解与应用四、CSS样式的单位五、CSS样式在网页中的应用六、CSS的高级应用一、CSS的基本概念1、编写CSS样式的方法使用CSS编辑器如Dreamweaver、Frontpage等都会自带CSS编辑器。使用超文本编辑器如Dreamweaver、Frontpage等超文本编辑器均可编辑样式表；记事本一、CSS的基本概念2、基本语法选择符{属性:值}选择符{属性1

2、:值1;属性2:值2;……}单一选择符的复合样式声明应该用“;”隔开，为便于阅读也可以分行写。几乎所有的HTML标记符形式都可以作为选择符。H1{font-size:x-large;color:red}H2{font-size:large;color:blue}5-1.htmH1{font-size:x-large;color:red}H2{font-size:large;color:blu

3、e}一、CSS的基本概念3、CSS样式的组合、继承和关联性样式的组合：把具有相同声明定义的选择符组合在一起，并用逗号隔开。－例如：段落元素p、单元格元素td和类c1可以使用相同样式：p,td,.c1{font-size:12pt;font-family:黑体;color:red}5-2.htm一、CSS的基本概念样式的继承：若子元素未定义，则它将继承上级元素的样式的定义。但存在少数属性不能继承，见P119。5-3.htm一、CSS的基本概念样式表的关联性：样式表的关联性指在某些样式定义中，可以定义某样式仅在某个特定元素范围内才有效。。例如：pb{font-size:12pt;font-family:黑体;color:red}b元素仅在p元素作用范围内会套用上述的样式设定。而在其他地方不具有这些属性。5-4.htm一、CSS的基本概念4、注释CS

5、S文字的注释形式与C语言类似。p{font-size:12pt}/*P标签的样式定义*/一、CSS的基本概念5、选择符样式表的基本语法形式：selector{property1:value1;property2:value2;…}需要应用的样式的内容样式的属性样式的属性的值Select的五种合法的类别：HTML标记符、用户定义的类Class、用户定义的ID、虚类和虚元素P119选择符的类别HTML标记符应用比较多，注意继承性、组合性和关联性（P119）的应用。用户定义的类选择符可以使用任何名称命名类。里

6、所有的元素都可以定义“类”。语法如下：selector.classname{property1:value1;property2:value2;…}.classname{property1:value1;property2:value2;…}例5-5.htm1、两种定义形式的区别？2、在标签中使用类选择符样式的使用方式如何？选择符的类别ID选择符应用的形式基本与类选择符类似，定义时用“#”替代”.”。因此应用时一般选取其中的一种。见P120例子。虚类和虚元素在html的页面元素中没有这种属性，故称其为虚类，仅在IE

7、5.0以上的浏览器版本才支持虚类选择符。语法如下：页面元素名：元素虚属性名{样式表内容}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:italic}:active{color:#aaaaaa}例5-6

8、.htm二、CSS与HTML文档的结合方法HTML与样式表有多种结合方法内联样式：在标记符内定义外联样式使用标记符链接到外部的样式文件使用CSS的@import标记符来导入样式文件在HTML标签中直接加入样式表的定义。二、CSS与HTML文档的结合方法内联样式：在标记符内定义，在本网页内起作用。