Maison >interface Web >tutoriel CSS >Comment définir la couleur d'arrière-plan de la page avec CSS
Comment définir la couleur d'arrière-plan de la page avec CSS
- 醉折花枝作酒筹original
- 2021-04-20 09:51:296001parcourir
En CSS, vous pouvez utiliser l'attribut "background-color" pour définir la couleur d'arrière-plan de la page, la syntaxe est "background-color: color value". La propriété background-color définit la couleur d'arrière-plan de l'élément, qui correspond à la taille totale de l'élément, y compris le remplissage et les bordures (mais pas les marges).
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Définir la couleur d'arrière-plan de la page
Le CSS est implémenté en définissant l'attribut background-color de la balise body La couleur d'arrière-plan met principalement en évidence le thème de la page. et est cohérent avec la couleur du texte de premier plan. La méthode de réglage spécifique est la même que celle du réglage de la valeur de couleur du texte, des composants hexadécimaux, RVB ou des mots de couleur anglais peuvent être utilisés.
<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>Le code est comme ci-dessus. Vous pouvez voir que la couleur d'arrière-plan est vert foncé et la couleur du texte est vert vif. Avec les images et le contenu du texte lui-même, la résurrection de toutes choses au printemps est affichée. .
Utilisez la couleur d'arrière-plan pour diviser la page en blocs
L'attribut Background-color peut non seulement définir la couleur d'arrière-plan de la page, mais également la couleur d'arrière-plan de presque tous les éléments HTML configurés. Par conséquent, de nombreuses pages Web obtiennent l’effet de blocage en définissant différentes couleurs d’arrière-plan.
<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>Le code est comme ci-dessus. La bannière en haut, la barre de navigation à gauche et la partie texte au milieu utilisent respectivement 3 couleurs d'arrière-plan différentes pour atteindre l'objectif de segmentation de la page. utilisé dans les pages Web. Souvent utilisé en production.
Ici, l'image de la bannière en haut peut être une image avec un dégradé de couleurs de gauche à droite. La couleur passe de l'image elle-même à la couleur d'arrière-plan de la page, ce qui semblera très naturel. peut être vu dans Photoshop. Il est facile à mettre en œuvre et constitue également une méthode courante pour la production de pages Web.
Apprentissage recommandé : Tutoriel vidéo CSS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!