如何设置 CSS 中不同元素的背景色?
在本文中,我们将学习如何在 CSS 中设置不同元素的背景色。CSS 的背景色属性用于设置元素的背景。
方法:利用 CSS 的背景色属性设置元素的背景。我们可以通过选择元素的类名 id name 来设置背景色,然后对其应用 background-color 属性来设置背景色。
语法:
background-color: color_name;
下面的例子说明了这种方法。
例 1:
超文本标记语言
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
margin:50px 50px;
font-size: 50px;
}
.gfg1{
background-color: green;
}
.gfg2{
background-color: rgb(163, 158, 158);
color: black;
}
.gfg3{
background-color: rgb(102, 119, 102);
}
</style>
</head>
<body>
<div class="gfg1">
geeksforgeeks in div1
</div>
<div class="gfg2">
geeksforgeeks in div2
</div>
<p class="gfg3"
style="margin:50px 50px; font-size: 50px;">
geeksforgeeks in p
</p>
</body>
</html>
输出:
例 2:
超文本标记语言
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
margin:50px 50px;
font-size: 50px;
}
.gfg1{
background-color: green;
}
.gfg2{
background-color: rgb(163, 158, 158);
color: black;
margin:50px 50px;
font-size: 30px;
}
.gfg3{
background-color: rgb(102, 119, 102);
}
</style>
</head>
<body>
<div class="gfg1">
geeksforgeeks in div
</div>
<a class="gfg2"
href="https://www.geeksforgeeks.org/">
geeksforgeeks link
</a>
<p class="gfg3"
style="margin:50px 50px; font-size: 40px;">
geeksforgeeks in p
</p>
</body>
</html>
输出:
版权属于:月萌API www.moonapi.com,转载请注明出处