WebMatrix进阶教程(3)：如何实现某种样式

Csdn.net近期将发布微软全新Web开发工具WebMatrix的进阶教程，帮助开发人员人士认识这一号称微软史上最强的Web开发工具。继上次发布的如何安装和使用微软全新开发工具WebMatrix 和 教您如何使用WebMatrix创建第一个网页 后。本期将继续为您介绍接下来的教程。

导读：Microsoft WebMatrix是一个免费的工具，可用于创建、自定义和在Internet上发布网站。

WebMatrix使您能够轻松创建网站。您可以从一个开源应用 程序（比如WordPress、Joomla、 DotNetNuke或Orchard）开始，WebMatrix会为您处理下载、安装和配置这些应用程序的任务。或者您可以使用许多内置的模板自行编写 代码，这些模板有助于您迅速上手。无论您做何选择，WebMatrix都提供了您的网站运行所需的一切内容，包括Web服务器、数据库和框架。通过在您的 开发桌面使用与您将在Web主机上使用的相同堆栈，将网站上线的过程变得既轻松又顺利。

您可以从http://web.ms/webmatrix下载它。

现在您只需花几个小时便可学会使用WebMatrix、CSS、HTML、HTML5、ASP.NET、SQL、数据库等知识以及如何编写简单的Web应用程序。内容如下：

在第2部分，您看到了如何使用WebMatrix创建非常简单的网页，以及此页面如何在多种不同浏览器中运行。在这一部分中，您将了解如何更改网页的视觉样式，使用级联样式表(CSS)技术。

这里是您在网页上内置的简单电影列表：

使用级联样式表准备设置网页样式

在接下来的几步中，您将看到更多的HTML标记，它们可用于实现超链接、网页分区和脚本标记等功能，您还将了解如何使用级联样式表(CSS) 编辑此网页，设置它的外观。最后将使用布局获取此网页和网站上其他网页之间相同的内容，这样可以更轻松地编辑相同内容。

使用分隔线

在HTML中，可以使用

标记以逻辑方式将网页划分为几块。这在您在本文后面查看样式时尤其有用，您可以通过设置相应的div来指定网页某个部分的样式。

这里是第一部分中您的网页的HTML：

A list of my Favorite Movies                      It's a wonderful life              Lord of the Rings              The Fourth World              The Lion King

要做的第一件事是将包含电影的列表包装到它自己的

中，如下所示：

A list of my Favorite Movies            It's a wonderful life      Lord of the Rings      The Fourth World      The Lion King

现在可以看到，包含电影的

1. 列表现在包含在
   标记中。如果现在查看该网页，会发现与之前没什么不同。这是因为

   标记是一个逻辑分隔线。它没有任何物理外观。

   使用超链接

   您可能已经熟悉超链接–一个页面上链接到另一个页面的可单击区域。尽管这些区域称为超链接，但在HTML中它们最初称为定位标记(anchor)，因此只要您希望创建超链接，就可以使用标记。

   （或定位）标记使和之间的内容可以单击。当用户单击此内容时，浏览器将重定向到标记中使用href属性指示的一个HREF（超引用）。

   属性在标记本身上定义，而不是在标记内定义，类似于：

   content

   因此，要创建超链接，您可以使用这样的语法：

   Click Here

   href不必是一个像上面这样的网站，也可以是一个执行编程人员所使用的操作的JavaScript函数。一种特殊的href可在开发期间用作占位符，这样您可以测试超链接的样式是否有效。为此，使用“#”字符作为href。

   所以，为了将所有包含电影的

