网页制作教程 教学课件 作者 赵丰年 1_4CSS技术.ppt

《网页制作教程 教学课件 作者 赵丰年 1_4CSS技术.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、HTML语言与网页设计——CSS技术1学习目标理解CSS技术在网页制作过程中所起的重要作用，掌握CSS样式定义的方法。掌握三种在网页中使用CSS样式的方法，并对比各自的优劣。理解各种CSS属性的含义，掌握常用属性的用法。2Part1CSS基础3什么是CSSCSS（CascadingStyleSheet，层叠样式表）是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。4演示——样式的作用无样式层叠样式表示例5样式定义的语法样式表项的组成：Selector{property1:value1;prope

2、rty2:value2;property3:value3;……}Selector定义样式作用的对象，property为CSS属性，value为属性对应的值。6样式定义的语法H1{text-align:center;font-family:黑体}选择器样式定义样式属性属性取值7常用Selector类型HTML标记符用户定义的类用户定义的ID虚类8HTMLSelectorHTML标记符是最常用的selector，它重新定义了HTML标记符的显示效果。例如：H1{text-align:center;color:red}使所有用H1标记符修饰的内容

3、都居中和用红色显示。9演示——HTMLSelector效果10用户定义类.classname{property:value…}表示任何class属性为classname的标记符都采用所定义的样式。11演示—通用类12用户定义ID#IDname{property:value;…}表示id属性为Idname的标记符采用所定义的样式。id与class的区别：id在单个页面中应唯一（不同页面中可以相同），它定义单个元素；class在页面中定义的是一组元素。13演示—用户定义ID14虚类Selector:link未访问过的超链接:visited访问过

4、的超链接:active活动超链接:hover悬停状态的超链接15虚类Selector例如：所有超链接去下划线：a{text-decoration:none}悬停变色:hover{color:red}16演示——虚类selector效果17CSS属性单位长度单位：cm,em,ex,in,mm,pc,pt,px百分比单位颜色单位：颜色名,#RRGGBB,#RGB,rgb(rrr,ggg,bbb),rgb(rrr%,ggg%,bbb%)18Part2在网页中使用CSS19直接在标记符中嵌套HTML标记符的style属性例如：

5、ext-align:center”>其中，style属性的取值形式为：“CSS属性:CSS属性值”多个属性用分号分隔20演示——直接嵌套样式信息21在STYLE标记符定义样式样式定义的方式为Selector{property1:value1;property2:value2;property3:value3;……}22演示——用Style定义样式23链接外部样式表文件LINK标记符样式表

6、文件可以用文本编辑器编辑，也可以用FP或DW编辑，内容为样式定义。24演示——链接外部样式表文件25总结－－使用CSS编写HTML文档，给出文档的结构和语义。编写样式规则。将样式应用到文档。26样式的优先级样式的优先级遵循“就近优先”的原则，也就是说，距离所修饰对象越近的样式，其优先级越高。样式如果冲突，则采用高优先级样式；如果不冲突，则采用叠加的样式效果。27样式的优先级

正文内容

8、CSS属性——字体属性font-family，取值为字体名称font-style(normal/italic/oblique)font-weight(normal/bold/bo