点击切换帐号登陆
帐号密码登陆

  • 章节

  • 笔记

  • 评论
第1章 CSS 入门教程
1-1CSS速查总表
1-2CSS 教程学习导读
1-3CSS简介
1-4CSS语法
1-5CSS 创建
1-6CSS 定位(Position)
1-7CSS 布局(Layout)
1-8CSS 尺寸 (Dimension)
1-9CSS 外边距(Margin)
1-10CSS 填充(Padding)
1-11CSS 背景(Backgrounds)
1-12CSS 边框(Border)
1-13CSS 颜色(Color)
1-14CSS 字体(Fonts)
1-15CSS 文本(Text)
1-16CSS 文本装饰(Text Decoration)
1-17CSS 书写模式(Writing Modes)
1-18CSS 列表样式(List)
1-19CSS 表格(Table)
1-20CSS 内容(Content)
1-21CSS用户界面(User Interface)
1-22CSS打印(Print)
1-23CSS媒体查询(Media Queries)
1-24CSS 链接(Link)
1-25CSS 轮廓(Outline)
1-26CSS 分组 和 嵌套(Grouping and Nesting)
1-27CSS 浮动 (Float)
1-28CSS 盒子模型(Box Model)
1-29CSS 显示(Display)
1-30CSS 导航栏(Navigation Bar)
1-31CSS 溢出(Overflow)
1-32CSS 下拉菜单(Drop down menu)
1-33CSS 对齐(Align)
1-34CSS 提示工具(Prompt Tool)
1-35CSS 图片廊(Image Gallery)
1-36CSS 图像透明/不透明(Opacity)
1-37CSS 图像拼合技术(Image stitching technique)
1-38CSS 媒体类型(Media Type)
1-39Only IE
1-40Only Webkit
1-41Only Firefox
1-42CSS 总结
第2章 CSS 原生手册
2-1CSS 手册导读
2-2CSS 选择器
2-3CSS 听觉参考手册
2-4CSS Web安全字体组合
2-5CSS 动画
2-6CSS 函数
2-7CSS 单位
2-8CSS 颜色
2-9CSS 颜色值
2-10CSS 颜色名
2-11CSS 颜色十六进制
第3章 CSS 函数 Function
3-1CSS attr() 函数
3-2CSS calc() 函数
3-3CSS linear-gradient() 函数
3-4CSS radial-gradient() 函数
3-5CSS repeating-linear-gradient() 函数
第4章 CSS选择器 Selectors
4-1元素选择符
4-2关系选择符
4-3属性选择符
4-4伪类选择符
4-5伪对象选择符
第5章 CSS取值与单位 Values and Units
5-1CSS 长度(Length)
5-2CSS 角度(Angle)
5-3CSS 时间(Time)
5-4CSS 频率(Frequency)
5-5CSS 布局(Layout-specific)
5-6CSS 分辨率(Resolution)
5-7CSS 文本(Textual)
5-8CSS 函数(Functional)
5-9CSS 生成内容(Content)
5-10CSS 图像(Image)
5-11CSS 数字(Numeric)
第6章 CSS语法与规则 Rules
6-1!important
6-2comment
6-3@import
6-4@page
6-5@supports
第7章 CSS 属性 Property
7-1border-top
7-2scan
7-3border-top-color
7-4overflow-wrap
7-5border-top-left-radius
7-6text-size-adjust
7-7border-top-right-radius
7-8text-decoration-skip
7-9text-underline-position
7-10border-top-style
7-11column-break-before
7-12border-top-width
7-13column-break-after
7-14border-width
7-15column-break-inside
7-16bottom
7-17text-fill-color
7-18box-align
7-19box-reflect
7-20box-direction
7-21tap-highlight-color
7-22user-drag
7-23box-flex
7-24border-colors
7-25box-flex-group
7-26border-top-colors
7-27box-lines
7-28border-right-colors
7-29box-ordinal-group
7-30border-bottom-colors
7-31border-left-colors
7-32box-orient
7-33scrollbar-3dlight-color
7-34box-pack
7-35scrollbar-darkshadow-color
7-36box-shadow
7-37scrollbar-highlight-color
7-38box-sizing
7-39scrollbar-shadow-color
7-40caption-side
7-41scrollbar-arrow-color
7-42clear
7-43scrollbar-arrow-color
7-44clip
7-45scrollbar-face-color
7-46color
7-47scrollbar-track-color
7-48column-count
7-49scrollbar-base-color
7-50column-fill
7-51behavior
7-52column-gap
7-53column-rule
7-54column-rule-color
7-55column-rule-style
7-56column-rule-width
7-57column-span
7-58column-width
7-59columns
7-60content
7-61counter-increment
7-62counter-reset
7-63cursor
7-64direction
7-65display
7-66empty-cells
7-67filter
7-68flex
7-69flex-basis
7-70flex-direction
7-71flex-flow
7-72flex-grow
7-73flex-shrink
7-74flex-wrap
7-75float
7-76font
7-77@font-face
7-78font-family
7-79font-size
7-80font-size-adjust
7-81font-stretch
7-82font-style
7-83font-variant
7-84font-weight
7-85grid-columns
7-86grid-rows
7-87hanging-punctuation
7-88height
7-89icon
7-90justify-content
7-91@keyframes
7-92left
7-93letter-spacing
7-94line-height
7-95list-style
7-96list-style-image
7-97list-style-position
7-98list-style-type
7-99margin
7-100margin-bottom
7-101margin-left
7-102margin-right
7-103margin-top
7-104max-height
7-105max-width
7-106@media
7-107min-height
7-108min-width
7-109nav-down
7-110nav-index
7-111nav-left
7-112nav-right
7-113nav-up
7-114opacity
7-115order
7-116outline
7-117outline-color
7-118outline-offset
7-119outline-style
7-120outline-width
7-121overflow
7-122overflow-x
7-123overflow-y
7-124padding
7-125padding-bottom
7-126padding-left
7-127padding-right
7-128padding-top
7-129page-break-after
7-130page-break-before
7-131page-break-inside
7-132perspective
7-133perspective-origin
7-134position
7-135punctuation-trim
7-136quotes
7-137resize
7-138right
7-139rotation
7-140tab-size
7-141table-layout
7-142target
7-143target-name
7-144target-new
7-145target-position
7-146text-align
7-147text-align-last
7-148text-decoration
7-149text-decoration-color
7-150text-decoration-line
7-151text-decoration-style
7-152text-indent
7-153text-justify
7-154text-outline
7-155text-overflow
7-156text-shadow
7-157text-transform
7-158text-wrap
7-159top
7-160transform
7-161transform-origin
7-162transform-style
7-163transition
7-164transition-delay
7-165transition-duration
7-166transition-property
7-167transition-timing-function
7-168unicode-bidi
7-169pointer-events
7-170vertical-align
7-171user-select
7-172visibility
7-173ime-mode
7-174white-space
7-175zoom
7-176width
7-177-webkit-appearance
7-178word-break
7-179@charset
7-180word-spacing
7-181text-stroke
7-182word-wrap
7-183text-stroke-width
7-184z-index
7-185text-stroke-color
7-186writing-mode
7-187<angle>
7-188deg
7-189​grad
7-190rad
7-191turn
7-192s
7-193align-content
7-194ms
7-195<frequency>
7-196align-items
7-197Hz
7-198align-self
7-199kHz
7-200all
7-201<fraction>
7-202animation
7-203<grid>
7-204animation-delay
7-205fr
7-206animation-direction
7-207gr
7-208animation-duration
7-209<resolution>
7-210animation-fill-mode
7-211dpi
7-212animation-iteration-count
7-213dpcm
7-214dppx
7-215animation-name
7-216unset
7-217animation-play-state
7-218<string>
7-219<url>
7-220animation-timing-function
7-221<identifier>
7-222appearance
7-223calc()
7-224backface-visibility
7-225toggle()
7-226background
7-227counter()
7-228background-attachment
7-229counters()
7-230attr()
7-231<image>
7-232background-blend-mode
7-233image()
7-234background-clip
7-235image-set()
7-236background-color
7-237<gradient>
7-238background-image
7-239repeating-radial-gradient()
7-240background-origin
7-241<integer>
7-242background-position
7-243<percentage>
7-244background-repeat
7-245background-size
7-246border
7-247border-bottom
7-248border-bottom-color
7-249border-bottom-left-radius
7-250border-bottom-right-radius
7-251border-bottom-style
7-252border-bottom-width
7-253border-collapse
7-254border-color
7-255border-image
7-256border-image-outset
7-257border-image-repeat
7-258page
7-259border-image-slice
7-260page-break-before
7-261border-image-source
7-262page-break-after
7-263page-break-inside
7-264border-image-width
7-265border-left
7-266border-left-color
7-267border-left-style
7-268border-left-width
7-269border-radius
7-270border-right
7-271device-width
7-272border-right-color
7-273device-height
7-274border-right-style
7-275orientation
7-276border-right-width
7-277aspect-ratio
7-278border-spacing
7-279device-aspect-ratio
7-280border-style
7-281color-index
7-282monochrome
7-283initial
7-284inherit
7-285RGBA
7-286Color Name
7-287HEX
7-288RGB
7-289HSL
7-290HSLA
7-291transparent
7-292currentColor
7-293<length>
7-294em
7-295ex
7-296ch
7-297rem
7-298vw
7-299vh
7-300vmax
7-301vmin
7-302cm
7-303mm
7-304q
7-305in
7-306pt
7-307pc
7-308px
7-309<number>
第8章 CSS附录 Appendix
8-1颜色关键字(Color Keywords)
8-2媒体类型(Media Types)
第9章 CSS HACK
9-1条件Hack
9-2属性级Hack
9-3选择符级Hack
第10章 问题和经验
10-1Bugs及解决方案列表
10-2CSS技巧和经验列表
10-3其它技巧和经验列表
10-4参考资源列表

