网页设计基础8.ppt

《网页设计基础8.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第八讲CSS之空间控制(1)css，又称层叠样式表，是用来控制网页外观的文件。一个网页的外观可以又一个css文件控制，也可以由多个css共同来控制，使用css控制网页外观，是目前网页设计的标准与趋势。CSS基础概念复习1.定义CSS基础概念复习2.使用CSS内部CSS....外部CSS外部CSS代码保存在一个独立的文件内,而不保存在当前网页的内部内部CSS代码

2、直接保存在网页的head的style标签内部CSS基础概念复习3.CSS的特点通配性1继承性2个性3CSS基础概念复习4.已学过的CSS属性text-decorationfont-sizefont-weightletter-spacingcolorfont-familyline-height举例这些属性的取值文字行高line-heightbody{font-family:“宋体”,”黑体”;font-size:0.75em;color:red;font-weight:bold;text-decoration:underline;line-height:1.5em;}大片密密麻麻的文字往

3、往会让人觉得乏味，适当地调整行高可使页面显得美观。行高指的是文本行的基线间的距离字符间的空白letter-spacingbody{font-family:“宋体”,”黑体”;font-size:0.75em;color:red;font-weight:bold;text-decoration:underline;letter-spacing:5px;}该属性定义了在文本字符框之间插入多少空间。默认值值为0。注意：该属性允许使用负值，这会让字母之间挤得更紧background属性background-colorbackground-imagebackground-repeatbackgr

4、ound-position背景颜色背景图象背景图象重复性背景图象位置CSS属性background-color用来设置元素的背景颜色。它的取值在默认状态下是transparent,表示元素的背景透明；设计人员可以使用喜好的颜色设置背景。背景颜色background-color例如：p{background-color:red;}#promise{background-color:rgb(223,71,177);}body{background-color:#98AB6F;}CSS属性background-image用来设置元素的背景图象。它的取值在默认状态下是none,表示元素的无背景图象

5、；设计人员可以使用相对路径为元素指定背景图象。背景图象background-image例如：body{background-image:url(../image/comet.jpg);}注意：（1）使用相对路径（2）路径不加“”CSS属性background-repeat用来设置元素背景重复性它的取值可以是：repeat、no-repeat、repeat-x、或repeat-y,分别表示重复、不重复、在X轴方向重复、在Y轴方向重复。它的取值在默认状态下是repeat。背景图象重复性background-repeat例如：body{background-image:url(../image/

6、logo.jpg);background-repeat:no-repeat;}看演示CSS属性background-position用来设置元素背景位置它的语法有两种形式：背景图象位置background-positionbackground-position:百分数百分数;background-position:关键词关键词;默认值为：0%0%，第一个值用于横坐标，第二个值将用于纵坐标。例如:background-position:75%5%;默认值为：topleft，第一个关键词的取值为top

7、center

8、bottom

9、第二个关键词的属性取值为left

10、center

11、right例如

12、:background-position:topright;背景图象位置background-position例如：body{background-color:#98AB6F;background-image:url(../image/logo.jpg);background-repeat:no-repeat;background-position:50%0;}看演示简写：body{background:grayurl(