首页 > 开发 > CSS > 正文

CSS教程(6):实例学习CSS如何控制网页文本

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

武林网(www.vevb.com)文章简介:本CSS教程主要讲解网页文字实例:1、设置文本颜色,2、设置文本的背景颜色,3、规定字符间距。

本CSS教程主要讲解网页文字实例:1、设置文本颜色,2、设置文本的背景颜色,3、规定字符间距。

1、设置文本颜色

本例演示如何设置文本的颜色。

<html>
<head>
<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1>这是 header 1</h1>
<h2>这是 header 2</h2>
<p>这是一个段落。</p>
</body>
</html>

2、设置文本的背景颜色

本例颜色如何设置部分文本的背景颜色。本文来自于网页教学网VeVb

<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">
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>
</html>

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