61阅读

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颜色值列表

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

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

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

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

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

名称背景数值背景颜色名称中文名称十六进制RGB十进制RGB粗细字体配色参考
  black黑色#0000000,0,0黑色[三知开发网]
  navy海军色#0000800,0,128海军色[三知开发网]
  darkblue暗蓝色#00008b0,0,139暗蓝色[三知开发网]
  mediumblue中兰色#0000cd0,0,205中兰色[三知开发网]
  blue蓝色#0000ff0,0,255蓝色[三知开发网]
  darkgreen暗绿色#0064000,100,0暗绿色[三知开发网]
  green绿色#0080000,128,0绿色[三知开发网]
  teal水鸭色#0080800,128,128水鸭色[三知开发网]
  darkcyan暗青色#008b8b0,139,139暗青色[三知开发网]
  deepskyblue深天蓝色#00bfff0,191,255深天蓝色[三知开发网]
  darkturquoise暗宝石绿#00ced10,206,209暗宝石绿[三知开发网]
  mediumspringgreen中春绿色#00fa9a0,250,154中春绿色[三知开发网]
  lime酸橙色#00ff000,255,0酸橙色[三知开发网]
  springgreen春绿色#00ff7f0,255,127春绿色[三知开发网]
  aqua浅绿色#00ffff0,255,255浅绿色[三知开发网]
  midnightblue中灰兰色#19197025,25,112中灰兰色[三知开发网]
  dodgerblue闪兰色#1e90ff30,144,255闪兰色[三知开发网]
  lightseagreen亮海蓝色#20b2aa32,178,170亮海蓝色[三知开发网]
  forestgreen森林绿#228b2234,139,34森林绿[三知开发网]
  seagreen海绿色#2e8b5746,139,87海绿色[三知开发网]
  darkslategray暗瓦灰色#2f4f4f47,79,79暗瓦灰色[三知开发网]
  limegreen橙绿色#32cd3250,205,50橙绿色[三知开发网]
  mediumseagreen中海蓝#3cb37160,179,113中海蓝[三知开发网]
  turquoise青绿色#40e0d064,224,208青绿色[三知开发网]
  royalblue皇家蓝#4169e165,105,225皇家蓝[三知开发网]
  steelblue钢兰色#4682b470,130,180钢兰色[三知开发网]
  darkslateblue暗灰蓝色#483d8b72,61,139暗灰蓝色[三知开发网]
  mediumturquoise中绿宝石#48d1cc72,209,204中绿宝石[三知开发网]
  indigo靛青色#4b008275,0,130靛青色[三知开发网]
  darkolivegreen暗橄榄绿#556b2f85,107,47暗橄榄绿[三知开发网]
  cadetblue军兰色#5f9ea095,158,160军兰色[三知开发网]
  cornflowerblue菊兰色#6495ed100,149,237菊兰色[三知开发网]
  mediumaquamarine中绿色#66cdaa102,205,170中绿色[三知开发网]
  dimgray暗灰色#696969105,105,105暗灰色[三知开发网]
  slateblue石蓝色#6a5acd106,90,205石蓝色[三知开发网]
  olivedrab深绿褐色#6b8e23107,142,35深绿褐色[三知开发网]
  slategray灰石色#708090112,128,144灰石色[三知开发网]
  lightslategray亮蓝灰#778899119,136,153亮蓝灰[三知开发网]
  mediumslateblue中暗蓝色#7b68ee123,104,238中暗蓝色[三知开发网]
  lawngreen草绿色#7cfc00124,252,0草绿色[三知开发网]
  chartreuse黄绿色#7fff00127,255,0黄绿色[三知开发网]
  aquamarine碧绿色#7fffd4127,255,212碧绿色[三知开发网]
  maroon粟色#800000128,0,0粟色[三知开发网]
  purple紫色#800080128,0,128紫色[三知开发网]
  olive橄榄色#808000128,128,0橄榄色[三知开发网]
  gray灰色#808080128,128,128灰色[三知开发网]
  skyblue天蓝色#87ceeb135,206,235天蓝色[三知开发网]
  lightskyblue亮天蓝色#87cefa135,206,250亮天蓝色[三知开发网]
  blueviolet紫罗兰蓝色#8a2be2138,43,226紫罗兰蓝色[三知开发网]
  darkred暗红色#8b0000139,0,0暗红色[三知开发网]
  darkmagenta暗洋红#8b008b139,0,139暗洋红[三知开发网]
  saddlebrown重褐色#8b4513139,69,19重褐色[三知开发网]
  darkseagreen暗海兰色#8fbc8f143,188,143暗海兰色[三知开发网]
  lightgreen亮绿色#90ee90144,238,144亮绿色[三知开发网]
  mediumpurple中紫色#9370db147,112,219中紫色[三知开发网]
  darkviolet暗紫罗兰色#9400d3148,0,211暗紫罗兰色[三知开发网]
  palegreen苍绿色#98fb98152,251,152苍绿色[三知开发网]
  darkorchid暗紫色#9932cc153,50,204暗紫色[三知开发网]
  sienna赭色#a0522d160,82,45赭色[三知开发网]
  brown褐色#a52a2a165,42,42褐色[三知开发网]
  darkgray暗灰色#a9a9a9169,169,169暗灰色[三知开发网]
  lightblue亮蓝色#add8e6173,216,230亮蓝色[三知开发网]
  greenyellow黄绿色#adff2f173,255,47黄绿色[三知开发网]
  paleturquoise苍宝石绿#afeeee175,238,238苍宝石绿[三知开发网]
  lightsteelblue亮钢兰色#b0c4de176,196,222亮钢兰色[三知开发网]
  powderblue粉蓝色#b0e0e6176,224,230粉蓝色[三知开发网]
  firebrick火砖色#b22222178,34,34火砖色[三知开发网]
  darkgoldenrod暗金黄色#b8860b184,134,11暗金黄色[三知开发网]
  mediumorchid中粉紫色#ba55d3186,85,211中粉紫色[三知开发网]
  rosybrown褐玫瑰红#bc8f8f188,143,143褐玫瑰红[三知开发网]
  darkkhaki暗黄褐色#bdb76b189,183,107暗黄褐色[三知开发网]
  silver银色#c0c0c0192,192,192银色[三知开发网]
  mediumvioletred中紫罗兰色#c71585199,21,133中紫罗兰色[三知开发网]
  indianred印第安红#cd5c5c205,92,92印第安红[三知开发网]
  peru秘鲁色#cd853f205,133,63秘鲁色[三知开发网]
  chocolate巧可力色#d2691e210,105,30巧可力色[三知开发网]
  tan茶色#d2b48c210,180,140茶色[三知开发网]
  lightgray亮灰色#d3d3d3211,211,211亮灰色[三知开发网]
  thistle蓟色#d8bfd8216,191,216蓟色[三知开发网]
  orchid淡紫色#da70d6218,112,214淡紫色[三知开发网]
  goldenrod金麒麟色#daa520218,165,32金麒麟色[三知开发网]
  palevioletred苍紫罗兰色#db7093219,112,147苍紫罗兰色[三知开发网]
  crimson暗深红色#dc143c220,20,60暗深红色[三知开发网]
  gainsboro淡灰色#dcdcdc220,220,220淡灰色[三知开发网]
  plum洋李色#dda0dd221,160,221洋李色[三知开发网]
  burlywood实木色#deb887222,184,135实木色[三知开发网]
  lightcyan亮青色#e0ffff224,255,255亮青色[三知开发网]
  lavender淡紫色#e6e6fa230,230,250淡紫色[三知开发网]
  darksalmon暗肉色#e9967a233,150,122暗肉色[三知开发网]
  violet紫罗兰色#ee82ee238,130,238紫罗兰色[三知开发网]
  palegoldenrod苍麒麟色#eee8aa238,232,170苍麒麟色[三知开发网]
  lightcoral亮珊瑚色#f08080240,128,128亮珊瑚色[三知开发网]
  khaki黄褐色#f0e68c240,230,140黄褐色[三知开发网]
  aliceblue艾利斯兰#f0f8ff240,248,255艾利斯兰[三知开发网]
  honeydew蜜色#f0fff0240,255,240蜜色[三知开发网]
  azure天蓝色#f0ffff240,255,255天蓝色[三知开发网]
  sandybrown沙褐色#f4a460244,164,96沙褐色[三知开发网]
  wheat浅黄色#f5deb3245,222,179浅黄色[三知开发网]
  beige米色#f5f5dc245,245,220米色[三知开发网]
  whitesmoke烟白色#f5f5f5245,245,245烟白色[三知开发网]
  mintcream薄荷色#f5fffa245,255,250薄荷色[三知开发网]
  ghostwhite幽灵白#f8f8ff248,248,255幽灵白[三知开发网]
  salmon鲜肉色#fa8072250,128,114鲜肉色[三知开发网]
  antiquewhite古董白#faebd7250,235,215古董白[三知开发网]
  linen亚麻色#faf0e6250,240,230亚麻色[三知开发网]
  lightgoldenrodyellow亮金黄色#fafad2250,250,210亮金黄色[三知开发网]
  oldlace老花色#fdf5e6253,245,230老花色[三知开发网]
  red红色#ff0000255,0,0红色[三知开发网]
  fuchsia紫红色#ff00ff255,0,255紫红色[三知开发网]
  deeppink深粉红色#ff1493255,20,147深粉红色[三知开发网]
  orangered红橙色#ff4500255,69,0红橙色[三知开发网]
  tomato西红柿色#ff6347255,99,71西红柿色[三知开发网]
  hotpink热粉红色#ff69b4255,105,180热粉红色[三知开发网]
  coral珊瑚色#ff7f50255,127,80珊瑚色[三知开发网]
  darkorange暗桔黄色#ff8c00255,140,0暗桔黄色[三知开发网]
  lightsalmon亮肉色#ffa07a255,160,122亮肉色[三知开发网]
  orange橙色#ffa500255,165,0橙色[三知开发网]
  lightpink亮粉红色#ffb6c1255,182,193亮粉红色[三知开发网]
  pink粉红色#ffc0cb255,192,203粉红色[三知开发网]
  gold金色#ffd700255,215,0金色[三知开发网]
  peachpuff桃色#ffdab9255,218,185桃色[三知开发网]
  navajowhite纳瓦白#ffdead255,222,173纳瓦白[三知开发网]
  moccasin鹿皮色#ffe4b5255,228,181鹿皮色[三知开发网]
  bisque桔黄色#ffe4c4255,228,196桔黄色[三知开发网]
  mistyrose浅玫瑰色#ffe4e1255,228,225浅玫瑰色[三知开发网]
  blanchedalmond白杏色#ffebcd255,235,205白杏色[三知开发网]
  papayawhip番木色#ffefd5255,239,213番木色[三知开发网]
  lavenderblush淡紫红#fff0f5255,240,245淡紫红[三知开发网]
  seashell海贝色#fff5ee255,245,238海贝色[三知开发网]
  cornsilk米绸色#fff8dc255,248,220米绸色[三知开发网]
  lemonchiffon柠檬绸色#fffacd255,250,205柠檬绸色[三知开发网]
  floralwhite花白色#fffaf0255,250,240花白色[三知开发网]
  snow雪白色#fffafa255,250,250雪白色[三知开发网]
  yellow黄色#ffff00255,255,0黄色[三知开发网]
  lightyellow亮黄色#ffffe0255,255,224亮黄色[三知开发网]
  ivory象牙色#fffff0255,255,240象牙色[三知开发网]
  white白色#ffffff255,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阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1