颜色关键字(Color Keywords)

颜色关键字


16个基本颜色关键字

ColorColor NameHEXRGB
 black#0000000,0,0
 silver#C0C0C0192,192,192
 gray#808080128,128,128
 white#FFFFFF255,255,255
 maroon#800000128,0,0
 red#FF0000255,0,0
 purple#800080128,0,128
 fuchsia#FF00FF255,0,255
 green#0080000,128,0
 lime#00FF000,255,0
 olive#808000128,128,0
 yellow#FFFF00255,255,0
 navy#0000800,0,128
 blue#0000FF0,0,255
 teal#0080800,128,128
 aqua#00FFFF0,255,255

示例代码:

body{color:black;background:white;}
h1{color:maroon;}
h2{color:olive;}

28个系统颜色 

ColorColor 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中已经不被建议使用了。尽可能的使用其它的方式来模拟系统色的色彩。

拓展颜色关键字 

ColorColor NameHEXRGB
 aliceblue#f0f8ff240,248,255
 antiquewhite#faebd7250,235,215
 aqua#00ffff0,255,255
 aquamarine#7fffd4127,255,212
 azure#f0ffff240,255,255
 beige#f5f5dc245,245,220
 bisque#ffe4c4255,228,196
 black#0000000,0,0
 blanchedalmond#ffebcd255,235,205
 blue#0000ff0,0,255
 blueviolet#8a2be2138,43,226
 brown#a52a2a165,42,42
 burlywood#deb887222,184,135
 cadetblue#5f9ea095,158,160
 chartreuse#7fff00127,255,0
 chocolate#d2691e210,105,30
 coral#ff7f50255,127,80
 cornflowerblue#6495ed100,149,237
 cornsilk#fff8dc255,248,220
 crimson#dc143c220,20,60
 cyan#00ffff0,255,255
 darkblue#00008b0,0,139
 darkcyan#008b8b0,139,139
 darkgoldenrod#b8860b184,134,11
 darkgray#a9a9a9169,169,169
 darkgreen#0064000,100,0
 darkgrey#a9a9a9169,169,169
 darkkhaki#bdb76b189,183,107
 darkmagenta#8b008b139,0,139
 darkolivegreen#556b2f85,107,47
 darkorange#ff8c00255,140,0
 darkorchid#9932cc153,50,204
 darkred#8b0000139,0,0
 darksalmon#e9967a233,150,122
 darkseagreen#8fbc8f143,188,143
 darkslateblue#483d8b72,61,139
 darkslategray#2f4f4f47,79,79
 darkslategrey#2f4f4f47,79,79
 darkturquoise#00ced10,206,209
 darkviolet#9400d3148,0,211
 deeppink#ff1493255,20,147
 deepskyblue#00bfff0,191,255
 dimgray#696969105,105,105
 dimgrey#696969105,105,105
 dodgerblue#1e90ff30,144,255
 firebrick#b22222178,34,34
 floralwhite#fffaf0255,250,240
 forestgreen#228b2234,139,34
 fuchsia#ff00ff255,0,255
 gainsboro#dcdcdc220,220,220
 ghostwhite#f8f8ff248,248,255
 gold#ffd700255,215,0
 goldenrod#daa520218,165,32
 gray#808080128,128,128
 green#0080000,128,0
 greenyellow#adff2f173,255,47
 grey#808080128,128,128
 honeydew#f0fff0240,255,240
 hotpink#ff69b4255,105,180
 indianred#cd5c5c205,92,92
 indigo#4b008275,0,130
 ivory#fffff0255,255,240
 khaki#f0e68c240,230,140
 lavender#e6e6fa230,230,250
 lavenderblush#fff0f5255,240,245
 lawngreen#7cfc00124,252,0
 lemonchiffon#fffacd255,250,205
 lightblue#add8e6173,216,230
 lightcoral#f08080240,128,128
 lightcyan#e0ffff224,255,255
 lightgoldenrodyellow#fafad2250,250,210
 lightgray#d3d3d3211,211,211
 lightgreen#90ee90144,238,144
 lightgrey#d3d3d3211,211,211
 lightpink#ffb6c1255,182,193
 lightsalmon#ffa07a255,160,122
 lightseagreen#20b2aa32,178,170
 lightskyblue#87cefa135,206,250
 lightslategray#778899119,136,153
 lightslategrey#778899119,136,153
 lightsteelblue#b0c4de176,196,222
 lightyellow#ffffe0255,255,224
 lime#00ff000,255,0
 limegreen#32cd3250,205,50
 linen#faf0e6250,240,230
 magenta#ff00ff255,0,255
 maroon#800000128,0,0
 mediumaquamarine#66cdaa102,205,170
 mediumblue#0000cd0,0,205
 mediumorchid#ba55d3186,85,211
 mediumpurple#9370db147,112,219
 mediumseagreen#3cb37160,179,113
 mediumslateblue#7b68ee123,104,238
 mediumspringgreen#00fa9a0,250,154
 mediumturquoise#48d1cc72,209,204
 mediumvioletred#c71585199,21,133
 midnightblue#19197025,25,112
 mintcream#f5fffa245,255,250
 mistyrose#ffe4e1255,228,225
 moccasin#ffe4b5255,228,181
 navajowhite#ffdead255,222,173
 navy#0000800,0,128
 oldlace#fdf5e6253,245,230
 olive#808000128,128,0
 olivedrab#6b8e23107,142,35
 orange#ffa500255,165,0
 orangered#ff4500255,69,0
 orchid#da70d6218,112,214
 palegoldenrod#eee8aa238,232,170
 palegreen#98fb98152,251,152
 paleturquoise#afeeee175,238,238
 palevioletred#db7093219,112,147
 papayawhip#ffefd5255,239,213
 peachpuff#ffdab9255,218,185
 peru#cd853f205,133,63
 pink#ffc0cb255,192,203
 plum#dda0dd221,160,221
 powderblue#b0e0e6176,224,230
 purple#800080128,0,128
 red#ff0000255,0,0
 rosybrown#bc8f8f188,143,143
 royalblue#4169e165,105,225
 saddlebrown#8b4513139,69,19
 salmon#fa8072250,128,114
 sandybrown#f4a460244,164,96
 seagreen#2e8b5746,139,87
 seashell#fff5ee255,245,238
 sienna#a0522d160,82,45
 silver#c0c0c0192,192,192
 skyblue#87ceeb135,206,235
 slateblue#6a5acd106,90,205
 slategray#708090112,128,144
 slategrey#708090112,128,144
 snow#fffafa255,250,250
 springgreen#00ff7f0,255,127
 steelblue#4682b470,130,180
 tan#d2b48c210,180,140
 teal#0080800,128,128
 thistle#d8bfd8216,191,216
 tomato#ff6347255,99,71
 turquoise#40e0d064,224,208
 violet#ee82ee238,130,238
 wheat#f5deb3245,222,179
 white#ffffff255,255,255
 whitesmoke#f5f5f5245,245,245
 yellow#ffff00255,255,0
 yellowgreen#9acd32154,205,50

示例代码:

body{color:black;background:white;}
h1{color:violet;}
h2{color:yellowgreen;}


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号