這是常用到的CSS Code: ############# 行內式(Inlin Style)排版樣式:(直接定義在原有的html標籤內) 標籤架構: <tag style="property:value">Document</tage> <標籤 樣式宣告="樣式名稱:設定值">文件</標籤> 範例:<font style="font-size: 25pt;color:green">網頁研習室</font> 範例:<DIV STYLE="position:absolute; width:20px; height:20px">網頁研習室</DIV> ############# 內崁式(Embedding Style)排版樣式:(定義在HEAD標籤內) 標籤架構: (1)依附標籤 <style type="text/css"> h2 {CSS語法} td,p {CSS語法} </style> 只要在<body>...</body>間使用到<h2>、<td>、<p>這些標籤,將自動被套用。 (2)先給名字再呼叫 <style type="text/css"> .type1 {CSS語法} .type2 {CSS語法} </style> 因已經設定命名為type1 OR type2(自訂任取),所以想套用的時候,就用class呼叫它 所以只要在<body>...</body>間,使用<font class="設定命名">...</font>標籤內的文件,將會套用到type1 OR type2的設定。 (3)先給名字再呼叫(id) <style type="text/css"> #case1 {CSS語法} #case2 {CSS語法} </style> 因已經設定命名為.#case1 OR .#case2,要套用的時候,可用id呼叫它。 所以只要在<body>...</body>間,使用<font id="設定命名">...</font>標籤內的文件,將會套用到.#case1 OR .#case2的設定(大多用來絕對定位網頁中的物件,以井字號開始,每個只能定義一次)。 (2) & (3)可相互結合使用 ############# 連結式(Linking Style)排版樣式:(定義直接寫在外部檔案內) 標籤架構: <link rel="stylesheet" type="text/css" href="../../three.css"> ############# 常用範例: 常用型 <style> <!-- body { font-family: "新細明體"; font-size: 10pt; text-decoration: none} td { font-family: "新細明體"; font-size: 10pt; text-decoration: none} a { text-decoration: none;font-weight: normal;color:#0000ff} a:hover {background:#1AA3F3;color:#ffffff;text-decoration: underline;} --> </style> ========= 加底線 <STYLE type="text/css"> <!-- td { font-size: 10pt; text-decoration: none;color:#000000} A:link {color:#ff0000; text-decoration: none} A:hover {background:#ffffff; text-decoration: underline} A:active { color:#ff00ff; text-decoration: none} A:visited {color:#ff0000 text-decoration: none} --> </STYLE> ========= 加上下雙線 <STYLE type="text/css"> <!-- A:link {color: #8080FF} A:visited {color: #8080FF} A:active {color: #0000a0} A:hover {color:#0000a0; text-decoration : underline overline; background-color : #EEEEF7;} --> </STYLE> ========= 無底線 <STYLE type="text/css"> <!-- A:link {text-decoration: none} A:hover {text-decoration: none} A:active {text-decoration: none} A:visited {text-decoration: none} --> </STYLE> ========= 灰底表單 <style type="text/css"> input, select, textarea { background: #dddddd ; color: #000000; font-size: 8pt; } </style> ========= 文字加底色 <font style="background-color:#ffff00; color: #0000ff">文字</font> <font style="font-size: 12pt;color:green;background-color:#ffffff">文字</font> ############