Procédure pas à pas : utilisation d'un fichier CSS existant

Article
11/15/2012

Cette procédure pas à pas introduit les fonctionnalités de feuilles de style en cascade (CSS) de Visual Studio. Elle vous guide lors de la création et de la modification d'une mise en page à deux colonnes. Elle illustre également les techniques de base de création d'une page Web et d'une nouvelle feuille de style en cascade.

Notes

Les exemples de cette rubrique sont spécifiques aux pages Web Forms ASP.NET.Vous pouvez utiliser le mode Source pour modifier des pages dans des applications MVC ASP.NET (Contrôleur de l'affichage du modèle) ou Pages Web ASP.NET (fichiers .cshtml), mais le mode Design n'est totalement pris en charge que pour les pages Web Forms.

Cette procédure pas à pas décrit les tâches suivantes :

Création d'un site Web de système de fichiers
Utilisation des fonctionnalités CSS de Visual Studio.
Création d'une mise en page à deux colonnes en utilisant CSS

Notes

Cette procédure pas à pas montre des fonctionnalités supplémentaires de Visual Studio qui ne sont pas abordées dans Procédure pas à pas : création et modification d'un fichier CSS.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants 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 l'utilisation de Visual Studio.

Pour une introduction au mode de création de pages Web Forms dans Visual Studio, consultez Procédure pas à pas : création d'une page Web Forms de base dans Visual Studio.
Une image que vous pouvez ajouter à la page Web. L'image n'est pas importante ; vous utiliserez uniquement l'image pour illustrer des fonctionnalités de positionnement.

Création d'un site Web

Dans cette partie de la procédure pas à pas, vous allez créer un site Web et lui ajouter une nouvelle page.

Si vous avez déjà créé un site Web dans Visual Studio (par exemple, en effectuant les étapes décrites dans la 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 d'éléments HTML et d'un fichier CSS », plus loin dans cette procédure. Sinon, créez un site Web en suivant ces étapes.

Notes

Le modèle de projet par défaut pour les sites Web ASP.NET et les applications Web ASP.NET contient un fichier Site.css.Ce fichier contient des règles CSS qui définissent l'aspect de la page maître (Site.master) et des pages de contenu (Default.aspx et About.aspx).Cette procédure pas à pas vous indique comment démarrer avec un projet vide de site Web ASP.NET, puis ajouter des fonctionnalités CSS au site.

Pour créer un site Web de système de fichiers

Ouvrez Visual Studio ou Visual Studio Express pour Web.
Dans le menu Fichier, cliquez sur Nouveau site Web.

La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles installés, sélectionnez Visual Basic ou Visual C#, puis sélectionnez Site Web ASP.NET vide.
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.
Cliquez sur OK.

Visual Studio crée un projet de site Web qui inclut un fichier Web.config, mais aucune autre page, ni fichier.
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.
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 d'éléments HTML et d'un fichier CSS

Pour vous permettre de vous concentrer sur les outils de mise en forme et de style au lieu de créer des éléments 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 HTML

Cette section ajoute du contenu avec lequel travailler. La page se compose d'une bannière avec du texte et une zone de recherche, un pied de page et trois sections de texte. Le contenu principal de la page se trouve dans la dernière section de texte.

Pour ajouter des éléments HTML à la page

Ouvrez la page Default.aspx en mode Source.

Ajoutez le code suivant après l'élément <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>
<asp:Image ID="Image1" runat="server"/>
<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.

Ajout d'un fichier CSS

Dans cette section, vous allez ajouter une feuille de style en cascade (fichier .css) qui applique des styles aux éléments que vous avez ajoutés à la page dans la dernière section. La feuille de style utilise des règles de style basées à la fois sur des ID et des classes.

Pour ajouter un fichier CSS

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.

La boîte de dialogue Ajouter un nouvel élément s'affiche.
Dans le volet Modèles 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.

Supprimez la règle de style body puis collez les règles suivantes dans le fichier.

#pagecontainer {
    width: 800px;
}
#banner {
    height: 126px;
    padding-top: 18px;
    background-color: #DD6B26;
}
#search {
    width: 254px;
    position: absolute;
    top: 115px;
    left: 545px;
    font-family: "Lucida Sans";
    font-size: small;
    color: #930626;
}
#leftsidebar {
    width: 188px;
    float: left;
    padding-right: 10px;
}
#rightsidebar {
    width: 238px;
    float: right;
    padding-left: 6px;
}
#maincontent {
    border-left: 1px solid #DD6B26;
    margin-left: 203px;
    margin-right: 260px;
    padding-left: 13px;
    padding-right: 13px;
}
#footer {
    text-align: center;
    background-color: #DD6B26;
}
h1 {
    font-family: "Lucida Calligraphy";
    font-size: x-large;
    font-weight: bold;
    color: #930626;
    text-align: center;
    height: 42px;
    margin-bottom: 0px;
}
h2 {
    font-family: "Lucida Sans";
    font-variant: small-caps;
    font-size: large;
    color: #307630;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px;
    margin: 0;
    padding: 0;
}
p {
    font-family: "Palatino Linotype";
    font-size: medium;
}

