接著再來說明，為什要使用CSS 來編輯網頁，用最傳統的寫法也是一樣可以寫呀，其實在於將網頁內容分開，原本資料內容顏色都定義在HTML 裡面，都是混在一起的，先寫段傳統的寫法唄！
<!doctype html> <html> <head> <metacharset="utf-8"> <title>魚和橙的結合</title> </head> <body> <p style="color:red;">魚和橙的結合</p> <p style="color:blue;">魚和橙的背份</p> <p style="color:gray;">魚橙的發明</p> <p style="color:red;">魚和橙的結合</p> </body> </html>輸出結果：
另外以含css的方式來寫：
<!doctype html> <html> <head> <metacharset="utf-8"> <title>魚和橙的結合</title> <style type="text/css"> .one { color: red; } .two { color: blue; } .three { color: gray; } </style> </head> <body> <p class="one">魚和橙的結合</p> <p class="two">魚和橙的背份</p> <p class="three">魚橙的發明</p> <p class="one">魚和橙的結合</p> </body> </html>新增css程式碼為：
<style type="text/css"> .one { color: red; } .two { color: blue; } .three { color: gray; } </style>輸出的結果為：
兩個輸出結果為相同的。
但是，兩者的差異在於哪呢？記得前面也說明過html就像骨架，CSS為衣服，你可以定義骨架後，衣服可由CSS完全規定。
傳統的方式中，如果你要一同改變"魚和橙的結合"(紅色)，改成藍色，你必須將每一個<p style="color:red;">都改成<p style="color:blue;">
當然，以這個程式中，可以一個一個改，並不花多少時間，但考慮到當你html寫的 架構很大時，你必須全部都改，那就累了，更遇到如果你每張網頁都要改，這就麻煩了，那是一件很大的工程，我就寫過100多張網頁，但要一次改顏色，如果沒 有css的幫忙，那就完了@@，在現在的用法中（第二個例子），當我要改"魚和橙的結合"的顏色，我僅要將以下程式改過，就可以變化了！
<style type="text/css"> .one { color: green; } </style>更改後，就可將顏色改成綠色了
如果你有很多的網頁（相同架構、提取相同的css），當你做這樣的動作的時，將會一次性改變，增加更動程式的方便性。
另傳統的寫法，還有個問題，就是如果你宣告的東西很多的話，那整個程式碼就會變得成難解讀，當你還要更改時，哇！那是很困難的事呀！
沒有留言:
張貼留言