Description des feuilles de style en cascade

Les feuilles de style en cascade (CSS) regroupent des règles de formatage qui déterminent l’aspect du contenu d’une page web. Quand vous utilisez des styles CSS pour mettre une page en forme, vous séparez le contenu de la présentation. Le contenu de votre page (le code HTML) réside dans le fichier HTML, tandis que les règles CSS qui définissent la présentation du code résident dans un autre fichier (une feuille de style externe) ou dans une autre partie du document HTML (généralement dans la section head). La séparation du contenu et de la présentation facilite considérablement la gestion de l’aspect de votre site à partir d’un point central car vous n’avez pas besoin de mettre à jour les propriétés de toutes les pages chaque fois que vous souhaitez apporter une modification. La séparation du contenu et de la présentation se traduit également par un code HTML simplifié et mieux structuré qui permet de raccourcir les temps de chargement pour les navigateurs, et elle simplifie la navigation pour les personnes ayant des problèmes d’accessibilité (par exemple, qui utilisent des lecteurs d’écran).

CSS vous offre une plus grande souplesse et une plus grande maîtrise de l’aspect de votre page. Les feuilles de style CSS vous permettent de contrôler de nombreuses propriétés de texte, notamment les polices de caractères et les tailles de police, les styles gras, italique, soulignement et les ombres du texte, la couleur du texte et la couleur d’arrière-plan, la couleur des liens et le soulignement des liens, etc. En utilisant CSS pour contrôler vos polices de caractères, vous vous assurez d’un traitement plus cohérent de la mise en page et de l’aspect de votre page dans différents navigateurs.

Outre le formatage du texte, CSS permet de gérer le format et le positionnement des blocs d’éléments d’une page web. Un élément de niveau bloc est un contenu autonome, généralement séparé par une nouvelle ligne dans le code HTML, et formaté visuellement comme un bloc. Par exemple, les balises h1, les balises p et les balises div produisent toutes des éléments de niveau bloc sur une page web. Vous pouvez définir des marges et des bordures pour les éléments de niveau bloc, les placer dans un emplacement spécifique, leur ajouter une couleur d’arrière-plan, faire flotter du texte autour d’eux, etc. C’est essentiellement en manipulant des éléments de niveau bloc que vous réalisez des mises en page avec CSS.

À propos des règles CSS

Une règle de formatage CSS se compose de deux entités : le sélecteur et la déclaration (ou dans la plupart des cas, un bloc de déclarations). Le sélecteur est un terme (tel que p, h1, un nom de classe ou un identifiant) qui identifie l’élément mis en forme tandis que le bloc de déclaration définit quelles sont les propriétés de style. Dans l’exemple suivant, h1 correspond au sélecteur tandis que tout ce qui est placé entre les crochets ({}) correspond à la déclaration :

La déclaration est composée de deux entités : la propriété (par exemple, font-family) et la valeur (par exemple, Helvetica). Dans la règle CSS précédente, un style particulier a été créé pour les balises h1 : le texte de toutes les balises H1 liées à ce style sera associé à une police Helvetica, d’une taille de 16 pixels et en gras.

Le style (qui est défini par une règle ou par un groupe de règles) se trouve dans un emplacement distinct de celui du formatage du texte réel, généralement dans une feuille de style externe ou dans la section head du document HTML. Ainsi, une règle concernant les balises h1 peut s’appliquer à de nombreuses balises à la fois (et dans le cas de feuilles de style externes, la règle peut s’appliquer à de nombreuses balises à la fois dans un grand nombre de pages différentes). De cette façon, CSS offre une capacité de mise à jour extrêmement aisée. Lorsque vous mettez à jour une règle CSS dans un emplacement, le formatage de tous les éléments qui utilisent le style défini est automatiquement mis à jour en fonction du nouveau style.

Vous pouvez définir les types de styles suivants sous Dreamweaver :

• Les styles de classe vous permettent d’appliquer des propriétés de style à tout élément de la page.

• Les styles appliqués aux balises HTML redéfinissent le formatage d’une balise spécifique, telle que h1. Lorsque vous créez ou modifiez un style CSS pour la balise h1, tout le texte formaté à l’aide de cette balise h1 est immédiatement modifié en conséquence.

