從一個簡單的加法運算功能開發建立 HTML+JavaScript+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 會根據不同的選擇器,找到所選擇的標籤進行套用,因此我們再一次得到相同的外觀樣式效果。好了,現在我們知道如何透過選擇器切割 CSS 的樣式設定,如你所見,這有很多的好處:
  • 方便進行 CSS 的樣式設定管理。
  • 獨立於 HTML 標籤,可以在不影響網頁內容定義下,更動外觀設定。
  • 透過選擇器設定,減少重覆的 CSS 樣式項目設定。
假設現在我想要將文字方塊的背景與文字顏色、同時包含輸出結果的樣式一併作調整,可以經過以下的設定:

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

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

如你所見,這些設定再一次改變了 input 標籤的外觀。選擇器的功能相當強大,這裏面有相當多的細節,於後續的課程中進一步作討論。

(上)(中)(下)

沒有留言: