Heim > Artikel > Web-Frontend > WebMatrix Advanced Tutorial (3): So implementieren Sie einen bestimmten Stil

WebMatrix Advanced Tutorial (3): So implementieren Sie einen bestimmten Stil

黄舟Original: 2016-12-26 16:25:271257Durchsuche

Csdn.NET wird in Kürze ein erweitertes Tutorial zu Microsofts neuem Webentwicklungstool WebMatrix veröffentlichen, um Entwicklern das Verständnis zu erleichtern, das als das leistungsstärkste Webentwicklungstool in der Geschichte von Microsoft gilt. Im Anschluss an die letzte Veröffentlichung erfahren Sie, wie Sie das neue Entwicklungstool WebMatrix von Microsoft installieren und verwenden und wie Sie mit WebMatrix Ihre erste Webseite erstellen. In dieser Ausgabe werden Ihnen weiterhin die folgenden Tutorials vorgestellt.

Einführung: Microsoft WebMatrix ist ein kostenloses Tool, mit dem Websites im Internet erstellt, angepasst und veröffentlicht werden können.

Mit WebMatrix können Sie ganz einfach eine Website erstellen. Sie können mit einer Open-Source-Anwendung (wie WordPress, Joomla, DotNetNuke oder Orchard) beginnen und WebMatrix übernimmt für Sie den Download, die Installation und die Konfiguration der Anwendung. Oder Sie können den Code selbst schreiben und dabei die vielen integrierten Vorlagen verwenden, die Ihnen den schnellen Einstieg erleichtern. Was auch immer Sie wählen, WebMatrix bietet alles, was Ihre Website zum Betrieb benötigt, einschließlich Webserver, Datenbanken und Frameworks. Durch die Verwendung desselben Stacks auf Ihrem Entwicklungsdesktop, den Sie auch auf Ihrem Webhost verwenden würden, ist die Online-Schaltung Ihrer Website einfach und reibungslos.

Sie können es von http://web.ms/webmatrix herunterladen.

Jetzt können Sie in nur wenigen Stunden lernen, WebMatrix, CSS, HTML, HTML5, ASP.Net, SQL, Datenbanken usw. zu verwenden und einfache Webanwendungen zu schreiben. Hier ist der Inhalt:

In Teil 2 haben Sie gesehen, wie Sie mit WebMatrix eine sehr einfache Webseite erstellen und wie diese Seite in verschiedenen Browsern ausgeführt wird. In diesem Abschnitt erfahren Sie, wie Sie den visuellen Stil einer Webseite mithilfe der Cascading Style Sheets (CSS)-Technologie ändern.
Hier ist eine einfache Liste von Filmen, die Sie in Ihre Webseite integrieren können:

WebMatrix Advanced Tutorial (3): So implementieren Sie einen bestimmten Stil

Bereiten Sie die Gestaltung Ihrer Webseite mithilfe von Cascading Style Sheets vor

In In den nächsten Tagen werden Sie weitere HTML-Tags sehen, die zum Implementieren von Funktionen wie Hyperlinks, Webseitenabschnitten und Skript-Tags verwendet werden können. Außerdem erfahren Sie, wie Sie Cascading Style Sheets (CSS) zum Bearbeiten dieses Webs verwenden Seite und legen Sie ihr Erscheinungsbild fest. Schließlich werden Layouts verwendet, um den gleichen Inhalt zwischen dieser Seite und anderen Seiten der Website zu erhalten und so die Bearbeitung desselben Inhalts zu erleichtern.

Trennzeichen verwenden

In HTML können Sie das

-Tag verwenden, um eine Webseite logisch in Teile zu unterteilen. Dies ist besonders nützlich, wenn Sie sich später in diesem Artikel Stile ansehen. Dort können Sie den Stil eines bestimmten Teils einer Webseite festlegen, indem Sie das entsprechende Div festlegen.

Hier ist der HTML-Code für Ihre Seite im ersten Teil:

<!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>

Als Erstes müssen Sie die Liste mit den Filmen in ein eigenes