2. 项转换为超链接，我们将电影的文本包装在标记中，将HREF设置为#，类似于以下形式：

   A list of my Favorite Movies                It's a wonderful life        Lord of the Rings        The Fourth World        The Lion King

   如果运行网页，您将看到列表上的元素将使用熟悉的超链接样式，也就是所谓的蓝色下划线：

   添加页眉和页脚

   将要做的下一件事是向网页添加页眉和页脚。您将使用HTML5中提供的新

   和

   标记来完成此任务。可以在w3cschools网站上了解HTML5的更多信息：http://w3schools.com/html5/default.asp

   A list of my Favorite Movies                   It's a wonderful life        Lord of the Rings        The Fourth World        The Lion King                This site was built using Microsoft WebMatrix.      Download it now.

   可以看到，它们是非常简单的HTML代码。

   对于页眉，我们将前面创建的

   包装在

   标记中，对于页脚，我们创建一些文本和一个超链接。

   在浏览器中查看网页，它现在将类似于以下界面：

   除了页脚不同，它没有太多差异，但不用担心，这种情况很快就会改变！

   定义网页的外观

   在前面一节中，在介绍定位标记时您了解了属性，属性描述元素的行为。对于定位标记，您通过指定HREF属性定义了在单击时发生的行为。

   可以想象，您可以使用属性指定元素的外观，包括字体样式、字体大小、颜色、边框等等。

   所以，举例来说，对于我们前面在网页上定义的

   （其内容为“A list of my Favorite Movies”），您可以更改它的字体和颜色如下：

   A list of my Favorite Movies

   可以看到，

   标记的样式属性包含该样式的定义列表。上面的标记将颜色设置为蓝色，将字体设置为 32，将字体系列设置为Verdana，并将文本装饰设置为下划线，得到的结果如下所示：

   尽管这样能很好地生效，但它并不是设置网页样式的最好方式。想象一下，如果您必须通过这种方式设置每个元素的样式，将会是什么结果。您的网页上最终会有很多文本，减缓下载和浏览的速度。

   幸运的是，还有另一种方式，那就是在网页上使用样式表。样式表使用级联样式表概念来定义，其中元素上的样式集可以由子元素继承。举例来说，如果您 在

   上设置了一个样式，并且

   具有子元素

   和
   1. ，那么该样式也将应用于它 们，除非开发人员改写了此样式。w3cschools是一个了解CSS的好地方：http://w3schools.com/css/default.asp。

      我们看一下如何在

      标记上定义样式，而无需在样式属性上使用很多内联代码。

      不用将所有样式代码放在

      标记本身内，我们只需要指定它的类属性，如下所示：

      A list of my Favorite Movies

      现在标记有了一个类，我们可以告诉浏览器为拥有此类的所有内容使用一种特定样式。这使用CSS代码语法来完成，类似于：

      .Title { font-size: xx-large; font-weight: normal; padding: 0px; margin: 0px; }

      样式“语言”包括一组以分号分隔并包含在花括号（{..}）中的属性。如果要将此样式应用到一个类，该类会使用“点”语法进行定义，也就是在类名称前添加一个点。

      此代码放在网页页眉中的

        

          A list of my Favorite Movies

     

     

       

         

   1. It's a wonderful life

         

   2. Lord of the Rings

         

   3. The Fourth World

         

   4. The Lion King

       

     

  

    This site was built using Microsoft WebMatrix. 

    Download it now.

  

当运行它时，样式将生效，您将看到以下界面：

请记住

拥有一个“Title”类，所以通过设置.Title，您可以设置拥有相同类的所有元素的样式。

当希望设置特定元素时，可以为该元素使用一个类（假设该类只有一个实例），或者可以使用一个id命名该元素，然后设置该id的类。如果看一下您的 HTML，您将会注意到电影列表保存在一个id为“moviesList”的

中。您可以通过在样式表定义中在 “moviesList”之前添加 # 来设置它的样式，如下所示：

#movieslist{   font-family: Geneva, Tahoma, sans-serif;}

这样就定义了

的样式，并且因为样式表可以级联（只需为它们提供该名称），此div中的任何元素都将应用此样式。所以，即使我没有专门设置包含这些文本的

元素的样式，仍然会应用该样式：

请记住，浏览器默认会将

列表中的
1. 对象呈现为编号项。我们可以设置样式来删除编号项。因为这些对象位于我们称为“movieslist”的div的内部，我们可以轻松访问它们来更改其样式。

   下面是语法：

   #movieslist ol {   list-style: none;   margin: 0;   padding: 0;   border: none; }

   该语法表明，对于#movieslist中的每个

   ，将样式设置为不是列表（也即没有项目符号）、没有外边距、没有边框、没有内边距。

   下面是设置后的结果：

   可以看到，现在没有编号。

   每个列表项的文本保存在一个标记中，所以我们可以使用以下语法，定义#movieslist中的每个

   1. 标记内的每个标记的外观：

      #movieslist li a {   font-size: large;   color: #000000;   display: block;   padding: 5px; }

      这里的设置不言自明，我们现在看一下运行网页时的外观。

      更多详情请点击：如何使用WebMatrix实现某种样式