动易系统CSS风格样式3D模型盒和定义规范对于刚开始接触网页设计的朋友来说，对模板设计中的版式模板和风格模板这二个概念相对有些难以理解些。版式模板可以通过象DW这样的软件来可视化制作，风格模板如何和版式模板相结合则需要从思维上重新审视与理解。
这篇文章的部分内容已在“动易起航”教室进行了讲解，您可以在“动易起航”入门系列培训课程表中下载“动易系统CSS风格样式3D模型盒”一课的录像。本文会对制作动易模板的朋友以一些启示，对网页设计中CSS定义以3D模型盒的方式进行示例，希望能对您理解动易系统的模板设计原理有些启示。
为了叙述方便，文章分成以下几个部分进行讲解，您点击本页面左上方的分页标题可快速查找您想查看的章节内容：
·CSS定义的划分及命名规范
·CSS定义的模型示例
·CSS定义的运用示例
·CSS定义的分类与注释
·组件中存在但风格中未定义的CSS
动易系统自4.×版本开始，版式模板与风格模板开始紧密结合，并考虑到对今后一些基本界面定义修改的方便，对默认的风格进行了运用定义的预设。
系统提供默认的风格模板定义，可查阅网站后台默认的风格设置的“风格配色设置”。系统默认提供的CSS样式风格定义，里面有详细的定义注释，注释标记为：/* ...... */。
在系统中，CSS样式风格定义是可以自己自由定义的，也说是说您可以自由添加N多个自定义的风格，然后在各频道的版式模板中调用即可。修改风格设置必须具备一定网页css样式设计知识，建议您找些这方面的书看一下。在定义中不能使用单引号或双引号，否则会容易造成程序错误。
现对一些定义进行说明：
一、CSS定义的划分及命名规范
1、按位置命名
网站风格整体通用的命名规则以网页顶部、中部、底部三个大区块位置及其内部位置进行划分与命名，如：
2、按使用范围命名
在各区块内，则按其使用范围进行命名，如：
网页顶部（top）中的CSS定义：
网页中部（center）的CSS定义：
/* --网页中部中栏的CSS定义开始-- */
网站整体及有链接文字“A”的CSS定义
频道通用表格CSS定义
小结：从以上相关定义与命名中可以看出，定义名的规律一般中是以“（网页顶部、中部、底部三个大区块位置）”+“_”+“使用范围（表格内使用范围、模块名、运用范围等）”进行命名。如果有更多类似的，如“main_title_575”则再次加上“定义使用范围”的后缀名。
3、综合命名
为方便设计师及用户理解与修改相应样式，需综合位置命名规则及功能命名规规，如“位置名_功能名_其它定义名”样式，例如：网站首页中栏内容表定义为Main_right_tdbg_760i。
对于整个网站通用的定义，则采用通用定义，如BODY、TD、Input、Button、Select等，以统一这些通用元素的风格样式。
二、CSS定义的模型示例
在页面设计中，CSS的定位与套用中的盒模型影响其定位与样式，以下以CSS 盒模型的3D示意图，以方便清楚调用时的层次、关系和相互影响，便于理解和记忆。
动易网页设计CSS盒模型3D示意图
以网页中部左栏为例：
其中，在中部表格开始商用了“table class=ce nter_tdbgall”，则
“.center_tdbgall”可控制中部表格的背景与宽度，这里加上了“cellSpacing=0 cellPadding=0 width=760 align=center border=0”等定义，是为了方便在DW这些可视化网页编辑软件中进行编辑而加的定义。如果对CSS非常熟悉，且有一定的空间能力，则此处可只写成：
所有的定义由“.center_tdbgall”来完成对表格样式的定义与控制即可。即使是现在已经加了
“cellSpacing=0 cellPadding=0 width=760 align=center border=0”等定义也不用担心，一旦“.center_tdbgall”中定义了与其相同的元素，如“width: 100% ”，则会是CSS中的定义优先于网页中固定的HTML代码定义。
其他定义的解释见下表：
因此，要使得所定义的表格与CSS风格样式能适用于不同的设计需求，一般区域中需要四个以上的定义，才有可能通过修改样式定义来实现页面风格设计需
另外对于本区域中还有有链接的文字，则需要进一步考虑“a.***”的定义，或是在其表格外加div层单独控制本区域中的有链接文字的样式，这里不再细述。
二、CSS定义的运用示例
以网页的设计运用实例说明CSS定义的运用：
定义网页整体背景颜色：
定义三大区块：
定义左侧表格的效果：
左侧表格标题定义：固定宽度为250像素，定义背景图片，高为32像素，文字居中对齐，文字强制不加粗，颜色定义为浅棕色。
！背景图片定义时注意图片位置居中、不自动重复排列。
.left_title /* 左栏标题表格背景、文字颜色定义 */
{
font-weight:normal;
color: #D7AC4C;
height: 32px;
text-align: center;
background-image: url(Skin/Gov_C/l_0.gif);
background-position: center;
background-repeat: no-repeat;
width: 250px;
}
左侧表格内容定义：缩进15像素，以使得内容离开背景图片一定的距离。
！背景图片定义时注意图片位置居中、自动竖向重复排列。
.left_tdbg1 /* 左栏内容表格背景、文字颜色定义 */
{
padding: 15px;
background-image: url(Skin/Gov_C/l_0_1.gif);
background-position: center;
background-repeat: repeat-y;
}
左侧表格间距定义：定义29高度，以使得上下表格有一定的间距。
！背景图片定义时注意图片位置居中、不自动重复排列。
.left_tdbg2 /* 左栏底部表格背景、文字颜色定义 */
{
height: 29px;
background-image: url(Skin/Gov_C/l_0_2.gif);
background-position: center;
background-repeat: no-repeat;
}
定义中间内容表格的整体样式：
定义中间表格背景宽度与底色，左缩进以使得内容与白背景色有一定的间
距：
.main_tdbgall /* 中栏表格总背景颜色定义 */
{
width: 710px;background:#ffffff; float: center;
padding-left:5px;
}
CSS盒模型3D示意图：
注意.left_title、left_tdbg1、left_tdbg2 三张图片其大小及GOF透明处
理，图片不一定要与其表格一样大小，因为CSS中可以通过
“background-repeat”控制图片的重复和“background-position”图片默认
位置。
顶部表格效果代码：
框式的白色通过Dbaib_1这个CSS样式定义进行控制：
able width="100%" border="0" cellspacing="0" cellpadding="0" class="top_tdbgall">
table>
网页左侧表格中调用的CSS定义：
为了兼容以前的模板代码，防止过大工作量的改动。整体网页宽度为993时要计算与测试其他版区定义的宽度。
四、CSS定义的分类与注释
为了方便其他设计者或用户理解定义的CSS的作用、用途与范围，默认的CSS提供了简要的注释。设计师在新定义了特殊用途的CSS样式后，也应及时添加相应的注释，以方便他人理解与再次运用。
1、注释的标准
CSS样式的注释以“/* ××× */”标注，前后加“/*”和“*/”开始和结束注释，在“*”和内容相结处空半个空格（注意：“*”和“/”不能加空格）。
注释按频道使用CSS分类、注释，如：“/* --留言频道css定义开始-- */”、“/* --留言频道css定义结束-- */”。
2、注释的位置
将各模板都有机会使用的CSS定义进行注释。如：
3、按位置使用CSS分类标注
在“* ×××*/”注释中，内置三种标识：
常用CSS样式属性|CSS 样式表 【长度单位】 【颜色表示】 CSS可用颜色表示方式 表示方式表示方式说明范例 #rrggbb 可以用Windows色彩选择工具找到color:#feefc7 rgb( #,#,#) 用数字来表示红色蓝色以及绿色的混合色 彩选择工具找...也可以用Windows color:rgb(135,255,1 24) rgb(%,%,%) 用百分比来代表红色蓝色以及绿色的强度来混合颜色color:rgb(70%,35%,4 1%) 颜色名称用颜色的名称来指定颜色color:brown
【属性可用值】 CSS 可用属性值 名称 说明 可能值 范例 visibility 显示或是隐藏 inherit （ 父组件决定） hidden （隐藏） visible （ 显示） visibili ty:hidde n width 宽度 auto （自动决定） 数字 width:13 5 height 高度 auto （自动决定） 数字 height:1 00 z-index Z 轴高度（立体，是否在 另一个组件之上） auto （自动决定） 数字 z-index: 135 position 定位方式 absolute （绝对寻址-依窗口坐标，原点为父窗口左上角 ） relative （相对定位-以一般网页排列［后再根据坐标定位， 原点为定位后的位置） static （静态定位-以一般网页排列） position :absolut e top （对象的position 属 性须为absolute 或 relative ） 对象的Y 坐标（原点根 据postion 属性有所不 同） 数字 left （对象的 position 属性须为absolute 或 relative ） 对象的X 坐标（原点根 据postion 属性有所不 同） 数字
为了更好的符合seo规范，请参考css样式定义规范 CSS规范 搜索引擎优化(seo)有很多工作要做，其中对代码的优化是一个很关键的步骤。为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则： 页头:header 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:menu 子菜单:subMenu 搜索:search 滚动:scroll 页面主体:main 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 友情链接:friendLink 页脚:footer 加入:joinus 指南:guild 服务:service 热点:hot 新闻:news 下载:download 注册:regsiter 状态:status 按钮:btn 投票:vote 合作伙伴:partner 版权:copyRight 1.CSSID的命名 外套:wrap 主导航:mainNav 子导航:subnav 页脚:footer 整个页面:content 页眉:header
页脚:footer 商标:label 标题:title 主导航:mainNav(globalNav) 顶导航:topnav 边导航:sidebar 左导航:leftsideBar 右导航:rightsideBar 旗志:logo 标语:banner 菜单内容1:menu1Content 菜单容量:menuContainer 子菜单:submenu 边导航图标:sidebarIcon 注释:note 面包屑:breadCrumb(即页面所处位置导航提示) 容器:container 内容:content 搜索:search 登陆:login 功能区:shop(如购物车，收银台) 当前的current 2.样式文件命名 主要的:master.css 布局版面:layout.css 专栏:columns.css 文字:font.css 打印样式:print.css 主题:themes.css
css样式大全(整理版） 字体属性：(font) 大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高{line-height: normal;}(正常) 单位：PX、PD、EM 粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体{font-variant: small-caps;}(小型大写字母) normal;(正常) 大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体：(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性：(background) 色彩{background-color: #FFFFFF;} 图片{background-image: url();} 重复{background-repeat: no-repeat;} 滚动{background-attachment: fixed;}(固定) scroll;(滚动) 位置{background-position: left;}(水平) top(垂直); 简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/ 区块属性：(Block) /*这个属性第一次认识，要多多研究*/ 字间距{letter-spacing: normal;} 数值/*这个属性似乎有用，多实践下*/ 对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进{text-indent: 数值px;} 垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值
一．文件命名规范[b]样式文件命名[/b] [quote]主要的master.css 布局，版面layout.css 专栏columns.css 文字font.css 打印样式print.css 主题themes.css [/quote] [b]CSS ID 的命名[/b] [quote]页头：header 登录条：loginbar 标志：logo 侧栏：sidebar 广告：banner 导航：nav 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 滚动：scroll 页面主体：main 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 热点：hot 新闻：news 下载：download 注册：regsiter 状态：status 按钮：btn 投票：vote 合作伙伴：partner 友情链接：friendlink 页脚：footer 版权：copyright 外套：wrap
主导航：mainnav 子导航：subnav 页脚：footer 整个页面：content 页眉：header 页脚：footer 商标：label 标题：title 主导航：mainbav（globalnav） 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 旗志：logo 标语：banner 菜单内容1：menu1content 菜单容量：menucontainer 子菜单：submenu 边导航图标：sidebarIcon 注释：note 面包屑：breadcrumb(即页面所处位置导航提示）容器：container 内容：content 搜索：search 登陆：Login 功能区：shop(如购物车，收银台) 当前的current[/quote] [b]网站常用中英文对照表[/b] [quote]网站导航Site Map 公司简介Profile or Company Profile or Company 公司设备Equipment Equipment 公司荣誉Glories Glories 企业文化Culture Culture 产品展示Product Product 资质认证Quality Certification 企业规模Scale Scale 营销网络Sales Network 组织机构organization organization 合作加盟Join In Cooperation 技术力量Technology Technology 经理致辞Manager`s oration 发展历程Development History 工程案例Engineering Projects 业务范围Business Scope
一、选择题 1．CSS是（ C ）的缩写。 A．C olorful S tyle S heets B．C omputer S tyle S heets C．C ascading S tyle S heets D．C reative S tyle S heets 2．引用外部样式表的格式是（ B ）。 A． 3）外部样式：将内联样式的内容存放在一个.css文件中进行调用。 2．CSS编辑器 可以使用记事本或Dreamweaver进行定义。CSS定义规则，包括: 1）针对标记选择符定义。如 2）针对Html标签中一个id选择符定义。如id=”title” 3）针对Html标签中class选择符定义。如class=”title”，页面可以有多个该类。 另外，还有伪元素和伪类，标记语言中没有一种机制可以访问某个元素的首个字符或首行内容，而CSS可以创建这种虚拟元素访问或控制其样式。如： ：first-line为伪元素，某元素首行的样式；：first-letter为伪元素，某元素的首个字
一、选择题 CSS 是（ C ）的缩写。 Colorful Style Sheets Compu ter Style Sheets Cascadi ng Style Sheets Creative Style Sheets 元素中定义样式表的属性名是（ style class 2. B ）。 A . B . C . 引用外部样式表的格式是（ …… 标签对中，被输入的css文件中的样式规则定义语句就成了标签对中的语句。 … * *最好加注释标记于样式表前后。 3、导入CSS样式表 * *比外部链接优先，总是读取。 4、行内CSS样式 <…style=”…”> *Head部分最好加 5、脚本引用 CSS属性名称删掉连字符，并将其后第一个字母大写，例如font-family fontFamily 以上可混合使用。 6、SPAN与DIV标记 SPAN无结构意义，纯粹为样式服务 DIV是块元素，会引入行分隔。 7、可以使用Style属性的HTML选择器