Enregistrez le fichier.

Ajout de règles de style à la feuille de style

Lorsque vous travaillez avec une feuille de style CSS existante, vous pouvez utiliser la fenêtre Gérer les styles pour modifier les règles de style de la feuille de style. Dans cette procédure pas à pas, vous modifiez la page de la disposition en trois colonnes d'origine en une disposition à deux colonnes. Vous allez ensuite supprimer les styles qui correspondent à la disposition d'origine.

Suppression de la colonne de droite et changement de style

Pour modifier la mise en page en une disposition à deux colonnes, vous pouvez supprimer le code qui crée la colonne de droite. Vous pouvez ensuite changer le style des autres éléments pour créer la disposition à deux colonnes.

Pour supprimer le code et la mise en forme de la colonne de droite

En mode Design, basculez vers la page Default.aspx ou ouvrez-la.
Depuis l'Explorateur de solutions, faites glisser le fichier .css que vous avez créé et déplacez-le sur la page.

Cette action lie le fichier .css à la page actuelle. La page change pour refléter les styles définis dans le fichier .css.
Basculez en mode Source.
Supprimez l'élément div qui démarre avec <div id="rightsidebar" class="column">.
Enregistrez le fichier.
Dans le menu Affichage, cliquez sur Gérer les styles.

La fenêtre Gérer les styles s'affiche. (Par défaut, la fenêtre est ancrée.)
Dans la fenêtre Gérer les styles, cliquez avec le bouton droit sur le style #rightsidebar puis cliquez sur Supprimer.

Notes

L'icône du style #rightsidebar n'a pas de crochets doubles autour de lui, ce qui indique qu'il n'est plus utilisé dans la page et peut être supprimé.
Dans la fenêtre Gérer les styles, cliquez avec le bouton droit sur le style #maincontent puis cliquez sur Modifier le style.

La boîte de dialogue Modifier le style s'affiche.
Sous Catégorie, cliquez sur Zone.
Sous marge, modifiez la valeur de la zone droite sur 0.
Cliquez sur OK.
Basculez en mode Design. Vous avez maintenant une disposition à deux colonnes.
Enregistrez le fichier.

Ajout d'une image

Avant de définir le style d'une image, vous devez ajouter l'image au projet et définir la propriété ImageUrl de l'image.

Pour ajouter une image au projet

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

La boîte de dialogue Ajouter un élément existant s'affiche.
Dans la boîte de dialogue, définissez le type de fichier à Fichiers image.
Sélectionnez le fichier image et cliquez sur Ajouter.

Maintenant que l'image a été ajoutée à votre projet, vous devez assigner l'image au contrôle Image qui est déjà sur la page.

Pour assigner une image au contrôle Image

En mode Design, basculez vers le fichier Default.aspx ou ouvrez-le.
Sélectionnez le contrôle Image sur la page.
Dans la fenêtre Propriétés, en regard de ImageUrl, cliquez sur le bouton de sélection (...) pour définir la propriété ImageUrl du contrôle.

La boîte de dialogue Sélectionner l'image s'ouvre.
Sélectionnez l'image que vous avez ajoutée au projet, puis cliquez sur OK.

Ajout de règles de style pour mettre en forme l'image

Pour améliorer le flux du texte autour de l'image, vous pouvez positionner l'image en positionnement flottant sur le bord gauche ou droit de la colonne principale. Vous pouvez également ajouter des marges intérieures, qui déplacent le texte loin de l'image.

Pour ajouter des images à la disposition

Ouvrez ou basculez vers le fichier Layout.css.

Ajoutez le code suivant à la feuille de style.

img {
    margin: 0px;
    border: 1px solid #DD6B26;
    padding: 5px;
}
.floatright {
    margin-left: 10px;
    float:right;
}
.floatleft {
    float: left;
    margin-right: 10px;
}

Enregistrez la feuille de style.
En mode Design, basculez vers le fichier Default.aspx.
Sélectionnez le contrôle Image, qui à ce stade vous indique l'image que vous avez ajoutée au projet.
Dans la fenêtre Gérer les styles, appliquez le style CSS floatright ou le style CSS floatleft au contrôle Image en cliquant avec le bouton droit sur le style CSS et en sélectionnant Appliquer un style.

Le style CSS que vous avez sélectionné est assigné au style img.

Notes

Si l'image est trop volumineuse, l'application du style n'a aucun effet visible sur la position d'image et flux de texte.Dans ce cas, réduisez la taille de l'image avant d'appliquer le style.

Étapes suivantes

Cette procédure pas à pas illustre 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 nouvelle feuille de style. Pour plus d'informations, consultez Procédure pas à pas : création et modification d'un fichier CSS.
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