CSS教程(6):实例学习CSS如何控制网页文本
CSS教程(6):实例学习CSS如何控制网页文本
发布时间:2016-12-27 来源:查字典编辑
摘要:本CSS教程主要讲解网页文字实例:1、设置文本颜色,2、设置文本的背景颜色,3、规定字符间距。本CSS教程主要讲解网页文字实例:1、设置文本...

本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、设置文本的背景颜色

本例颜色如何设置部分文本的背景颜色。本文来自于查字典教程网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">

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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类