CSS技术-网页设计第四讲解析.ppt

HTML语言与网页设计 ——CSS技术 学习目标 理解CSS技术在网页制作过程中所起的重要作用，掌握CSS样式定义的方法。 掌握三种在网页中使用CSS样式的方法，并对比各自的优劣。 理解各种CSS属性的含义，掌握常用属性的用法。 Part 1 CSS基础 什么是CSS CSS（Cascading Style Sheet，层叠样式表）是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式。 演示——样式的作用 无样式 层叠样式表示例 样式定义的语法 样式表项的组成： Selector{property1:value1;property2:value2;property3:value3;……} Selector定义样式作用的对象，property为CSS属性，value为属性对应的值。 样式定义的语法 常用Selector类型 HTML标记符 用户定义的类 用户定义的ID 虚类 HTML Selector HTML标记符是最常用的selector，它重新定义了HTML标记符的显示效果。例如： H1{text-align:center;color:red} 使所有用H1标记符修饰的内容都居中和用红色显示。 演示——HTML Selector效果 用户定义类 .classname{property:value…} 表示任何class属性为classname的标记符都采用所定义的样式。 演示—通用类 用户定义ID #IDname {property:value;…} 表示id属性为 Idname的标记符采用所定义的样式。 id与class的区别：id在单个页面中应唯一（不同页面中可以相同），它定义单个元素；class在页面中定义的是一组元素。 演示—用户定义ID 虚类 Selector :link 未访问过的超链接 :visited 访问过的超链接 :active 活动超链接 :hover 悬停状态的超链接 虚类 Selector 例如： 所有超链接去下划线：a{text-decoration:none} 悬停变色:hover{color:red} 演示——虚类selector效果 CSS属性单位 长度单位：cm, em, ex, in, mm, pc, pt, px 百分比单位 颜色单位：颜色名,#RRGGBB,#RGB, rgb(rrr, ggg, bbb), rgb(rrr%, ggg%, bbb%) Part 2 在网页中使用CSS 直接在标记符中嵌套 HTML 标记符的 style 属性 例如：P style=“text-align:center” 其中，style属性的取值形式为： “CSS属性:CSS属性值” 多个属性用分号分隔 演示——直接嵌套样式信息 在STYLE 标记符定义样式 STYLE样式定义 /STYLE 样式定义的方式为Selector{property1:value1;property2:value2;property3:value3;……} 演示——用Style定义样式 链接外部样式表文件 LINK 标记符 LINK rel=“stylesheet” type=“text/css” href=“stylesheet.css” 样式表文件可以用文本编辑器编辑，也可以用FP或DW编辑，内容为样式定义。 演示——链接外部样式表文件 总结－－使用CSS 编写HTML文档，给出文档的结构和语义。 编写样式规则。 将样式应用到文档。 样式的优先级 样式的优先级遵循“就近优先”的原则，也就是说，距离所修饰对象越近的样式，其优先级越高。 样式如果冲突，则采用高优先级样式；如果不冲突，则采用叠加的样式效果。 样式的优先级 HTMLHEAD LINK rel=stylesheet type=text/css href=test.css STYLEP {color: red}/STYLE /HEAD BODYP正文内容/P/BODY /HTML 其中，test.css 的内容如下： P {color: green} 样式的优先级 HTMLHEAD STYLEP {color: red}/STYLE LINK rel=stylesheet type=text/css href=test.css /HEAD BODYP正文内容/P/BODY /HTML 其中，test.css 的内容如下： P {color: green} 演示——样式的优先级 Part 3 常用CSS样式属性 CSS属性——字体属性 font-family，取值为字体名称 font-style (normal/italic/oblique) font-weig