| 雿𡏭��/��箄��: | hknelson.com | ||
| �䔄雿��𠯫���: | 18 May, 2007 | 頠煺辣���瘙�/蝭�靘�: | NotePad |
| ���蝡䭾�䠷��: | 建立 CSS 控制頁(連結式) |
撠齿𧋦蝭����蝡𣳇�脰�諹�訫�寞�硋�誯�� | |
CSS 全名是 Casciding Style Sheet(階層樣式表), 主要是將 HTML 文件進行分格
它是嵌入式的語言, 與 html 同步使用, 在每一頁的 html 文件中匯入CSS, 就可得到同一效果
HTML 會因為瀏覽器的不同而產生差異, css 不單是市場使用率最高的 IE 或 Netscape
又或是非主流瀏覽器, 如 Emacs-W3、Arena......等, 都有支援解析的能力
CSS 會在網頁後台作一個控制角色, 固定網頁外觀, 不管瀏覽者使用何種瀏覽器都可以表現網頁的風格
利用 CSS 樣式表固定網頁外觀
開啟 Dreamweaver 或 WordPad,
先打上 body { ............. }
body 表示與 HTML 文件中的 body 部份對齊, 利用 { } 進行圍堵
現在在 { } 內加上 background-color
表示該文件中的背景顏色, 可輸入色碼, 或直接輸入色名.
範例: body {background-color:#EEEEEE}
然後設定文字樣式, 在 background-color:#EEEEEE 後加上分號( ; )
分號表示進行下一個設定, 在下一行加上 font-size: 9pt
font-size 即是文字大小, 9pt 即是文字大小數值
亦可加上其他 html 標記, 如 font, color 等
範例:
body {background-color:#EEEEEE;
font-size: 9pt }
框架樣式
加上 table { font-size: 9pt;}
當你在 html 文件內插入 table, 就會與 css 中的 table 對應, 在 table 內輸入的所有文字大小就等於 9pt
7.1
設立虛擬區域
加上 i.hapo {background-color:#FFFFFF}
i 及 hapo 可自行修改, 在 html 文件中輸入 <i class=hapo>文字</i>
<i> 內的文字顏色會被定義為 #FFFFFF
連結顏色
A:link { color: #6666FF; text-decoration: none }
A:visited { color: #6666FF; text-decoration: none }
A:active { text-decoration: none }
A:hover { color: #FF0000; text-decoration: underline}
A:link 表示網頁連結的樣式
A:visited 表示被連結後的樣式
A:active 表示滑鼠按下的的瞬間的樣式
A:hover 表示滑鼠移到連結上的樣式
text-decoration 即是做出的特效, 如第 4 行中的 text-decoration: underline,
就會在 overlink 時加上 underline
從 html 文件連結到 css
完成 css 樣式檔後就將它儲存, 將檔案格式改為 .css (如 myweb.css -> Save)
開啟 html 文件, 輸入:
<link rel="stylesheet" href="myweb.css" type="text/css">
如 css 與 html 文件不是存放於同一文件夾內, 就需在 myweb.css 前加上 ../ 即是 ../myweb.css
每辰 html 文件都加上以上一句語法, 就會與 css 內的設定對應
每次想修改網頁外觀, 只需到 css 修改設定, 然後上傳 css 檔便可
餈𥪜�硺�𢠃�� - 餈𥪜�墧����� - 撠齿𧋦蝭����蝡𣳇�脰�諹�訫�寞�硋�誯��
