Vue d'ensemble de l'utilisation de CSS

  • Article

Mise à jour : novembre 2007

Les feuilles de style en cascade (CSS) contiennent des règles de style qui s'appliquent aux éléments d'une page Web. Ces styles définissent comment les éléments sont affichés et où ils sont positionnés dans la page. Visual Studio 2008 fournit des outils que vous pouvez utiliser avec CSS.

Cette rubrique contient les sections suivantes :

  • Scénarios

  • Fonctionnalités des outils CSS

  • Contexte

  • Exemples de code

  • Référence de classe

  • Nouveautés

Scénarios

Dans Visual Studio 2008, pendant que vous utilisez le concepteur pour créer et modifier des pages Web, vous pouvez écrire des règles de style intraligne, contenues dans une page Web ou contenues dans une feuille de style externe. Vous pouvez consulter le remplissage et les marges appliqués aux éléments de page en utilisant des aides visuelles. Vous pouvez également positionner des éléments à l'aide des outils de positionnement.

Retour au début

Fonctionnalités des outils CSS

Visual Studio 2008 fournit un jeu d'outils pour créer, appliquer et gérer des styles et des feuilles de style en cascade (CSS). Ces outils incluent les éléments suivants :

  • La fenêtre Appliquer des styles vous permet de créer, modifier et appliquer des styles. Vous pouvez également lier ou supprimer une feuille de style CSS externe. La fenêtre identifie des types de style et vous indique si le style est utilisé dans la page Web actuelle, en vous précisant en outre s'il est utilisé par la sélection actuelle. Pour plus d'informations, consultez Comment : utiliser les fenêtres Appliquer des styles et Gérer les styles.

  • La fenêtre Gérer les styles fournit plusieurs des fonctionnalités de la fenêtre Appliquer des styles. Toutefois, vous pouvez utiliser la fenêtre Gérer les styles pour déplacer des styles d'une feuille de style interne (un élément de style dans une page) vers une feuille de style externe et inversement. Vous pouvez également l'utiliser pour déplacer des styles à l'intérieur d'une feuille de style. Pour plus d'informations, consultez Comment : utiliser les fenêtres Appliquer des styles et Gérer les styles.

  • La fenêtre Propriétés CSS indique les styles utilisés par la sélection actuelle dans une page Web. Elle indique également l'ordre de priorité des styles. En outre, la fenêtre vous fournit une liste complète de toutes les propriétés CSS. Cela vous permet d'ajouter des propriétés à un style existant, de modifier des propriétés que vous avez déjà définies et de créer des styles intralignes. Pour plus d'informations, consultez Comment : utiliser la fenêtre Propriétés CSS.

  • La barre d'outils Application de style directe permet d'appliquer ou supprimer des styles en fonction de leur classe ou de leur ID, et de créer et appliquer de nouveaux styles. Elle permet de mieux contrôler les styles générés par Visual Studio. Pour plus d'informations, consultez Comment : utiliser la barre d'outils Application de style directe.

  • Le sélecteur de balise permet de sélectionner des balises HTML en travaillant dans une page Web. La barre du sélecteur de balise est affichée au bas de la fenêtre de modification. Lorsque vous positionnez le curseur à tout endroit sur la page, la barre du sélecteur rapide de balise vous indique la balise HTML sous-jacente pour cette zone. Vous pouvez également utiliser la touche ÉCHAP pour remonter la hiérarchie HTML et sélectionner des balises imbriquées à l'intérieur de d'autres balises. Pour plus d'informations, consultez Navigation de balises dans l'éditeur HTML de Visual Web Developer.

Retour au début

Contexte

Au lieu d'assigner individuellement des attributs de mise en forme à chaque élément d'une page, vous pouvez créer des règles de style. Ces règles appliquent des valeurs de propriété (en général des règles de mise en forme) lorsqu'un navigateur Web rencontre une instance d'un élément, ou un élément ayant un ID spécifique ou une classe de style.

Pour utiliser des styles CSS, vous devez comprendre comment créer un style et l'appliquer. Cette section contient des informations de la spécification de W3C CSS à propos des styles CSS et des outils de Visual Studio 2008 qui facilitent l'utilisation de styles CSS.

