CSS 实例.docx

1、CSS 实例CSS 实例CSS 背景实例1. 设置背景颜色本例演示如何为元素设置背景颜色。body background-color: yellowh1 background-color: #00ff00h2 background-color: transparentp background-color: rgb(250,0,255)p.no2 background-color: gray; padding: 20px;这是标题 1这是标题 2这是段落这个段落设置了内边距。2. 设置文本的背景颜色本例颜色如何设置部分文本的背景颜色。span.highlightbackground-color:

2、yellow这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。3. 将图像设置为背景本例演示如何将图像设置为背景。body background-image:url(/i/eg_bg_04.gif);4. 如何重复背景图像本例演示如何重复背景图像。body background-image: url(/i/eg_bg_03.gif);background-repeat: repeat5. 如何在垂直方向重复背景图像本例演示如何垂直地

3、重复背景图像。body background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-y6. 如何在水平方向重复背景图像本例演示如何水平地重复背景图像。body background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-x7. 如何仅显示一次背景图像本例演示如何仅显示一次背景图像。body background-image: url(/i/eg_bg_03.gif);background-repeat: no-repeat8. 如何放置背景图像本例演示如何

4、在页面上放置背景图像。提示：您需要把 background-attachment 属性设置为 fixed，才能保证该属性在 Firefox 和 Opera 中正常工作。body background-image:url(/i/eg_bg_03.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:center;提示：您需要把 background-attachment 属性设置为 fixed，才能保证该属性在 Firefox 和 Opera 中正常工作。9. 如何使用%来定位背景图

5、像本例演示如何使用百分比来在页面上定位背景图像。注释：为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 fixed。body background-image: url(/i/eg_bg_03.gif);background-repeat: no-repeat;background-attachment:fixed;background-position: 30% 20%; 注释：为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 fixed。10. 如何使用像素来定位背景图像本例演示如何使用像素来在

6、页面上定位背景图像。body background-image: url(/i/eg_bg_03.gif);background-repeat: no-repeat;background-attachment:fixed;background-position: 50px 100px;注释：为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 fixed。11. 如何设置固定的背景图像本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。body background-image:url(/i/eg_bg_02.gif);backgroun

7、d-repeat:no-repeat;background-attachment:fixed图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动

8、。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。12. 所有背景属性在一个声明之中本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。body background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。

9、这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。CSS 文本实例：设置文本颜色本例演示如何设置文本的颜色。body color:redh1 color:#00ff00p.ex color:rgb(0,0,255)这是 heading 1这是一段普通的段落。请注意，该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。该段落定义了 class=ex。该段落中的文本是蓝色的。设置文本的背景颜色本例颜色如何设置部分文本的背景颜色。span.highlightbackground-color:yellow这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 span class=hi