einschließen, wie unten gezeigt

<!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>

Sie können jetzt sehen, dass die Liste

jetzt in einem
-Tag enthalten ist. Wenn Sie sich die Seite jetzt ansehen, werden Sie feststellen, dass sie nicht viel anders ist als zuvor. Dies liegt daran, dass das Tag
ein logisches Trennzeichen ist. Es hat keine physische Erscheinung.
Hyperlinks verwenden

Vielleicht sind Sie bereits mit Hyperlinks vertraut – anklickbaren Bereichen auf einer Seite, die auf eine andere Seite verweisen. Obwohl diese Bereiche als Hyperlinks bezeichnet werden, wurden sie in HTML ursprünglich als Anker-Tags (Anker) bezeichnet. Daher verwenden Sie das Tag , wann immer Sie einen Hyperlink erstellen möchten. Das Tag

macht den Inhalt zwischen Wenn ein Benutzer auf diesen Inhalt klickt, leitet der Browser zu einer HREF (Hyperreferenz) weiter, die mithilfe des href-Attributs im -Tag angegeben wird.

Attribute werden auf dem Tag selbst und nicht innerhalb des Tags definiert, ähnlich wie:

content

Um einen Hyperlink zu erstellen, können Sie also eine Syntax wie diese verwenden:

Hier klicken

Das href muss keine Website wie oben sein, es kann eine JavaScript-Funktion sein, die einen von Programmierern verwendeten Vorgang ausführt. Bei der Entwicklung wird ein spezielles href als Platzhalter verwendet, damit Sie testen können, ob der Stil des Hyperlinks funktioniert. Verwenden Sie dazu das Zeichen „#“ als href.

Um alle
-Elemente, die Filme enthalten, in Hyperlinks umzuwandeln, packen wir den Text des Films in ein
-Tag und setzen den HREF auf #, etwa so:
```
<!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>
```
Wenn Sie die Webseite ausführen, werden Sie feststellen, dass die Elemente in der Liste den bekannten Hyperlink-Stil verwenden, der auch als blaue Unterstreichung bekannt ist:

Kopf- und Fußzeile hinzufügen

将要做的下一件事是向网页添加页眉和页脚。您将使用Html5中提供的新
和
标记来完成此任务。可以在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代码。
对于页眉，我们将前面创建的
包装在
标记中，对于页脚，我们创建一些文本和一个超链接。
在浏览器中查看网页，它现在将类似于以下界面：

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

定义网页的外观

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

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

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

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

A list of my Favorite Movies

可以看到，

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

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

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

上设置了一个样式，并且
具有子元素
和
，那么该样式也将应用于它们，除非开发人员改写了此样式。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; }
样式“语言”包括一组以分号分隔并包含在花括号（{..}）中的属性。如果要将此样式应用到一个类，该类会使用“点”语法进行定义，也就是在类名称前添加一个点。

此代码放在网页页眉中的
<!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'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>
当运行它时，样式将生效，您将看到以下界面：

请记住

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

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

中。您可以通过在样式表定义中在“moviesList”之前添加 # 来设置它的样式，如下所示：
#movieslist{font-family: Geneva, Tahoma, sans-serif;}
这样就定义了

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

列表中的
对象呈现为编号项。我们可以设置样式来删除编号项。因为这些对象位于我们称为“movieslist”的div的内部，我们可以轻松访问它们来更改其样式。
下面是语法：
#movieslist ol { list-style: none; margin: 0; padding: 0; border: none; }
该语法表明，对于#movieslist中的每个

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

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

每个列表项的文本保存在一个标记中，所以我们可以使用以下语法，定义#movieslist中的每个
标记内的每个标记的外观：
#movieslist li a { font-size: large; color: #000000; display: block; padding: 5px; }
这里的设置不言自明，我们现在看一下运行网页时的外观。

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

WebMatrix Advanced Tutorial (3): So implementieren Sie einen bestimmten Stil

In Verbindung stehende Artikel