Even Wu前輩給了我一個連結： http://www.htmldog.com
邊學邊做筆記
Created
August 15, 2012 15:14
-
-
Save hechien/3360938 to your computer and use it in GitHub Desktop.
HTMLDog 的翻譯、心得與筆記
http://www.htmldog.com/guides/cssbeginner/colours/
CSS中可以使用16,777,216種顏色(全彩)。
使用的單位可以是名稱、rgb值或16進位值。
像是
- red
- rgb(255, 0, 0)
- rgb(100%, 0%, 0%)
- #ff0000
- #f00
都一樣用來表示紅色
顏色名稱有十七種可用的名稱，分別是：
- aqua
- black
- blue
- fuchsia
- gray
- green
- lime
- maroon
- navy
- olive
- orange
- purple
- red
- silver
- teal
- white
- yellow
然而，transparent(透明，不帶任何顏色)也是允許的。
如果使用數字的話(就是用rgb()表示法)，則值的範圍是從0到255的整數。從一開始的沒有顏色(如範例的話就是沒有紅色)直到顏色的最高值(範例的話就是全紅色)。當然囉，這個也能夠用百分比去表示(0% - 100%)，不一定要用0~255的數值。
16進位表示法的話這個可以參考Wiki的解說：http://zh.wikipedia.org/wiki/十六进制
如範例所示，單紅色的話用十六進位表示是 #FF0000 或 #ff0000，而簡寫的方式是#f00。到底要怎樣才可以簡寫呢？我們把數字拆成三個區塊來看：FF, 00, 00，這分別代表R, G, B，也就是紅色、綠色與藍色。
只要RGB的數字左右都一樣，像例子的R都是F、G都是0、B都是0的話，就能夠縮寫成單一個字。
舉些例子好了：
#00FFCC => #0FC#336699 => #369#2211AA => #21A
但是如果是以下這種
#AAC13B#C3BBFF- ...
都不可以哦
那麼顏色可用在哪些地方呢？ 像是背景顏色、文字顏色等，例如：
h1{
background-color: red;
color: rgb(0, 30%, 60%);
}
這樣子可以帶給h1一個不一樣的展現方式 :)
http://www.htmldog.com/guides/cssbeginner/selectors/
長度的單位有
- em
- px
- pt
- %
- pc
- cm
- mm
- in
可參考 http://css.1keydata.com/tw/length-units.php
如果單位值是0的話直接寫0不必附上單位，例如：
margin: 0
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment