本文目錄導(dǎo)讀：

1. 定義區(qū)塊
2. 應(yīng)用CSS樣式
3. 嵌套使用

CSS樣式化區(qū)塊的使用

CSS樣式化區(qū)塊是網(wǎng)頁設(shè)計中常用的一種技術(shù)，它可以讓網(wǎng)頁更加美觀、有條理，如何使用CSS樣式化區(qū)塊呢？

定義區(qū)塊

我們需要在HTML中定義一個區(qū)塊，這個區(qū)塊可以是一個div、一個p或者一個ul等等，根據(jù)具體需求來選擇，我們可以定義一個div來作為我們的區(qū)塊：

<div id="my-block">
  <p>這是一個區(qū)塊</p>
  <ul>
    <li>列表項1</li>
    <li>列表項2</li>
    <li>列表項3</li>
  </ul>
</div>

應(yīng)用CSS樣式

我們需要在CSS中定義一些樣式規(guī)則，將這些規(guī)則應(yīng)用到我們的區(qū)塊上，我們可以給區(qū)塊加上背景色、邊框、內(nèi)邊距等等：

#my-block {
  background-color: #f0f0f0;
  border: 1px solid #000;
  padding: 20px;
}

嵌套使用

我們可以在一個大的區(qū)塊內(nèi)部再定義一些小的區(qū)塊，這些小的區(qū)塊可以繼承大的區(qū)塊的樣式，也可以有自己的樣式，我們可以在一個大的區(qū)塊內(nèi)部再定義一個小的ul：

<div id="my-block">
  <p>這是一個區(qū)塊</p>
  <ul id="my-small-block">
    <li>列表項1</li>
    <li>列表項2</li>
    <li>列表項3</li>
  </ul>
</div>

然后在CSS中定義樣式規(guī)則：

#my-block {
  background-color: #f0f0f0;
  border: 1px solid #000;
  padding: 20px;
}
#my-small-block {
  background-color: #fff;
  border: 1px solid #000;
  padding: 10px;
}

這樣，我們就可以使用CSS樣式化區(qū)塊來美化我們的網(wǎng)頁了。