CSS 规范 1.0
1. 简介
1.1 CSS文件的组织
1.2 TAPD共享元素 (TAPD elements)
1.3 TUI (TAPD User Interface CSS framework)
2. 命名约定
2.1 TAPD elemest 命名
2.2 普通元素命名
2.3 常用命名
2.4 注释写法
3. 书写格式
3.1 书写顺序
3.2 补充
4. CSS Sprites
5. TUI的使用
6. TAPD element的使用
1.简介
1.1 CSS文件的组织
CSS分成4大部分，其中tui.css是页面原型框架，提供了对大部分页面布局的支持。
TAPD共享元素(tapd element)的样式存放于了tui-tapd.css。 如上述CSS不能满足设计需求的话尽量将需要的代码添加到对应的插件CSS，按需加载，以减小tui-tapd.css的体积。
| tui.css |
浏览器样式重置以及若干种CSS布局 |
| tui-tapd.css |
TAPD各模块CSS |
| skin0(0,1,2.etc).css |
skin文件，字体边框的颜色、背景等… |
| tui-prong(插件名:launch req.etc).css |
各plugin额外添加的CSS |
1.2 TAPD共享元素 (TAPD elements)
为了提高前端开发效率及降低维护成本，TAPD大部分的页面被模块化，拆解成若干TAPD共享元素(以下简称TAPD elements), 存放于tui-tapd.css中，包含有：
工具条 tapd-toolbar、动作条 tapd-action、按钮 tapd-button …etc
各TAPD element可依页面设计情况独立或搭配使用。
备注： 因TAPD element 属基类CSS，若需修改应对该元素的使用场合、影响范围、可复用性等方面评估后进行。
1.3 TUI (TAPD User Interface CSS framework)
存放于tui.css中。其中定义了浏览器重置样式，确保基本的HTML元素在各浏览器中表现一致。同时参考CDC草拟的960px栅格布局规范，提供了大部分常用的页面布局。
2. 命名约定
2.1 TAPD element 命名
小写，用“-”分词
tapd-模块名-子模块1(如果有)-子模块2(如果有)-模块状态
Example: .tapd-button-disabled .tapd-box-highlighted
(允许少量英文缩写)
尽量选择可复用性高的元素为TAPD Element
所有的element均为class name
2.2普通元素命名
小写，用“_”分词
不加“tapd-”前缀，命名用“模块_子模块_状态”方式以进行区分，同时建议将一般元素的CSS存放到相应plugin的CSS文件中以减小tui-tapd.css的体积
Example: .subject_comments #page_title
2.3 常用命名
容 器: box
页 头：header
内 容：content
页面主体：main
页 尾：footer
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
摘要: summary
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
备注: 所有变量必须是有意义的英文，允许使用公认英文缩写
2.4注释写法：
/*–o TAPD elements CSS by tom@20090810 –*/
内容
/*–x TAPD elements CSS –*/
每一个CSS section需包含有完整的起始和终结注释，如需要可在注释头部添加修改人相关信息。
这样可以让文本编辑器快速地定位到CSS section的头部与结尾。
3.书写格式
Example:
.tapd-box,
.tapd-box-primary{
clear:both;
margin-bottom:1em;
overflow:hidden;
background-color:#FFF;
}
.tapd-win .content{background-color:#fff;}
1. 复数个class name(或id name)定义用逗号区分，并间隔一行
2. CSS规则大于2项时隔行书写，否则可以写成一行
3. 禁止对html元素直接定义CSS，如： p{color:#000;}
4. 尽量避免使用!important
5. 所有规则结束后，必须使用 ; 号结束
3.1 书写顺序
1. Display & Flow
2. Positioning
3. Dimensions
4. Margins, Padding, Borders, Outline
5. Typographic Styles
6. Backgrounds
7. Opacity, Cursors, Generated Content
详细文档：http://km.oa.com/group/506/post_show/1158/13660
Example：
.tapd-toolbar{
padding-left:10px;
height:30px;
border-top:1px solid #A3C9D9;
border-bottom:1px solid #A3C9D9;
line-height:30px;
background:#f9fbff url(../img/tapd/toolbar_bg.gif) repeat-x;
}
3.2 补充
3.2.1 CSS指定继承
若想从父元素继承属性,但是默认时它时实际上没有那样作,那么就可以在所编写的规则中使用:inherit值.
Example:
div.standout{
border:1px solid #ddd;
}
div.standout p{
border:inherit;
}
3.2.2 属性优先级
内联样式属性 >id选择符(若规则有多个id选择符,具有id选择符最大数的规则优先) >比较元素数量(越多特殊性越高) >最近声明的规则有较高的优先权
Example:
.tapd-box{ color:#fff;}
html .tapd-box{ color:#fff;}
后者会覆盖前者的样式，可用于部分样式特殊化场合
4. CSS Sprites
合并所有的背景图片到一个单个图片里面，并通过background-position属性来使用这个图片。
CSS Sprites可以减少HTTP请求的数量，节省带宽并加快页面加载。同时，可以避免图片闪烁[例如，如果系统或网速比较慢的时候，当鼠标放到一个按钮时加载另外一个图片就可能引起闪烁/中断]。
由于IE6对透明背景的PNG图片支持不好，所以大部分 图片采用GIF 格式 ，而部分色彩要求较高的地方采用PNG，所以TAPD的CSS sprites实际上是合成两张图片，分别是general_icons.gif和general_icons.png