移动办公开发平台-MBuilder开发指南

MES移动应用快速开发平台MBuilder开发指南
1简介 (2)
1.1MCSS与MML的区别 (3)
1.2采用MCSS的哪些好处 (3)
1.3当同一个MML标签被不止一个样式定义时，会使用哪个样式呢 (3)
1.4工作原理............................................................................................. 错误！未定义书签。

1.5用内联方式定义 (4)
1.6用外部样式表定义 (4)
2基础语法................................................................................................. 错误！未定义书签。

2.1由选择器、属性、值构成 (4)
2.2值的不同写法 (5)
2.3多重声明 (5)
2.4空格和大小写 (5)
3高级语法 (6)
3.1选择器的分组 (6)
3.2选择器的嵌套 (6)
3.3继承 (6)
4选择器 (6)
4.1标记选择器 (6)
4.2类选择器 (7)
4.3id选择器 (8)
4.4伪标记选择器 (8)
5属性 (9)
5.1字体 (9)
5.2边框 (9)
5.3背景 (11)
5.4布局 (12)
5.5外边距 (14)
5.6内边距 (14)
5.7间距 (14)
5.8最小尺寸 (15)
5.9对齐 (15)
5.10动态转变 (15)
1简介
MCSS的全称是MES Cascading Style Sheets(MES样式表)的缩写。

MCSS广州市技高软件科技有限公司基于CSS而研发的一种手机样式表语言，可解理为CSS的子集。

用于为MML文档定义布局。

例如,CSS汲及字体、颜色、内边距、外边距、高度、宽度、背景图色、背景颜色等方面。

1.1MCSS与MML的区别
MML用于结构化手机页面内容;MCSS用于格式化手机页面的内容；与HTML与CSS 的关系一样。

也可能简单的理解为MML提供手机页面的排版,MCSS用于手机页面的美化。

1.2采用MCSS的哪些好处
●通过单个样式表控制整个移动应用项目的风格
●更精确的布局控制
●一个移动应用项目可在多个样式风格之间切换
●实现业务与展现的分离
1.3当同一个MML标签被不止一个样式定义时，会使用哪个样式呢
一般而言，所有的样式会根据下面的规则执行，优先级别由大至小排列,３拥有最高的优先权。

1.手机客户端缺省样式设置
2.外部样式表(style.css文件)
3.内联样式(位由MML标签里面)
1.4设置手机模拟器
通过这一章，你将学习如何制作自已的第一个样式表。

你将了解基本的MCSS模型,以及在MML文档里使用MCSS所必需的代码。

比方说，我们要定义以下MML页面的样式
要用红色作为手机按钮的背景色，我们有二种样式定义方式：
1.5用内联方式定义
1.6用外部样式表定义
只需要在style.css样式文件里添加以下代码即可
button是指选择器，表明括号中的属性设置将应用于哪些MML标签元素，这里对应MML的button元素。

bg-color:是指样式属性，表示指定MML元素的背景色。

red:是指样式属性的值,这里是指将背景色设为红色。

2集成MServer
2.1由选择器、属性、值构成
选择器（selector）通常是你希望定义的MML元素或标签，属性(property)是你希望改变
的属性，并且每个属性都有一个值(value)。

属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明
上面这行代码的作用是将body元素内的文字颜色定义为蓝色。

在上述例子中，body是选择器，而包括在花括号内的部分是声明。

声明依次由俩部分构成：属性和值,font-color 为属性，bule为值。

2.2值的不同写法
除了英文单词，我们还可以使用十六进制的颜色值
以上二种样式定义效果是一样的。

2.3多重声明
如果要定义不止一个声明，则需要用分号将每个声明分开。

不过我们建议你每行只描述一个属性，这样可以增强样式定义的可读性，就像这样
2.4空格和大小写
大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。

多重声明和空格的使用使得样式表更容易被编辑。

MCSS对空格、大小写是不敏感的。

3高级语法
3.1选择器的分组
你可以对选择器进行分组,这样，被分组的选择器就可以分享相同的声明。

用逗号将需要分组的选择器分开。

在下面的例子中，我们对所有的标题元素进行了分组。

3.2选择器的嵌套
通过依据元素在其位置的上下文关系来定义样式，比如说你希望head元素里的label 标记的字体颜色为红色，那么你可以这样定义
3.3继承
MCSS的子元素从元素继承属性,如果子元素定义了相同的属性，则会复盖父元素所定属的。

根据以上定义，页面里的所有字体颜色将会是白色。

4选择器
4.1标记选择器
每一种MML标签的名称都可以作为相应的标记选择器的名称,如
label,body,container,button等等。

以下定义了一个label标签的背景色为红色的样式,采用标记选择器方式来定义
配置以下MML的label元素
4.2类选择器
类选择器的的命名规则是：小数点+名称，名称可以由用户自定义,MML元素采用class 属性来匹配类的名称。

