DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS教程(2):通過實例學習CSS背景
CSS教程(2):通過實例學習CSS背景
編輯:CSS進階教程     

本教程一共三個例子: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、設置文本的背景顏色

本例顏色如何設置部分文本的背景顏色。 看到此信息請您諒解!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">
body {background-image:url(/i/eg_bg_04.gif);}
</style>
</head>
<body></body>
</html>

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