w3c标准-关于W3C CSS标准的一些经验

发布时间：2017-12-11 所属栏目：设计

一 : 关于W3C CSS标准的一些经验

总结出关于W3C CSS标准的一些经验：

一、少用偏门。类似break-word断行，z-index手动分层，还有像垂直对齐等等这些偏门CSS最好少用，因为不一定所有浏览器都支持，而且极难通过W3C检测。

二、center不是float的值。很多新手都会把center误认为是float的值，而偏偏不是如此。center只是text-align的值。

三、对齐不能包括两个值。很多新手会在float或者text-align中填写两个值，比如：float:left top。这是不允许的，浏览器也无法识别。

四、滚动条颜色最好不要自定义。很多浏览器不能正常识别自定义颜色的滚动条，况且很多自定义颜色都不能通过W3C。

五、单独滚动条设置。现在经常使用overflow-x(横向滚动条)或者overflow-y(纵向滚动条)，在设置这个的时候经常会发现并不是所有的客户端上都有效果，大家在设置的时候最好在body和html同时进行设置。然而这个CSS也不是CSS2.1支持的(CSS2.1支持overflow，同时定义横纵滚动条)，直到CSS3才支持这种定义方式。尽量少用。

六、background和color颜色相同会受到警告。

二 : W3C SVG标准Web颜色值列表

