一、背景顏色的設置
設置背景顏色是CSS樣式中最常用的一種樣式設置。需要通過樣式屬性background-color來設置元素的背景顏色。background-color可以接受顏色值的輸入，也可以接受顏色名稱，如以下兩個例子：
background-color: #ff0000; /* 使用十六進位數表示顏色值 */
background-color: red; /* 使用CSS內置的顏色名稱 */值得注意的是， background-color不僅可以對塊狀元素設置，也可以對行內元素進行背景顏色的設置。
二、CSS外邊距的設置
使用外邊距是一種控制元素與其他元素之間的距離的方式。外邊距可以通過margin屬性設置， margin屬性接受四個值，分別代表上外邊距，右外邊距，下外邊距和左外邊距。
例如以下是一段樣式代碼，將 h1 元素設置上邊距和下邊距均為30像素，左右邊距分別為15像素：
h1{
margin: 30px 15px;
}三、如何設置CSS外邊距的背景顏色
通過以上兩個小節的講解，我們可以知道，如果需要同時設置元素的背景顏色和外邊距樣式，只需要將兩個樣式屬性寫在同一個選擇器中即可：
h1{
margin: 30px 15px;
background-color: #ff0000;
}以上代碼將 h1 元素的上下外邊距設置為30像素，左右外邊距均為15像素，設置了一個紅色的背景顏色。
四、樣式設置效果演示
為了更好地演示樣式的效果，以下是完整的html和CSS代碼：
<!DOCTYPE html>
<html>
<head>
<title>CSS外邊距背景顏色設置演示</title>
<style>
h1{
margin: 30px 15px;
background-color: #ff0000;
color: #fff; /* 設置文字顏色為白色 */
text-align: center; /* 設置文字居中 */
padding: 10px; /* 設置內邊距 */
}
</style>
</head>
<body>
<h1>如何設置CSS外邊距的背景顏色</h1>
</body>
</html>運行以上代碼，可以看到一個帶有紅色背景和白色文字的居中標題，上下外邊距為30像素，左右外邊距為15像素：
原創文章，作者：XTYJ，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/145743.html
微信掃一掃 
支付寶掃一掃 