6.1网站制作 管理及发布10

已学过的CSS属性text-decorationfont-sizefont-weightletter-spacingcolorfont-familyline-height举例这些属性的取值文字行高body{font-family:“宋体”,”黑体”;font-size:0.75em;color:red;font-weight:bold;text-decoration:underline;line-height:1.5em;}大片密密麻麻的文字往往会让人觉得乏味，适当地调整行高可使页面显得美观。行高指的是文本行的基线间的距离字符间的空白body{font-family:“宋体”,”黑体”;font-size:0.75em;color:red;font-weight:bold;text-decoration:underline;letter-spacing:5px;}该属性定义了在文本字符框之间插入多少空间。默认值值为0。注意：该属性允许使用负值，这会让字母之间挤得更紧background属性•background-color•background-image•background-repeat•background-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,表示元素的无背景图象；设计人员可以使用相对路径为元素指定背景图象。背景图象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/logo.jpg);background-repeat:no-repeat;}•CSS属性background-position用来设置元素背景位置•它的语法有两种形式：背景图象位置background-positionbackground-position:百分数百分数;background-position:关键词关键词;默认值为：0%0%，第一个值用于横坐标，第二个值将用于纵坐标。例如:background-position:75%5%;默认值为：topleft，第一个关键词的取值为top|center|bottom|第二个关键词的属性取值为left|center|right例如: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(../image/logo.jpg)no-repeat50%0;}背景属性backgroundbackground:颜色图象路径图象重复性图象位置；body{background:grayurl(../image/logo.jpg)no-repeat50%0;}注意：4个属性的先后顺序不能颠倒。网页逻辑空间的划分navigator存放站点图标/标题和导航栏footer存放网页的版权信息,站点地图等sidebar边栏,存放热点列表或更新列表或导航等container网页的正文部分,存放需要呈现给浏览者的重要信息例空间划分的工具div……/div是一个区块型标签，可包含p,ul,a,img等，将其组成一个逻辑区域一般地,设计人员通过div来布局、定位网页中的每个逻辑区块。span……/span是一个单行型标签，它没有实际意义，它的存在纯粹是为了应用CSS样式。例为范大娘面吧首页划分逻辑空间划分后的空间分布HTML源文件空间划分的工具•CSS布局的原理是按照HTML代码中对象声明的顺序，以流布局的方式来显示对象•在HTML中的所有对象，分为两种：区块型(blockelement)和单行型(inlineelement)•float属性的作用就是改变区块型(blockelement)对象的默认显示方式。区块型对象设置了float属性之后，它将不再独自占据一行，允许浮动到其他元素的左侧或右侧。•float属性的取值可以是none,left或right空间划分的工具float属性的默认值为none；当float取none时不会发生任何浮动，元素按照HTML代码中对象声明的顺序来显示。……bodyh1一号区块/h1h1二号区块/h1h1三号区块/h1/body……试着判断三个区块的位置关系，然后比较与演示结果是否一致。空间划分的工具h1id=“block1”一号区块/h1h1id=“block2”二号区块/h1h1id=“block3”三号区块/h1试着判断不同情况下三个区块之间的位置关系#block1{float:left;}#block2{float:left;}#block3{float:left;}HTML代码CSS代码演示空间划分的工具h1id=“block1”一号区块/h1h1id=“block2”二号区块/h1h1id=“block3”三号区块/h1试着判断不同情况下三个区块之间的位置关系#block1{float:right;}#block2{float:right;}#block3{float:right;}HTML代码CSS代码演示空间划分的工具float属性的默认值为none；当float取none时不会发生任何浮动，元素按照HTML代码中对象声明的顺序来显示。当float取值right或left时，浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至右侧或者左侧。文字内容会围绕在浮动元素周围。当一个浮动元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。•CSS属性width用来设置对象的宽度。•它的取值在默认状态根据下HTML定位规则在文档流中分配宽度;设计人员也可以根据需要设定宽度。宽度属性width•例如：•body{width:90%;}•p{width:600px;}•#promise{width:200px;}为范大娘面吧首页布局应用float和width后的样式源文件空间划分的工具当属性设置float（浮动）时，它所在的物理位置已经脱离文档流了，有时会影响后面的元素的显示(比如重叠)，这个时候我们就需要用clear;clear该属性的值指出了不允许有浮动对象的边。例空间划分的工具left在左侧不允许浮动元素right在右侧不允许浮动元素both在左右两侧均不允许浮动元素none默认。允许浮动元素出现在两侧。1、解释下列CSS属性并列举其取值text-decorationfont-sizefont-weightletter-spacingcolorfont-familyline-heightbackground-colorbackground-imagebackground-repeatbackground-positionclear2、解释下列HTML标签的功能（用途）div……/divspan……/span