灵活设置表单控件样式

来源:lsy 发布时间:2014-05-26 18:27:34 点击数:

 

  工作表单在添加控件的时候可以灵活定义每个控件的显示样式,设计出更美观的表单。
  表单编辑器里控件样式有两种,包括宏控件的内置样式和单行输入框、计算控件等显示样式。

78OA办公系统

 

78OA办公系统
 

下面介绍一下常用的一些样式:
一.字体样式  
  字体大小: {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-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
  color : #999999; font-family :
  宋体,sans-serif;
  font-size : 9pt;
  font-style:itelic;
  font-variant:small-caps;
  letter-spacing : 1pt;
  line-height : 200%;
  font-weight:bold;
  vertical-align:sub;
  vertical-align:super;
  text-decoration:line-through;
  text-decoration: overline;
  text-decoration:underline;
  text-decoration:none;
  text-transform : capitalize;
  text-transform : uppercase;
  text-transform : lowercase;
  text-align:right;
  text-align:left;
  text-align:center;
  text-align:justify;
  vertical-align属性 vertical-align:top;
  vertical-align:bottom;
  vertical-align:middle;
  vertical-align:text-top;
  vertical-align:text-bottom;

 

二.背景样式
  背景属性:(background)
  色彩 {background-color: #FFFFFF;}
  图片 {background-image: url();}
  重复 {background-repeat: no-repeat;}
  滚动 {background-attachment: fixed;}(固定) scroll;(滚动)
  位置 {background-position: left;}(水平) top(垂直);

  background-color:#F5E2EC;
  background:transparent;
  background-image : url(/image/bg.gif);
  background-attachment : fixed;
  background-repeat : repeat;
  background-repeat : no-repeat;
  background-repeat : repeat-x;
  background-repeat : repeat-y;
  指定背景位置 background-position : 90% 90%;
  background-position : top;
  background-position : buttom;
  background-position : left;
  background-position : right;
  background-position : center;

 

三.边框样式
  border-top : 1px solid #6699cc;
  border-bottom : 1px solid #6699cc;
  border-left : 1px solid #6699cc;
  border-right : 1px solid #6699cc;

 

四.边界样式
  margin-top:10px;
  margin-right:10px;
  margin-bottom:10px;
  margin-left:10px; 

 

五.框架样式
  1.边界留白 {margin:margin-top margin-right margin-bottom margin-left}
  2.补白{padding:padding-top padding-right padding-bottom padding-left}
  3.边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}   宽度值: thin|medium|thick|数值
  4.边框颜色 {border-color:数值 数值数值数值}  数值:分别代表top、right、bottom、left颜色值
  5.边框 {border:border-width border-style color}   
  上边框 {border-top:border-top-width border-style color}   
  右边框 {border-right:border-right-width border-style color}   
  下边框 {border-bottom:border-bottom-width border-style color}   
  左边框 {border-left:border-left-width border-style color}
  6.宽度 {width:长度|百分比| auto}
  7.高度 {height:数值|auto}