CSS样式十五周.doc

CSS样式应用一项目课题项目：掌握CSS属性的基本应用时间第 周（共 2 课时）项目目标知识目标：通过对本次项目的学习，我们可以看到用很简单的CSS语句就可以实现许多需要专业软件才可以达到的效果。能力目标：利用属性可以设置字体、颜色、背景等页面格式；利用定位可以使页面布局更加规范、好看；利用滤镜可以使页面产生多媒体效果。 情感目标：熟习项目学习的基本流程，通过项目活动培养学生分析问题能力，团队精神，沟通能力。项目重难点项目重点：CSS文本属性，CSS定位属性项目难点：CSS分类属性项目情境如果给你一个已经编写好的网页，但是美观效果很不好。如何通过所学的知识进行改进呢？如果用DW来进行修改的话有哪些弊端，如果用代码的话有哪些无法实现。请大家在短时间内解决实际问题，要求效率和效果。项目知识准备项目知识（一）：第1课时：CSS文本属性文本属性 letter-spacing功能：控制文本元素字母间的间距，所设置的距离适用于整个元素。数值：normal - 正常间距，将字符间的间距复位为所有字体和字号的正常间距。长度 - 设置字间距长度，正值表示加进父元素中继承的正常长度，负值则減去正常长度。在数字后指定度量单位如下：mm, cm, in, pt(点数), px(象素), pc(pica), ex(小写字母x的高度), em(大写字母M的宽度)。line-height功能：设置元素中文本的行间距。数值：normal - 正常高度，通常为字体尺寸的 1-1.2倍，这是缺省设置。数字 - 设置元素中毎行文本的距离为字体尺寸乘以这个数字。例如字体尺寸为10点，设置line-height为2，则间距20点。长度 - 用标准度量单位设置间距，有些是绝对的，有些是相对的，详见letter-spacing中的説明。百分比 - 也字体尺寸的百分比设置间距。 text-align功能：在元素框中水平对齐文本。数值：left - 左对齐right - 右对齐center - 居中justify - 均匀分布， 生成等长的行 text-decoration功能：文本修饰，用于控制文本元素所用的效果，特别适用于引人注意的说明，警告等文本效果。数值：none - 无文本修饰，缺省设置。underline - 下划线。overline - 上划线。line-through - 删除线。blink - 闪烁。同一语句中可以组合多个关键字。text-indent功能：文本缩排，用于段落的第一行缩排上。数值：长度 - 设置首行缩排的尺寸为指定度量单位，有些单位是相对的，有些则是绝对的，祥见 letter-spacing 属性的说明部分。百分比 - 以行长的百分比设置首行缩排量。text-transform功能：设置一个或几个元素的大写标准。数值：none - 不改变文本的大写小写。capitalize - 元素中毎个单词的第一个字母用大写。uppercase - 将所有文本设置为大写。lowercase - 将所有文本设置为小写。vertical-align功能：垂直对齐。数值：baseline - 对准两个元素的小写字母基准线。sub - 下标。super - 上标。top - 顶部对齐。text-top - 文本顶对齐。middle - 中线对齐。bottom - 底线对齐。text-bottom - 字母底线对齐。百分比 - 将线上元素基准线在父元素基准线基础上升降一定的百分比，和元素的 line-height 属性组合使用。word-spacing功能：控制文本中元素单词间的间距。设置的间距适用于整个元素，不能在某个单词间插入更大或更小的间距。数值：normal - 正常间距。长度 - 如果长度为正，则加进从父元素继承的正常长度，如果是负值，则减去。第2课时： CSS定位属性1定位属性 定位属性将是网虫们打开幸福之门的钥匙： 绝对定位H4 position: absolute; left: 100px; top: 43px 这项CSS规则让浏览器将的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置，请观看代码的执行效果。 注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。 左边和顶部属性很直观，左边（left)设定要素距浏览器窗口左边的距离，顶部(top)设定距离浏览器窗口顶部的距离。 设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。 相对定位 绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例： I position: relative; left: 40px; top: 10px 请点击查看代码的执行效果 相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。如果你停止使用相对定位，则文字的显示位置将恢复正常。范例。 使用相对定位时要小心，否则容易将页面弄得非常乱。 除了相对定位和绝对定位，你还可以使用static（静止）参数值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。 项目拓展【项目场景】CSS分类属性的应用-伪类的应用图片分割应用实例【项目实施】语法: display: 允许值: block | inline | list-item | none初始值: block适用于: 所有对象向下兼容: 否显示属性允许使用四个值中的一个来定义一个元素: block (在元素的前和后都会有换行) inline (在元素的前和后都不会有换行) list-item (与block相同, 但增加了目录项标记) none (没有显示) 每个元素都典型地由浏览器基于HTML规格建议的展示形式给出一个缺省的显示值。显示属性可能并不安全，因为它使用另外的不合适的格式显示元素。使用值none将关闭指定元素及其子元素的显示！空白语法: white-space: 允许值: normal | pre | nowrap初始值: normal适用于: 块级元素向下兼容: 是空白属性将决定如何处理元素内的空格. 该属性的值取以下三个中的一个: normal (将多个空格折叠成一个) pre (不折叠空格) nowrap (不允许换行，除非遇到标记) 目录样式类型语法: list-style-type: 允许值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none初始值: disc适用于: 带有显示值的目录项元素向下兼容: 是目录样式项属性指定目录项标记的类型，当目录样式图象值为none或当图象载入选项被关闭时使用。例如:LI.square list-style-type: square UL.plain list-style-type: none OL list-style-type: upper-alpha /* A B C D E etc. */OL OL list-style-type: decimal /* 1 2 3 4 5 etc. */OL OL OL list-style-type: lower-roman /* i ii iii iv v etc. */目录样式图象语法: list-style-image: 允许值: | none初始值: none适用于: 带有显示值的目录项元素向下兼容: 是当图象载入选项打开时，目录样式图象属性在指定目录项标记使用哪个图象代替由目录样式类型属性指定的标记。例如:UL.check list-style-image: url(/LI-markers/checkmark.gif) UL LI.x list-style-image: url(x.png) 目录样式位置语法: list-style-position: 允许值: inside | outside初始值: outside适用于: 带有显示值的目录项元素向下兼容: 是目录样式位置属性可以取值inside(内部) or outside(外部)，其中outside是缺省值。整个属性决定关于目录项的标记应放在那里。如果使用inside值，换行会移到标记下，而不是缩进。应用的例子如下:Outside rendering:* List item 1second line of list itemInside rendering:* List item 1second line of list item目录样式语法: list-style: 允许值: | | 初始值: 未定义适用于: 带有显示值的目录项元素 向下兼容: 是目录样式属性是目录样式类型、目录样式位置，和目录样式图象属性的略写。例如:LI.