HTML语言与网页设计CSS技术全有文档www.ldflover.com 1学习目标 理解CSS技术在网页制作过程中所起的重要作 用，掌握CSS样式定义的方法。 掌握三种在网页中使用CSS样式的方法，并对 比各自的优劣。 理解各种CSS属性的含义，掌握常用属性的用 法。 2Part 1CSS基础31.1 什么是CSS CSS（Cascading Style Sheet，层叠样式 表）是一种格式化网页的标准方式， 它扩展了 HTML 的功能，使网页设计 者能够以更有效的方式设置网页格式 。4演示样式的作用 无样式 层叠样式表示例5无样式示例 假设现在要在网页中为所有的“标题1”标 记符（H1）应用“居 中”对齐方式和“楷体 ”字体那么如果使用 HTML方式解决，则 必须在每次出现该标 记符时使用align=“center”属 性，并将标题中文字用FONT标记符括起 来以设置字体，如右 所示：代码：使用HTML方式/TITLE/HEAD BODY一级标题.其他正文.一级标题/BODY /HTML6示例演示效果图7层叠样式表示例代码如下：使用CSS方式/TITLEH1text- align:center; font-family:楷体_GB2312/HEAD BODY一级标题.其他正文.一级标题 /BODY /HTML 81.2 样式定义的语法 样式表项的组成： Selectorproperty1:value1;property 2:value2;property3:value3; Selector定义样式作用的对象，property 为CSS属性，value为属性对应的值。9样式定义的语法H1 text-align:center; font-family:黑体 选择器样式定义样式属性属性取值101.3 常用Selector类型 HTML标记符 用户定义的类 用户定义的ID 虚类11HTML Selector HTML标记符是最常用的selector，它 重新定义了HTML标记符的显示效果。 例如： H1text-align:center;color:red 使所有用H1标记符修饰的内容都居中和用 红色显示。12演示HTML Selector效 果 演示效果13效果浏览14用户定义类 .classnameproperty:value表示任何class属性为classname的标 记符都采用所定义的样式。15用户定义ID #idnameproperty:value表示任何ID属性为idname的标记符都 采用所定义的样式。 用户定义ID与class的作用完全相同， 一般使用其中之一即可。16演示通用类与ID 例如，可以定义一个ID样式如下：#red color : red 然后可以在若干不同的HTML标记符中使 用该样式规则如下所示： 本行文字为红色. 本行标题为红色。17演示效果：18虚类 Selector :link 未访问过的超链接 :visited 访问过的超链接 :active 活动超链接 :hover 悬停状态的超链接19虚类 Selector 例如： 所有超链接去下划线：atext- decoration:none 悬停变色: :hovercolor:red20演示虚类selector效果 : link color : black ;text- decoration : none :vidited : active color :ray ;text- decoration :none :hover color :red ;text- decoration :underline211.4 CSS属性单位 长度单位：cm, em, ex, in, mm, pc, pt, px 百分比单位 颜色单位：颜色名,#RRGGBB, #RGB, rgb(rrr, ggg, bbb), rgb(rrr%, ggg%, bbb%)22Part 2在网页中使用CSS232.1 直接在标记符中嵌套 HTML 标记符的 style 属性 例如：其中，style属性的取值形式为：“CSS属性:CSS属性值”多个属性用分号分隔24演示直接在标记符中嵌套直接嵌套样式信息的用法/TITLE一代人 黑夜给了我黑色 的眼睛 我却用它寻找光明/HTML252.2 在STYLE 标记符定义样 式 样式定义 样式定义的方式为 Selectorproperty1:value1;property 2:value2;property3:value3;26演示用STYLE 定义样式在STYLE标记符中定义样式信息/TITLE一代人 黑夜给了我黑色的眼睛 我却用它寻找光明/HTML272.3 链接外部样式表文件 LINK 标记符 样式表文件可以用文本编辑器编辑，也 可以用FP或DW编辑，内容为样式定义 。28演示链接外部样式表文件主要代码： -网页源文件-链接外部样式表文件/TITLE一代人 黑夜给了我黑色的眼睛 我却用它寻找光明/HTML -与网页源文件同一目录下的mycss.css 文件- P“font-size;24px;text-align:center“ H1“font-family;黑体;text-align:center29演示效果：302.4 样式的优先级 样式的优先级遵循“就近优先”的原则， 也就是说，距离所修饰对象越近的样式 ，其优先级越高。 样式如果冲突，则采用高优先级样式； 如果不冲突，则采用叠加的样式效果。31样式的优先级P color: red正文内容其中，test.css 的内容如下： P color: green32样式的优先级P color: red正文内容其中，test.css 的内容如下： P color: green33演示样式的优先级34Part 3常用CSS样式属性353.1 CSS属性字体属性 font-family，取值为字体名称 font-style (normal/italic/oblique(偏斜 体) font-weight （字体粗细） (normal/bold/bolder/lighter/100/)36CSS属性字体属性 font-size (绝对大小/相对大小/长度值/ 百分比) font (顺序： weightvariantstylesize/line- heightfamily)37演示字体属性字体属性示例/TITLE生活最沉重的负担，不是工作，而是-无聊。 我需要工作，工作就是我的生活。 Life means stuggle.学者贵于行之，而不贵于知之。 将来属于那些工作勤勉的人。/HTML38演示效果：393.2 CSS属性文本属性 line-height text-align(left/right/center/justify) text- decoration(none/underline/overline ) text-indent40演示文本属性文本属性示例/TITLESuccess 伟大人物最明显的标志，就是他坚强的意志。 天才就是耐心。人思考越多，话越少。 有许多人就是用青春的幸福作成功的代价的。 Idless makes the wit rut。/HTML41演示效果：423.3 CSS属性颜色与背景 属性 color background-color43CSS属性颜色与背景属性 background-image background- attachment(scroll/fixed) background-repeat(no- repeat/repeat/repeat_x)44演示颜色与背景属性颜色与背景属性示例冬夜读书示子律 陆游 古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此 事要躬行。45演示效果：463.4 定位属性 position (static/relative/absolute) top和left width和height z-index47演示 定位属性示例定位属性示例48相见欢 相见欢 相见欢李煜林花谢了春红，太匆匆。无奈朝来寒雨晚开风。胭脂 泪，留人醉，几时重？自是人生长恨水长东。49演示效果：503.5 CSS过滤器 过滤器是CSS的扩充，它能将特定效果 应用于文本容器、图片或其他对象。 只作用于HTML控件元素： body,button,div,img,input,marqu ee,span,table,td,textarea,th51CSS过滤器 filter属性用于定义过滤器效果，格式如下： filter:过滤器名称(参数) 例如，要为img标记符定义透明度，应使用 imgfilter:alpha(Opacity=80)52演示 过滤器属性示例 示例1 示例253示例二：过滤器效果此段文本未使用效果 此段文本使用了blur效果 此段文本使用了dropShadow效果 此段文本使用了glow效果 此段文本使用了mask效果 此段文本使用了shadow效果54Thats all for this chapter!55