stylesheet.html
来自「维信SDK文档。源码要求为至少5个C或Java源码」· HTML 代码 · 共 658 行 · 第 1/2 页
HTML
658 行
<html><style><!-- .outer { border-style: solid; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-color: #404040; } .inner { border-style: solid; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-color: #404040; } .cell { padding: 2px 2px 2px 2px; } code { color: #005000; font-weight: 600; } pre { color: #005000; font-weight: 600; } --></style><body> <h2>Styles</h2> <p> <code><a href="Style.html">Styles</a></code> are used to decorate the area surrounding <code><a href="Component.html">Component</a></code> and to customize the contents of component. Each style may have optional <b>focused</b> variant that is used automatically when Component flagged as <code><a href="API.html#FOCUSABLE">FOCUSABLE</a></code> is focused. </p> <p>It is important to ensure that the total area consumed by margin, border and padding are equal in normal style and focused variant. Within the consumed area the dimensions of margin, border and padding may change as long as the total areas remains equal. Graphical glithes may occur if this constraint is violated. </p> <p> Diagram below illustrates the <b>marginal</b>, <b>border</b> and <b>padding</b>. Top, right, bottom and left dimensions are individually adjustable. It is not required to have any of them, and by default there is no margin, border and padding for style. Style may also specify <b>background</b> which is used to fill the padding and component area. </p> <p> Style can also carry up to four <b>fonts</b>, <b>colors</b>, <b>images</b> and <b>arguments</b>. They are used to customize the contents of components. </p> <table cellspacing=0 cellpadding=0 border=0 class=outer> <tr> <td class=cell bgcolor=#d0d0d0 align=center> </td> <td class=cell bgcolor=#d0d0d0 align=center> margin-top </td> <td class=cell bgcolor=#d0d0d0 align=center> </td> </tr> <tr> <td class=cell bgcolor=#d0d0d0 align=center> margin-<br>left </td> <td class=cell> <table cellspacing=0 cellpadding=0 border=0 class=outer> <tr> <td class=cell bgcolor=#c0c0c0 align=center> </td> <td class=cell bgcolor=#c0c0c0 align=center> border-top </td> <td class=cell bgcolor=#c0c0c0 align=center> </td> </tr> <tr> <td class=cell bgcolor=#c0c0c0 align=center> border-<br>left </td> <td class=cell> <table cellspacing=0 cellpadding=0 border=0 class=outer> <tr> <td class=cell bgcolor=#b0b0b0 align=center> </td> <td class=cell bgcolor=#b0b0b0 align=center> padding-top </td> <td class=cell bgcolor=#b0b0b0 align=center> </td> </tr> <tr> <td class=cell bgcolor=#b0b0b0 align=center> padding-<br>left </td> <td class=inner width=250 height=200 align=center valign=center bgcolor=#a0a0a0> Component area </td> <td class=cell bgcolor=#b0b0b0 align=center> padding-<br>right </td> </tr> <tr> <td class=cell bgcolor=#b0b0b0 align=center> </td> <td class=cell bgcolor=#b0b0b0 align=center> padding-bottom </td> <td class=cell bgcolor=#b0b0b0 align=center> </td> </tr> </table> </td> <td class=cell bgcolor=#c0c0c0 align=center> border-<br>right </td> </tr> <tr> <td class=cell bgcolor=#c0c0c0 align=center> </td> <td class=cell bgcolor=#c0c0c0 align=center> border-bottom </td> <td class=cell bgcolor=#c0c0c0 align=center> </td> </tr> </table> </td> <td class=cell bgcolor=#d0d0d0 align=center> margin-<br>right </td> </tr> <tr> <td class=cell bgcolor=#d0d0d0 align=center> </td> <td class=cell bgcolor=#d0d0d0 align=center> margin-bottom </td> <td class=cell bgcolor=#d0d0d0 align=center> </td> </tr> </table> <h4>Format</h4> <p> Styles are written with CSS-like notation. If name of style contains reserved word (e.g. <code>background</code>) it can be escaped with dot. </p> <pre> menu { width: 100%; align: left bottom; background: solid #163458; border: 7 5 0 5; border-type: image "/menu.png"; padding: 0 2 5 2; } menu.item { padding: 2 10 2 10; font: proportional medium bold; color: white; image: "/menu2.png"; label-icon-orientation: right; <i>// Focused variant inherits all // the properties </i> focused { background: grid9 "/menuitem.png" 3 3 3 3; } } .background { background: solid blue; } </pre> <h4>Dimension</h4> <p>Dimension are used to specify padding, border, margin and some Component specific dimesions. Following formats are available: <ul> <li><code>23</code> - absolute pixels <li><code>23px</code> - absolute pixels <li><code>23sp</code> - scaled pixels, adjusted to 50%, 75% or 100% of value according to available screen size <li><code>23%</code> - percents, only available on certain situations </ul> </p> <h4>Colors</h4> <p>Following color formats are supported: <ul> <li><code>#4080a0</code> - HTML hexadecimal color <li><code>LightSkyBlue</code> - HTML color names (See <a href="http://en.wikipedia.org/wiki/Web_colors">Wikipedia</a>) <li><code>rgb(40, 80, #A0)</code> - RGB tuple </ul> </p> <h4>Images</h4> <p>Images reference the bitmap resources specified on <code>widget.xml</code> file. <ul> <li><code>"hello.png"</code> - Reference to Widget's hello.png <li><code>"/menu.png"</code> - Reference to image on WidSets client, these can be used but they may change without warning. </ul> </p> <h4>Alignment</h4> <p>Alignment may be specified on certain locations. <ul> <li>Horizontal: <code>left</code>, <code>hcenter</code> or <code>right</code> <li>Vertical: <code>top</code>, <code>vcenter</code> or <code>bottom</code> </ul> </p> <h4>Font</h4> <p>Font is combination of face, size, and style: <ul> <li>Face: <code>monospace</code>, <code>proportional</code> or <code>system</code> <li>Size: <code>small</code>, <code>medium</code> or <code>large</code> <li>Style: <code>plain</code>, <code>bold</code>, <code>underlined</code> or <code>italic</code> </ul> </p> <h4>Width, height and alignment</h4> <p>Components can take the width and/or height specified on style provided that no code-level preferred width/height has been set. If width/height is specified zero it is considered unlocked and each Component will attempt to determine optiomal size. Relative (percentual) dimensions may be used. Alignment control is Component specific, see documentation of different components too see how it's treated. <ul> <li><code>width</code>: <i><dim></i><code>;</code></li> <li><code>height</code>: <i><dim></i><code>;</code></li> <li><code>align</code>: <i><align></i><code>;</code></li> </ul> </p> <h4>Marginal</h4> <ul> <li><code>margin</code>: <i><top-dim></i> <i><right-dim></i> <i><bottom-dim></i> <i><left-dim></i><code>;</code> </li> <li><code>margin-left</code>: <i><dim></i><code>;</code> </li> <li><code>margin-right</code>: <i><dim></i><code>;</code> </li> <li><code>margin-top</code>: <i><dim></i><code>;</code> </li> <li><code>margin-bottom</code>: <i><dim></i><code>;</code> </li> </ul> <h4>Border</h4> <ul> <li><code>border</code>: <i><top-dim></i> <i><right-dim></i> <i><bottom-dim></i> <i><left-dim></i><code>;</code> </li> <li><code>border-left</code>: <i><dim></i><code>;</code> </li> <li><code>border-right</code>: <i><dim></i><code>;</code> </li> <li><code>border-top</code>: <i><dim></i><code>;</code> </li> <li><code>border-bottom</code>: <i><dim></i><code>;</code> </li> </ul> <h4>Border type</h4> <blockquote> <dl> <dt><code>border-type: none;</code></dt> <dd> No border is drawn. </dd> ⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?