Procédure pas à pas : création et modification d'un fichier CSS

Cette procédure pas à pas introduit les fonctionnalités de Visual Studio qui vous aident à utiliser des feuilles de style (CSS) en cascade. Elle décrit comment créer une mise en page sur trois colonnes et illustre les techniques de base des modes de création d'une nouvelle page Web et d'une nouvelle feuille de style.

Cette procédure pas à pas décrit 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 ou Visual Studio Express pour Web est installé sur votre ordinateur.

  Notes

  Si vous utilisez Visual Studio, la procédure pas à pas suppose que vous avez sélectionné la collection de paramètres Développement Web lors du premier démarrage de Visual Studio.Pour plus d'informations, consultez Comment : sélectionner les paramètres de l'environnement de développement Web.

• Connaissances générales sur le fonctionnement de Visual Studio.

  Pour une introduction au mode de création de pages Web dans Visual Studio, consultez Procédure pas à pas : création d'une page Web Forms de base dans Visual Studio.

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 page Web Forms. Dans la section suivante, vous pourrez ajouter un fichier CSS, puis exécuter la page dans un navigateur.

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 Forms de base dans Visual Studio), 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

1. Ouvrez Visual Studio ou Visual Studio pour Web.

2. Dans le menu Fichier, cliquez sur Nouveau site Web.

   La boîte de dialogue Nouveau site Web s'affiche.

3. Sous Modèles installés, cliquez sur Visual Basic ou Visual C#, puis sélectionnez Site Web ASP.NET vide.

4. Dans la zone Emplacement Web, sélectionnez Système de fichiers, puis entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

   Par exemple, tapez le nom du dossier C:\SitesWeb.

5. Cliquez sur OK.

   Visual Studio crée un projet de site Web qui inclut un fichier Web.config, mais aucune autre page, ni fichier.

6. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, sélectionnez Ajouter, puis Ajouter un nouvel élément.

7. Sélectionnez Web Form, nommez la page Default.aspx et cliquez sur Ajouter.

   Visual Studio crée la page Default.aspx et l'ouvre en mode Source.

Ajout et application de styles à des éléments de page

Cette section fournit un ensemble d'éléments de page que vous modifiez avec les outils de mise en forme et de style Visual Studio. 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

1. Ouvrez ou basculez vers la page Default.aspx.

2. Basculez en mode Source.

3. À l'intérieur de la section <form>, supprimez la paire de balises <div></div> vide créé par défaut.

4. Ajoutez le code suivant après la balise d'ouverture <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>
   

   Notes

   Pour améliorer la lisibilité de la page, dans le menu Edition, cliquez sur Document de Format.

5. Enregistrez la page.

6. 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 à créer et modifier un fichier .css, puis basculer sur la page pour voir le résultat.

En mode Design, vous pouvez appliquer des styles aux éléments individuels sur une page en procédant comme suit :

• Utilisez des styles intralignes, comme attribut style d'un élément individuel. Ces règles de style s'appliquent uniquement à cet élément.

• Écrivez des règles de style dans une section <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.

• Écrivez des règles de style dans un fichier CSS externe. Dans ce cas, les règles de style peuvent s'appliquer à toute page du site Web.

Pour cette partie de la procédure pas à pas, vous définissez les règles de mise en page et de style écrites dans la section style de la page. Ultérieurement, vous déplacerez les informations CSS que vous créez dans une feuille de style externe.

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 utilisez la boîte de dialogue Nouveau style 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

1. 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é.

2. Dans la barre d'outils Mise en forme, dans la liste Règle de cible, cliquez sur Appliquer le nouveau style. Ou, dans le menu Format, choisissez Nouveau style.

   Conseil

   La barre d'outils de mise en forme est activée par défaut.Pour l'activer, dans le menu Affichage, choisissez Barres d'outils, puis choisissez Mise en forme.

   La boîte de dialogue Nouveau style s'affiche.

3. 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. Page active indique que la règle de style est créée dans un élément style sur la page que vous modifiez actuellement.

4. Dans la liste font-family, sélectionnez Impact ou une autre police utilisée en général pour les bannières.

   Un aperçu de la police s'affiche dans le volet Aperçu.

5. Dans la zone font-size, entrez ou sélectionnez xx-large.

6. Dans la zone font-variant, entrez ou sélectionnez small-caps.

7. Cliquez sur OK.

8. 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.

