Web Standards Solutions 網頁設計標準規格


套用CSS


如何將CSS套用到文件上?
方法A:<style>標籤
  <style type="text/css">
   <![CDATA[
   ...
   ]]>
  </style>
  部分理解:老舊瀏覽器可能有問題
  無法快取:放再頁面內,每次讀取頁面時一併下載
  修改多次
  方便開發

方法B:外部樣式表
  <link rel="stylesheet" type="text/css" href="style.css" />
  分離檔案=方便維護
  下載一次
  仍然無法完全隱藏:老舊瀏覽器可能有問題

方法C:@import
  <style type="text/css">
   <![CDATA[
   @import "style.css";
   ]]>
  </style>
  捉迷藏:Netscape4.x不支援@import規則,因些會使參考的CSS內容被「藏起來」
打開樣式,關掉樣式:
結合方法B與方法C應用多重樣式表
變色龍效果
如何辦到
  <head>
   <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  
  style.css
  @import url("layout.css");
  @import url("fonts.css");
  @import url("colors.css");

Lo-Fi與Hi-Fi樣式
  以方法A或B提供古老、最新瀏覽器都支援的Lo-Fi效果,再以@import支援進階新樣式
  <link rel="stylesheet" type="text/css" href="lofi.css" />
  <style type="text/css">
   @import "hifi.css";
  </style>
順序很重要
擁抱串聯特性
  <style type="text/css">
   @import "master.css";
   @import "custom.css";
  </style>

方法D:行內樣式
  <h1 style="font-family: Georgia, serif; color:orange;">This is a Title</h1>
  樣式綁死在標籤上
  小心使用

更多技巧
代用樣式表
  <link rel="stylesheet" type="text/css" href="default.css" title="default" />
  <link rel="alternate stylesheet" type="text/css" href="largetext.css" title="large" />
  <link rel="alternate stylesheet" type="text/css" href="largertext.css" title="larger" />
三種字體大小
  defult.css  body{font-size: 12px;}
  large.css   body{font-size: 16px;}
  larger.css  body{font-size: 20px;}
依舊串聯
使代用樣式表發揮功用
  Alternative Style:Working With Alternate Style Sheet(http://www.alistapart.com/articles/alternate/)
不只能調整字體大小
DOM的好意
創作者介紹

神鵰蝦

jck11 發表在 痞客邦 PIXNET 留言(0) 人氣()