[CSS参考手册](http://css.doyoe.com/)»[附录列表](#)»
相关内容:
[**其它附录参考**选择其它项](#)
- [颜色关键字](#)
- [媒体类型](#)
# Color Keywods
- **颜色关键字**
### 16个基本颜色关键字 Basic color keywords
| Color | Color Name | HEX | RGB |
|-----|-----|-----|-----|
| | black | #000000 | 0,0,0 |
| | silver | #C0C0C0 | 192,192,192 |
| | gray | #808080 | 128,128,128 |
| | white | #FFFFFF | 255,255,255 |
| | maroon | #800000 | 128,0,0 |
| | red | #FF0000 | 255,0,0 |
| | purple | #800080 | 128,0,128 |
| | fuchsia | #FF00FF | 255,0,255 |
| | green | #008000 | 0,128,0 |
| | lime | #00FF00 | 0,255,0 |
| | olive | #808000 | 128,128,0 |
| | yellow | #FFFF00 | 255,255,0 |
| | navy | #000080 | 0,0,128 |
| | blue | #0000FF | 0,0,255 |
| | teal | #008080 | 0,128,128 |
| | aqua | #00FFFF | 0,255,255 |
**示例代码:**
~~~
body{color:black;background:white;}
h1{color:maroon;}
h2{color:olive;}
~~~
### 28个系统颜色 CSS system colors
| Color | Color Name |
|-----|-----|
| | activeborder |
| | activecaption |
| | appworkspace |
| | background |
| | buttonface |
| | buttonhighlight |
| | buttonshadow |
| | buttontext |
| | captiontext |
| | graytext |
| | highlight |
| | highlighttext |
| | inactiveborder |
| | inactivecaption |
| | inactivecaptiontext |
| | infobackground |
| | infotext |
| | menu |
| | menutext |
| | scrollbar |
| | threeddarkshadow |
| | threedface |
| | threedhighlight |
| | threedlightshadow |
| | threedshadow |
| | window |
| | windowframe |
| | windowtext |
**示例代码:**
~~~
body{color:windowtext;background:background;}
h1,h2{color:highlight;}
~~~
CSS系统颜色在CSS3中已经不被建议使用了。尽可能的使用其它的方式来模拟系统色的色彩。
### 拓展颜色关键字 Extended color keywords
| Color | Color Name | HEX | RGB |
|-----|-----|-----|-----|
| | aliceblue | #f0f8ff | 240,248,255 |
| | antiquewhite | #faebd7 | 250,235,215 |
| | aqua | #00ffff | 0,255,255 |
| | aquamarine | #7fffd4 | 127,255,212 |
| | azure | #f0ffff | 240,255,255 |
| | beige | #f5f5dc | 245,245,220 |
| | bisque | #ffe4c4 | 255,228,196 |
| | black | #000000 | 0,0,0 |
| | blanchedalmond | #ffebcd | 255,235,205 |
| | blue | #0000ff | 0,0,255 |
| | blueviolet | #8a2be2 | 138,43,226 |
| | brown | #a52a2a | 165,42,42 |
| | burlywood | #deb887 | 222,184,135 |
| | cadetblue | #5f9ea0 | 95,158,160 |
| | chartreuse | #7fff00 | 127,255,0 |
| | chocolate | #d2691e | 210,105,30 |
| | coral | #ff7f50 | 255,127,80 |
| | cornflowerblue | #6495ed | 100,149,237 |
| | cornsilk | #fff8dc | 255,248,220 |
| | crimson | #dc143c | 220,20,60 |
| | cyan | #00ffff | 0,255,255 |
| | darkblue | #00008b | 0,0,139 |
| | darkcyan | #008b8b | 0,139,139 |
| | darkgoldenrod | #b8860b | 184,134,11 |
| | darkgray | #a9a9a9 | 169,169,169 |
| | darkgreen | #006400 | 0,100,0 |
| | darkgrey | #a9a9a9 | 169,169,169 |
| | darkkhaki | #bdb76b | 189,183,107 |
| | darkmagenta | #8b008b | 139,0,139 |
| | darkolivegreen | #556b2f | 85,107,47 |
| | darkorange | #ff8c00 | 255,140,0 |
| | darkorchid | #9932cc | 153,50,204 |
| | darkred | #8b0000 | 139,0,0 |
| | darksalmon | #e9967a | 233,150,122 |
| | darkseagreen | #8fbc8f | 143,188,143 |
| | darkslateblue | #483d8b | 72,61,139 |
| | darkslategray | #2f4f4f | 47,79,79 |
| | darkslategrey | #2f4f4f | 47,79,79 |
| | darkturquoise | #00ced1 | 0,206,209 |
| | darkviolet | #9400d3 | 148,0,211 |
| | deeppink | #ff1493 | 255,20,147 |
| | deepskyblue | #00bfff | 0,191,255 |
| | dimgray | #696969 | 105,105,105 |
| | dimgrey | #696969 | 105,105,105 |
| | dodgerblue | #1e90ff | 30,144,255 |
| | firebrick | #b22222 | 178,34,34 |
| | floralwhite | #fffaf0 | 255,250,240 |
| | forestgreen | #228b22 | 34,139,34 |
| | fuchsia | #ff00ff | 255,0,255 |
| | gainsboro | #dcdcdc | 220,220,220 |
| | ghostwhite | #f8f8ff | 248,248,255 |
| | gold | #ffd700 | 255,215,0 |
| | goldenrod | #daa520 | 218,165,32 |
| | gray | #808080 | 128,128,128 |
| | green | #008000 | 0,128,0 |
| | greenyellow | #adff2f | 173,255,47 |
| | grey | #808080 | 128,128,128 |
| | honeydew | #f0fff0 | 240,255,240 |
| | hotpink | #ff69b4 | 255,105,180 |
| | indianred | #cd5c5c | 205,92,92 |
| | indigo | #4b0082 | 75,0,130 |
| | ivory | #fffff0 | 255,255,240 |
| | khaki | #f0e68c | 240,230,140 |
| | lavender | #e6e6fa | 230,230,250 |
| | lavenderblush | #fff0f5 | 255,240,245 |
| | lawngreen | #7cfc00 | 124,252,0 |
| | lemonchiffon | #fffacd | 255,250,205 |
| | lightblue | #add8e6 | 173,216,230 |
| | lightcoral | #f08080 | 240,128,128 |
| | lightcyan | #e0ffff | 224,255,255 |
| | lightgoldenrodyellow | #fafad2 | 250,250,210 |
| | lightgray | #d3d3d3 | 211,211,211 |
| | lightgreen | #90ee90 | 144,238,144 |
| | lightgrey | #d3d3d3 | 211,211,211 |
| | lightpink | #ffb6c1 | 255,182,193 |
| | lightsalmon | #ffa07a | 255,160,122 |
| | lightseagreen | #20b2aa | 32,178,170 |
| | lightskyblue | #87cefa | 135,206,250 |
| | lightslategray | #778899 | 119,136,153 |
| | lightslategrey | #778899 | 119,136,153 |
| | lightsteelblue | #b0c4de | 176,196,222 |
| | lightyellow | #ffffe0 | 255,255,224 |
| | lime | #00ff00 | 0,255,0 |
| | limegreen | #32cd32 | 50,205,50 |
| | linen | #faf0e6 | 250,240,230 |
| | magenta | #ff00ff | 255,0,255 |
| | maroon | #800000 | 128,0,0 |
| | mediumaquamarine | #66cdaa | 102,205,170 |
| | mediumblue | #0000cd | 0,0,205 |
| | mediumorchid | #ba55d3 | 186,85,211 |
| | mediumpurple | #9370db | 147,112,219 |
| | mediumseagreen | #3cb371 | 60,179,113 |
| | mediumslateblue | #7b68ee | 123,104,238 |
| | mediumspringgreen | #00fa9a | 0,250,154 |
| | mediumturquoise | #48d1cc | 72,209,204 |
| | mediumvioletred | #c71585 | 199,21,133 |
| | midnightblue | #191970 | 25,25,112 |
| | mintcream | #f5fffa | 245,255,250 |
| | mistyrose | #ffe4e1 | 255,228,225 |
| | moccasin | #ffe4b5 | 255,228,181 |
| | navajowhite | #ffdead | 255,222,173 |
| | navy | #000080 | 0,0,128 |
| | oldlace | #fdf5e6 | 253,245,230 |
| | olive | #808000 | 128,128,0 |
| | olivedrab | #6b8e23 | 107,142,35 |
| | orange | #ffa500 | 255,165,0 |
| | orangered | #ff4500 | 255,69,0 |
| | orchid | #da70d6 | 218,112,214 |
| | palegoldenrod | #eee8aa | 238,232,170 |
| | palegreen | #98fb98 | 152,251,152 |
| | paleturquoise | #afeeee | 175,238,238 |
| | palevioletred | #db7093 | 219,112,147 |
| | papayawhip | #ffefd5 | 255,239,213 |
| | peachpuff | #ffdab9 | 255,218,185 |
| | peru | #cd853f | 205,133,63 |
| | pink | #ffc0cb | 255,192,203 |
| | plum | #dda0dd | 221,160,221 |
| | powderblue | #b0e0e6 | 176,224,230 |
| | purple | #800080 | 128,0,128 |
| | red | #ff0000 | 255,0,0 |
| | rosybrown | #bc8f8f | 188,143,143 |
| | royalblue | #4169e1 | 65,105,225 |
| | saddlebrown | #8b4513 | 139,69,19 |
| | salmon | #fa8072 | 250,128,114 |
| | sandybrown | #f4a460 | 244,164,96 |
| | seagreen | #2e8b57 | 46,139,87 |
| | seashell | #fff5ee | 255,245,238 |
| | sienna | #a0522d | 160,82,45 |
| | silver | #c0c0c0 | 192,192,192 |
| | skyblue | #87ceeb | 135,206,235 |
| | slateblue | #6a5acd | 106,90,205 |
| | slategray | #708090 | 112,128,144 |
| | slategrey | #708090 | 112,128,144 |
| | snow | #fffafa | 255,250,250 |
| | springgreen | #00ff7f | 0,255,127 |
| | steelblue | #4682b4 | 70,130,180 |
| | tan | #d2b48c | 210,180,140 |
| | teal | #008080 | 0,128,128 |
| | thistle | #d8bfd8 | 216,191,216 |
| | tomato | #ff6347 | 255,99,71 |
| | turquoise | #40e0d0 | 64,224,208 |
| | violet | #ee82ee | 238,130,238 |
| | wheat | #f5deb3 | 245,222,179 |
| | white | #ffffff | 255,255,255 |
| | whitesmoke | #f5f5f5 | 245,245,245 |
| | yellow | #ffff00 | 255,255,0 |
| | yellowgreen | #9acd32 | 154,205,50 |
**示例代码:**
~~~
body{color:black;background:white;}
h1{color:violet;}
h2{color:yellowgreen;}
~~~
Copyright © 2006-2012 [Doyoe](http://www.doyoe.com/). All Rights Reserved
- 速查表 Quick Search
- CSS3列表 CSS3 List
- 简介 Introduction
- 关于本手册 About This Handbook
- 关于样式表 Introduction To CSS
- 关于作者 About The Author
- 阅读及使用指引 The Use Guides
- 鸣谢 Thank You
- 捐赠 Contribute
- 属性 Properties
- 定位(Positioning)
- position
- z-index
- top
- right
- bottom
- left
- 布局(Layout)
- display
- float
- clear
- visibility
- clip
- overflow
- overflow-x
- overflow-y
- 弹性盒模型(Flexible Box)
- box-orient
- box-pack
- box-align
- box-flex
- box-flex-group
- box-ordinal-group
- box-direction
- box-lines
- 尺寸(Dimension)
- width
- min-width
- max-width
- height
- min-height
- max-height
- 外补白(Margin)
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
- 内补白(Padding)
- padding
- padding-top
- padding-right
- padding-bottom
- padding-left
- 边框(Border)
- border
- border-width
- border-style
- border-color
- border-top
- border-top-width
- border-top-style
- border-top-color
- border-right
- border-right-width
- border-right-style
- border-right-color
- border-bottom
- border-bottom-width
- border-bottom-style
- border-bottom-color
- border-left
- border-left-width
- border-left-style
- border-left-color
- border-image
- border-radius
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- box-shadow
- box-reflect
- 背景(Background)
- background
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-origin
- background-clip
- background-size
- Multiple background
- 颜色(Color)
- color
- opacity
- 字体(Font)
- font
- font-style
- font-variant
- font-weight
- font-size
- font-family
- font-stretch
- 文本(Text)
- text-indent
- text-overflow
- text-align
- text-transform
- text-decoration
- text-decoration-line
- text-decoration-color
- text-decoration-style
- text-shadow
- text-fill-color
- text-stroke
- text-stroke-width
- text-stroke-color
- letter-spacing
- word-spacing
- vertical-align
- word-wrap
- white-space
- direction
- unicode-bidi
- line-height
- tab-size
- 列表(List)
- list-style
- list-style-image
- list-style-position
- list-style-type
- 表格(Table)
- table-layout
- border-collapse
- border-spacing
- caption-side
- empty-cells
- 内容(Content)
- content
- counter-increment
- counter-reset
- quotes
- 用户界面(User Interface)
- outline
- outline-width
- outline-color
- outline-style
- outline-offset
- nav-index
- nav-up
- nav-right
- nav-down
- nav-left
- cursor
- zoom
- box-sizing
- resize
- ime-mode
- 多栏(Multi-column)
- columns
- column-width
- column-count
- column-gap
- column-rule
- column-rule-width
- column-rule-style
- column-rule-color
- column-span
- column-fill
- column-break-before
- column-break-after
- column-break-inside
- 2D变换(2D Transform)
- transform
- transform-origin
- 过渡(Transition)
- transition
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- 动画(Animation)
- animation
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-play-state
- animation-fill-mode
- 打印(Printing)
- page
- page-break-before
- page-break-after
- page-break-inside
- 媒体查询(Media Queries)
- width
- height
- device-width
- device-height
- orientation
- aspect-ratio
- device-aspect-ratio
- color
- color-index
- monochrome
- resolution
- scan
- grid
- Only Ie
- scrollbar-3dlight-color
- scrollbar-darkshadow-color
- scrollbar-highlight-color
- scrollbar-shadow-color
- scrollbar-arrow-color
- scrollbar-base-color
- scrollbar-track-color
- scrollbar-face-color
- filter
- behavior
- Only Firefox
- border-colors
- border-top-colors
- border-right-colors
- border-bottom-colors
- border-left-colors
- 选择符 Selectors
- 元素选择符
- 通配选择符(*)
- 类型选择符(E)
- ID选择符(E#myid)
- 类选择符(E.myclass)
- 关系选择符
- 包含选择符(E F)
- 子选择符(E>F)
- 相邻选择符(E+F)
- 兄弟选择符(E~F)
- 属性选择符
- E[att]
- E[att="val"]
- E[att~="val"]
- E[att^="val"]
- E[att$="val"]
- E[att*="val"]
- E[att|="val"]
- 伪类选择符
- E:link
- E:visited
- E:hover
- E:active
- E:focus
- E:root
- E:first-child
- E:last-child
- E:only-child
- E:nth-child(n)
- E:nth-last-child(n)
- E:first-of-type
- E:last-of-type
- E:only-of-type
- E:nth-of-type(n)
- E:nth-last-of-type(n)
- E:empty
- E:checked
- E:enabled
- E:disabled
- E:target
- @page:first
- @page:left
- @page:right
- 伪对象选择符
- E:first-letter/E::first-letter
- E:first-line/E::first-line
- E:before/E::before
- E:after/E::after
- E::selection
- 语法与规则 Rules
- !important
- comment
- @import
- @charset
- @media
- @font-face
- @page
- @keyframes
- 取值 Values
- 颜色(Color)
- Color Name
- HEX
- RGB
- RGBA
- HSL
- HSLA
- transparent
- 文本(Textual)
- <string>
- <url>
- <identifier>
- 函数(Functional)
- 图像(Image)
- 数字(Numeric)
- <number>
- <integer>
- 其它(Other)
- <length>
- <percentage>
- <angle>
- <time>
- <frequency>
- <fraction>
- <grid>
- 单位 Units
- 长度(Length)
- em
- ex
- ch
- rem
- vw
- vh
- vm
- cm
- mm
- in
- pt
- pc
- px
- 角度(Angle)
- deg
- grad
- rad
- turn
- 时间(Time)
- s
- ms
- 频率(Frequency)
- Hz
- kHz
- 布局(Layout-specific)
- fr
- gr
- 附录 Appendix
- 颜色关键字(Color Keywods)
- 媒体类型(Media Types)
- CSS Hack
- 条件Hack
- 属性级Hack
- 选择符级Hack
- 问题与经验 Experience
- Bugs和解决方案
- 技巧和经验
- 其它经验