Procédure pas à pas : création et modification d'un fichier CSS
Mise à jour : novembre 2007
Cette procédure pas à pas introduit les fonctionnalités de feuilles de style en cascade (CSS) dans Visual Studio 2008. Elle vous guide dans la création d'une mise en page sur trois colonnes, en illustrant les techniques de base de création d'une nouvelle page Web et d'une nouvelle feuille de style.
Cette procédure pas à pas illustre les tâches suivantes :
Création d'un site Web de système de fichiers
Personnalisation du site Web en utilisant les fonctionnalités CSS
Création d'une mise en page sur trois colonnes à l'aide de CSS
Composants requis
Pour accomplir cette procédure pas à pas, vous devez disposer des éléments suivants :
Visual Studio 2008 ou Visual Web Developer 2008 Express. Pour obtenir les informations de téléchargement, consultez le site Web Centre de développement .NET Framework
avoir la version 3,5 du .NET Framework ;
Création d'un site Web
Dans cette partie de la procédure pas à pas, vous pouvez créer un site Web et lui ajouter une nouvelle page. Dans la section suivante, vous pourrez ajouter un fichier CSS, puis exécuter la page dans un navigateur Web.
Si vous avez déjà créé un site Web (par exemple, en effectuant les étapes décrites dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site Web et passer à l'étape « Ajout et application de styles à des éléments de page », plus loin dans cette procédure. Sinon, créez un site Web en suivant ces étapes.
Pour créer un site Web de système de fichiers
Dans Visual Web Developer, dans le menu Fichier, cliquez sur Nouveausite Web.
Dans la boîte de dialogue Nouveau site Web, sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Dans la zone Emplacement, cliquez sur Système de fichiers et entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.
Par exemple, tapez le nom de dossier suivant : C:\CSSWebSite.
Dans la liste Langage, cliquez sur Visual Basic ou Visual C#, puis cliquez sur OK.
.gif "Remarque")
Remarque :Le langage de programmation que vous choisissez sera la valeur par défaut pour votre site Web, mais vous pouvez définir individuellement le langage de programmation pour chaque page.
Visual Web Developer crée le dossier et une page nommée Default.aspx.
Ajout et application de styles à des éléments de page
Pour vous permettre de vous concentrer sur les outils de mise en forme et de style au lieu de créer des éléments de page auxquels appliquer un style, un jeu d'éléments est fourni dans cette section. Vous pouvez copier et coller ces éléments dans une page. Le code inclut des sections construites avec des éléments div, il comprend une bannière, des sections gauche et droite de barre latérale, une section de contenu principale et un pied de page. Ces éléments simples contiennent du texte, sur lequel vous pourrez travailler, et des ID d'éléments. Dans certains cas, les éléments contiennent des classes CSS que vous pouvez utiliser comme style de certains éléments spécifiques de la page.
Ajout d'éléments de page
Dans la procédure suivante, vous aller copier des éléments de page sur lesquels vous pourrez travailler avec les outils CSS. Les éléments de page se composent d'une bannière, qui contient du texte et une zone de recherche, d'un pied de page et de trois sections de texte. Le contenu principal de la page se trouve dans la dernière section de texte.
Pour ajouter des éléments de page à la page par défaut
Ouvrez ou basculez vers la page Default.aspx.
Remarque :Vous pouvez utiliser toute page disponible dans le site Web.
Basculez en mode Source.
Ajoutez le code suivant après la balise <form> :
<div id="pagecontainer"> <div id="banner"> <h1>AdventureWorks Styling Page</h1> <h2>Making CSS Styling Easier in Design View</h2> <div id="search">Find:<input id="searchbox" type="text" /> <input id="searchbutton" type="button" value="Go" /> </div> </div> <div id="leftsidebar" class="column"> <h3>Matters of the Web</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada rutrum.</p> </div> <div id="rightsidebar" class="column"> <h3>Matters of the Web</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada rutrum.</p> </div> <div id="maincontent" class="column"> <h2>Matters of the Web</h2> <p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra tincidunt.</p> <p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, convallis venenatis, auctor vitae, justo. In at massa.</p> </div> <div id="footer"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p> </div> </div>Enregistrez la page.
Basculez en mode Design pour consulter la mise en forme par défaut.
Application de styles en mode Design
En utilisant le mode Design, vous pouvez appliquer des styles aux éléments de page et voir immédiatement le résultat. Vous n'avez pas à écrire le code CSS puis basculer sur la page pour voir le résultat.
En mode Design, vous pouvez appliquer de plusieurs façons des styles aux éléments individuels sur une page. Vous pouvez utiliser des styles intralignes, comme attribut style d'un élément individuel. Ces règles de style s'appliquent uniquement à cet élément.
Vous pouvez écrire des règles de style dans un élément de style dans l'élément HTML head de la page. Ces règles de style s'appliquent alors aux éléments de la page actuelle. Finalement, vous pouvez écrire des règles de style dans un fichier CSS externe. Dans ce cas, les règles de style peuvent s'appliquer à toute page du le site Web.
Pour cette procédure pas à pas, vous allez écrire les informations de mise en page et de style dans la section d'élément style de la page ainsi que sous forme de styles intralignes. Ultérieurement, vous pourrez déplacer les informations CSS dans une feuille de style externe pour utiliser d'autres fonctionnalités de Visual Studio 2008.
Mise en forme d'une bannière de page
Le premier élément que vous allez mettre en forme est la section de bannière, qui comporte des éléments inclus dans la balise <div ID="banner">. Dans cet exemple, vous allez utiliser la barre d'outils Application de style directe pour modifier le style et la position de l'en-tête. Vous définirez également la taille de la bannière et ajouter une couleur d'arrière-plan.
Pour mettre en forme le texte de la bannière
En mode Design, cliquez sur le texte de titre dans la section de bannière qui indique "AdventureWorks Styling Page".
Remarquez que la sélection est entourée d'une zone bleue et un onglet indique que l'élément h1 a été sélectionné.
Dans la barre d'outils Application de style, dans la liste Règle de cible, cliquez sur Appliquer le nouveau style.
La boîte de dialogue Nouveau style s'affiche.
L'option Application de style directe possède la valeur par défaut Manuel, vous appliquerez donc le style manuellement.
Dans la liste Sélecteur, cliquez sur h1 afin que vous puissiez créer un style qui s'applique à tous les éléments h1.
Remarquez que la liste Définir dans a la valeur Page actuelle. Cela indique que la règle de style est créée dans un élément style sur la page actuelle.
Dans la liste font-family sélectionnez une police en gras telle que Impact.
Dans la zone font-size, entrez ou sélectionnez xx-large.
Dans la zone font-variant, entrez ou sélectionnez small-caps.
Cliquez sur OK.
Pour voir la règle de style créée, basculez en mode Source et faites défiler le code jusqu'à l'élément style, localisé à l'intérieur de l'élément head.
Vous pouvez voir que la règle de style CSS a été créée pour l'élément h1.
Procédez comme suit pour appliquer de la même manière, un style à l'élément h2 sur la bannière.
Ouvrez la boîte de dialogue Nouveau style comme dans étape 2.
Sélectionnez l'élément h2.
Affectez à Sélecteur dans la zone Nouveau style la valeur h2.
Affectez à font-family la valeur comic Sans MS et réglez font size sur small.
Sélection d'éléments de page
Dans Visual Studio 2008, il y a plusieurs méthodes pour sélectionner des éléments dans la page. Vous pouvez utiliser le sélecteur de balise rapide, qui se trouve dans la section inférieure du volet du mode Design. Lorsque vous positionnez le point d'insertion en tout point de la page, la barre du sélecteur rapide de balise vous indique la balise HTML sous-jacente pour cette zone. Les balises qui contiennent la balise actuelle apparaissent à gauche de la balise dans la barre du sélecteur de balise rapide. Par exemple, si le point d'insertion est dans une cellule de tableau, la balise td apparaît dans la barre du sélecteur de balise rapide et est précédée d'une balise tr pour la ligne du tableau, ainsi que d'une balise table pour le tableau.
Lorsque vous déplacez le pointeur sur une balise dans le sélecteur de balise rapide, le contenu de la balise est mis en surbrillance en mode Design et une flèche apparaît sur la balise. Vous pouvez cliquer sur cette flèche pour sélectionner une balise et son contenu, sélectionner uniquement le contenu de la balise, modifier ou supprimer la balise, ouvrir la boîte de dialogue Éditeur de balise rapide ou ouvrir la boîte de dialogue Propriétés pour un élément.
Vous pouvez également utiliser la touche Échap pour remonter dans la hiérarchie des éléments. Par exemple, l'élément h1 est imbriqué à l'intérieur de l'élément div de la bannière. Pour sélectionner l'élément div en entier, cliquez sur l'élément h1 pour le sélectionner, puis utilisez la touche Échap pour sélectionner l'élément div de la bannière. Notez que la première fois vous appuyez sur la touche Échap, l'élément h1 se met en surbrillance et les marges internes et externes s'affichent. (Puisque nous n'avons pas défini ces marges, elles possèdent les valeurs par défaut.) Lorsque vous appuyez une fois encore sur la touche Échap, l'élément div en entier est sélectionné. Lorsque l'élément est sélectionné, la balise affiche div#banner.
Dimensionnement de la bannière et positionnement de son contenu
Vous pouvez dimensionner et positionner la bannière et son contenu en mode Design en utilisant la barre d'outils Application de style directe. Les règles de style sont écrites dans la page actuelle, au même emplacement que les règles de style précédentes.
| Remarque : |
|---|
Vous pouvez utiliser la touche CTRL et les touches de direction pour modifier la valeur des éléments de taille qui ont déjà été définis. Par exemple, si vous faites glisser la largeur de la bannière à 785 pixels, vous pouvez utiliser la combinaison de touches CTRL + GAUCHE pour réduire la largeur à 780 pixels. |
Pour dimensionner la bannière
Basculez en mode Design.
Cliquez sur le texte h1 ("AdventureWorks Styling Page") pour le sélectionner, puis appuyez sur la touche Échap deux fois pour sélectionner l'élément englobant, qui est l'élément div de la bannière.
Faites glisser la poignée de redimensionnement, dans le coin inférieur droit, pour redimensionner l'élément div de la bannière.
Remarquez qu'à mesure que vous faites glisser la poignée, une info-bulle affiche les valeurs de largeur et de hauteur. Ces valeurs sont également affichées dans la barre d'état, qui se trouve la section inférieure de la fenêtre de mode Design.
Redimensionnez l'élément jusqu'à ce qu'il fasse environ 780 pixels de large et environ 100 pixels de haut.
Pour consulter la règle de style créée, allez dans l'affichage Fractionné et rendez-vous dans l'élément style.
Vous pouvez voir qu'une règle de style a été créée pour l'élément div de la bannière (à l'aide du sélecteur #banner ).
En mode Design, assurez-vous que l'élément div de la bannière est sélectionné (div#banner doit toujours être sélectionné dans le navigateur des balises).
Dans le menu Format, cliquez sur Couleur d'arrière-plan.
Le sélecteur de couleurs s'affiche.
Sélectionnez une couleur pour la bannière puis cliquez sur OK.
Vous pouvez également appliquer des règles de style qui centrent le texte dans les titres. Il suffit de définir les valeurs de marge interne (padding).
Pour positionner les éléments de titre à l'intérieur de la bannière
En mode Design, sélectionnez l'élément div de la bannière.
Dans le menu Format, cliquez sur Paragraphe.
La boîte de dialogue Paragraphe s'affiche.
Parce que l'élément h1 est de la même longueur que l'élément div de bannière, vous pouvez positionner le texte à l'intérieur de l'élément h1 pour le centrer dans la bannière.
Dans la boîte de dialogue Paragraphe, dans la liste déroulante Alignement, sélectionnez Centrer puis cliquez sur OK.
Sélectionnez l'élément h2 puis répétez les étapes 2 et 3.
Sélectionnez l'élément div de la bannière.
Tout en maintenant la touche MAJ enfoncée, maintenez le pointeur de la souris sur le bord de l'élément div jusqu'à ce qu'une info-bulle affiche la valeur de marge interne (padding) actuelle.
Faites glisser le bord de la marge intérieure jusqu'à qu'il soit adjacent à la bordure supérieure de l'élément div.
Faites glisser jusqu'à ce que les deux éléments de type texte soient centrés (approximativement 30 pixels).
Pour terminer la bannière, vous devez positionner l'élément div de recherche ainsi que ses éléments sur la bannière. Pour ceci, vous pouvez utiliser une autre fonctionnalité de Visual Studio 2008 : la grille de positionnement.
Pour positionner l'élément div de recherche à l'intérieur de la bannière
En mode Design, sélectionnez l'élément div de recherche (div#search).
Dans le menu Format, cliquez sur Définir la position, puis sélectionnez Absolu.
Faites glisser l'élément div de recherche par son onglet (le texte indique div#search) dans une position à l'intérieur de la bannière, mais à droite des éléments de type texte.
Remarquez que deux lignes bleues s'étendent de la sélection, elles indiquent des valeurs de positionnement supérieur et gauche.
Libérez l'élément div de recherche une fois placé là où vous le souhaitez.
Création d'une disposition en trois colonnes flexible
Vous pouvez utiliser Visual Web Developer pour créer des règles de style en mettant en forme des éléments de page en mode Design. Vous pouvez également utiliser ces mêmes outils pour créer votre mise en page.
Dans cette procédure pas à pas, vous allez créer une disposition en trois colonnes en utilisant la règle de style Float. En premier lieu, vous allez définir la taille et la position des barres latérales de gauche et de droite, puis vous pourrez régler la marge intérieure de la section de contenu principal pour créer une disposition en trois colonnes, flexible.
| Remarque : |
|---|
Pour voir les éléments correctement positionnés en mode Design, vous devrez peut-être masquer la Barre d'outils. Vous aurez ainsi plus de place pour afficher la position des éléments de la page. |
Création des colonnes des encadrés
Vous pouvez redimensionner les colonnes latérales sur la page de la même façon que vous avez redimensionné la bannière. Lorsque vous redimensionnez les colonnes des encadrés, vous souhaitez définir uniquement la valeur de largeur, et non la valeur de hauteur, afin que le texte puisse agrandir la longueur de la colonne si nécessaire. Pour définir uniquement la largeur de l'élément div, vous pouvez faire glisser le côté droit de l'élément div au lieu de le saisir par le coin de l'élément div, comme indiqué dans l'exemple précédent.
Pour redimensionner et positionner les éléments div des encadrés gauche et droit
En mode Design, sélectionnez l'élément div de l'encadré gauche. (Sélectionnez div.column#leftsidebar dans le navigateur des balises.)
Faites glisser le bord droit de l'élément div de l'encadré gauche pour redimensionner l'élément à environ 200 pixels de large.
Remarquez qu'à mesure que vous faites glisser le bord, la valeur de la hauteur est affichée entre parenthèses ce qui signifie qu'elle n'est pas modifiée.
Dans le menu Format, cliquez sur Position.
La boîte de dialogue Position s'affiche.
Sous Style d'habillage, sélectionnez Gauche puis cliquez sur OK.
Sélectionnez l'élément div de l'encadré droit et faites glisser son bord droit jusqu'à ce que sa largeur soit d'approximativement 250 pixels.
Dans le menu Format, cliquez sur Position.
Sous Style d'habillage, cliquez sur Droit puis cliquez sur OK.
Création de la colonne centrale
Pour créer la colonne centrale, vous pouvez définir des marges extérieures et intérieures pour éloigner le contenu des colonnes de gauche et de droite. Vous allez tout d'abord créer une bordure gauche, puis utiliserez la marge intérieure pour déplacer le contenu loin de la bordure.
Pour appliquer un style à la colonne centrale
En mode Design, sélectionnez l'élément div du contenu principal.
Tout en maintenant la touche CTRL enfoncée, faites glisser la marge de droite de l'élément div du contenu principal pour définir la marge de droite sur 260 pixels. Faites glisser la marge de gauche sur une valeur de 210 pixels.
Alors que l'élément div du contenu principal est sélectionné, dans le menu Format, sélectionnez Bordure et trame.
La boîte de dialogue Bordure et trame s'affiche.
Sous Paramètres, sélectionnez Personnalisé.
Dans la liste Style, sélectionnez Unie, et sous Aperçu, cliquez sur le bouton de bordure gauche.
Dans la zone de texte Largeur, entrez 1px.
Sous Marge intérieure, dans la zone Gauche, entrez 10px.
Cliquez sur OK.
Ajustement du pied de page
Si les utilisateurs redimensionnent la page ou si la page est affichée sur un écran d'un format important, le pied de page peut effectuer un retour à la ligne et s'afficher au bord de l'une des colonnes. Pour empêcher ceci, vous pouvez définir la règle de style Clear.
Pour ajuster l'élément div du pied de page
En mode Design, sélectionnez l'élément div du pied de page.
Dans le menu Format, cliquez sur Nouveau style.
La boîte de dialogue Nouveau style s'affiche.
Dans la zone Sélecteur, entrez ou sélectionnez #footer.
Dans la liste Catégorie, cliquez sur Disposition.
Dans la liste clear, sélectionnez both.
Cliquez sur OK.
Création et utilisation d'une feuille de style
Une méthode efficace pour utiliser CSS est de placer des règles de style dans une feuille de style. Les styles peuvent alors être référencés par toutes les pages, afin d'être cohérents.
Vous pouvez également utiliser des feuilles de style en cascade avec les thèmes ASP.NET. Pour utiliser une feuille de style avec un thème, vous devez la placer dans le bon dossier. Pour plus d'informations sur les thèmes et CSS, consultez Vue d'ensemble des thèmes et des apparences ASP.NET.
Pour créer une feuille de style, vous utilisez les mêmes techniques que pour créer une nouvelle page.
Pour créer une feuille de style et l'attacher à une page
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web puis cliquez sur Ajouter un nouvel élément.
Sous Modèles Visual Studio installés, sélectionnez Feuille de style.
Dans la zone Nom, tapez Layout.css, puis cliquez sur Ajouter.
L'éditeur s'ouvre sur une nouvelle feuille de style qui contient une règle de style body vide.
Ouvrez ou basculez vers la page Default.aspx, puis basculez en mode Design.
Dans le menu Format, cliquez sur Styles CSS puis cliquez sur Gérer les styles.
La fenêtre Gérer les styles est ouverte. (Par défaut, cette fenêtre est ancrée.)
Cliquez sur Attacher une feuille de style.
La boîte de dialogue Sélectionner une feuille de style s'affiche.
Sélectionnez le fichier Layout.css, puis cliquez sur OK.
Un nouvel onglet nommé Layout.css est créé dans la fenêtre Gérer les styles.
Vous pouvez assigner de plusieurs façons une feuille de style à une page. La manière la plus simple est de faire glisser le fichier depuis l'Explorateur de solutions vers l'élément head de la page en mode Source.
Déplacement de règles de style d'une page à une feuille de style
Vous pouvez utiliser le volet Gérer les styles pour déplacer des styles d'une page à une autre, ou voir comment les règles de style sont appliquées à une page.
Jusqu'à présent, dans cette procédure pas à pas, les règles de style que vous avez créées ont été enregistrées dans l'élément style de la page Default.aspx. Vous pouvez déplacer ces règles de style dans la nouvelle feuille de style que vous avez créée.
Pour déplacer des règles de style à l'aide du volet Gérer les styles
Sous l'onglet Page actuelle de la fenêtre Gérer les styles, sélectionnez tous les styles. (Vous pouvez les sélectionner en utilisant MAJ+CLIC.)
Faites glisser les styles sélectionnés sous l'onglet Layout.css de la fenêtre Gérer les styles.
Les règles de style sont supprimées de la page Default.aspx et déplacées dans le fichier Layout.css. Vous pouvez confirmer ceci en consultant la page Default.aspx en mode Source et en basculant sur la page Layout.css dans l'éditeur.
Vous pouvez également modifier l'ordre des styles dans la feuille de style en utilisant la fenêtre Gérer les styles. Par exemple, vous pouvez faire glisser la règle de style de la recherche afin qu'elle se place directement sous la règle de style de la bannière.
Étapes suivantes
Cette procédure pas à pas a illustré les techniques de base pour travailler avec des styles CSS en utilisant l'interface utilisateur de Visual Studio 2008. Vous pouvez également explorer les techniques suivantes de contrôle de l'apparence des pages Web :
Utilisation d'une feuille de style existante. Pour plus d'informations, consultez Procédure pas à pas : utilisation d'un fichier CSS existant.
Définition par programme des informations de style relatives aux éléments HTML. Pour plus d'informations, consultez Comment : définir par programme les propriétés des contrôles serveur HTML.
Création de thèmes et d'apparences, ce qui vous permet de spécifier non seulement des styles CSS, mais presque toute les propriétés d'un contrôle ASP.NET. Pour plus d'informations, consultez Vue d'ensemble des thèmes et des apparences ASP.NET.
Voir aussi
Tâches
Procédure pas à pas : création d'une page Web de base dans Visual Web Developer