《HTML5 精要剖析》- 1.5.3 開始發展應用程式/運用選擇器組織CSS

2012-03-20

3512
0
HTML5
2012-03-23

HTML JavaScript 以及 CSS 都看過了，現在進階一點，來看一個相當重要的東西 - 選擇器，除了設定樣式需要她，在 HTML5 時代，我們還可以依賴她萃取複雜的網頁內容 …

到目前為止，前一篇文章「1.5.2 開始發展應用程式/調整加法運算器的 CSS 設定」中的加法運算程式，已經順利的調整為我們要求的外觀了，這個程式基本上算是已經完成基本的設計與開發了，不過它的CSS 還有進一步調整的必要，這一節就來談這一部份。

設定CSS 最簡單的方式，便是直接於所要設定的標籤裏面指定 style 屬性，我們在前述的討論裏面已經看到相關的範例，但在實務的開發上，為了方便維護並不太會這麼作，除了針對某個特定的標籤設定，大致上這些CSS 樣式均是直接抽取出來統一管理，就如同撰寫 JavaScript 會配置在<script> 當中的意思是一樣的，這種作法有很多好處，我們先看實作，有了相關的經驗，後續再討論這種作法的優點。

同樣的，依然以加法運算程式進行說明，在前面幾篇文章的討論過程中，針對兩個文字方塊作的CSS 設定幾乎是相同的，如下式：


<input id="a" type="text" 
        style="width:60px;margin-right:10px;text-align:right;" />+
<input id="b" type="text" 
        style="width:60px;margin-left:10px;text-align:right;" />

在這種情形下，重覆設定讓應用程式難以維護，一旦其中某些設定需要更動，相關的標籤便須逐一調整其 style 樣式，由於這只是教學用的範例，因此影響不大，實際上線運作的案例，通常會需要大量的CSS 設定，如此一來將導致大量的維護成本，為了改善這種狀況，現在我們來調整CSS 的設定方式。首先在<head> 裏面配置以下的標籤：


<style></style>

將原來設定於文字方塊 style 屬性裏面的樣式提取出來，配置於此組標籤中，結果如下：


<style>    
input
{
    width:60px;
    margin-right:10px;
    text-align:right;
}
</style>

其中的內容讀者已經能夠理解，現在請特別注意開始與結束的部份，由於這組樣式將套用於<input> ，因此指定了input 這個名稱，然後將所有的樣式內容配置於大括弧即可。現在將HTML 中的兩組<input> 內容裏面的style 屬性整個移除，HTML 的部份看起來像這個樣子，其中的<input> 標籤變乾淨了：


<body>
    <input id="a" type="text"  />+
    <input id="b" type="text"  />
    <button onclick="add()" >＝</button>
    <output id="result"></output>
</body>

重新瀏覽網頁，我們可以看到以下的效果：

如你所見，除了style 屬性，只需撰寫一次樣式即達到相同的設定效果，不過仔細檢視之後，會發現第二個文字方塊與加號（+）連在一起了，然後與右邊的= 按鈕距離變大了，這是因為樣式被指定套用至 <input> 標籤，所有的<input> 標籤均會設影響，因此接下來，我們要進一步針對其中差異的部份進行設定，而在此之前，先談談選擇器。

學習CSS 除了瞭解樣式設定，另外一個重點便是選擇器的運用，前者決定所要呈現的外觀樣式，後者讓設計者能夠指定這些樣式所要套用的標籤，回頭看上述的設定，其中的input 便是一種選擇器，表示大括弧中的樣式會選擇 HTML 中所有的 <input> 標籤進行套用，如果將 <input> 改為 <output> ，則這一組樣將會套用至 <output> 標籤，其它類推。

標籤名稱是最簡單的選擇器，但就如同上述討論的，這並不夠，即使相同的標籤，也有部份不同的設定，以文字方塊為例，左邊a 文字方塊為了增加與加法符號+ 的空隔必需將其 margin-right 樣式項目值設定為 10px ，但是右邊的b 文字方塊則是必須設定margin-left ，否則將出現述的效果，增加的是= 按鈕，為了針對特定樣式設定的差異需求，我們需要另外一種id 屬性識別選擇器，這一種選擇器以# 為字首連接所要設定的標籤id 屬性，調整之後如下：


<style>    
input
{
    width:60px;
    text-align:right;
}
#a
{
    margin-right:10px;        
}
#b
{
    margin-left:10px;        
}
</style>

Input 選擇器中的 margin-right 移至#a 表示套用至id 屬性為a 的標籤，而#b 則設定 margin-left 屬性。現在，CSS 會根據不同的選擇器，找到所選擇的標籤進行套用，文字方塊套用了 input 選擇器中的樣式， id 屬性為 a 的文字方塊，套用了 margin-right:10px 這一組屬性，而 id 屬性 b 的文字方塊則再套用 margin-left:10px 屬性，因此我們再一次得到相同的外觀樣式效果。好了，現在我們知道如何透過選擇器切割CSS 的樣式設定，這有很多的好處：

方便進行CSS 的樣式設定管理。
獨立於HTML 標籤，可以在不影響網頁內容定義下，更動外觀設定。
透過選擇器設定，減少重覆的 CSS 樣式項目設定。

假設現在我想要將文字方塊的背景與文字顏色一併作調整，可以經過以下的設定：


input
{
    width:60px;
    text-align:right;
    background:black ; 
    color:silver ; 
}

其中加入了兩組樣式， background 表示背景顏色，而color 表示文字的顏色，因此我們得到了以下的結果：

如你所見，這些設定再一次改變了input 標籤的外觀。選擇器的功能相當強大，這裏面有相當多的細節，於後續的課程中進一步作討論，而下一篇，我們將回到JavaScript ，結合這裏所討論的選擇器，針對網頁內容進行程式化控制。

回首頁