CSS样式十五周

《CSS样式十五周》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS样式应用《一》项目课题项目：掌握CSS属性的基本应用时间第周（共2课时）项目目标知识目标：通过对本次项目的学习，我们可以看到用很简单的CSS语句就可以实现许多需要专业软件才可以达到的效果。能力目标：利用属性可以设置字体、颜色、背景等页面格式；利用定位可以使页面布局更加规范、好看；利用滤镜可以使页面产生多媒体效果。情感目标：熟习项目学习的基本流程，通过项目活动培养学生分析问题能力，团队精神，沟通能力。项目重难点项目重点：CSS文本属性，CSS定位属性项目难点：CSS分类属性项目情境如果给你一个已经编写好的网页，但是美观效果很不好。如何通过所学的知识

2、进行改进呢？如果用DW来进行修改的话有哪些弊端，如果用代码的话有哪些无法实现。请大家在短时间内解决实际问题，要求效率和效果。项目知识准备项目知识（一）：第1课时：CSS文本属性文本属性letter-spacing功能：控制文本元素字母间的间距，所设置的距离适用于整个元素。数值：normal-正常间距，将字符间的间距复位为所有字体和字号的正常间距。长度-设置字间距长度，正值表示加进父元素中继承的正常长度，负值则減去正常长度。在数字后指定度量单位如下：mm,cm,in,pt(点数),px(象素),pc(pica),ex(小写字母x的高度),em(大写字母M

3、的宽度)。line-height功能：设置元素中文本的行间距。数值：normal-正常高度，通常为字体尺寸的1-1.2倍，这是缺省设置。数字-设置元素中毎行文本的距离为字体尺寸乘以这个数字。例如字体尺寸为10点，设置line-height为2，则间距20点。-7-长度-用标准度量单位设置间距，有些是绝对的，有些是相对的，详见letter-spacing中的説明。百分比-也字体尺寸的百分比设置间距。text-align功能：在元素框中水平对齐文本。数值：left-左对齐right-右对齐center-居中justify-均匀分布，生成等长的行text-d

4、ecoration功能：文本修饰，用于控制文本元素所用的效果，特别适用于引人注意的说明，警告等文本效果。数值：none-无文本修饰，缺省设置。underline-下划线。overline-上划线。line-through-删除线。blink-闪烁。同一语句中可以组合多个关键字。text-indent功能：文本缩排，用于段落的第一行缩排上。数值：长度-设置首行缩排的尺寸为指定度量单位，有些单位是相对的，有些则是绝对的，祥见letter-spacing属性的说明部分。百分比-以行长的百分比设置首行缩排量。text-transform功能：设置一个或几个元素

5、的大写标准。数值：none-不改变文本的大写小写。capitalize-元素中毎个单词的第一个字母用大写。uppercase-将所有文本设置为大写。-7-lowercase-将所有文本设置为小写。vertical-align功能：垂直对齐。数值：baseline-对准两个元素的小写字母基准线。sub-下标。super-上标。top-顶部对齐。text-top-文本顶对齐。middle-中线对齐。bottom-底线对齐。text-bottom-字母底线对齐。百分比-将线上元素基准线在父元素基准线基础上升降一定的百分比，和元素的line-height属性组

6、合使用。word-spacing功能：控制文本中元素单词间的间距。设置的间距适用于整个元素，不能在某个单词间插入更大或更小的间距。数值：normal-正常间距。长度-如果长度为正，则加进从父元素继承的正常长度，如果是负值，则减去。第2课时：CSS定位属性1．定位属性定位属性将是网虫们打开幸福之门的钥匙：绝对定位H4{position:absolute;left:100px;top:43px}这项CSS规则让浏览器将

的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置，请观看代码的执行效果。注意这里唯一设置了的是左边和顶部，也就

7、说，文字将从左到右，从上到下载入浏览窗口。左边和顶部属性很直观，左边（left)设定要素距浏览器窗口左边的距离，顶部(top)设定距离浏览器窗口顶部的距离。-7-设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。相对定位绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：I{position:relative;left:40px;top:10px}请点击查看代码的执行效果相对定位的关键在于定位了的要素的位置是相对于它

8、通常应在的位置进行定位。如果你停止使用相对定位，则文字的显示位置将恢复正常。范例。使用相对定位