网页设计基础8.ppt

第八讲 CSS之空间控制(1) css，又称层叠样式表，是用来控制网页外观的文件。 一个网页的外观可以又一个css文件控制，也可以由多个css共同来控制，使用css控制网页外观，是目前网页设计的标准与趋势。 文字行高 字符间的空白 background属性 background-color background-image background-repeat background-position CSS属性background-color用来设置元素的背景颜色。 它的取值在默认状态下是transparent,表示元素的背景透明；设计人员可以使用喜好的颜色设置背景。 CSS属性background-image用来设置元素的背景图象。 它的取值在默认状态下是none,表示元素的无背景图象；设计人员可以使用相对路径为元素指定背景图象。 CSS属性background-repeat用来设置元素背景重复性 它的取值可以是：repeat、no-repeat、repeat-x、或 repeat-y,分别表示重复、不重复、在X轴方向重复、在Y轴方向重复。 它的取值在默认状态下是repeat。 CSS属性background-position用来设置元素背景位置 它的语法有两种形式： 网页逻辑空间的划分 空间划分的工具 空间划分的工具 CSS布局的原理是按照HTML代码中对象声明的顺序，以流布局的方式来显示对象 在HTML中的所有对象，分为两种：区块型(block element)和单行型(inline element) float属性的作用就是改变区块型(block element)对象的默认显示方式。区块型对象设置了float属性之后，它将不再独自占据一行，允许浮动到其他元素的左侧或右侧。 float属性的取值可以是none,left或right 空间划分的工具 空间划分的工具 空间划分的工具 空间划分的工具 CSS属性width用来设置对象的宽度。 它的取值在默认状态根据下HTML定位规则在文档流中分配宽度;设计人员也可以根据需要设定宽度。 空间划分的工具 空间划分的工具 上机练习 见课程网站实验八 h1 id=“block1”一号区块/h1 h1 id=“block2”二号区块/h1 h1 id=“block3”三号区块/h1 试着判断不同情况下三个区块之间的位置关系 #block1{ float:left;} #block2{ float:left;} #block3{ float:left;} HTML代码 CSS代码 演示 h1 id=“block1”一号区块/h1 h1 id=“block2”二号区块/h1 h1 id=“block3”三号区块/h1 试着判断不同情况下三个区块之间的位置关系 #block1{ float:right;} #block2{ float:right;} #block3{ float:right;} HTML代码 CSS代码 演示 float属性的默认值为none；当float取none时不会发生任何浮动，元素按照HTML代码中对象声明的顺序来显示。 当float取值right或left时，浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至右侧或者左侧。 文字内容会围绕在浮动元素周围。当一个浮动元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。 宽度属性 width 例如： body { width:90%; } p { width:600px; } #promise { width:200px; } 为范大娘面吧首页布局 应用float和width后的样式 源文件 ??????? 当属性设置float（浮动）时，它所在的物理位置已经脱离文档流了，有时会影响后面的元素的显示(比如重叠)，这个时候我们就需要用clear;clear该属性的值指出了不允许有浮动对象的边。 例 默认。允许浮动元素出现在两侧。 none 在左右两侧均不允许浮动元素 both 在右侧不允许浮动元素 right 在左侧不允许浮动元素 left 1、解释下列CSS属性并列举其取值 text-decoration font-size font-weight letter-spacing color font-family line-height background-color background-image background-repeat background-position clear 2、解释下列HTML标签的功能（用途） div … … /div span … … /span 如果时间充裕，在这里可以配合板书讲评实验中存在的一些错误,如CSS代码嵌套