样式
什么是样式
经过上面的学习，我们已经会布局并使用元素填充来完成页面了。但是元素外观是一成不变的，为了调整元素外观，HTML规范引入了样式的概念，专门用于调整元素的视觉效果。
HTML中样式是一组属性集合，用来控制元素的各种外观效果。很明显，样式属于给计算机读的部分，因此被编码在标签内，具体来说，放在style属性下——当然，这些您不需要关心，WIDE会帮助您处理的。
WIDE扩展了HTML中的样式定义，增加了更多的外观效果控制，因此，HTML样式在WIDE中只是一个子集。但是，WIDE编辑的代码最终需要在HTML浏览器中执行，因此，这些扩展的样式，最后依然会被编译为HTML样式以及HTML逻辑的组合。
在进一步了解样式之前，让我们先来看一个实际的例子。完成同样功能的按钮，可以有各种不同的外观，下面列出了几个不同外观的按钮。
外观分类
(1) 框模型： 把元素看作一个框，那么这个框的大小尺寸(width,height)、与其它框之间的距离(padding)，框与实际内容的留白(margin)就确定了这个框的实际内容。这是一个HTML外观分类，可以点击详细链接了解HTML帮助中的描述——只需建立概念，无需了解细节。
(2) 字体与颜色：字体与颜色是控制下图这部分外观显示的。字体与颜色没有给出链接，我相信这些概念你是清楚的。
(3) 背景：元素的背景可以是颜色，也可以是图片。这是一个HTML外观分类，可以点击详细链接了解HTML帮助中的描述——只需建立概念，无需了解细节。下图是上面的按钮中使用不同背景的说明。
(4) 浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。这是一个HTML外观分类，可以点击详细链接了解HTML帮助中的描述——只需建立概念，无需了解细节。
(5) css动画：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片等。这是一个HTML外观分类，可以点击详细链接了解HTML帮助中的描述——只需建立概念，无需了解细节。
(6) WIDE扩展了提示类别，用于在元素处于鼠标划过，触摸屏敲击等状态时，通过外观变化给用户一个友好的视觉提示。
(7) WIDE扩展了禁用类别，用于给用户一个明确的提示，当前元素不可用。
(8) WIDE扩展了进入类别，用于控制元素初次显示时，通过一些动画变化等效果吸引注意力，用于快速设定重要信息点的进入特效动画。
为了熟悉上面的分类，初学者应该保持一个好习惯。看到网页时，就思考一个问题，某个元素的外观是通过定义哪些剖面的属性来实现的？为了检查自己的思考是否正确，可以在Chrome浏览器下审查元素，右边列出了其外观属性的值。一开始保持观察，对于未来想拟合各种复杂效果就打下了坚实基础。
设置外观
(1) 单元素设置
控制元素外观，最直接简单的办法，就是选中一个元素，使用右键菜单中的样式命令，打开其样式对话框，设置其外观属性的值。如下图所示：
 |  |
