跟燕青一起学Windows8应用开发:用CSS文件妆点你的应用



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



         CSSCascading 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文件添加到HTMLhead区域。如图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操作系统








有关编译器优化的更完整信息,请参阅优化通知