首页 > 开发 > CSS > 正文

CSS教程(2):通过实例学习CSS背景

2024-07-11 09:04:46
字体:
来源:转载
供稿:网友

武林网(www.vevb.com)文章简介:本教程一共三个例子: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>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表