9. Procédez comme suit pour appliquer de la même manière, un style à l'élément h2 sur la bannière.

   1. En mode Design, amenez le pointeur au-dessus du titre "Making CSS Styling Easier in Design View" (Création simplifiée des styles CSS en mode Design) qui est un élément h2.

   2. Ouvrez la boîte de dialogue Nouveau style comme dans étape 2.

   3. Affectez à Sélecteur dans la zone Nouveau style la valeur h2.

   4. Affectez à font-family la valeur comic Sans MS et réglez font size sur small.

   5. Cliquez sur OK.

Sélection d'éléments de page

Dans Visual Studio, 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 dans une cellule de tableau, une balise table et une balise tr apparaissent avant la balise td.

Lorsque vous déplacez le pointeur sur une balise dans le sélecteur de balise rapide, une flèche s'affiche sur la balise. Vous pouvez cliquer sur cette flèche pour sélectionner une balise et son contenu, ou sélectionner uniquement le contenu de la balise.

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. 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. 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 Mise en forme. Les règles de style sont écrites dans la page actuelle, au même emplacement que les règles de style précédentes.

Pour dimensionner la bannière

1. Basculez en mode Design.

2. Cliquez sur le texte h1 (« Page de styles AdventureWorks ») pour le sélectionner, puis appuyez sur la touche Échap deux fois. Cette action sélectionne l'élément englobant, qui est l'élément div nommé banner.

3. 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 l'angle inférieur gauche de la barre d'état en bas de la fenêtre en mode Design.

4. Redimensionnez l'élément jusqu'à ce qu'il fasse environ 780 pixels de large et environ 125 pixels de haut.

5. 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 ).

6. Basculez en mode Design.

7. 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).

8. Dans le menu Format, sélectionnez Bordure et trame.

   La boîte de dialogue Bordure et trame s'affiche.

   Cliquez sur l'onglet Trame de fond, sélectionnez Couleur d'arrière-plan, puis cliquez sur Couleurs supplémentaires.

   La boîte de dialogue Couleurs supplémentaires s'affiche.

9. Sélectionnez une couleur d'arrière-plan pour la bannière, puis cliquez sur OK.

   En mode Fractionné, vous pouvez remarquer que la règle de style #banner est mise à jour pour inclure un paramètre pour background-color.

10. Pour ajuster la largeur du formulaire à la bannière, sélectionnez l'élément form. Ensuite, faites glisser la poignée de redimensionnement à droite pour réduire la largeur du formulaire à 780 pixels.

Vous pouvez également appliquer des règles de style qui centrent le texte dans les titres en définissant des valeurs de marge interne.

Pour positionner les éléments de titre à l'intérieur de la bannière

1. En mode Design, sélectionnez l'élément h1 de la bannière.

2. Dans le menu Format, cliquez sur Paragraphe.

   La boîte de dialogue Paragraphe s'affiche.

3. Dans la boîte de dialogue Paragraphe, dans la liste déroulante Alignement, sélectionnez Centrer puis cliquez sur OK.

4. Sélectionnez l'élément h2 puis répétez les étapes 2 et 3.

Pour terminer la bannière, vous devez positionner l'élément div de recherche ainsi que ses éléments sur la bannière à l'aide de la grille de positionnement.

Pour positionner l'élément div de recherche à l'intérieur de la bannière

1. En mode Design, sélectionnez l'élément div de recherche (div#search). (Cet élément en haut de la page contient la zone de recherche.)

2. Dans le menu Format, cliquez sur Définir la position, puis sélectionnez Absolu.

3. Faites glisser l'élément div#search par son onglet 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.

4. Libérez l'élément div de recherche une fois placé là où vous le souhaitez et redimensionné.

Création d'une disposition en trois colonnes flexible

Vous pouvez utiliser Visual Studio 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. Commencez par définir la taille et la position des encadrés gauche et droit. Ensuite, vous ajustez le remplissage de la section de contenu principal pour créer une disposition en trois colonnes flexible.

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, pas la valeur de hauteur. Si vous ne spécifiez pas de valeur de hauteur, le texte peut étendre 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 dans le coin.

Pour redimensionner et positionner les éléments div des encadrés gauche et droit

1. En mode Fractionné, sélectionnez l'élément div de l'encadré gauche dans le code source HTML.

2. Faites glisser le bord droit de l'élément div de l'encadré gauche vers la 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.

3. Dans le menu Format, cliquez sur Position.

   La boîte de dialogue Position s'affiche.

4. Sous Style d'habillage, sélectionnez Gauche puis cliquez sur OK.

5. Sélectionnez l'élément div de l'encadré droit et faites glisser son bord droit jusqu'à ce que sa largeur soit d'approximativement 290 pixels.

6. Dans le menu Format, cliquez sur Position.

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

