Heim >Web-Frontend >CSS-Tutorial >So legen Sie die Hintergrundfarbe einer Seite mit CSS fest
So legen Sie die Hintergrundfarbe einer Seite mit CSS fest
- 醉折花枝作酒筹Original
- 2021-04-20 09:51:296001Durchsuche
In CSS können Sie das Attribut „background-color“ verwenden, um die Hintergrundfarbe der Seite festzulegen, mit der Syntax „background-color: Farbwert“. Die Eigenschaft „Hintergrundfarbe“ legt die Hintergrundfarbe eines Elements fest. Dabei handelt es sich um die Gesamtgröße des Elements, einschließlich Polsterung und Rändern (jedoch nicht der Ränder).
Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Legen Sie die Hintergrundfarbe der Seite fest.
CSS wird durch Festlegen des Attributs „Hintergrundfarbe“ des Body-Tags implementiert. Die Hintergrundfarbe hebt hauptsächlich das Thema der Seite hervor und entspricht der Farbe des Vordergrundtextes. Die spezifische Einstellungsmethode ist die gleiche wie die Einstellung des Textfarbwerts. Es können Hexadezimal-, RGB-Komponenten oder englische Farbwörter verwendet werden.
<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>Der Code ist wie oben. Sie können sehen, dass die Hintergrundfarbe dunkelgrün und die Textfarbe hellgrün ist. Zusammen mit dem Bild und dem Textinhalt selbst zeigt es die Auferstehung aller Dinge im Frühling.
Verwenden Sie die Hintergrundfarbe, um die Seite in Blöcke zu unterteilen.
Mit dem Attribut „Background-color“ können Sie nicht nur die Hintergrundfarbe der Seite festlegen, sondern auch die Hintergrundfarbe fast aller HTML-Elemente. Daher erzielen viele Webseiten den Blockierungseffekt durch die Einstellung unterschiedlicher Hintergrundfarben.
<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>Der obere Banner, die linke Navigationsleiste und der mittlere Textteil verwenden jeweils 3 verschiedene Hintergrundfarben, um den Zweck der Seitensegmentierung zu erreichen.
Hier kann das Bannerbild oben ein Bild mit einem Farbverlauf von links nach rechts sein. Der Farbübergang vom Bild selbst zur Hintergrundfarbe der Seite wirkt sehr natürlich in Photoshop ist es auch eine gängige Methode zur Webseitenerstellung.
Empfohlenes Lernen: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo legen Sie die Hintergrundfarbe einer Seite mit CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!