Générateur de styles, boîte de dialogue
Mise à jour : novembre 2007
La boîte de dialogue Générateur de styles fournit des options permettant de définir les attributs de style de la feuille de style en cascade (CSS). Un style CSS combine mise en forme individuelle et attributs de positionnement en un ensemble unique d'attributs que vous pouvez appliquer en une seule fois.
La boîte de dialogue Générateur de styles se divise en deux volets. Le volet gauche répertorie huit catégories générales (Police, Arrière-plan, Texte, Position, Disposition, Bords, Listes et Autre). Lorsque vous sélectionnez une catégorie, le volet de droite affiche les options correspondant à cette catégorie. Au fur et à mesure que vous sélectionnez des options de style, la boîte de dialogue Générateur de styles crée des définitions de style CSS.
Vous pouvez appliquer les attributs de style CSS directement dans des éléments HTML individuels sur une page Web ou ajouter des attributs de style aux règles de style CSS stockées dans des feuilles de style externes. Les feuilles de style externes peuvent servir à définir en une seule fois une apparence commune pour un grand nombre de pages Web.
Pour afficher la boîte de dialogue Générateur de styles
Cliquez sur Format dans le menu principal, puis sur Style.
La boîte de dialogue Générateur de styles s'affiche.
Sélectionnez une option dans le volet gauche pour définir des attributs de style CSS.
Génération de styles CSS en ligne en mode Design
Si vous mettez en forme un élément HTML sélectionné en mode Design, les attributs de style sont insérés en ligne dans le code correspondant à l'élément. Passez en mode HTML afin de vérifier et de régler les nouveaux attributs de style qui ont été insérés.
Pour appliquer directement des attributs de style CSS aux éléments HTML de la page Web
Ouvrez le document HTML en mode Design du Concepteur HTML.
Ouvrez la fenêtre Structure du document, sélectionnez un élément à mettre en forme, puis, dans le menu Format, cliquez sur Style afin d'ouvrir la boîte de dialogue Générateur de styles.
Sélectionnez une option dans le volet gauche pour définir des attributs de style CSS.
Le titre de la boîte de dialogue Générateur de styles inclura le nom de l'élément sélectionné. Les styles CSS peuvent être appliqués aux éléments situés dans l'élément <BODY> de votre document HTML.
Balisage de style CSS en mode HTML
Lorsque vous ajoutez un style en ligne à un élément HTML en mode Design, vous ajoutez du balisage HTML à sa balise d'ouverture, que vous pouvez ensuite afficher et modifier en mode HTML, comme dans l'exemple de code suivant.
<DIV style="font-size:9pt; font-weight:bold; color:darkblue;">CSS Styles</DIV>
Vous pouvez également créer un bloc STYLE dans l'élément <HEAD> de votre document HTML. Par exemple :
<STYLE TYPE="text/css">
BODY {background:#FBFBFB; font-family:Verdana, Arial, Helv, Geneva, Helvetica, sans-serif; font-size:9pt;}
A:link {color:blue;text-decoration:none}
A:active {color:red;text-decoration:none}
A:visited {color:blue;text-decoration:none}
.term { font-size:9pt; font-weight:bold; color:darkblue;}
</STYLE>
Styles CSS dans les feuilles de style externes
Vous pouvez également créer des styles dans un document de feuille de styles distinct portant l'extension .css.
Pour créer des styles dans un document de feuille de styles distinct portant l'extension .css
Ouvrez une feuille de styles externe (document .css) pour la modifier ou, si vous n'en disposez pas dans l'application Web, créez-en une en suivant ces étapes :
Cliquez avec le bouton droit sur le site Web puis cliquez sur Ajouter un nouvel élément.
Dans la liste Modèles Visual Studio installés de la boîte de dialogue Ajouter un nouvel élément , sélectionnez feuille de styles puis cliquez sur Ajouter pour ajouter une nouvelle feuille de styles à votre site Web.
Double-cliquez sur la feuille de styles pour l'ouvrir et la modifier.
Cliquez sur Ajouter une règle de style dans le menu Styles pour insérer une nouvelle définition de style vierge.
Placez le point d'insertion dans les accolades ({}) qui suivent le sélecteur de règle de style, cliquez sur Styles, puis sur Générer un style dans le menu Styles pour ouvrir la boîte de dialogue Générateur de styles et ajouter des attributs à la définition de style.
.gif "Remarque") Remarque : |
|---|
Le menu Styles, dont les options comprennent Ajouter une règle de style et Générer un style, apparaît lorsque vous ouvrez une feuille de styles CSS externe pour la modifier. Dans le menu Styles, l'option Générer un style devient disponible lorsque vous placez le point d'insertion entre les accolades qui suivent le sélecteur d'une règle de style. |
Pour que les styles définis dans une feuille de styles externe soient disponibles pour les éléments HTML d'une page Web, créez un lien vers une feuille de styles externe dans l'élément <HEAD> de la page, comme dans l'exemple de code suivant.
<LINK REL=stylesheet Type="text/css" HREF="Mystyles.css">
Application de définitions de style à des éléments par CLASS et ID
Commencez une définition de style par un point pour définir une propriété de style CLASS, comme dans l'exemple de code suivant.
.term { font-size:9pt; font-weight:bold; color:darkblue;}
Vous pouvez appliquer une propriété CLASS de style définie à un élément de la page Web en mode Design ou HTML du Concepteur HTML. En mode Design, vous pouvez soit sélectionner du texte ou des éléments dans l'éditeur WYSIWYG, soit utiliser la fenêtre Structure du document pour sélectionner des éléments. Sélectionnez un style dans le menu déroulant Style de la barre d'outils Format pour qu'il s'applique à l'élément sélectionné.
En mode HTML, vous pouvez utiliser la fenêtre Structure du document pour sélectionner l'élément, ouvrir la fenêtre Propriétés, accéder à la propriété CLASS de l'élément sélectionné, puis entrer le sélecteur du style CSS voulu (sans le point). Une propriété CLASS sera alors insérée dans le balisage HTML correspondant à l'élément. Par exemple :
<DIV CLASS="term">World Wide Web</DIV>
Avec la définition précédente du style "term", les mots "World Wide Web" apparaîtront dans une police 9pt, en gras et en bleu foncé.
Vous pouvez également définir des styles uniques utilisés à un seul emplacement dans une page. Commencez le nom d'un style unique par un signe dièse (#), comme dans l'exemple de code suivant.
#bigdeal {font-decoration:underline; font-size:24pt; color:red;}
Pour appliquer un style unique à un élément de la page Web
Ouvrez la page en mode HTML du Concepteur HTML.
Utilisez la fenêtre Structure du document pour sélectionner l'élément, puis ouvrez la fenêtre Propriétés
Pour la propriété ID de cet élément, entrez le sélecteur du style désiré.
Un attribut ID est alors inséré dans le balisage correspondant à l'élément. Par exemple :
<P ID="bigdeal">Happy Birthday</P>
- Avec la définition précédente du style "term", les mots "Joyeux anniversaire" apparaîtront dans une police 24pt, soulignés et en rouge.
Tâches
Procédure pas à pas : modification de base du code HTML dans Visual Web Developer
Procédure pas à pas : création et modification d'un fichier CSS
Éléments d'interface
Pour en savoir plus sur les options relatives aux éléments suivants |
Voir |
|---|---|
Polices |
|
Arrière-plans |
|
Texte |
|
Position des éléments sur une page |
|
Contrôle du flux, débordement, découpage et impression des sauts de page |
|
Bordures, marges et marge intérieure |
|
Listes |
|
Interface utilisateur, tables et effets visuels |
Voir aussi
Concepts
Vue d'ensemble de l'utilisation de CSS