Board logo

標題: [分享] CSS 的優勢 [打印本頁]
作者: 小誌    時間: 2010-5-27 04:46     標題: CSS 的優勢

通吃瀏覽器
CSS 樣式表, 不管瀏覽者是使用何種瀏覽器來觀賞網頁皆能表現出網頁獨特的風格, 不像 JavaScript 或 VBScript 語言會因為瀏覽器的不同而產生差異, 不單是市場上使用率最高的 Microsoft Internet Explorer (IE) 與 Netscape Communicator 瀏覽器支援, 甚至許多非主流的瀏覽器, 如 Emacs-W3、Arena......等, 都有支援解析的能力。

特立獨行的風格
一個人氣旺盛的網站之所以吸引人就是因為擁有獨一無二的風格！舉例來說：在 CSS 樣式表出現之前, 幾乎所有網頁中的超鏈結文字都會加上底線 (Under Line) , 而且並無特色變化, 如果加上 CSS 語法那可就大大不同啦！

網路環保
在大家全力推廣全民上網的同時, 出現了一個嚴重的危機〔網路頻寬不足〕, 一方面是因為上網人口的急速增加造成頻寬不足, 但最大的原因是網頁設計者在網頁設計過程中使用了大量的圖片, 圖片檔的體積大, 在傳輸的過程中消耗了大量的網路資源, 而 CSS 的出現將使這個問題獲得部分紓解, CSS 可使用單純的文字來達到與圖片相同的表現效果！也就是說：一段簡短的文字就可以取代體積龐大的圖片！不但傳輸速度加快, 同時也獲得與圖片相同的視覺效果。

網頁維護容易
為了維持我們特立獨行的網站風格, 同時也為了維持網頁的一致性, 我們可以建立一個獨立的 CSS 樣式表檔案, 讓我們建立的每一個網頁樣式都能參照此一樣式檔案, 當此一樣式檔案內容改變後, 所有有參照此一樣式檔案的網頁外觀也就會全部跟著改觀了, 因此我們不必一一的修改各個網頁來達到網站風格的一致性, 如果你維護的網頁只有幾頁, 或許並不會感受到它的便利性, 如果是上百頁甚至數百頁, 你就會體會到它所帶來的便利性！

CSS 的宣告原則

要宣告 CSS 樣式表首先必須具備有 HTML 網頁語法的基礎！也就是你必須了解網頁原始碼中標籤的意義。樣式宣告的標準語法如下：
----------------------------------------------------
p { font-size : 10pt ; }
作用對象, 元素{ 屬性: 屬性值}
----------------------------------------------------
●屬性名稱與屬性值之間必須以冒號隔開。
●每一組屬性設定以「;」分號做結尾。
●屬性名稱與屬性值則必需以一組大括號「{ }」包括起來。

