当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程(2):通过实例学习CSS背景

CSS样式表
英文教程:五种CSS选择器类型
网页缓冲效果特效代码
CSS教程:CSS让网页文字自动隐藏
利用CSS在导航条上标示当前所在频道
CSS教程:网页无序列表标记的设计
.clear方法解决网页自适应高度的问题
CSS教程(7):网页段落行间距控制的实例
CSS教程(6):实例学习CSS如何控制网页文本
CSS教程(3):通过实例学习CSS背景
CSS教程(2):通过实例学习CSS背景
制作网页使用的CSS样式表错误排查方法
CSS Hack(Safari、Opera、Firefox3和IE7)
CSS教程:vlink,alink,link和a:link
CSS标示导航条当前所在频道
CSS制作网页时遇到BUG的解决方法
CSS教程:clip属性详细讲解
div层被flash层遮盖问题解决思路
CSS教程:CSS控制网页文字排版实例
Web标准建构的站点一览表
CSS实例:vertical-align属性让网页层居中

CSS样式表 中的 CSS教程(2):通过实例学习CSS背景


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 48 ::
收藏到网摘: n/a


                         本教程一共三个例子:1、设置背景颜色;2、设置文本的背景颜色;3、将图像设置为背景.             
本教程一共三个例子:1、设置背景颜色;2、设置文本的背景颜色;3、将图像设置为背景。
参考软晨学习网关于CSS背景的理论知识:CSS教程(1):学习CSS背景相关知识 1、设置背景颜色
本例演示如何为元素设置背景颜色。
<html>
<head>
<style type="text/css">
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;}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>
</body>
</html> 2、设置文本的背景颜色
本例颜色如何设置部分文本的背景颜色。 看到此信息请您谅解!webjxcom为了防采集加上的!请到软晨学习网浏览更多信息。
<html>
<head>
<style type="text/css">
span.highlight
{
background-color:yellow
}
</style>
</head>
<body>
<p>
<span class="highlight">这是文本。</span> 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 <span class="highlight">这是文本。</span>
</p>
</body>
</html> 3、将图像设置为背景
本例演示如何将图像设置为背景。
<html>
<head>
<style type="text/css">
body {background-image:url(/i/eg_bg_04.gif);}
</style>
</head>
<body></body>
</html>