第一列：使用颜色名称作背景，该列不能显示颜色说明你的浏览器当前还不支持该名称关键词。(www.61k.com）
第二列：使用相应颜色数值作背景。
第三列：颜色的正式英文名称。
第四列：对应翻译的中文名称。
第五列：16进制的RGB数值。
第六列：十进制RGB数值。
第七列：配色参考，有粗细字体作为相应颜色的配色参考。

扩展：svg w3c / w3cschool svg / org.w3c.dom.svg jar

名称背景	数值背景	颜色名称	中文名称	十六进制RGB	十进制RGB	粗细字体配色参考
		black	黑色	#000000	0,0,0	黑色[三知开发网]
		navy	海军色	#000080	0,0,128	海军色[三知开发网]
		darkblue	暗蓝色	#00008b	0,0,139	暗蓝色[三知开发网]
		mediumblue	中兰色	#0000cd	0,0,205	中兰色[三知开发网]
		blue	蓝色	#0000ff	0,0,255	蓝色[三知开发网]
		darkgreen	暗绿色	#006400	0,100,0	暗绿色[三知开发网]
		green	绿色	#008000	0,128,0	绿色[三知开发网]
		teal	水鸭色	#008080	0,128,128	水鸭色[三知开发网]
		darkcyan	暗青色	#008b8b	0,139,139	暗青色[三知开发网]
		deepskyblue	深天蓝色	#00bfff	0,191,255	深天蓝色[三知开发网]
		darkturquoise	暗宝石绿	#00ced1	0,206,209	暗宝石绿[三知开发网]
		mediumspringgreen	中春绿色	#00fa9a	0,250,154	中春绿色[三知开发网]
		lime	酸橙色	#00ff00	0,255,0	酸橙色[三知开发网]
		springgreen	春绿色	#00ff7f	0,255,127	春绿色[三知开发网]
		aqua	浅绿色	#00ffff	0,255,255	浅绿色[三知开发网]
		midnightblue	中灰兰色	#191970	25,25,112	中灰兰色[三知开发网]
		dodgerblue	闪兰色	#1e90ff	30,144,255	闪兰色[三知开发网]
		lightseagreen	亮海蓝色	#20b2aa	32,178,170	亮海蓝色[三知开发网]
		forestgreen	森林绿	#228b22	34,139,34	森林绿[三知开发网]
		seagreen	海绿色	#2e8b57	46,139,87	海绿色[三知开发网]
		darkslategray	暗瓦灰色	#2f4f4f	47,79,79	暗瓦灰色[三知开发网]
		limegreen	橙绿色	#32cd32	50,205,50	橙绿色[三知开发网]
		mediumseagreen	中海蓝	#3cb371	60,179,113	中海蓝[三知开发网]
		turquoise	青绿色	#40e0d0	64,224,208	青绿色[三知开发网]
		royalblue	皇家蓝	#4169e1	65,105,225	皇家蓝[三知开发网]
		steelblue	钢兰色	#4682b4	70,130,180	钢兰色[三知开发网]
		darkslateblue	暗灰蓝色	#483d8b	72,61,139	暗灰蓝色[三知开发网]
		mediumturquoise	中绿宝石	#48d1cc	72,209,204	中绿宝石[三知开发网]
		indigo	靛青色	#4b0082	75,0,130	靛青色[三知开发网]
		darkolivegreen	暗橄榄绿	#556b2f	85,107,47	暗橄榄绿[三知开发网]
		cadetblue	军兰色	#5f9ea0	95,158,160	军兰色[三知开发网]
		cornflowerblue	菊兰色	#6495ed	100,149,237	菊兰色[三知开发网]
		mediumaquamarine	中绿色	#66cdaa	102,205,170	中绿色[三知开发网]
		dimgray	暗灰色	#696969	105,105,105	暗灰色[三知开发网]
		slateblue	石蓝色	#6a5acd	106,90,205	石蓝色[三知开发网]
		olivedrab	深绿褐色	#6b8e23	107,142,35	深绿褐色[三知开发网]
		slategray	灰石色	#708090	112,128,144	灰石色[三知开发网]
		lightslategray	亮蓝灰	#778899	119,136,153	亮蓝灰[三知开发网]
		mediumslateblue	中暗蓝色	#7b68ee	123,104,238	中暗蓝色[三知开发网]
		lawngreen	草绿色	#7cfc00	124,252,0	草绿色[三知开发网]
		chartreuse	黄绿色	#7fff00	127,255,0	黄绿色[三知开发网]
		aquamarine	碧绿色	#7fffd4	127,255,212	碧绿色[三知开发网]
		maroon	粟色	#800000	128,0,0	粟色[三知开发网]
		purple	紫色	#800080	128,0,128	紫色[三知开发网]
		olive	橄榄色	#808000	128,128,0	橄榄色[三知开发网]
		gray	灰色	#808080	128,128,128	灰色[三知开发网]
		skyblue	天蓝色	#87ceeb	135,206,235	天蓝色[三知开发网]
		lightskyblue	亮天蓝色	#87cefa	135,206,250	亮天蓝色[三知开发网]
		blueviolet	紫罗兰蓝色	#8a2be2	138,43,226	紫罗兰蓝色[三知开发网]
		darkred	暗红色	#8b0000	139,0,0	暗红色[三知开发网]
		darkmagenta	暗洋红	#8b008b	139,0,139	暗洋红[三知开发网]
		saddlebrown	重褐色	#8b4513	139,69,19	重褐色[三知开发网]
		darkseagreen	暗海兰色	#8fbc8f	143,188,143	暗海兰色[三知开发网]
		lightgreen	亮绿色	#90ee90	144,238,144	亮绿色[三知开发网]
		mediumpurple	中紫色	#9370db	147,112,219	中紫色[三知开发网]
		darkviolet	暗紫罗兰色	#9400d3	148,0,211	暗紫罗兰色[三知开发网]
		palegreen	苍绿色	#98fb98	152,251,152	苍绿色[三知开发网]
		darkorchid	暗紫色	#9932cc	153,50,204	暗紫色[三知开发网]
		sienna	赭色	#a0522d	160,82,45	赭色[三知开发网]
		brown	褐色	#a52a2a	165,42,42	褐色[三知开发网]
		darkgray	暗灰色	#a9a9a9	169,169,169	暗灰色[三知开发网]
		lightblue	亮蓝色	#add8e6	173,216,230	亮蓝色[三知开发网]
		greenyellow	黄绿色	#adff2f	173,255,47	黄绿色[三知开发网]
		paleturquoise	苍宝石绿	#afeeee	175,238,238	苍宝石绿[三知开发网]
		lightsteelblue	亮钢兰色	#b0c4de	176,196,222	亮钢兰色[三知开发网]
		powderblue	粉蓝色	#b0e0e6	176,224,230	粉蓝色[三知开发网]
		firebrick	火砖色	#b22222	178,34,34	火砖色[三知开发网]
		darkgoldenrod	暗金黄色	#b8860b	184,134,11	暗金黄色[三知开发网]
		mediumorchid	中粉紫色	#ba55d3	186,85,211	中粉紫色[三知开发网]
		rosybrown	褐玫瑰红	#bc8f8f	188,143,143	褐玫瑰红[三知开发网]
		darkkhaki	暗黄褐色	#bdb76b	189,183,107	暗黄褐色[三知开发网]
		silver	银色	#c0c0c0	192,192,192	银色[三知开发网]
		mediumvioletred	中紫罗兰色	#c71585	199,21,133	中紫罗兰色[三知开发网]
		indianred	印第安红	#cd5c5c	205,92,92	印第安红[三知开发网]
		peru	秘鲁色	#cd853f	205,133,63	秘鲁色[三知开发网]
		chocolate	巧可力色	#d2691e	210,105,30	巧可力色[三知开发网]
		tan	茶色	#d2b48c	210,180,140	茶色[三知开发网]
		lightgray	亮灰色	#d3d3d3	211,211,211	亮灰色[三知开发网]
		thistle	蓟色	#d8bfd8	216,191,216	蓟色[三知开发网]
		orchid	淡紫色	#da70d6	218,112,214	淡紫色[三知开发网]
		goldenrod	金麒麟色	#daa520	218,165,32	金麒麟色[三知开发网]
		palevioletred	苍紫罗兰色	#db7093	219,112,147	苍紫罗兰色[三知开发网]
		crimson	暗深红色	#dc143c	220,20,60	暗深红色[三知开发网]
		gainsboro	淡灰色	#dcdcdc	220,220,220	淡灰色[三知开发网]
		plum	洋李色	#dda0dd	221,160,221	洋李色[三知开发网]
		burlywood	实木色	#deb887	222,184,135	实木色[三知开发网]
		lightcyan	亮青色	#e0ffff	224,255,255	亮青色[三知开发网]
		lavender	淡紫色	#e6e6fa	230,230,250	淡紫色[三知开发网]
		darksalmon	暗肉色	#e9967a	233,150,122	暗肉色[三知开发网]
		violet	紫罗兰色	#ee82ee	238,130,238	紫罗兰色[三知开发网]
		palegoldenrod	苍麒麟色	#eee8aa	238,232,170	苍麒麟色[三知开发网]
		lightcoral	亮珊瑚色	#f08080	240,128,128	亮珊瑚色[三知开发网]
		khaki	黄褐色	#f0e68c	240,230,140	黄褐色[三知开发网]
		aliceblue	艾利斯兰	#f0f8ff	240,248,255	艾利斯兰[三知开发网]
		honeydew	蜜色	#f0fff0	240,255,240	蜜色[三知开发网]
		azure	天蓝色	#f0ffff	240,255,255	天蓝色[三知开发网]
		sandybrown	沙褐色	#f4a460	244,164,96	沙褐色[三知开发网]
		wheat	浅黄色	#f5deb3	245,222,179	浅黄色[三知开发网]
		beige	米色	#f5f5dc	245,245,220	米色[三知开发网]
		whitesmoke	烟白色	#f5f5f5	245,245,245	烟白色[三知开发网]
		mintcream	薄荷色	#f5fffa	245,255,250	薄荷色[三知开发网]
		ghostwhite	幽灵白	#f8f8ff	248,248,255	幽灵白[三知开发网]
		salmon	鲜肉色	#fa8072	250,128,114	鲜肉色[三知开发网]
		antiquewhite	古董白	#faebd7	250,235,215	古董白[三知开发网]
		linen	亚麻色	#faf0e6	250,240,230	亚麻色[三知开发网]
		lightgoldenrodyellow	亮金黄色	#fafad2	250,250,210	亮金黄色[三知开发网]
		oldlace	老花色	#fdf5e6	253,245,230	老花色[三知开发网]
		red	红色	#ff0000	255,0,0	红色[三知开发网]
		fuchsia	紫红色	#ff00ff	255,0,255	紫红色[三知开发网]
		deeppink	深粉红色	#ff1493	255,20,147	深粉红色[三知开发网]
		orangered	红橙色	#ff4500	255,69,0	红橙色[三知开发网]
		tomato	西红柿色	#ff6347	255,99,71	西红柿色[三知开发网]
		hotpink	热粉红色	#ff69b4	255,105,180	热粉红色[三知开发网]
		coral	珊瑚色	#ff7f50	255,127,80	珊瑚色[三知开发网]
		darkorange	暗桔黄色	#ff8c00	255,140,0	暗桔黄色[三知开发网]
		lightsalmon	亮肉色	#ffa07a	255,160,122	亮肉色[三知开发网]
		orange	橙色	#ffa500	255,165,0	橙色[三知开发网]
		lightpink	亮粉红色	#ffb6c1	255,182,193	亮粉红色[三知开发网]
		pink	粉红色	#ffc0cb	255,192,203	粉红色[三知开发网]
		gold	金色	#ffd700	255,215,0	金色[三知开发网]
		peachpuff	桃色	#ffdab9	255,218,185	桃色[三知开发网]
		navajowhite	纳瓦白	#ffdead	255,222,173	纳瓦白[三知开发网]
		moccasin	鹿皮色	#ffe4b5	255,228,181	鹿皮色[三知开发网]
		bisque	桔黄色	#ffe4c4	255,228,196	桔黄色[三知开发网]
		mistyrose	浅玫瑰色	#ffe4e1	255,228,225	浅玫瑰色[三知开发网]
		blanchedalmond	白杏色	#ffebcd	255,235,205	白杏色[三知开发网]
		papayawhip	番木色	#ffefd5	255,239,213	番木色[三知开发网]
		lavenderblush	淡紫红	#fff0f5	255,240,245	淡紫红[三知开发网]
		seashell	海贝色	#fff5ee	255,245,238	海贝色[三知开发网]
		cornsilk	米绸色	#fff8dc	255,248,220	米绸色[三知开发网]
		lemonchiffon	柠檬绸色	#fffacd	255,250,205	柠檬绸色[三知开发网]
		floralwhite	花白色	#fffaf0	255,250,240	花白色[三知开发网]
		snow	雪白色	#fffafa	255,250,250	雪白色[三知开发网]
		yellow	黄色	#ffff00	255,255,0	黄色[三知开发网]
		lightyellow	亮黄色	#ffffe0	255,255,224	亮黄色[三知开发网]
		ivory	象牙色	#fffff0	255,255,240	象牙色[三知开发网]
		white	白色	#ffffff	255,255,255	白色[三知开发网]

下面是16种标准颜色名称和RGB颜色值

Black = #000000	Green = #008000	Silver = #C0C0C0	Lime = #00FF00
Gray = #808080	Olive = #808000	White = #FFFFFF	Yellow = #FFFF00
Maroon = #800000	Navy = #000080	Red = #FF0000	Blue = #0000FF
Purple = #800080	Teal = #008080	Fuchsia = #FF00FF	Aqua = #00FFFF

扩展：svg w3c / w3cschool svg / org.w3c.dom.svg jar

三 : 什么是W3C推荐标准？

W3C推荐标准概述：W3C推荐标准（W3C Recommendation）是万维网联盟（W3C）标准工作组的标准批准过程的最终阶段。这一名称表示了该标准文档已经经历了W3C成员组织和公众的评审。W3C推荐标准的目的在于使万维网技术标准化[2]。W3C推荐标准与其他许多行业的发布的标准相当。

标准的成熟过程
按照W3C的过程文档，一个推荐标准的发展需要通过不同的成熟级别
工作草案（WD）
在工作草案这一级别，标准被发布出来，以得到社群的评审。工作草案文档是一个标准的首次公开发表。几乎任何人都可以发表评论，但是并没有承诺对发表的评论的内容采取行动。
在这一阶段，标准文档很可能会发生重大的修改，这样，任何实现该工作草案的人应该做好准备：随着标准不断成熟，大量修改他们实现。
候选推荐标准（CR）
候选推荐标准与工作草案相比更加稳定。此时，工作组负责使标准符合一个标准所需的要求。候选推荐标准的目的是获得开发社区在关于标准的可实现性方面的帮助。
标准文档还可能发生进一步的修改，但此时重大的特性大部分已经锁定。这些特性的设计还是会根据实现者的反馈进行变更。
提案推荐标准（PR）提案推荐标准是标准经过了前两个级别的版本。上述标准的用户已经畅所欲言，标准的实现者也已经有机会给出了他们的观点。在这一阶段，标准文档已经提交到W3C顾问委员会进行最后的批准。
虽然这一步骤是重要的，但是这一阶段很少导致对标准的任何重要的修改。
W3C推荐标准（REC）
这是最成熟的发展阶段。这时，标准已经历了理论上和实际上的评审和测试，由W3C作签署，可以广泛应用。
后续的修订
推荐标准通过分别发布的勘误表来更新，当积累到足够的实质上的修订，会发布推荐标准的一个新版本，例如，XML推荐标准现在是第五版。

四 : 火狐谷歌联手发布W3Help网站促进W3C标准

近日，国际知名浏览器Firefox（火狐）再度与Google联手，推出W3Help网站（http://www.w3help.org/zh-cn/），致力于在国内推动W3C国际通行标准，帮助互联网开发者了解标准，改进网页兼容性，提升网民的网络浏览体验。

什么是“W3C”标准？

“W3C 标准”是指 W3C 标准工作组的标准批准过程的最终阶段。这一名称表示了该标准文档已经经历了W3C成员组织和公众的评审，其目的在于使万维网技术标准化。到目前为止，W3C 已开发了超过50个规范（草案）。在此次火狐、谷歌联手推出的W3Help网站（http://www.w3help.org/zh-cn/）中，对HTML、CSS、DOM规范做了更多介绍。

为什么需要“W3C”标准？

目前在互联网中流行的浏览器有多种，这些浏览器在处理一个相同的页面时，表现或行为有时会有差异。如果这种差异很大，可能造成在某个浏览器下无法正常浏览网页。引起这些差异的问题即为“浏览器兼容性问题”。

浏览器的工作模式常被称为“渲染模式”。不同浏览器的工作模式不仅对渲染有影响，对代码的解析以及脚本的行为也同样有影响。如果一个页面能使各浏览器都工作在“标准模式”下，那么各浏览器都将向“标准”靠拢，使得网民在使用不同浏览器时，看到的页面差异很小。相反，如果一个页面使各浏览器都工作在“混杂模式”下，那么各浏览器之间表现出的差异将会非常大，影响网民的浏览体验。

因此，互联网开发人员在编写一个页面时，应该使用可以触发各浏览器“标准模式”的DTD，并书写符合规范的代码，以保证网页在各浏览器中可以最大程度的兼容，为网民带来更好的浏览器体验。而这个“标准”，正是“W3C”所倡导的“W3C”国际通行标准。

事实标准酿恶果通行标准好处多

早在2009年初，曾出现过IE8与国内2400家网站不兼容的现象，国内多家知名网站未能幸免，中国网站几乎全军覆没。究其原因，是国内大部分网站根据与W3C标准不兼容的老版本IE进行开发造成的。

微软于2001年8月27日发布IE6（Internet Explorer 6），增强了对 CSS1 的兼容，使得 IE6对CSS的解析及渲染与它的前一个版本IE5.5有了很大的差别。为了保持良好的向后兼容性，微软为用户提供了一个“开关”，来决定浏览器的工作模式。在后续推出的IE7、IE8 中，也使用了上述“开关”。这样，就使得IE7、IE8与IE6 一样，在的“混杂模式”下对页面进行处理。因此，IE系列的“混杂模式”将浏览器的行为冻结在IE5.5这个老版本的浏览器上。随着时间的推进和标准的进步，这种“混杂模式”已经不能适应互联网的快速发展了。

在国内，由于Windows捆绑IE浏览器的缘故，造成了IE（尤其是IE6）的广泛应用。而国内的大多数网站根据与标准不兼容的老版本IE进行开发，当IE浏览器升级时，就出现了多家国内网站不兼容的现象。尤其在网银方面，由于国内大多数银行只提供基于Windows和IE的网上支付解决方案，造成众多非Windows、非IE用户无法正常登陆网银，对网民的互联网使用造成了极大的伤害。

随着Firefox（火狐）浏览器用户占有率的持续上升，火狐已经稳坐全球浏览器市场第二把交椅。正是在广大网友和非IE用户的呼声中，第三方支付平台“支付宝”从不支持火狐（Firefox）等非IE浏览器到全面支持跨平台的网络支付，网民的需求赢得了“标准之争”的重要一役。而浦发银行、国有四大行之一的建行也已宣布支持火狐。坚持国际通行的“W3C”标准，将为网民的互联网浏览带来更多便利。

“W3Help”网站帮助中国互联网开发者了解标准，改善兼容性问题

Firefox火狐浏览器一贯坚持国际通行标准，早在Firefox3.5中，就为线上媒体带来了重要升级，提供了世界上第一个HTML5视频和音频支持的实现（Ogg Vorbis和Ogg Theora，允许网页开发人员在网页中包含富媒体内容，并且可以使用JavaScript、HTML、CSS来操作他们。此次火狐与谷歌再度联手，发布W3Help网站（（http://www.w3help.org/zh-cn/），为国内的开发者提供更多“W3C”标准的介绍，分析兼容性产生的原因，并提供兼容性问题的具体案例供网页开发者参考，为提升中国互联网网民的网络体验贡献力量！

本文标题：w3c标准-关于W3C CSS标准的一些经验
本文地址： http://www.61k.com/1165939.html

61阅读

w3c标准-关于W3C CSS标准的一些经验

关于学习经验的作文

业界

教程