CSS 实例.docx
《CSS 实例.docx》由会员分享，可在线阅读，更多相关《CSS 实例.docx（38页珍藏版）》请在冰豆网上搜索。
CSS实例
CSS实例
CSS背景实例
1.设置背景颜色
本例演示如何为元素设置背景颜色。
body{background-color:
yellow}
h1{background-color:
#00ff00}
h2{background-color:
transparent}
p{background-color:
rgb（250,0,255）}
p.no2{background-color:
gray;padding:
20px;}
这是标题1
这是标题2
这是段落
这个段落设置了内边距。
2.设置文本的背景颜色
本例颜色如何设置部分文本的背景颜色。
span.highlight
{
background-color:
yellow
}
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
3.将图像设置为背景
本例演示如何将图像设置为背景。
body{background-image:
url（/i/eg_bg_04.gif）;}
4.如何重复背景图像
本例演示如何重复背景图像。
body
{
background-image:
url（/i/eg_bg_03.gif）;
background-repeat:
repeat
}
5.如何在垂直方向重复背景图像
本例演示如何垂直地重复背景图像。
body
{
background-image:
url（/i/eg_bg_03.gif）;
background-repeat:
repeat-y
}
6.如何在水平方向重复背景图像
本例演示如何水平地重复背景图像。
body
{
background-image:
url（/i/eg_bg_03.gif）;
background-repeat:
repeat-x
}
7.如何仅显示一次背景图像
本例演示如何仅显示一次背景图像。
body
{
background-image:
url（'/i/eg_bg_03.gif'）;
background-repeat:
no-repeat
}
8.如何放置背景图像
本例演示如何在页面上放置背景图像。
提示：
您需要把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.如何使用%来定位背景图像
本例演示如何使用百分比来在页面上定位背景图像。
注释：
为了在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.如何使用像素来定位背景图像
本例演示如何使用像素来在页面上定位背景图像。
body
{
background-image:
url（'/i/eg_bg_03.gif'）;
background-repeat:
no-repeat;
background-attachment:
fixed;
background-position:
50px100px;
}
注释：
为了在Mozilla中实现此效果，background-attachment属性必须设置为"fixed"。
11.如何设置固定的背景图像
本例演示如何设置固定的背景图像。
图像不会随着页面的其他部分滚动。
body
{
background-image:
url（/i/eg_bg_02.gif）;
background-repeat:
no-repeat;
background-attachment:
fixed
}
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
图像不会随页面的其余部分滚动。
12.所有背景属性在一个声明之中
本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。
body
{
background:
#ff0000url（/i/eg_bg_03.gif）no-repeatfixedcenter;
}
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
CSS文本实例：
设置文本颜色
本例演示如何设置文本的颜色。
body{color:
red}
h1{color:
#00ff00}
p.ex{color:
rgb（0,0,255）}
这是heading1
这是一段普通的段落。
请注意，该段落的文本是红色的。
在body选择器中定义了本页面中的默认文本颜色。
该段落定义了class="ex"。
该段落中的文本是蓝色的。
设置文本的背景颜色
本例颜色如何设置部分文本的背景颜色。
span.highlight
{
background-color:
yellow
}
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
这是文本。
升级会员 