《网页制作教程 教学课件 ppt 作者 赵丰年 1_中文ppt 4CSS技术》由会员分享，可在线阅读，更多相关《网页制作教程 教学课件 ppt 作者 赵丰年 1_中文ppt 4CSS技术（50页珍藏版）》请在金锄头文库上搜索。
1、1,HTML语言与网页设计,CSS技术,2/50,学习目标,理解CSS技术在网页制作过程中所起的重要作用，掌握CSS样式定义的方法。 掌握三种在网页中使用CSS样式的方法，并对比各自的优劣。 理解各种CSS属性的含义，掌握常用属性的用法。,3,Part 1,CSS基础,4/50,什么是CSS,CSS（Cascading Style Sheet，层叠样式表）是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式。,5/50,演示样式的作用,无样式 层叠样式表示例,6/50,样式定义的语法,样式表项的组成： Selectorproperty1:value
2、1;property2:value2;property3:value3; Selector定义样式作用的对象，property为CSS属性，value为属性对应的值。,7/50,样式定义的语法,H1 text-align:center; font-family:黑体,选择器,样式定义,样式属性,属性取值,8/50,常用Selector类型,HTML标记符 用户定义的类 用户定义的ID 虚类,9/50,HTML Selector,HTML标记符是最常用的selector，它重新定义了HTML标记符的显示效果。例如： H1text-align:center;color:red 使所有用H1标记符修
3、饰的内容都居中和用红色显示。,10/50,演示HTML Selector效果,11/50,用户定义类,.classnameproperty:value 表示任何class属性为classname的标记符都采用所定义的样式。,12/50,演示通用类,13/50,用户定义ID,#IDname property:value; 表示id属性为 Idname的标记符采用所定义的样式。 id与class的区别：id在单个页面中应唯一（不同页面中可以相同），它定义单个元素；class在页面中定义的是一组元素。,14/50,演示用户定义ID,15/50,虚类 Selector,:link 未访问过的超链接 :
4、visited 访问过的超链接 :active 活动超链接 :hover 悬停状态的超链接,16/50,虚类 Selector,例如： 所有超链接去下划线：atext-decoration:none 悬停变色:hovercolor:red,17/50,演示虚类selector效果,18/50,CSS属性单位,长度单位：cm, em, ex, in, mm, pc, pt, px 百分比单位 颜色单位：颜色名,#RRGGBB, #RGB, rgb(rrr, ggg, bbb), rgb(rrr%, ggg%, bbb%),19,Part 2,在网页中使用CSS,20/50,直接在标记符中嵌套,H
5、TML 标记符的 style 属性 例如： 其中，style属性的取值形式为： “CSS属性:CSS属性值” 多个属性用分号分隔,21/50,演示直接嵌套样式信息,22/50,在STYLE 标记符定义样式,样式定义 样式定义的方式为Selectorproperty1:value1;property2:value2;property3:value3;,23/50,演示用Style定义样式,24/50,链接外部样式表文件,LINK 标记符 样式表文件可以用文本编辑器编辑，也可以用FP或DW编辑，内容为样式定义。,25/50,演示链接外部样式表文件,26/50,总结使用CSS,编写HTML文档，给出
6、文档的结构和语义。 编写样式规则。 将样式应用到文档。,27/50,样式的优先级,样式的优先级遵循“就近优先”的原则，也就是说，距离所修饰对象越近的样式，其优先级越高。 样式如果冲突，则采用高优先级样式；如果不冲突，则采用叠加的样式效果。,28/50,样式的优先级, P color: red 正文内容 其中，test.css 的内容如下： P color: green,29/50,样式的优先级, P color: red 正文内容 其中，test.css 的内容如下： P color: green,30/50,演示样式的优先级,31,Part 3,常用CSS样式属性,32/50,CSS属性字体
7、属性,font-family，取值为字体名称 font-style (normal/italic/oblique) font-weight (normal/bold/bolder/lighter/100/),33/50,CSS属性字体属性,font-size (绝对大小/相对大小/长度值/百分比) font (顺序：weightvariantstylesize/line-heightfamily),34/50,演示字体属性,35/50,CSS属性文本属性,line-height text-align(left/right/center/justify) text-decoration(none
8、/underline/overline) text-indent,36/50,演示文本属性,37/50,CSS属性颜色与背景属性,color background-color,38/50,CSS属性颜色与背景属性,background-image background-attachment(scroll/fixed) background-repeat(no-repeat/repeat/repeat_x),39/50,演示颜色与背景属性,40/50,CSS属性布局属性,“box model”（盒子/容器模型） page144 border属性 margin属性 padding属性,41/50,
9、CSS属性定位属性,position (static/relative/absolute) top和left width和height z-index,42/50,演示 定位属性示例,43/50,CSS过滤器,过滤器是CSS的扩充，它能将特定效果应用于文本容器、图片或其他对象。 只作用于HTML控件元素：body,button,div,img,input,marquee,span,table,td,textarea,th,44/50,CSS过滤器,filter属性用于定义过滤器效果，格式如下： filter:过滤器名称(参数) 例如，要为img标记符定义透明度，应使用imgfilter:alp
10、ha(Opacity=80),45/50,演示 过滤器属性示例,示例1 示例2,46/50,CSS 应用1 页面的整体样式定义,body font:small Verdana, Geneva, Arial, helvetica, sans-serif; color:black; background-color:white; margin: 0px 0px 30px 0px; border:none; h1, h2, h3, p, li line-height:150%; h2 font-weight:bold; text-transform:capitalize; color:#666; f
11、ont-size:medium; h2.red color:#933; strong.heading font-weight:bold; display:block; 其他例子,47/50,CSS 应用2 导航条,方便易用的导航是网站成功的关键。 导航条一般位于页面顶部或左部。 除了导航条以外，在网页底部和/或右部常常还包含辅助导航。 符合逻辑的、风格一致的鼠标悬停效果能使访问者对网站有合理的控制感。 例如,48,Part 4,作业3：用CSS设置网站格式,49/50,要求,至少6页，在第二次作业的基础上制作。 导航结构要清楚。 使用CSS设置绝大多数格式（不允许出现诸如font标记符，align属性等HTML格式修饰方法，除非必需）。 使用至少一个外部CSS文件对整个网站进行修饰（其中至少2处class或id样式）。,50/50,Thats all for this chapter!,
