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的好意
全站熱搜
留言列表