以下定义了一个类名称为myclass的样式,采用类选择器方式来定义
配置以下MML元素中class属性为”myclass”的元素
4.3id选择器
id选择器的的命名规则是：#+名称，名称可以由用户自定义,MML元素采用id属性来匹配类的名称。

配置以下MML元素中id属性为”myid”的元素
4.4伪标记选择器
伪标记选择器是用来定义不同标签的状态或动作发生变化时，相应的样式风格也产生变化。

伪标记选择器的命名规则是：标记名称+“：”+伪标记。

MCSS一共支持以下四种伪标记：
●hover,用于可聚焦的标签，实现当此控制被聚焦时的样式风格。

●checked,用于radio、checkbox二种标签,实现当控制被选中时的样式风格。

●disabled,用于可聚焦的标签，实现当控制被设为不可用时的样式风格。

●load,用于img标签，实现当图片开始加载时，但尚未加载完时的样式风格。

●error,用于img标签,当图片加载失败时的样式风格。

当链接被选中时,字体为红色
当图片在加载时，显示指定的背景图片
5属性
5.1字体
●font-color
●font-style
是指字体风格，可选值为，bold(粗字)、italic (斜体)、underlined(下划线)
●font-size
5.2边框
●border
定义边框大小,语法规则是：border: top right bottom left
表示边框的top=7像素
边框的right=8像素
边框bottom=6像素
边框left=7像素
●border-image
定义边框图片，border-image其实只负责按指定的参数切成top right bottom left四块图片,必须与border属性一起使用,只有border属性的参数值不为零时，才能显示出边的图片。

语法规则是：border-image:url(图片路径) top right bottom left
上面的切割效果如下图所示
表示从a.gif中切割8张图片出来用做边框
●border-align
与上图所示的被切割8张图片对应,并设置各自的对齐方式，语法规则是：border-align:top top-right right right-bottom bottom left-bottom left top-left
可选值：top-left、top、top-right、left、center、right、bottom-left、bottom、bottom-right、none
●border-stroke
表示是虚线还是实线可选值dotted(虚线)、solid 虚线的时候必须设置,
border:1 1 1 1才能看见效果。

语法规则是：border-stroke:solid。

●border-color
定义边框颜色, 语法规则是：border-color:颜色。

5.3背景
●background-color
定义背景颜色,语法规则是：background-color: 颜色值
●background–image
定义背景图片，语法规则是：background-image:url(图片路径,x,y,width,height)
表示切取图片a.gif,，切割范围是从x坐标=1 y坐标=1开始，宽度=10，高度=10 部分的图片作为背景图
●background –align
定义背景对齐方式，语法规则是：background-align:对齐;
可选值：top、left、center、right、bottom、none
●background –repeat
表示背景重复渲染如background –repeat:0 0 表示repeat-x=0 repeat-y=0
repeat-x 表示水平重复多少次如果为0 则由系统自动计算
repeat-y 表示垂直重复多少次如果为0 则不重复
这个属性必须和background –image一起使用
5.4布局
layout
用于对MML页面的控件(标签)进行布局,布局你可以理解为一种排版算法，MCSS 支持以下五种布局：
layout-data
作用于布局控件内的子控件，定义子控件位置，只有borderlayout与staticlayout二种布局支持layout-data。

如下：
5.5外边距
margin表示定义外边距，语法规则：margin: 上右下左
表示外上边距等于10像素
外右边距等于5像素
外下边距等于10像素
外左边距等于5像素
5.6内边距
padding表示定义内边距，语法规则：padding:上右下左
表示内上边距等于10像素
内右边距等于5像素
内下边距等于10像素
内左边距等于5像素
5.7间距
gap表示定义两个控件之间的水平和垂直间距,语法规则：gap:水平垂直
表示label的水平间距是4像素
Label的垂直间距是5像素
5.8最小尺寸
min-size表示定义控件尺寸的最小值,语法规则:min-size: 宽度高度
表示label的最小宽度是10像素
表示label的最小高度是20像素
5.9对齐
表示label是居中对齐
可选值有top-left、top、top-right、left、center、right、bottom-left、bottom、bottom-right、fill、fill-top、fill-left、fill-center、fill-right、fill-bottom
5.10动态转变
transition表示定义手机窗体加载时显示的方式,注意：transition只能针对mml标签生效。

目前支持以下二种转变类型
●slide
表示手机窗体加载时，页面可以实现从不同的方向飞入的效果
语法规则：transition:slide(方向)
表示手机加载页面时，页面从左飞入
●fade
表示手机窗体加载时，页面可以实现渐隐渐现的效果
语法规则：transition:fade(毫秒数)
表示手机加载页面时，页面渐隐渐现的时间为2移即2000毫秒。