虽然单个元素的设置十分简单直观，但是，实际使用中，会有两个问题：
- 一个元素的外观，想达到一个理想的效果，需要设置多个样式。
- 期望保持同样外观的元素，一个页面往往是有很多个，为每个元素设置样式，需要定位元素，而且每次增减元素都需要去设置。
这导致我们设置元素外观时，对很多元素挨个设置，并且每个元素需要设置很多样式属性。而且，真实工作中，最频繁遭遇的情况是迭代改进，每次更改样式就变成了一个巨大的工作，元素挨个设置，每个元素设置一批样式。如何来规避这个问题呢？HTML规范里使用“样式类”来解决问题1，使用选择器来解决问题2。让我们先来看下“样式类”如何解决问题1。
(2) 使用样式类设置
样式类，顾名思义，就是样式的类(集合)，我们可以把若干样式放在一起，构成一个集合，然后给这个集合命名，在元素中声明使用这个集合，就可以达成一次定义，批量使用的目标。HTML中使用class属性来支持这个功能。如下图所示：
上面的例子中，test样式类指明了要使用名称为test的一个样式类，这个样式类定义了一批样式，这些样式的具体内容在样式类定义文件中定义。其内容看起来如下所示：
.样式类名称1 {
font-family: Helvetica;
font-weight: bold;
font-variant: small-caps;
text-transform: uppercase;
text-decoration: line-through;
color: #38ab6c;
}
.样式类名称1 : hover {
font-family: Helvetica;
font-weight: bold;
font-variant: small-caps;
text-transform: uppercase;
text-decoration: line-through;
color: #38ab6c;
}
.test {
font-family: Helvetica;
font-weight: bold;
font-variant: small-caps;
text-transform: uppercase;
text-decoration: line-through;
color: #38ab6c;
}
上文的格式很直观，花括号({})中间的内容是这个样式类所定义的一批样式，使用分号(;)分割具体的样式定义。这里请注意，您并不需要记忆都有哪些具体的样式定义，我们会采用图形界面来创建和维护这些样式定义。因此，你只需要知道上文描述的格式定义即可，具体样式无需记忆。实际上，逻辑菜单里有一个“元素inline-style”(见下图)，其使用的语法与这里描述的内容部分完全一致，可以安全的将inline-style里的内容和样式类定义里的内容来回拷贝。
注意下上文的第二个样式定义，其通过hover追加限定了样式类名称1在鼠标划过(hover)状态下的外观。换言之，您可以为一个样式类定义若干组外观，在不同状态下自动启用不同的外观。同样的，您只需要知道添加状态限定的格式，冒号(:)后跟状态名，无需记忆都有哪些状态，我们通过图形编辑器来维护之。
作为一个好习惯，编辑时，按照元素的物理含义，赋予其一个样式类。您可以在产品任务表格中，发现产品经理预先定义的物理含义描述及对应的样式类名称，在发现某个元素具有某些物理含义时，顺手指定其样式类(拥有几个物理含义，就给几个样式类)，这样，我们未来调整此类元素的外观，将变得十分方便。即使您在元素中指定了不存在的样式类，也不会影响执行。
样式类文件的编辑，我们通常只需要人工维护其格式，内容则是我们利用现存的各种图形界面的样式编辑器来自动维护的。实际操作中，我们会首先赋予元素样式类，但是并不去定义它。在页面发布之后，在浏览器里，利用各种工具动态调整其样式外观，然后观察元素的样式类，把创建的内容加入到样式类定义文件中，发布刷新之后，继续在浏览器里调整样式外观。
① 主题提供了预置的样式类
使用主题是为了控制多个页面有相同的外观，也就是若干个页面有共同的样式，为了达成这个目标，主题同时使用这里描述的样式类以及下文将要描述的选择器。根据您创建页面的模板不同，在WIDE文档流布局界面里，工具栏最左下方有一个样式工具(如下图)，可以快速设置当前选中部分/当前字元素/当前段元素的样式类——并且根据您选择元素的不同，配合的样式类将会出现。使用样式工具可以十分方便的使用预置的样式类，来快速设置元素的样式——这比在样式菜单中逐个设置要快捷很多。
② 样式定义的优先级
我们现在已经知道可以在三个地方设置样式，分别是主题文件、页面级样式文件以及元素级样式定义。他们的优先级从低到高依次是： 主题级样式文件——>页面级样式文件——>元素单个设置样式。换言之，单个元素设置的样式会覆盖页面级样式文件中的定义，页面级样式文件中的定义又会覆盖主题级样式文件中的定义。
你看，使用外部文件控制外观属性是如此的重要。不特别指明，HTML中的样式特指使用外部文件来控制显示外观，而元素级的外观设置被称为“inline css”。
（3）使用选择器设置外观
使用样式类有两个动作，一是在样式类定义文件中定义样式，二是在元素中设置class属性来使用之。动作二有时候十分讨厌，正是我们上文描述的问题2的根源，有没有办法不指定元素的class属性就可以改变元素的外观呢？这涉及如何选择一批元素的问题，因此我们形象的称其为选择器——选择一批元素。如何选择呢？最基本的，我们可以使用元素的标签(p,div)来选择，实际上，主题就使用了基于元素标签的选择器，为不同的元素标签(例如p,div,h1...h6)定义了不同的样式，从而保持了一致的风格。随着深入学习，您自己也会尝试创建自己的主题——主题不外乎选择器+预制样式类而已。
虽然基于元素标签的选择器省事，但是其范围比较大。为了更精确的选择，我们需要把HTML看作一个可以重名的文件系统，使用类似文件系统glob语法的形式来选择，这个规范被称为Selector(语义类似XPATH，但是语法形式不同)。我们无需了解这些规范，WIDE里集成了一个名为selectorGadget的选择器生成工具，允许我们快速生成一个选择器，我们只需要在样式类定义文件中，把生成的“选择器”替换上文描述的“样式类名称”即可，直接发布，无需改动元素，指定元素的外观即可变动。但是，自动创建的选择器与页面位置可能相关，这引发一个问题，如果对文档内容做出修正(元素布局发生变化),有可能导致选择器选到错误的元素，从而引发外观错误。因此，这个方法不推荐使用，只在必要场合使用，并且使用时，需要改动数据（参考下文数据绑定篇章）来观察选择是否错误，如果错误，需要对选择器语法有一定了解才可以修正，因此，此部分的应用要求较高、请谨慎使用。
替换后结果如下：
