interface Web
tutoriel CSS
Tutoriel avancé WebMatrix (3) : Comment implémenter un certain style
Tutoriel avancé WebMatrix (3) : Comment implémenter un certain style
Csdn.NET publiera bientôt un didacticiel avancé sur le nouvel outil de développement Web de Microsoft, WebMatrix, pour aider les développeurs à comprendre cela, connu comme l'outil de développement Web le plus puissant de l'histoire de Microsoft. Suite à la dernière version expliquant comment installer et utiliser le nouvel outil de développement de Microsoft WebMatrix et vous apprendre à utiliser WebMatrix pour créer votre première page Web. Ce numéro continuera à vous présenter les didacticiels suivants.
Introduction : Microsoft WebMatrix est un outil gratuit qui peut être utilisé pour créer, personnaliser et publier des sites Web sur Internet.
WebMatrix vous permet de créer facilement des sites Web. Vous pouvez commencer avec une application open source (telle que WordPress, Joomla, DotNetNuke ou Orchard) et WebMatrix se chargera de télécharger, d'installer et de configurer l'application pour vous. Ou vous pouvez écrire le code vous-même à l'aide des nombreux modèles intégrés qui vous aideront à démarrer rapidement. Quel que soit votre choix, WebMatrix fournit tout ce dont votre site Web a besoin pour fonctionner, y compris des serveurs Web, des bases de données et des frameworks. En utilisant la même pile sur votre bureau de développement que celle que vous utiliseriez sur votre hébergeur Web, le processus de mise en ligne de votre site Web est simple et fluide.
Vous pouvez le télécharger depuis http://web.ms/webmatrix.
Vous pouvez désormais apprendre à utiliser WebMatrix, CSS, HTML, HTML5, ASP.Net, SQL, bases de données, etc. et à écrire des applications Web simples en quelques heures seulement. Cela ressemble à ceci :
Dans la partie 2, vous avez vu comment utiliser WebMatrix pour créer une page Web très simple et comment cette page s'exécutait dans un certain nombre de navigateurs différents. Dans cette section, vous apprendrez comment modifier le style visuel d'une page Web à l'aide de la technologie CSS (Cascading Style Sheets).
Voici une liste simple de films que vous pouvez intégrer à votre page Web :
Préparez-vous à styliser votre page Web à l'aide de feuilles de style en cascade
Dans dans les prochains jours Dans cette étape, vous verrez davantage de balises HTML pouvant être utilisées pour implémenter des fonctions telles que des hyperliens, des sections de page Web et des balises de script. Vous apprendrez également à utiliser des feuilles de style en cascade (CSS) pour modifier ce site Web. page et définir son apparence. Enfin, vous utiliserez des mises en page pour obtenir le même contenu entre cette page et les autres pages du site, facilitant ainsi la modification du même contenu.
Utilisation de séparateurs
En HTML, vous pouvez utiliser la balise
Voici le HTML de votre page dans la première partie :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Favorite Movies</title>
</head>
<body>
<h1 id="A-nbsp-list-nbsp-of-nbsp-my-nbsp-Favorite-nbsp-Movies">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>La première chose à faire est d'envelopper la liste contenant les films dans son propre
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Favorite Movies</title>
</head>
<body>
<h1 id="A-nbsp-list-nbsp-of-nbsp-my-nbsp-Favorite-nbsp-Movies">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>Vous pouvez maintenant voir que la liste
- contenant des films est désormais contenue dans une balise Si vous regardez la page maintenant, vous verrez que ce n’est pas très différent d’avant. En effet, la baliseest un séparateur logique. Il n'a aucune apparence physique.
Utilisation des hyperliens
Vous êtes peut-être déjà familier avec les hyperliens – des zones cliquables sur une page qui renvoient vers une autre page. Bien que ces zones soient appelées hyperliens, en HTML, elles étaient à l'origine appelées balises d'ancrage, vous utilisez donc la balise La balise
(ou positionnement) rend le contenu entre et Lorsqu'un utilisateur clique sur ce contenu, le navigateur redirigera vers une HREF (hyperréférence) indiquée à l'aide de l'attribut href dans la balise
Les attributs sont définis sur la balise elle-même, plutôt qu'à l'intérieur de la balise, comme :
Ainsi, pour créer un lien hypertexte, vous pouvez utiliser une syntaxe comme celle-ci :
Le href ne doit pas nécessairement être un site Web comme celui ci-dessus, il peut s'agir d'une fonction JavaScript qui effectue les opérations utilisées par les programmeurs. Un href spécial est utilisé comme espace réservé pendant le développement afin que vous puissiez tester si le style du lien hypertexte fonctionne. Pour ce faire, utilisez le caractère "#" comme href.
Ainsi, afin de convertir tous les éléments
- contenant des films en hyperliens, nous enveloppons le texte du film dans une balise , en définissant le HREF sur #, quelque chose comme ceci :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Favorite Movies</title> </head> <body> <h1 id="A-nbsp-list-nbsp-of-nbsp-my-nbsp-Favorite-nbsp-Movies">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>Copier après la connexionSi vous exécutez la page Web, vous verrez que les éléments de la liste utiliseront le style de lien hypertexte familier, également connu sous le nom de soulignement bleu :
Ajouter un en-tête et un pied de page
将要做的下一件事是向网页添加页眉和页脚。您将使用Html5中提供的新
和 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Favorite Movies</title> </head> <body> <header> <h1 id="A-nbsp-list-nbsp-of-nbsp-my-nbsp-Favorite-nbsp-Movies">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>Copier après la connexion可以看到，它们是非常简单的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; }Copier après la connexion样式“语言”包括一组以分号分隔并包含在花括号（{..}）中的属性。如果要将此样式应用到一个类，该类会使用“点”语法进行定义，也就是在类名称前添加一个点。
此代码放在网页页眉中的
- contenant des films en hyperliens, nous enveloppons le texte du film dans une balise , en définissant le HREF sur #, quelque chose comme ceci :
