产品开发部社区项目CSS开发规范 - 版本历史

TerranC：/* 关于z-Index值的设置范围说明 */

2011-03-28T04:44:16Z

‎关于z-Index值的设置范围说明

TerranC：/* 绝对不要在CSS中使用 "" 选择符 /

2011-03-28T03:09:46Z

‎绝对不要在CSS中使用 "*" 选择符

TerranC：/* 根据新建样式的适用范围分为四级：产品级、项目级、应用级 */

2011-03-10T08:29:07Z

‎根据新建样式的适用范围分为四级：产品级、项目级、应用级

TerranC：/* 根据新建样式的适用范围分为四级：产品级、项目级、应用级 */

2011-03-08T15:02:31Z

‎根据新建样式的适用范围分为四级：产品级、项目级、应用级

TerranC：/* 单条CSS规则的书写格式要求 */

2011-03-08T15:01:48Z

‎单条CSS规则的书写格式要求

TerranC：/* 尽量避免使用CSS Hack */

2011-03-08T14:50:44Z

‎尽量避免使用CSS Hack

TerranC：/* 尽量避免使用CSS Hack */

2011-03-08T14:49:14Z

‎尽量避免使用CSS Hack

TerranC：/* ui.css是统一UI控件样式 */

2011-03-08T14:48:21Z

‎ui.css是统一UI控件样式

TerranC：/* 不要轻易改动public下的CSS。必须要改动时，需进行集体沟通切全站反复测试 */

2011-03-08T14:47:55Z

‎不要轻易改动public下的CSS。必须要改动时，需进行集体沟通切全站反复测试

TerranC：/* 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度 */

2011-03-08T14:47:27Z

‎使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度

@@ 第424行： / 第424行： @@
 ===关于z-Index值的设置范围说明===
 #窗体独占式layer（如：dialog、mask）: 800-1000
 #非独占式页面遮罩layer：600-799
 #普通tooltips：100-599
 #非遮罩的定位需要：0-99

←上一版本		2011-03-28T03:09:46的版本
第421行：		第421行：

	===绝对不要在CSS中使用 "*" 选择符===		===绝对不要在CSS中使用 "*" 选择符===
		+
		+
		+	===关于z-Index值的设置范围说明===
		+	#窗体独占式layer（如：dialog、mask）: 800-1000
		+	#窗体独占式layer（如：dialog、mask）: 800-1000
		+	#非独占式页面遮罩layer：600-799
		+	#普通tooltips：100-599
		+	#非遮罩的定位需要：0-99

@@ 第208行： / 第208行： @@
 ===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
 #目前产品级的CSS文件有:
-#*/c/public/ui.css：统一UI控件
+#*/c/public/ui.css：统一浏览器默认样式、统一UI控件
-#*/c/public/base.css：统一浏览器默认样式
 #*/c/public/icon.css：公共icon样式
 #*/c/public/common.css：一些关键的影响页面逻辑的样式
 #*/c/public/validatorAuto.css：表单验证样式
 #项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与public文件夹同级。如：/c/xcb/、/c/paopao/。

@@ 第208行： / 第208行： @@
 ===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
 #目前产品级的CSS文件有:
-:*/c/public/ui.css：统一UI控件
+#*/c/public/ui.css：统一UI控件
-:*/c/public/base.css：统一浏览器默认样式
+#*/c/public/base.css：统一浏览器默认样式
-:*/c/public/icon.css：公共icon样式
+#*/c/public/icon.css：公共icon样式
-:*/c/public/common.css：一些关键的影响页面逻辑的样式
+#*/c/public/common.css：一些关键的影响页面逻辑的样式
-:*/c/public/swp.css：自定义边栏样式
+#*/c/public/swp.css：自定义边栏样式
-:*/c/public/validatorAuto.css：表单验证样式
+#*/c/public/validatorAuto.css：表单验证样式
 #项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与public文件夹同级。如：/c/xcb/、/c/paopao/。
-:*/c/xcb/ui.css：根据项目重置统一UI控件以及项目相关的可以抽离出来的独立UI控件样式。
+#*/c/xcb/ui.css：根据项目重置统一UI控件以及项目相关的可以抽离出来的独立UI控件样式。
-:*/c/xcb/icon.css：项目设计的icon样式
+#*/c/xcb/icon.css：项目设计的icon样式
-:*/c/xcb/event.css：新鲜事模板样式
+#*/c/xcb/event.css：新鲜事模板样式
-:*/c/xcb/skin.css：项目公共样式（可能在多个应用设计且难以抽离到ui.css里的相关样式）
+#*/c/xcb/skin.css：项目公共样式（可能在多个应用设计且难以抽离到ui.css里的相关样式）
-:*/c/xcb/addition.css：项目中临时存在的一些特殊样式
+#*/c/xcb/addition.css：项目中临时存在的一些特殊样式
 #应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的style.css文件（与应用的页面访问路径保持一直，如/app/vote/应用的样式对应在/c/app/vote/style.css），若需多个样式表，可自行在该style.css中@import相关样式。

