HTML5 基礎教程
HTML 介紹HTML 元素HTML 屬性HTML 文字樣式元素HTML 水平線HTML 清單元素HTML +CSSHTML +JavascriptHTML 超連結HTML 檔案路徑HTML <!-- 註解 -->HTML 特殊文字HTML 顏色HTML 區塊元素與佈局XHTMLHTML5 多媒體教程
HTML <table>表格HTML <iframe>線內框架HTML <img> 圖片HTML <video> 影片HTML <audio> 音樂HTML5 表單教程
HTML <form> 表單HTML 各種表單元素HTML <input>HTML <input>屬性HTML5
HTML5 介紹HTML5 支援HTML5 新元素HTML5 正確語法HTML5 Graphics
HTML5 CanvasHTML5 SVGHTML5 Google Maps注意
- 以下的程式碼皆是寫於<body>與</body>標籤之內。
使用英文單字處理
- <span style="color:black;">black 黑色</span><br>
- <span style="color:purple;">purple 紫色</span><br>
- <span style="color:red;">red 紅色</span><br>
- <span style="color:orange;">orange 橘色</span>
RGB調整
光的三原色是紅光、綠光、藍光，而螢幕的顏色也是這樣調出來的，利用這個原理，將這三種光的值分為「0~255」，並以 rgb(紅,綠,藍) 這種形式調色。
- <span style="color:rgb(0,0,0);">(0,0,0) 黑色</span><br>
- <span style="color:rgb(255,255,255);">(255,255,255) 白色</span><br>
- <span style="color:rgb(255,0,0);">rgb(255,0,0) 紅色</span><br>
- <span style="color:rgb(0,255,0);">rgb(0,255,0) 綠色</span><br>
- <span style="color:rgb(0,0,255);">rgb(0,0,255) 藍色</span><br>
HEX值
上一小節說過可以將三原色以「0~255」表示，而0~255又可以16進位(hexadecimal,HEX)表示。什麼是16進位呢？假設今天的數字分別有16個 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
在10進制中的10，在16進制可用A表示；
在10進制中的15，在16進制可用F表示；
在10進制中的16，在16進制可用10表示...。
依照這個模式三原色的「0~255」用16進制表示則為「00~FF」，也就是把3位數壓縮到了2位數。利用這個方法來表示顏色「# 紅2位 綠2位 藍2位」，例如：「#FF00FF」即為rgb(255,0,255)
- <span style="color:#000000;">#000000 黑色 (可簡寫為#000)</span><br>
- <span style="color:#ffffff;">#ffffff 白色 (可簡寫為#fff)</span><br>
- <span style="color:#ff0000;">#ff0000 紅色 (可簡寫為#f00)</span><br>
- <span style="color:#00ff00;">#00ff00 綠色 (可簡寫為#0f0)</span><br>
- <span style="color:#0000ff;">#0000ff 藍色 (可簡寫為#00f)</span><br>
若顏色的值恰為#xxyyzz則一律可簡寫為#xyz，其餘格式皆不可簡寫。