DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS教程(6):實例學習CSS如何控制網頁文本
CSS教程(6):實例學習CSS如何控制網頁文本
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:本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、設置文本的背景顏色

本例顏色如何設置部分文本的背景顏色。本文來自於破洛洛poluoluoCom

<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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved