您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > CSS布局探密03

CSS布局探密03

文章來(lái)源：365jz.com 點(diǎn)擊數(shù)：361 更新時(shí)間：2009-09-14 10:36 參與評(píng)論

下面是一段普通的代碼:
css:

.box{
  border:1px solid #ccc;
  font-size:12px;
  background:#F1F1F1;
  padding:10px;
}

html：

但是這個(gè)時(shí)候需求增加了，在頁(yè)面中不僅要有一個(gè)灰色的盒子可能還有藍(lán)色的盒子，可能還有綠色.

通常我們會(huì)想到：用繼承嘛。好我們就做如下更改：

css:

.box-gray,
.box-green{
  border:1px solid #ccc;
  font-size:12px;
  padding:10px;
}
.box-gray{background:#F1F1F1}
.box-green{background:#66FF66}

html：

<div class="box-gray">this is a gray box</div>
<div class="box-green">this is a green box</div>

但是這個(gè)時(shí)候需求又有變化了，根與應(yīng)用的不同，盒子中有些要用到12號(hào)字，有些要用到14號(hào)字，有些要變局10px有些要20px，估計(jì)這個(gè)時(shí)候你就要頭大了，如果要用繼承，css代碼就會(huì)變得異常的復(fù)雜，那我們就來(lái)試驗(yàn)一下用組合的方式看能不能解決。
css:

.fs-12{font-size:12px}
.fs-14{font-size:14px}
.pd-10{padding:10px}
.pd-20{padding:20px}

.box{border:1px solid #ccc;}

.box.gray{background:#f1f1f1}
.box.green{background:#66ff66}

Html

<div class="box gray fs-12 pd-20">this a gray fontsize12px padding20px box</div>
<div class="box green fs-14 pd-10">this a gray fontsize14px padding10px box</div>

雖然在class上組合了好幾個(gè)類，但是代碼和邏輯都非常清晰，而且非常容易維護(hù)，隨意組合隨意擴(kuò)展。從上面可以看到“組合”的方式是不言而喻的，但是也不是十全十美的，再拆分組合的時(shí)候一定不要過(guò)度，不然效果可能適得其反，只有把組合+繼承運(yùn)用的恰到好處才能讓我們的代碼更加優(yōu)雅和藝術(shù)。

上面的樣式用到了類選擇器，下面就來(lái)看看CSS中幾個(gè)常用的選擇器：

類選擇器
在 CSS 中，類選擇器以一個(gè)點(diǎn)號(hào)顯示：

.center {text-align: center}

在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規(guī)則。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

注意：類名的第一個(gè)字符不能使用數(shù)字！它無(wú)法在 Mozilla 或 Firefox 中起作用
ID選擇器

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 "#" 來(lái)定義。

下面的兩個(gè) id 選擇器，第一個(gè)可以定義元素的顏色為紅色，第二個(gè)定義元素的顏色為綠色：

#red {color:red;}
#green {color:green;}

下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

<p id="red">這個(gè)段落是紅色。</p>
<p id="green">這個(gè)段落是綠色。</p>

注意：id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次。

派生選擇器

通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式，通過(guò)合理地使用派生選擇器，可以使標(biāo)記更加簡(jiǎn)潔。

比方說(shuō)，你希望列表中的 strong 元素變?yōu)樾斌w字，而不是通常的粗體字，可以這樣定義一個(gè)派生選擇器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

請(qǐng)注意標(biāo)記為 <strong> 的藍(lán)色代碼的上下文關(guān)系：

<p><strong>我是粗體字，不是斜體字，因?yàn)槲也辉诹斜懋?dāng)中，所以這個(gè)規(guī)則對(duì)我不起作用</strong></p>
<ol>
<li><strong>我是斜體字。這是因?yàn)?strong 元素位于 li 元素內(nèi)。</strong></li>
<li>我是正常的字體。</li>
</ol>

在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無(wú)需為 strong 元素定義特別的 class 或 id，代碼更加簡(jiǎn)潔。

再看看下面的 CSS 規(guī)則：

strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }

下面是它施加影響的 HTML：

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

在現(xiàn)代布局中，id 選擇器和類選擇器常常用于建立派生選擇器。