• Les styles avancés redéfinissent le formatage pour une combinaison particulière d’éléments ou pour d’autres formes du sélecteur admises par CSS (par exemple, le sélecteur td h2 s’applique chaque fois qu’un en-tête h2 apparaît dans une cellule de tableau). Les styles avancés peuvent également redéfinir le formatage pour des balises qui contiennent un attribut id (identifiant) (par exemple, les styles définis par #myStyle s’appliquent à toutes les balises qui contiennent la paire valeur-attribut id="myStyle").

Les règles CSS peuvent se trouver aux emplacements suivants :

Ensembles de règles CSS enregistrées dans un fichier .css externe distinct (pas dans un fichier HTML). Ce fichier est lié à une ou plusieurs pages d’un site web à l’aide d’un lien ou d’une règle @import qui se trouve dans la section head d’un document.

Ensembles de règles CSS incluses dans une balise style de la section head d’un document HTML.

Définis dans des instances spécifiques de balises dans un document HTML. L’utilisation de styles en ligne n’est pas recommandée.

Dreamweaver reconnaît les styles définis dans des documents existants, pour peu qu’ils soient conformes aux recommandations des feuilles de style CSS. Dreamweaver restitue également la plupart des styles appliqués directement en mode Création. Toutefois, la prévisualisation d’un document dans une fenêtre de navigateur vous permet d’obtenir le rendu direct le plus précis de la page. Certains styles CSS s’affichent différemment dans Microsoft Internet Explorer, Netscape Navigator, Opera, Apple Safari ou d’autres navigateurs, et certains ne sont actuellement pris en charge par aucun navigateur.

À propos des styles en cascade

Le terme en cascade fait référence à la façon dont un navigateur affiche finalement les styles pour des éléments spécifiques d’une page web. Trois sources sont responsables des styles visibles sur une page web : la feuille de style créée par l’auteur de la page, les éventuelles sélections de style personnalisées de l’utilisateur, et les styles par défaut du navigateur. Les sections précédentes expliquent la création de styles pour une page web par l’auteur de la page web et de la feuille de style qui y est associée. Toutefois, les navigateurs possèdent eux aussi des feuilles de style par défaut, qui déterminent la restitution des pages web. En outre, les utilisateurs peuvent personnaliser leurs navigateurs en effectuant des sélections qui déterminent l’affichage des pages web. L’apparence finale d’une page web est le résultat de la combinaison (cascade) des règles de ces trois sources, qui permet de restituer la page web de manière optimale.

Ce concept va être illustré par une balise courante, la balise de paragraphe (<p>). Par défaut, les navigateurs comportent des feuilles de style qui définissent la police et la taille de police du texte des paragraphes, c’est-à-dire le texte placé entre balises <p> dans le code HTML. Ainsi, dans Internet Explorer, tout le texte du corps, y compris celui des paragraphes, s’affiche par défaut dans la police Times New Roman de taille moyenne.

Toutefois, si vous êtes l’auteur d’une page web, vous pouvez créer une feuille de style qui remplace le style par défaut du navigateur pour ce qui est de la police et de la taille de police. Par exemple, vous pouvez créer la règle suivante dans votre feuille de style :

Lorsqu’un utilisateur charge la page, les paramètres de police du paragraphe et de taille de police que vous, auteur, avez définis, remplacent les paramètres par défaut du navigateur en la matière.

Les utilisateurs peuvent effectuer des sélections pour personnaliser l’affichage du navigateur selon leurs attentes. Par exemple, dans Internet Explorer, l’utilisateur peut choisir Affichage > Taille du texte > La plus grande, de manière à agrandir la police et la rendre plus lisible. En fin de compte (du moins, dans ce cas), la sélection de l’utilisateur remplace à la fois les styles par défaut du navigateur pour la taille de police par défaut dans les paragraphes, et les styles de paragraphe créés par l’auteur de la page web.

L’héritage est un autre élément important de la cascade. Les propriétés de la plupart des éléments d’une page web sont héritées. Par exemple, les balises de paragraphe héritent de certaines propriétés des balises body, les balises span de certaines propriétés des balises de paragraphe, et ainsi de suite. Ainsi, vous pouvez créer la règle suivante dans votre feuille de style :

Tout le texte des paragraphes de votre page web (ainsi que le texte qui hérite des propriétés de la balise de paragraphe) sera en Arial italique, car la balise de paragraphe hérite de ces propriétés à partir de la balise body. Vous pouvez toutefois préciser vos règles et créer des styles supplantant la formule d’héritage standard. Par exemple, vous pouvez créer les règles suivantes dans votre feuille de style :

Tout le texte du corps est en Arial italique, sauf le texte des paragraphes (et celui des balises héritières), qui s’affiche en Courier normal (non italique). D’un point de vue technique, la balise de paragraphe hérite tout d’abord des propriétés définies pour la balise body, puis elle ignore celles-ci, car des propriétés ont été définies spécifiquement pour elle. En d’autres termes, bien que les éléments de page héritent généralement des propriétés supérieures, l’application directe d’une propriété à une balise entraîne toujours l’écrasement de la formule d’héritage standard.

La combinaison de tous les facteurs exposés ci-dessus et d’autres facteurs, tels que la spécificité CSS (un système qui attribue un poids différent à des types précis de règles CSS) et l’ordre des règles CSS, finit par créer une cascade complexe, où les éléments aux priorités les plus élevées écrasent les éléments aux propriétés les plus basses. Pour plus d’informations sur les règles en matière de cascade, d’héritage et de spécificité, visitez le site www.w3.org/TR/CSS2/cascade.html.

À propos du formatage de texte et de CSS

Par défaut, Dreamweaver utilise des feuilles de style en cascade (CSS) pour mettre le texte en forme. Les styles appliqués au texte à l’aide de l’inspecteur Propriétés ou des commandes de menu génèrent des règles CSS intégrées à la section head du document.

Vous pouvez également utiliser CSS Designer pour créer et modifier des règles et des propriétés CSS. CSS Designer est un éditeur beaucoup plus robuste que l’inspecteur Propriétés et affiche toutes les règles CSS définies pour le document actuel, que ces règles soient intégrées à la section head du document ou dans une feuille de style externe. Adobe vous recommande d’utiliser CSS Designer (plutôt que l’inspecteur Propriétés) comme outil principal pour la création et la modification de votre langage CSS. Ainsi, votre code sera plus clair et sa maintenance en sera simplifiée.

Pour plus d’informations sur CSS Designer, consultez la section Mise en forme des pages avec CSS Designer.

Outre les styles et feuilles de style de votre composition, libre à vous d’utiliser les feuilles de style livrées avec Dreamweaver pour appliquer des styles à vos documents

Pour accéder à un tutoriel relatif au formatage de texte avec CSS, voir www.adobe.com/go/vid0153_fr.

À propos des propriétés de la forme courte des styles CSS

La spécification CSS permet la création de styles à l’aide d’une syntaxe abrégée appelée forme courte des styles CSS. Elle permet de spécifier la valeur de plusieurs propriétés à l’aide d’une seule déclaration. Par exemple, la propriété font vous permet de définir les propriétés font-style, font-variant, font-weight, font-size, line-height et font-family sur une seule ligne.

Il est important de savoir que sous forme courte, les propriétés dont la valeur est omise reçoivent leur valeur par défaut. Certaines pages risquent donc de s’afficher incorrectement lorsque plusieurs règles CSS sont attribuées à la même balise.

Par exemple, la règle h1 ci-dessous utilise la syntaxe longue. Remarquez que les propriétés font-variant, font-stretch, font-size-adjust et font-style ont reçu leur valeur par défaut.

Insérée en tant que propriété unique sous forme courte, la même règle pourrait se présenter ainsi :

Sous forme courte, les propriétés dont la valeur est omise reçoivent automatiquement leur valeur par défaut. Ainsi, l’exemple de forme abrégée ci-dessus omet les balises font-variant, font-style, font-stretch et font-size-adjust.

Si des styles sont définis en plusieurs emplacements (par exemple, incorporés dans une page HTML et importés d’une feuille de style externe) sous deux formes, longue et courte, n’oubliez pas que les propriétés omises dans une règle de notation abrégée risquent d’écraser les propriétés explicitement définies dans une autre règle (on parle de styles en cascade).

Dreamweaver utilise donc la forme longue par défaut. Ceci permet d’éviter qu’une règle de notation abrégée ne remplace une règle de notation longue. Si vous ouvrez une page web codée en forme courte sous Dreamweaver, n’oubliez pas que Dreamweaver crée toutes les nouvelles règles CSS sous forme longue. Pour spécifier la façon dont Dreamweaver crée et modifie les règles CSS, vous pouvez modifier les préférences de modification CSS dans la catégorie Styles CSS de la boîte de dialogue Préférences (Édition > Préférences dans Windows ; Dreamweaver > Préférences sur Mac).

Dreamweaver et CSS

Dans Dreamweaver, vous pouvez utiliser le langage CSS de différentes façons :

• Vous pouvez utiliser CSS Designer pour créer votre propre CSS avec un minimum de codage. Pour plus d’informations, voir Mise en forme de pages avec CSS Designer. 
• Vous pouvez également coder votre CSS à la main. Pour en savoir plus sur les fonctionnalités de codage proposées par Dreamweaver, voir Environnement de codage dans Dreamweaver.
• Si vous préférez travailler avec des fichiers Sass, Scss ou Less, vous pouvez les coder avec votre syntaxe préférée et utiliser le résultat dans Dreamweaver. Pour plus d’informations, voir Préprocesseurs CSS.