用 CSS 製作彩色按鈕

進階 HTML 語法

第九篇
用 CSS 製作彩色按鈕 (IE)

用 CSS 製作彩色按鈕

按我就可鏈結出去哦

<Form>
<Input Type="button Name="cd" Style="..相關屬性與參數.." Value="按鈕上要顯示的文字">
</Form>
為了不必使用 CGI 就能 Link，這裡我用了 JavaScript 的 onClick="location.href='../data.htm'" 語法
既然是使用 CSS 語法，當然您也可以改用，內崁式(Embedding Style)排版樣式依附標籤：
<STYLE>
INPUT {
BACKGROUND-COLOR: #ffffff; COLOR: #000080; FONT-SIZE: 10pt; border:1 solid black ; width=140pt; height= 20pt"
}
</STYLE>
如果您對 CSS 語法不熟悉，建議您回進階 HTML 語法：【CSS 基本語法】再溫習一下。

<input type="submit" value="確認送出" onmouseout="this.style.color='blue';"onmouseover="this.style.color='red';"
style="BACKGROUND-COLOR: rgb(235,235,235); CURSOR: hand; FONT-SIZE: 12px">
<input type="reset" value="清除重來"onmouseout="this.style.color='blue';" onmouseover="this.style.color='red';"
style="BACKGROUND-COLOR: rgb(235,235,235); CURSOR: hand; FONT-SIZE: 12px">
如果您對 JavaScript 語法不熟悉，建議您回實用 Script 程式：【JavaScript 大全】再溫習一下。
如果您對 CSS 語法不熟悉，建議您回進階 HTML 語法：【滑鼠指標的樣式】再溫習一下。

本頁 Style 相關屬性與參數說明：
style

CSS 串接式排版樣式宣告="相關屬性與參數"
BackGround-color:ff0000

"按鈕背景顏色設定，參數值使用 "RRGGBB" 或 "英文字"
color:#ffff00

"按鈕文字顏色設定，參數值使用 "RRGGBB" 或 "英文字"
Font-size: 10pt

"字形大小設定，參數值使用"像素"(Pixel)
border:1 solid black

"按鈕邊寬與顏色設定，參數值使用"像素" (Pixel) OR "RRGGBB" 或 "英文字"
Width= 140pt

"按鈕寬度設定，參數值使用"像素" (Pixel)
Height= 20pt

"按鈕高度設定，參數值使用"像素" (Pixel)
另外您也可以加入，按鈕文字字型設定 (Font-Family: Arial Black)

運用說明及注意事項：
在每一個屬性設定完後，需要加分號 (;)，才能接下一個屬性；如：background-color:#0000ff;font-size: 12pt。
在網頁中，適當的運用本語法，可讓網頁生色不少。
很可惜的是，本功能語法只支援 InterNet Explorer 瀏覽器，使用 Netscapt 瀏覽器不會受改變。

如何完整取得所有資料：
如果您想完整取得電子報內所有檔案資料，我們提供燒錄光碟片給您 Go 。
凡加入教學或教材會員者，均可獲得以下乙份完整的資料光碟。
詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、網頁圖窟。

結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此引用來源，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您學會 HTML 語法，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質，索取教材資料屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎繼續訂閱。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。