7.2　颜色样式

要设计tile的颜色样式，需要考虑的内容很多，有背景颜色、轮廓颜色，以及以后内部要放置的文本颜色，我们要为此设置一套规则。初步建议如下：

  1. .tile-alert {...}
  2. .tile-info {...}

但是，正当想实现这些样式的时候，发现这样定义几个风格，不足以实现Win8上那些所有的酷炫效果。所以应该再设计一套更灵活的风格，以便能够让开发人员自由选择背景颜色、轮廓颜色，以及文本颜色。

由于Win8本身就提供了很多安全颜色，所以我们可以直接通过在这些颜色名称前面加上一个前缀来实现相应的效果。同时，为了不局限于只在tile上使用，我们去除了tile前面的限制。示例如下：

  1. /*背景色样式*/
  2. .bg-red { background-color: #e51400 !important;}
  3. .bg-green { background-color: #60a917 !important;}
  4. .bg-darkBlue { background-color: #16499a !important;}
  5. /*其他省略*/

同样的道理，也可以定义轮廓颜色（outline）、文本颜色（foreground），以及有可能用到的边框颜色（border）。示例如下：

  1. /*内部文本样式*/
  2. .fg-red { color: #e51400 !important;}
  3. .fg-green { color: #60a917 !important;}
  4. .fg-darkBlue { color: #16499a !important;}
  5.  
  6. /*轮廓样式*/
  7. .ol-red { outline-color: #e51400 !important;}
  8. .ol-green { outline-color: #60a917 !important;}
  9. .ol-darkBlue { outline-color: #16499a !important;}
  10.  
  11. /*边框颜色样式*/
  12. .bd-red { border-color: #e51400 !important;}
  13. .bd-green { border-color: #60a917 !important;}
  14. .bd-darkBlue { border-color: #16499a !important;}

使用上述规则，可以将所有Win8的安全颜色都定义成相应的样式，如表7-1所示是Win8支持的安全颜色。

7.2　颜色样式 - 图1

定义完上述样式，就可以通过组合制作出不同风格的方块了。比如，定义如下示例：

  1. <div class="tile bg-red"></div>
  2. <div class="tile bg-green"></div>
  3. <div class="tile ol-orange"></div>
  4. <div class="tile bg-yellow"></div>

定义4个tile，4个不同的颜色，然后给第三个tile也定义了一个橙色的轮廓，效果如图7-2所示。看起来是不是好看很多？

7.2　颜色样式 - 图2 图7-2　不同颜色的磁贴效果