WebMatrix进阶教程(3)：如何实现某种样式-css教程-PHP中文网

首页

web前端

css教程

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

黄舟

Dec 26, 2016 pm 04:25 PM

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

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

<!DOCTYPE html>  
   
<html lang="en">  
    <head>  
        <meta charset="utf-8" />  
        <title>My Favorite Movies</title>  
    </head>  
    <body>  
    <h1>A list of my Favorite Movies</h1>  
       <ol>  
            <li>Its a wonderful life</li>  
            <li>Lord of the Rings</li>  
            <li>The Fourth World</li>  
            <li>The Lion King</li>  
       </ol>  
    </body>  
</html>

要做的第一件事是将包含电影的列表包装到它自己的dc6dce4a544fdca2df29d5ac0ea9906b中，如下所示

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
</head>  
<body>  
  <h1>A list of my Favorite Movies</h1>  
  <div id="movieslist">  
  <ul>  
    <li>Its a wonderful life</li>  
    <li>Lord of the Rings</li>  
    <li>The Fourth World</li>  
    <li>The Lion King</li>  
  </ul>  
</div>  
</body>  
</html>

现在可以看到，包含电影的c34106e0b4e09414b63b2ea253ff83d625edfb22a4f469ecb59f1190150159c6列表现在包含在dc6dce4a544fdca2df29d5ac0ea9906b标记中。如果现在查看该网页，会发现与之前没什么不同。这是因为dc6dce4a544fdca2df29d5ac0ea9906b标记是一个逻辑分隔线。它没有任何物理外观。

使用超链接

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

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

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

f047133524e5d3becb585ca1fc7a6fbfcontentbaa3ea5ae7414741617ff7b18b3fb09e

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

3a22334c00bfd66460b6915828460d7eClick Here5db79b134e9f6b82c0b36e0489ee08ed

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

所以，为了将所有包含电影的25edfb22a4f469ecb59f1190150159c6项转换为超链接，我们将电影的文本包装在3499910bf9dac5ae3c52d5ede7383485标记中，将HREF设置为#，类似于以下形式：

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
</head>  
<body>  
  <h1>A list of my Favorite Movies</h1>  
  <div id="movieslist">  
    <ol>  
      <li><a href="#">Its a wonderful life</a></li>  
      <li><a href="#">Lord of the Rings</a></li>  
      <li><a href="#">The Fourth World</a></li>  
      <li><a href="#">The Lion King</a></li>  
  </ol>  
  </div>  
</html>

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

添加页眉和页脚

将要做的下一件事是向网页添加页眉和页脚。您将使用Html5中提供的新1aa9e5d373740b65a0cc8f0a02150c53和c37f8231a37e88427e62669260f0074d标记来完成此任务。可以在w3cschools网站上了解HTML5的更多信息：http://w3schools.com/html5/default.asp

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
</head>  
<body>  
  <header>  
    <h1>A list of my Favorite Movies</h1>  
  </header>  
  <div id="movieslist">  
    <ol>  
      <li><a href="#">Its a wonderful life</a></li>  
      <li><a href="#">Lord of the Rings</a></li>  
      <li><a href="#">The Fourth World</a></li>  
      <li><a href="#">The Lion King</a></li>  
    </ol>  
  </div>  
  <footer>  
    This site was built using Microsoft WebMatrix.   
    <a href="http://web.ms/webmatrix">Download it now.</a>  
  </footer>  
</html>

可以看到，它们是非常简单的HTML代码。
对于页眉，我们将前面创建的4a249f0d628e2318394fd9b75b4636b1包装在1aa9e5d373740b65a0cc8f0a02150c53标记中，对于页脚，我们创建一些文本和一个超链接。

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

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

定义网页的外观

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

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

所以，举例来说，对于我们前面在网页上定义的4a249f0d628e2318394fd9b75b4636b1（其内容为“A list of my Favorite Movies”），您可以更改它的字体和颜色如下：

4f449a3f0adab4d35544e6b8d1eb7c9cA list of my Favorite Movies473f0a7621bec819994bb5020d29372a

可以看到，4a249f0d628e2318394fd9b75b4636b1标记的样式属性包含该样式的定义列表。上面的标记将颜色设为蓝色，将字体设置为 32，将字体系列设置为Verdana，并将文本装饰设置为下划线.

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

幸运的是，还有另一种方式，那就是在网页上使用样式表。样式表使用级联样式表概念来定义，其中元素上的样式集可以由子元素继承。举例来说，如果您在dc6dce4a544fdca2df29d5ac0ea9906b上设置了一个样式，并且dc6dce4a544fdca2df29d5ac0ea9906b具有子元素c34106e0b4e09414b63b2ea253ff83d6和25edfb22a4f469ecb59f1190150159c6，那么该样式也将应用于它们，除非开发人员改写了此样式。w3cschools是一个了解CSS的好地方：http://w3schools.com/css/default.asp。

我们看一下如何在4a249f0d628e2318394fd9b75b4636b1标记上定义样式，而无需在样式属性上使用很多内联代码。