Définition de règles de style CSS

Chaque règle de style CSS (également appelée style) comporte deux parties principales : un sélecteur (par exemple, h1) et une déclaration (par exemple, color:blue). La déclaration est formée d'une propriété (color) et de sa valeur (blue). La syntaxe d'une règle de style est la suivante :

Selector { property : value ; property2 : value2}

Par exemple, la règle de style CSS suivante spécifie que tout le texte de tous les éléments h1 doit être centré et avoir une couleur de police bleue.

h1 {text-align:center; color:blue;}

Utilisation des différents types de styles

Vous pouvez définir une règle de style qui s'applique à un élément, à un élément ayant une classe assignée, ou à un élément par ID. Un style est défini par son ensemble de règles, qui se compose d'un sélecteur suivi d'un bloc de déclarations de propriété qui apparaissent entre une accolade ouvrante ({) et une accolade fermante (}). Chaque type de style se distingue des autres types par son sélecteur. Un sélecteur basé sur une classe est précédé d'un point (.). Un sélecteur basé sur un ID est précédé d'un signe dièse (#). Le sélecteur d'un style basé sur un élément se compose uniquement du nom de l'élément HTML, tel que h1.

Styles basés sur un élément

Les styles basés sur un élément définissent des propriétés à appliquer à chaque instance d'un élément HTML particulier. (Les styles basés sur un élément peuvent être remplacés par des styles basés sur une classe ou un ID pour les instances individuelles d'un élément.) Par exemple, vous pouvez souhaiter créer une marge de 25 pixels autour de tous les paragraphes (contenu figurant dans les éléments p ). Pour ce faire, vous devez créer un style basé sur un élément qui utilise l'élément p comme sélecteur et qui contient des déclarations pour les propriétés de marge. L'exemple suivant affiche cette règle de style basée sur un élément.

p { margin-left: 25px; margin-right: 25px }

Styles basés sur une classe

Les styles basés sur une classe définissent des propriétés à appliquer à un sous-ensemble d'un type d'élément particulier (par exemple, à certains des éléments p mais pas à tous). Ils peuvent également s'appliquer à différents types d'éléments, tels que des éléments p et des éléments span. L'exemple suivant affiche une règle de style basée sur une classe. Le nom introduction désigne le sélecteur du style (nom de la classe).

.introduction {font-size: small; color: white}

L'exemple suivant indique comment spécifier une classe pour une balise <p> :

<p class="introduction">

Styles basés sur un ID

Les styles basés sur un ID définissent des propriétés à appliquer aux éléments spécifiques identifiés par leur attribut d'ID. Le style basé sur ID est bien souvent utilisé pour mettre en forme un seul élément HTML dans une page Web. L'exemple suivant illustre un style basé sur un ID. Le nom footer spécifie l'ID auquel ce style s'applique.

#footer {background-color: #CCCCCC; margin: 15px}

L'exemple suivant indique comment spécifier un ID pour une balise <p> :

<p id="footer">

Écriture de styles CSS

Vous pouvez écrire des règles de style CSS à plusieurs endroits, notamment :

  • Inline avec le balisage HTML.

  • Dans un élément style d'une page Web.

  • Dans une feuille de style externe (fichier .css) liée ou importée dans la page Web.

En général, vous écrivez des règles qui s'appliquent à l'ensemble d'un site Web dans une feuille de style externe. Les règles de style qui s'appliquent à une seule page se définissent dans l'élément style de la page. Les règles de style qui s'appliquent à un seul élément se définissent par un style intraligne. De nombreux concepteurs et développeurs se sont aperçus que la création de toutes les règles de style dans une ou plusieurs feuilles de style externes facilitent leur maintenance.

Définition de styles intralignes

Une règle de style intraligne se définit dans la balise d'ouverture d'un élément en utilisant l'attribut de style. Utilisez un style intraligne pour définir des propriétés qui s'appliquent à un seul élément d'une page Web et qui ne seront pas réutilisées.

Un exemple de style intraligne est illustré ci-dessous.

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Création des styles CSS internes (spécifiques à la page)

