在跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序一文中，我们已经用Visual Studio 2011 Beta建立了Study Metro App的项目。在运行后程序后，出现了一个非常单调的黑白文本界面，那么能否给它点缀一下呢？毕竟咱们的生活世界是色彩斑斓的:-)。本篇博客将介绍如何使用CSS文件来为HTML进行点缀。

         CSS是Cascading Style Sheets的缩写，对于其基本的用法，博友可以参考http://www.w3schools.com/css/，这里笔者重点于如何使用。CSS可以配置HTML的各个元素的不同属性，那么如何在Study Metro App添加CSS文件并配置元素属性呢？不妨看看笔者的操作步骤吧！

1.        
打开Study Metro App项目，在Solution Explorer中鼠标右键点击CSS文件夹，在弹出菜单中选择Add菜单，再选择New Item…子菜单，如图1所示。

图1

2.        
依次选择JavaScript菜单àStyle Sheet菜单，然后在Name中输入CSS文件名，最后点击Add按钮，如图2所示。

图2

3.        
双击Solution Explorer中的CSS文件夹，检查是否新增的my.css已经放入了Study Metro App项目中，如图3所示。

图3

4.        
打开default.html文件，将my.css文件添加到HTML的head区域。如图4所示。

图4

5.        
在body区域，将给元素p添加class名字为MyContent。虽然CSS可以制定全局的p属性，但是它会污染所有相关的p区域，对于不同的p元素属性个性化定制工作是不利的，所以建议大家为不同的HTML元素使用局部的CSS属性定制，如图5所示。

图5

6.        
打开my.css文件，为MyContent配置属性。Class名字在CSS文件中将以.开头，在此列中为.MyContent，并依次将背景色设置为红色，文字为中心对齐（默认为左边对齐），文本颜色为白色，如图6所示。

图6

7.        
点击Local Machine按钮运行项目，如图7所示

图7

看到自己的心血了吗:-)? 还不错吧！

图8

博客例子虽然非常的简单，但是它完整的掩饰了如何在一个Metro Style的应用程序中添加CSS文件，并且通过CSS属性的配置来控制HTML的呈现方式，对初学者而言应该是非常有帮助的！

【参考】

1.        
跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序

2.        
跟燕青一起学Windows8应用开发：安装Visual Studio 2011

3.        
跟燕青一起学Windows8应用开发：安装Windows8操作系统