CSS布局探密03

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

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

html：

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

 

但是這個時候需求增加了，在頁面中不僅要有一個灰色的盒子可能還有藍色的盒子，可能還有綠色.

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

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>

 

但是這個時候需求又有變化了，根與應用的不同，盒子中有些要用到12號字，有些要用到14號字，有些要變局10px有些要20px，估計這個時候你就要頭大了，如果要用繼承，css代碼就會變得異常的複雜，那我們就來實驗一下用組合的方式看能不能解決。
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上組合了好幾個類，但是代碼和邏輯都非常清晰，而且非常容易維護，隨意組合隨意擴充。從上面可以看到“組合”的方式是不言而喻的，但是也不是十全十美的，再拆分組合的時候一定不要過度，不然效果可能適得其反，只有把組合+繼承運用的恰到好處才能讓我們的代碼更加優雅和藝術。

上面的樣式用到了類別選取器，下面就來看看CSS中幾個常用的選取器：

類別選取器
在 CSS 中，類別選取器以一個點號顯示： 

.center {text-align: center}

在下面的 HTML 程式碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選取器中的規則。

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

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

注意：類名的第一個字元不能使用數字！它無法在 Mozilla 或 Firefox 中起作用
ID選取器

id 選取器可以為標有特定 id 的 HTML 元素指定特定的樣式。

id 選取器以 "#" 來定義。

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

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

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

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

注意：id 屬性只能在每個 HTML 文檔中出現一次。 

派生選取器

通過依據元素在其位置的上下文關係來定義樣式，通過合理地使用派生選取器，可以使標記更加簡潔。

比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選取器： 

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

請注意標記為 <strong> 的藍色代碼的上下文關係：

<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用</strong></p><ol><li><strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong></li><li>我是正常的字型。</li></ol>

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

再看看下面的 CSS 規則：

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>

 

在現代布局中，id 選取器和類別選取器常常用於建立派生選取器。

 

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }

 
不過有一點要注意：CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。