Les règles de style CSS peuvent être définies dans un élément style à l'intérieur de l'élément head d'une page Web. Dans ce cas, les règles de style s'appliquent uniquement aux éléments de cette page.

L'exemple suivant montre comment définir et appliquer une règle de style CSS à tous les éléments h1 d'une page Web :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>HTML 4.0 CSS Element Style Example</title>
      <style type="text/css">        h1{text-align:center; color:blue;}      </style>
  </head>
  <body>
    <h1>This text is centered and blue</h1>
  </body>
</html>

Sur cette page Web, tout le texte qui apparaît entre les balises <h1> et </h1> sera centré et affiché en bleu. Vous n'aurez pas besoin de réassigner ces attributs de style à chaque occurrence d'un élément h1 à l'intérieur du document. Si vous souhaitez modifier la couleur (ou toute autre propriété) de tout le texte dans les éléments h1, vous pouvez modifier une règle de style.

Création de feuilles de style en cascade externes

Une feuille de style externe est un fichier texte dont le nom est suivi de l'extension .css et qui contient uniquement des règles de style. Vous pouvez lier une feuille de style à une page Web en utilisant un élément link, comme illustré dans l'exemple suivant.

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

Cet élément link applique à la page actuelle les règles de style dans la feuille de style externe myStyles.css.

Les règles de style répertoriées dans une feuille de style externe s'écrivent de la même façon que dans un élément style. Elles ne sont toutefois pas délimitées par des balises <style> et </style>. L'exemple suivant affiche le contenu complet d'un fichier .css simple.

h1 { text-align:center; color:blue; } 
.head2 { font-size:14pt; text-align:center; color:blue; font-weight:bold; font-style:italic; }

Vous pouvez lier une feuille de style externe à plusieurs pages HTML pour appliquer les styles sur l'ensemble d'un site Web. Les feuilles de style couvrent des règles de mise en forme séparées de contenu. Elles simplifient la gestion des règles de style.

Fonctionnement de la priorité des règles de style CSS

On dit que les règles de style CSS sont en « cascade » dans le sens où elles suivent un ordre de priorité. Les règles de style globales s'appliquent en premier aux éléments HTML et les règles de style locales s'y substituent. Par exemple, un style défini dans un élément style d'une page Web se substitue à un style défini dans une feuille de style externe. De même, un style intraligne défini dans un élément HTML de la page se substitue à tous les styles définis ailleurs pour ce même élément.

Les règles de style globales individuelles qui ne sont pas remplacées par les règles de style CSS locales s'appliquent aux éléments, même après l'application des styles locaux. Dans l'exemple de la section précédente, les styles CSS locaux qui régissent le texte dans l'élément h1 remplacent certaines des règles de style globales du navigateur Web pour le texte h1 (texte h1 centré et affiché en bleu). Toutefois, ils ne changent pas tous les styles disponibles, tels que les caractéristiques de police. Les règles de style globales et locales sont appliquées dans cet ordre. Le résultat est que tout le texte h1 sur la page s'affiche dans une police de plus grande taille grasse, centrée et bleue.

Exemples de code

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

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

Comment : utiliser la fenêtre Propriétés CSS

Comment : utiliser les fenêtres Appliquer des styles et Gérer les styles

Comment : utiliser la barre d'outils Application de style directe

Retour au début

Référence de classe

Aucune classe ne s'applique aux outils CSS.

Retour au début

Nouveautés

Visual Studio 2008 dispose à présent d'une riche expérience d'édition CSS avec plusieurs nouveaux outils pour simplifier l'utilisation des feuilles de style en cascade (CSS). L'essentiel du travail de conception de la disposition et du contenu des styles peut être effectué en mode Design à l'aide de la fenêtre des propriétés CSS, des fenêtres Appliquer des styles et Gérer les styles, ainsi que de l'outil Application de style directe. Vous pouvez également modifier le positionnement, le remplissage et les marges en mode Design à l'aide des outils de disposition visuels WYSIWYG.

Retour au début

Voir aussi

Concepts

Navigation de balises dans l'éditeur HTML de Visual Web Developer

Mise en forme d'éléments dans l'éditeur HTML de Visual Web Developer