1. En mode Design ou Fractionné, sélectionnez l'élément div pour le contenu principal.

2. 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 290 pixels. Faites glisser la marge de gauche sur une valeur de 210 pixels.

   Sinon, vous pouvez utiliser la vue Source ou le mode Fractionné pour créer la règle de style suivante :

   #maincontent
   {
       margin-right: 290px;
       margin-left: 210px;
   }
   

3. Sélectionnez l'élément div du contenu principal, puis dans le menu Format, sélectionnez Bordure et trame.

   La boîte de dialogue Bordure et trame s'affiche.

4. Sous Paramètres, sélectionnez Personnalisé.

5. Dans la liste Style, sélectionnez Unie, et sous Aperçu, cliquez sur les boutons de bordure gauche et droite.

6. Dans la zone de texte Largeur, choisissez 1.

7. Sous Remplissage, dans les zones Gauche et Droit, sélectionnez 10.

8. Cliquez sur OK.

   En mode Source ou Fractionné, notez que la définition de style pour l'élément #maincontent a été mise à jour.

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 s'afficher au bord de l'une des colonnes. Pour empêcher ce comportement d'habillage, vous pouvez définir la règle de style clear.

Pour ajuster l'élément div du pied de page

1. En mode Design, sélectionnez l'élément div du pied de page.

2. Dans le menu Format, cliquez sur Nouveau style.

   La boîte de dialogue Nouveau style s'affiche.

3. Dans la zone Sélecteur, entrez ou sélectionnez #footer.

4. Dans la liste Catégorie, cliquez sur Disposition.

5. Dans la liste clear, sélectionnez both.

6. Cliquez sur OK.

Création et utilisation d'une feuille de style

Jusqu'à présent, vous avez créé des définitions de style en manipulant directement des éléments dans la page. Vous avez enregistré les définitions de style dans l'élément style à l'intérieur de l'élément head de la page. Ces paramètres de style s'appliquent uniquement à la page active.

Une méthode efficace pour utiliser CSS consiste à placer des règles de style dans une feuille de style à laquelle toutes vos pages Web peuvent faire référence. Pour créer une feuille de style, vous utilisez les mêmes techniques que pour créer une page.

Pour créer une feuille de style et l'attacher à une page

1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, cliquez sur Ajouter, puis cliquez sur Ajouter un nouvel élément.

2. Dans la liste de modèles, sélectionnez Feuille de style.

3. 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.

4. Ouvrez ou basculez vers la page Default.aspx, puis basculez en mode Design.

5. Dans le menu Affichage, cliquez sur Gérer les styles.

   La fenêtre Gérer les styles est ouverte. (Par défaut, cette fenêtre est ancrée.)

6. Dans la barre d'outils de la fenêtre Gérer les styles, cliquez sur le bouton Attacher une feuille de style.

   La boîte de dialogue Sélectionner une feuille de style s'affiche.

7. 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. Le fichier Layout.css est joint au document actif. En mode Source ou Fractionné, vous pouvez noter qu'un élément link comme l'élément suivant est ajouté à l'élément head de la page :

   <link href="Layout.css" rel="stylesheet" type="text/css" />
   

   Cela illustre la manière d'utiliser la fenêtre Gérer les styles pour assigner une feuille de style à une page. Il existe autres façons d'assigner également une feuille de style à une page. Par exemple, vous pouvez également faire glisser un fichier de feuille de style de l'Explorateur de solutions vers l'élément head de la page en mode Source. Vous pouvez également faire glisser le fichier depuis l'Explorateur de solutions et le déposer n'importe où sur la page en mode Design.

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. Vous pouvez maintenant déplacer les règles de style que vous avez définies vers la nouvelle feuille de style que vous avez créé.

Pour déplacer des règles de style à l'aide du volet Gérer les styles

1. Basculez vers la page Default.aspx.

2. Basculez en mode Design.

3. Sous l'onglet Page actuelle de la fenêtre Gérer les styles, sélectionnez tous les styles. (Si vous sélectionnez le premier style, puis utilisez Maj+Clic pour sélectionner le dernier style, tous les styles sont sélectionnés.)

4. Dans la fenêtre Gérer les styles, faites glisser les styles sélectionnés sur l'icône body dans la section Layout.css.

   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.

É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. Vous pouvez également parcourir 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 programmation des informations de style relatives aux éléments HTML. Pour plus d'informations, consultez Comment : définir par programmation 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 Thèmes et apparences ASP.NET.

Voir aussi

Autres ressources

Procédure pas à pas : création d'une page Web Forms de base dans Visual Studio

types de projets de sites Web dans Visual Studio