@@ 第232行： / 第232行： @@
 #属性需要写在一行。
 <source lang="css">
-: .selector { property:value;property:value; }
+.selector { property:value;property:value; }
 </source>
-: #多个(>2)selector每个占一行：
+#多个(>2)selector每个占一行：
 <source lang="css">
-: .selector1,
+.selector1,
-: .selector2,
+.selector2,
-: .selector3 { property:value;property:value; }
+.selector3 { property:value;property:value; }
 </source>
 #兼容多个浏览器时，将标准属性写在后面，如：
 <source lang="css">
-: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
+-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
 </source>

@@ 第271行： / 第271行： @@
 推荐使用下面的：
-__区别属性：__
+;区别属性：
 <table border="0" cellpadding="0" cellspacing="0">
 		<tr>
@@ 第315行： / 第315行： @@
 </table>
-__区别规则：__
+;区别规则：
 <table border="0" cellpadding="0" cellspacing="0">
 		<tr>

@@ 第272行： / 第272行： @@
 __区别属性：__
-| IE6 | _property:value
+<table border="0" cellpadding="0" cellspacing="0">
-| IE6/7 | *property:value
+		<tr>
-| IE6/7/8/9 | property:value\9
+			<td style="width:87px;">
-| 非IE6 | property//:value
+				<p align="left">
+					IE6</p>
-|| Heading 1 || Heading 2
+			</td>
-| ''Gobble'' | Bar
+			<td style="width:537px;">
-| [Main]     | [SandBox]
+				<p align="left">
 __区别规则：__
-|IE6 |* html selector { ... }
+<table border="0" cellpadding="0" cellspacing="0">
-|IE7 |*:first-child+html selector { ... }
+		<tr>
-|非IE6 |html>body selector { ... }
+			<td style="width:165px;">
-|firefox only |@-moz-document url-prefix() { ... }
+				<p align="left">
-|saf3+/chrome1+ |@media all and (-webkit-min-device-pixel-ratio:0) { ... }
+					IE6</p>
-|opera only |@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { ... }
+			</td>
-|iPhone/mobile webkit |@media screen and (max-device-width: 480px) { ... }
+			<td style="width:459px;">
 ===使用after或overflow的方式清浮动===

@@ 第223行： / 第223行： @@
 ===ui.css是统一UI控件样式===
-: 它包括常用的一些Web元素：模块框（.module）、标签（Tabs）、表单（table.edit）、按钮（.button）、浮动层（.dialog）、图文列表（ul.list、ul.list_inline）、简单列表（ul.lite、ul.lite_inline）、分页页码（.pager）、警示/提示框（.notice_box）、引用/评论（blockquote）、小箭头（. layer_arrow）、下拉菜单（. list_option）……
+它包括常用的一些Web元素：模块框（.module）、标签（Tabs）、表单（table.edit）、按钮（.button）、浮动层（.dialog）、图文列表（ul.list、ul.list_inline）、简单列表（ul.lite、ul.lite_inline）、分页页码（.pager）、警示/提示框（.notice_box）、引用/评论（blockquote）、小箭头（. layer_arrow）、下拉菜单（. list_option）……
-: 参见：http://pic.static.sdo.com/xcb/sns/c/public/ui.css
+参见：http://pic.static.sdo.com/xcb/sns/c/public/ui.css
 ===不要轻易改动public下的CSS===

@@ 第226行： / 第226行： @@
 : 参见：http://pic.static.sdo.com/xcb/sns/c/public/ui.css
-===不要轻易改动public下的CSS。必须要改动时，需进行集体沟通切全站反复测试===
+===不要轻易改动public下的CSS===
 ===单条CSS规则的书写格式要求===

@@ 第289行： / 第289行： @@
 |iPhone/mobile webkit |@media screen and (max-device-width: 480px) { ... }
-===使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度===
+===使用after或overflow的方式清浮动===
 ===内联和外联的CSS都必须放在页面的head里===

产品开发部社区项目CSS开发规范 - 版本历史

TerranC：/* 关于z-Index值的设置范围说明 */

TerranC：/* 绝对不要在CSS中使用 "*" 选择符 */

TerranC：/* 根据新建样式的适用范围分为四级：产品级、项目级、应用级 */

TerranC：/* 根据新建样式的适用范围分为四级：产品级、项目级、应用级 */

TerranC：/* 单条CSS规则的书写格式要求 */

TerranC：/* 尽量避免使用CSS Hack */

TerranC：/* 尽量避免使用CSS Hack */

TerranC：/* ui.css是统一UI控件样式 */

TerranC：/* 不要轻易改动public下的CSS。必须要改动时，需进行集体沟通切全站反复测试 */

TerranC：/* 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度 */

TerranC：/* 绝对不要在CSS中使用 "" 选择符 /