第07讲使用CSS显示XML祥解.ppt

任务3-3：设置前景色和背景色 color属性：设置XML文档元素的前景色。color属性值可以是名称、十进制、十六进制或百分数RGB的颜色值。 background-color属性：设置元素内容的背景颜色，与color属性的属性值设置方式相同。 color:green color:#FF00CC (#后的6位数若两两相等，可只写3位) color:rgb(100％,0,80％) 任务3-4：使用文本修饰属性 1、text-indent属性：设置元素中文本的缩进。 2、text-align属性：设置元素中文本的对齐方式。 left：左对齐；right：右对齐；center：居中对齐。 3、vertical-align属性：设置元素内容的垂直对齐方式。 top：顶对齐；middle：中对齐；bottom：底对齐。 4、text-decoration属性：设置文本内容的特殊效果。 line-through：加删除线；overline：加上划线；underline：加下划线；none：默认值，不加任何修饰。 任务4：使用CSS容器属性 盒模型： 1、在元素周围增加边框（border） 2、在元素与其边框之间设定空格填充（padding，即补白） 3、设置边框与周围元素之间的边距（margins）。 任务4：使用CSS容器属性 任务4-1：设置XML页边距 任务4-2：设置XML边框 任务4-3：补白（空格填充） 任务4-1：设置XML页边距 1、margin-top：设置上页边距 2、margin-bottom：设置下页边距 3、margin-left：设置左页边距 4、margin-right：设置右的页边距 5、margin：设置四边页边距 任务4-2：设置XML边框 设置边框线样式：border-style、 border-top-style、 border-right-style、 border-bottom-style、 border-left-style属性，其值分别为：none、dotted、dashed、solid、 double、groove、ridge、inset和outset。 设置边框线宽度：border-width、border-top-width、border-right-width、 border-bottom-width和border-1eft-width五个属性。属性值为thin、medium、thick或绝对长度值。使用绝对长度值时，不能为负数，可以是0。 设置边框线颜色：border-color、border-top-color、border-right-color、 border-bottom-color和border-left-color五个属性。 任务4-3：补白（空格填充） 指定边框和内部元素的间距，可以使用padding、padding-top、padding-right、padding-bottom和padding-left五个属性来指定，属性值为绝对长度或父元素宽度的百分比。 任务5：使用CSS布局属性 任务5-1：元素绝对定位和相对定位 任务5-2：设置元素大小 任务5-3：环绕文本 任务5-4：插入图片 任务5-1：绝对定位和相对定位 1. 绝对定位 元素根据浏览器或父元素左上角的边缘开始计算定位数值 ，其周围元素不受影响。 如：控制左移和上移用left,top，反之则用right,bottom position:absolute; left:100px; top:20px; 2. 相对定位 元素根据自己原始位置作相对位移，其周围元素不受影响。 如：控制左移和上移用left,top，反之则用right,bottom position:relative; left:100px; top:20px; 任务5-2：设置元素大小 CSS通过高度（height）和宽度（width）参数设置元素显示的大小。 Book { width:550px; /*宽550像素*/ } Title { width:450px; /*元素宽550像素*/ height:40px; /*元素高40像素*/ } 任务5-3：环绕文本 CSS中，一个元素的文本可以环绕另一个元素的文本，就像HTML中的文本能够环绕图片一样。 Price{ display:block; color:#2F4F4F; font-weight:bold; float:left; } 任务5-4：插入图片 第一步：增加一个空元素picture，为其属性ID设定某个值。 第二步：使用#引用ID的