CSS表现样式规约.doc

表现样式规约一. 前言关于样式的设计分为两类：一是表现样式，主要定义样式的表现形式，用基本样式类定义实现；一是功能样式，主要是定义样式的功能，通过定义behavior属性调用htc文件实现不同的功能。本文档主要是描述前者的规约。二. 分类在表现样式中存在分组和不分组两类样式，分组样式指的是定义一组规定样式类来展现某种页面构成，可以在该样式类前加参数（如：A、B、C、D）来扩展该类样式的显示风格，不分组样式指的是定义的样式适用全局，不需要扩展定义的，如Body、A等。外网命名方式：样式命名方式：L1A L1B L1CL代表左边1代表首页ABC代表来扩展该类样式的显示风格C1A C1B C1CC代表中间1代表首页ABC代表来扩展该类样式的显示风格R1A R1 B R1CR代表右边1代表首页ABC代表来扩展该类样式的显示风格L2A L2B L2CL代表左边2代表二级页面ABC代表来扩展该类样式的显示风格R2A R2 B R2CR代表左边2代表二级页面ABC代表来扩展该类样式的显示风格L3A L3B L3CL代表左边3代表三级页面ABC代表来扩展该类样式的显示风格R2A R2 B R2CR代表左边3代表三级页面ABC代表来扩展该类样式的显示风格三. 表现规约1. 分类样式1.1 表单类1.1.1 定义CSS样式类名相关描述TitleIcon主表格第一行标题区最左端TD包含图标的定义，占表格的20Title主表格第一行标题区中间TD包含标题的定义，占表格的60TitleIconR主表格第一行标题区最右端TD占表格的20ItemCol嵌套表格第一行，属于项目标题区定义每个功能项目都包含哪些列，其中最左端显示一个复选框，用于选中所有内容Body主表格第二行的嵌套表格包含边框样式的定义。页面区域中需要填充的具体内容放置在嵌套表格中ItemIcon嵌套表格每一行左端TD包含项目符号的定义，属于信息项区Item1嵌套表格奇数行除最左端外每个TD，属于信息项区Item2嵌套表格偶数行除最左端外每个TD，属于信息项区ItemExt嵌套表格中的一行，也可以与标题区或信息项区的最后一行共用一行，属于扩展区（如：更多）ItemFunc嵌套表格中的一行，用于放置进行操作的功能按钮。属于功能区合计Table类共有10项CSS样式类1.1.2 Demo查看用法TitleIconTitleTitleIconRItemColItemIconItem1ItemIconItem1ItemIconItem1ItemIconItem2ItemExtItemFuncBody1.1.3 子类定义1.1.3.1 左边下拉菜单类LeftMenu样式类CSS样式类名左边下拉菜单类(LeftMenu开头)TitleIconTitleTitleIconRItemIconItem1Item2Body合计7个查看用法LeftMenuTitleIconLeftMenuTitleLeftMenuTitleIconRItemIconItem1ItemIconItem1ItemIconItem1ItemIconItem2Body1.1.3.2 编辑表单Edit类样式类CSS样式类名信息抽取子类(Edit)TitleIconTitleTitleIconRItemExtBodyItem1Item2ItemIcon合计8个查看用法Edit TitleIconEdit TitleEdit TitleIconRItemIconItem1ItemIconItem1ItemIconItem1ItemExtBody1.1.3.3 搜索子类Search样式类CSS样式类名搜索子类(Search)TitleIconTitleTitleIconRBodyItemExt合计5个查看demo1.1.3.4 多行子类如：外网的左边子类的样式L1A L代表左边1代表首页ABC代表来扩展该类样式的显示风格样式类CSS样式类名多行子类（L1A）TitleIconTitleTitleIconRBodyItem1Item1合计6个查看demo1.1.3.5 登录类Login样式类CSS样式类名登录类(Login)TitleIconTitleTitleIconRBodyItem1Item2ItemExt合计7个查看demo1.1.3.6 组织模型子类样式类CSS样式类名组织模型子类TitleIconTitleTitleIconRBodyItemFunc合计5个查看demo1.2 导航类1.2.1 定义CSS样式类名相关描述NaviItem默认状态NaviItemOver其鼠标悬停时的状态NaviSelect选中后状态合计Navigate类共有3项CSS样式类1.2.2 Demo查看demo1.3 缩进控制类1.3.1 定义CSS样式类名相关描述ShowControl控制条显示时的样式HidenControl控制条隐藏时的样式合计缩进控制类共有2项CSS样式类1.4 树类1.4.1 定义CSS样式类名相关描述Streebody定义总样式StreeBodyTop表格上方边框样式StreeBodyTopLeft表格左上方边框样式StreeBodyTopRight表格右上方边框样式StreeBodyLeft表格左边框样式StreeBodyRight表格右边框样式StreeBodyBottom表格下方边框样式StreeBodyBottomLeft表格左下方边框样式StreeBodyBottomRight表格右下方边框样式合计Tree类共有9项CSS样式类相应的复选树是以CTree开头查看用法三横三竖的表格StreeBodyTopLeftStreeBodyTopStreeBodyTopRightStreeBodyLeftStreebodyStreeBodyRightStreeBodyBottomLeftStreeBodyBottomStreeBodyBottomRight1.5 边框类1.5.1 定义CSS样式类名相关描述BodyTop表格上方边框样式BodyTopLeft表格左上方边框样式BodyTopRight表格右上方边框样式BodyLeft表格左边框样式BodyRight表格右边框样式BodyBottom表格下方边框样式BodyBottomLeft表格左下方边框样式BodyBottomRight表格右下方边框样式合计BodyBorder类共有8项CSS样式类1.5.2 Demo查看demo1.6 列表类1.6.1 定义查看用法：ListTitleIconListTitleListTitleIconRItemColListItemIconListItem1ListItemIconListItem2ListItemIconListItem1ListItemIconListItem2ItemExtListFuncBodyCSS样式类名相关描述ListTitleIcon主表格第一行标题区最左端TD包含图标的定义，占表格的20ListTitle主表格第一行标题区中间TD包含标题的定义，占表格的60ListTitleIconR主表格第一行标题区最右端TD占表格的20ListColumn嵌套表格第一行，属于项目标题区定义每个功能项目都包含哪些列，其中最左端显示一个复选框，用于选中所有内容ListBody主表格第二行的嵌套表格包含边框样式的定义。页面区域中需要填充的具体内容放置在嵌套表格中ListItemIcon嵌套表格每一行左端TD包含项目符号的定义，属于信息项区ListItem1嵌套表格奇数行除最左端外每个TD，属于信息项区ListItem2嵌套表格偶数行除最左端外每个TD，属于信息项区ListOpera嵌套表格中的一行，也可以与标题区或信息项区的最后一行共用一行，属于扩展区ListSet嵌套表格中的一行，用于放置进行操作的功能按钮。属于功能区ListFunc用于翻页的样式ListInsert插入空记录功能所产生的一行样式1.6.1.1 列表Grid样式类CSS样式类名列表（Grid）ListTitleIconListTitleListTitleIconRListItemIconListItem1ListItem2ListOperaListSetListFunc合计1.6.2 Demo查看demo1.7 Button按钮类CSS样式类名相关描述button设置按钮对象在未被访问前的样式buttonOver设置按钮对象在其鼠标悬停时的样式buttonOut设置按钮对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式合计TurnOver类共有3项CSS样式类1.8 翻页类1.8.1 定义CSS样式类名相关描述首页第一页链接样式上一页上一页链接样式下一页下一页链接样式尾页末页链接样式Go设置链接样式合计TurnOver类共有5项CSS样式类1.8.2 Demo查看demo1.9 文档表现类1.9.1 定义CSS样式类名相关描述InfoTitle文章标题InfoNote文章注解InfoContent文章内容合计Html类共有3项CSS样式类1.9.2 双选框CSS样式类名相关描述DoubleTitleIcon双选框主表格第一行标题区最左端TD包含图标的定义，占表格的20DoubleTitle双选框主表格第一行标题区中间TD包含标题的定义，占表格的60DoubleTitleIconR双选框主表格第一行标题区最右端TD占表格的20DoubleBody主表格第二行的嵌套表格包含边框样式的定义。页面区域中需要填充的具体内容放置在嵌套表格中合计Html类共有3项CSS样式类查看用法DoubleTitleIconDoubleTitleDoubleTitleIconRDoubleBody2. 不分类样式2.1 全局样式2.1.1 Body2.1.2 Header2.1.3 Footer2.1.4 P2.1.5 DIV2.1.6 UL，L2.1.7 Input2.2 固定样式2.2.1 ErrorInfo 页面错误信息样式3. 其他既不属于不分类样式，又不按分类样式规则进行分类的样式类。3.1 锚点类3.1.1 定义CSS样式类名相关描述A:link设置a对象在未被访问前的样式A: hover设置对象在其鼠标悬停时的样式A: active设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式A: visited设置a对象在其链接地址已被访问过时的样式合计锚点类共有4项CSS样式类3.1.2 Demo查看demo四. 不规则样式（只用一次）CSS样式类名相关描述HeaderInfoLeft页眉左边信息HeaderInfoRight 页眉右边信息Marquee滚动条样式Leftbg左边下拉菜单背景UserInfo用户信息LeftMenuTitleFont为特殊字体效果设置五. 应用规约以上样式主要是用在功能单元的表现上，下面就各类功能单元应用样式的情况进行归纳总结。1. 功能单元基类功能单元基类应用了“表单类”（参见1.1）、“边框类”（参见1.8）和“页面控制类”（参见1.12）样式组显示。由于所有的功能单元直接或者间接继承了功能单元基类，故它们的样式均由“表单类”或其子类、“边框类”、“页面控制类”和其他样式类（也可能不存在）组成，以下规约内容不再赘述其他功能单元对“边框类”和“页面控制类”样式的应用。2. 导航类功能单元导航类功能单元包含以下功能单元：l 导航功能单元l 功能页导航功能单元l 列表视图导航功能单元以上功能单元均应用了表单类中“一般显示子类”（参见1.1.3.1）和“导航类”（参见1.2）样式组显示。3. 树型类功能单元树型类功能单元包含以下功能单元：l 树型链接功能单元l 层次列表树功能单元l 组织模型管理功能单元l 组织单位用户选择以上功能单元均应用了表单类中“一般显示子类”（参见1.1.3.1）样式组显示。4. 信息抽取类功能单元信息类抽取功能单元包含以下功能单元：l 栏目专题抽取功能单元l 二级信息集合链接功能单元以上功能单元均应用了表单类中“信息抽取子类”（参见1.1.3.2）样式组显示。5. 其他类5.1 文档下拉列表抽取功能单元/计数器功能单元该功能单元应用了表单类中“单行子类”（参见1.1.3.4）样式组显示。5.2 分页式功能单元该功能单元应用了表单类中“一般显示子类”（参见1.1.3.1）和“外联分页类”（参见1.7）样式组显示。6. 列表类列表类功能单元以下功能单元：l