ホームページ > 記事 > ウェブフロントエンド > CSSでページの背景色を設定する方法
CSSでページの背景色を設定する方法
- 醉折花枝作酒筹オリジナル
- 2021-04-20 09:51:295938ブラウズ
CSS では、「background-color」属性を使用してページの背景色を設定できます。構文は「background-color: color value」です。背景色プロパティは、要素の背景色を設定します。これは、パディングと境界線を含む (マージンは含まない) 要素の合計サイズです。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
ページの背景色を設定します
CSS は、body タグのbackground-color 属性を設定することで実装されます。背景色は主にページのテーマを強調します。前景色のテキストの色と一致しています。具体的な設定方法は文字色の値の設定と同様で、16進数、RGB成分、または色の英単語が使用できます。
<span style="font-size:24px;"><html>
<head>
<title>
背景颜色
</title>
<style>
<!--
body{
background-color:#5b8a00;
margin:0px;
padding:0px;
color:#c4f762;
}
p{
font-size:15px;
padding-left:10px;
padding-top:8px;
line-height:120%;
}
span{
font-size:80px;
font-family:黑体;
float:left;
padding-right:5px;
padding-left:10px;
padding-top:8px;
}
-->
</style>
</head>
<body>
<img src="
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg
"style="float:right;">
<span>春</span>
<p>季，地球的北半球开始倾向太阳，收到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁移，离开越冬地向繁衍地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。</p>
<p>对农民来说，春季是播种许多农作物的季节。在春季，地球的北半球开始倾向太阳，收到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁移，离开越冬地向繁衍地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。</p>
</body>
</html></span>コードは上記の通りです。背景色が濃い緑、文字色が明るい緑であることがわかります。画像と文字内容そのものと合わせて、春の万物の復活が表示されています。
背景色を使用してページをブロックに分割する
Background-color 属性は、ページの背景色を設定するだけでなく、ほとんどのページの背景色も設定できます。すべての HTML 要素をセットアップします。したがって、多くの Web ページでは、異なる背景色を設定することでブロックの効果を実現しています。
<span style="font-size:24px;"><html>
<head>
<title>
利用背景颜色分块
</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-color:#ffebe5;
}
.topbanner{
background-color:#fbc9ba;
}
.leftbanner{
width:22%;height:330px;
vertical-align:top;
background-color:#6d1700;
color:#FFFFFF;
text-align:left;
padding-left:40px;
font-size:14px;
}
.mainpart{
text-align:center;
}
-->
</style>
</head>
<body>
<table cellpadding="0"cellspacing="1" width="100%" border="0">
<tr>
<td colspan="2"class="topbanner"><img src="
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg
"border="0"></td>
</tr>
<tr>
<td class="leftbanner">
<br><br>首页<br><br>分类讨论
<br><br>谈天说地<br><br>精华区
<br><br>我的信箱<br><br>休闲娱乐
<br><br>立即注册<br><br>离开本站
</td>
<td class="mainpart">正文内容……</td>
</tr>
</body>
</html></span>コードは上記の通りです。上部のバナー、左側のナビゲーション バー、中央のテキスト部分は、ページ分割の目的を達成するためにそれぞれ 3 つの異なる背景色を使用しています。この分割方法は Web ページで使用されています。本番環境でよく使われます。
ここでは、上部のバナー画像を左から右へ色のグラデーションを持つ画像にすることができます。その色は、画像そのものからページの背景色に移り変わり、非常に自然に見えます。この効果は、 Photoshop で見ることができます。実装は簡単で、Web ページ制作の一般的な方法でもあります。
推奨学習: css ビデオ チュートリアル
以上がCSSでページの背景色を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。