1單一元素的複數屬性設定間必須以「;」分號做區隔, 但, 元素只有單一組屬性設定, 或是單一屬性複數屬性設定中的最後一組屬性設定可省略不加「;」分號：
  1. p { font-size : 10pt ; color : #FF0000 ； }
  2. p { font-size : 10pt ； } 可省略  
複製代碼
2屬性值直接指定其值, 不須加上引號（單引或雙引號）：
  1. p { text-align : center ;} 正確, 直接書寫屬性值
  2. p { text-align : “center” ; } 錯誤, 不須加上引號
複製代碼
3樣式的套用優先順序, 這裡指的套用順序是針對文件製作者與使用者所編定的樣式表有所衝突時何者擁有優先套用權利, 一般來說文件製作者的樣式表位階較高, 當與使用者的樣式表發生衝突時, 製作者的樣式表將優先被套用；若希望文件製作者與使用者所編定的樣式表有所衝突時, 使用者的樣式表能優先被套用, 則可利用關鍵字「 ! important」：
  1. p { text-align : right ! important ;} 使用者樣式優先
  2. p { text-align : center ; } 製作者樣式優先
複製代碼
4元素間可用「, 」逗號隔開進行複合宣告：
  1. 逗號隔開
  2. body , p {
  3. color:#00FF00 ; font-size:10pt ; font-family:細明體 }
複製代碼
上例：在 body 元素標籤內容中的文字外觀顏色都變成綠色、文字的大小指定為 10pt、文字字型為細明體；同時，在 p 元素標籤內容中的文字文字外觀顏色也都變成綠色、文字的大小指定為 10pt、文字字型為細明體，本例中一次就宣告了 body 元素標籤與 p 元素標籤的三種共通樣式屬性。

元素：line-height ( 指定行高)
語法：選擇器 { line-height : 屬性值 }

可指定的屬性值→1長度（單位數值）、 2%（百分比）、
3整數或下列其他可能值 / normal
1.長度（單位數值)數值加上 em 、 px 、 pt 等單位, 不可指定負數值
2.%（百分比）數值加上百分比符號, 行高與文字的高度百分比, 不可指定負數值
3.整數值文字高度的倍數, 不可指定負數值
其他可能值說明
normal 依據文字大小自動設定


瀏覽器對應： IE NetScape Opera Safari Firefox
元素繼承： 有繼承性
適用元素： 全體元素
●line-height 屬性可指定行高, 用於線內元素等於指定線內文字區塊的高度而非文字本身的高度。
●若區塊內含有高度大於指定行高的物件, 則行高會自動增加成為該物件的高度。

範例學習 ： 指定段落的行高 line-height.html
  1. <head>
  2. <meta http-equiv="Content-Language" content="zh-tw">
  3. <title>CSS line-height</title>
  4. <style type="text/css">
  5. /* <![CDATA[ */
  6. body{background-image: url("img/121.jpg"); margin-left:40px;}
  7. h1 {color: #FFFFFF; margin-left:40px;}
  8. .p1 {line-height: 250%; border: #06C dashed 1pt;}
  9. .p2 {line-height: 15pt; border: 2pt dotted #60C;}
  10. .p3 {line-height: 2; border: #60C double 2pt;}
  11. /* ]]> */
  12. </style>
  13. </head>

  15. <body>
  16. <h1>網路動漫館</h1>
  17. <table border="0">
  18. <tr><td width="350">
  19. <p class="p1">龍貓<br />原作．腳本．監督：宮崎駿；音樂：久石讓</p>
  20. <p class="p2">整部影片的分鏡腳本：採 Multi-Angle 方式製作可用遙控器操作隨時與實際影片切換觀賞</p>
  21. <p class="p3">龍貓是宮崎駿的在 STUDIO GHIBLI 的第三部電影，因為這部平靜而溫馨的電影使得龍貓這個可愛的生物在全世界都家喻戶曉，十分適合全家老大小一齊觀看。</p>
  22. </td><td>
  23. <img src="img/p111927714911.jpg" border="1" /></td>
  24. </tr></table>
  25. </body>
複製代碼
[attach]1041[/attach]


CSS．HTML．XHTML 精緻範例辭典


本書走精緻路線，每個範例都是精心設計，精選最常用的語法，不會列了一堆用都用不到的語法，讓書變得又厚又重。最重要的是我們提供了多種實用的查詢方式，可依語法分類、範例功能或字母查找。
□精選最常用的 HTML + XHTML + CSS 語法, 可依語法分類、範例功能或字母查找。
□搭配圖文解說與最精緻的範例示範，讓您不但看得懂，還能馬上知道要怎麼用，是您在設計網頁時最方便的參考書。
□簡易語法入門及基礎觀念，幫助您快速了解HTML + XHTML + CSS 的使用方式。
□清楚標示適用的瀏覽器種類與版本，符合實際需求。
□光碟中收錄完整的範例和程式碼，方便您直接取用和修改再運用。
作者: jacky790325    時間: 2011-7-11 16:00

CSS是很不錯可是在資料龐大的網頁就很容易造成標籤格式混亂的機率....加減用吧
作者: 小誌    時間: 2011-7-21 01:44

回復 2# jacky790325


    這論點我還是頭一次聽到,真是受教了
作者: sammay    時間: 2011-12-2 14:58

感謝您分享，可以提供HTML5的資訊或教學嗎？



歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)