不用将所有样式代码放在4a249f0d628e2318394fd9b75b4636b1标记本身内，我们只需要指定它的类属性，如下所示：

df52c756d4f8326b7768cdab256ec4d6A list of my Favorite Movies473f0a7621bec819994bb5020d29372a

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

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

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

此代码放在网页页眉中的c9ccee2e6ea535a969eb3f532ad9fe89标记内。您的网页标记应该类似于：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="utf-8" />  
<title>My Favorite Movies</title>  
<style type="text/css">  
.Title {  
font-size: xx-large;  
font-weight: normal;  
padding: 0px;  
margin: 0px;  
}  
</style>  
</head>  
<body>  
<header>  
<h1 class="Title">A list of my Favorite Movies</h1>  
</header>  
<div id="movieslist">  
<ol>  
<li><a href="#">It&#39;s a wonderful life</a></li>  
<li><a href="#">Lord of the Rings</a></li>  
<li><a href="#">The Fourth World</a></li>  
<li><a href="#">The Lion King</a></li>  
</ol>  
</div>  
<footer>  
This site was built using Microsoft WebMatrix.  
<a href="http://web.ms/webmatrix">Download it now.</a>  
</footer>  
</html>

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

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

当希望设置特定元素时，可以为该元素使用一个类（假设该类只有一个实例），或者可以使用一个id命名该元素，然后设置该id的类。如果看一下您的HTML，您将会注意到电影列表保存在一个id为“moviesList”的dc6dce4a544fdca2df29d5ac0ea9906b中。您可以通过在样式表定义中在“moviesList”之前添加 # 来设置它的样式，如下所示：

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

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

请记住，浏览器默认会将c34106e0b4e09414b63b2ea253ff83d6列表中的25edfb22a4f469ecb59f1190150159c6对象呈现为编号项。我们可以设置样式来删除编号项。因为这些对象位于我们称为“movieslist”的div的内部，我们可以轻松访问它们来更改其样式。

下面是语法：

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

该语法表明，对于#movieslist中的每个c34106e0b4e09414b63b2ea253ff83d6，将样式设置为不是列表（也即没有项目符号）、没有外边距、没有边框、没有内边距。

下面是设置后的结果：

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

每个列表项的文本保存在一个3499910bf9dac5ae3c52d5ede7383485标记中，所以我们可以使用以下语法，定义#movieslist中的每个25edfb22a4f469ecb59f1190150159c6标记内的每个3499910bf9dac5ae3c52d5ede7383485标记的外观：

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

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

以上就是WebMatrix进阶教程(3)：如何实现某种样式的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

光标的下一个CSS样式Apr 23, 2025 am 11:04 AM

具有CSS的自定义光标很棒，但是我们可以将JavaScript提升到一个新的水平。使用JavaScript，我们可以在光标状态之间过渡，将动态文本放置在光标中，应用复杂的动画并应用过滤器。

世界碰撞：使用样式查询的钥匙帧碰撞检测Apr 23, 2025 am 10:42 AM

互动CSS动画和元素相互启动的元素在2025年似乎更合理。虽然不需要在CSS中实施乒乓球，但CSS的灵活性和力量的增加，可以怀疑Lee＆Aver Lee＆Aver Lee有一天将是一场

使用CSS背景过滤器进行UI效果Apr 23, 2025 am 10:20 AM

有关利用CSS背景滤波器属性来样式用户界面的提示和技巧。您将学习如何在多个元素之间进行背景过滤器，并将它们与其他CSS图形效果集成在一起以创建精心设计的设计。

微笑吗？Apr 23, 2025 am 09:57 AM

好吧，事实证明，SVG的内置动画功能从未按计划进行弃用。当然，CSS和JavaScript具有承载负载的能力，但是很高兴知道Smil并没有像以前那样死在水中

'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

是的，让＃039;跳上文字包装：Safari Technology Preview In Pretty Landing！但是请注意，它与在铬浏览器中的工作方式不同。

CSS-tricks编年史XLIIIApr 23, 2025 am 09:35 AM

此CSS-tricks更新了，重点介绍了年鉴，最近的播客出现，新的CSS计数器指南以及增加了几位新作者，这些新作者贡献了有价值的内容。

tailwind的@Apply功能比听起来更好Apr 23, 2025 am 09:23 AM

在大多数情况下，人们展示了@Apply的@Apply功能，其中包括Tailwind的单个property实用程序之一（会改变单个CSS声明）。当以这种方式展示时，@Apply听起来似乎很有希望。如此明显

感觉就像我没有释放：走向理智的旅程Apr 23, 2025 am 09:19 AM

像白痴一样部署的部署归结为您部署的工具与降低复杂性与添加的复杂性之间的奖励之间的不匹配。

See all articles

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

SublimeText3 英文版

ZendStudio 13.5.1 Mac

MinGW - 适用于 Windows 的极简 GNU

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

Atom编辑器mac版下载

热门话题