Utilisez cette rubrique pour explorer les concepts de base de CSS, tels que les règles CSS, les sélecteurs, l’héritage et bien plus encore. Découvrez également comment associer des CSS avec vos pages web sous Dreamweaver.
À propos des feuilles de style en cascade
Les feuilles de style en cascade (CSS) constituent une collection de règles de mise en forme qui contrôlent l'apparence du contenu dans une page web. L'utilisation des styles CSS pour mettre en forme une page sépare le contenu de la présentation.Le contenu de la page (le code HTML) réside dans le fichier HTML, et 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 la section d'en-tête). Séparer le contenu de la présentation facilite grandement la maintenance de l'apparence du site depuis un emplacement central, car vous n'avez pas besoin de mettre à jour chaque propriété sur chaque page à chaque modification. Séparer le contenu de la présentation permet également d'obtenir un code HTML plus simple et plus propre, ce qui réduit les temps de chargement du navigateur et simplifie la navigation pour les personnes ayant des problèmes d'accessibilité (par exemple, celles utilisant des lecteurs d'écran).
CSS vous donne une grande flexibilité et un contrôle sur l'apparence exacte de la page. Avec CSS, vous pouvez contrôler de nombreuses propriétés de texte, notamment des polices et des tailles de police spécifiques ; le gras, l'italique, le soulignement et les ombres de texte ; la couleur du texte et la couleur d'arrière-plan ; la couleur des liens et le soulignement des liens ; et bien plus encore. En utilisant CSS pour contrôler les polices, vous pouvez également assurer un traitement plus cohérent de la mise en page et de l'apparence sur plusieurs navigateurs.
En plus de la mise en forme du texte, vous pouvez utiliser CSS pour contrôler le format et le positionnement des éléments de niveau bloc dans une page web.Un élément de niveau bloc est un élément de contenu autonome, généralement séparé par une nouvelle ligne dans le HTML, et visuellement formaté comme un bloc. Par exemple, les balises h1, p et 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 positionner à un emplacement spécifique, leur ajouter une couleur d'arrière-plan, faire flotter le texte autour d'eux, et ainsi de suite. La manipulation des éléments de niveau bloc constitue essentiellement la façon de créer des mises en page avec CSS.
À propos des règles CSS
Une règle de mise en forme CSS se compose de deux parties : 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 formaté, et le bloc de déclaration définit les propriétés de style. Dans l'exemple suivant, h1 est le sélecteur, et tout ce qui se trouve entre les accolades ({}) constitue le bloc de déclaration :
H1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
Une déclaration individuelle se compose de deux parties : la propriété (telle que font-family) et la valeur (telle que 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 aura une taille de 16 pixels, une police Helvetica et sera en gras.
Le style (qui provient d'une règle ou d'une collection de règles) réside dans un emplacement distinct du texte qu'il met en forme, généralement dans une feuille de style externe ou dans la partie d'en-tête d'un document HTML.Ainsi, une règle pour les balises h1 peut s'appliquer à de nombreuses balises à la fois (et dans le cas des feuilles de style externes, la règle peut s'appliquer à de nombreuses balises à la fois sur de nombreuses pages différentes). De cette manière, CSS facilite grandement les mises à jour.Lorsque vous mettez à jour une règle CSS à un endroit, la mise en forme de tous les éléments qui utilisent le style défini est automatiquement mise à jour selon le nouveau style.
Vous pouvez définir les types de styles suivants dans Dreamweaver :
Les styles de classe vous permettent d'appliquer des propriétés de style à n'importe quel élément ou éléments sur la page.
Les styles de balises HTML redéfinissent la mise en forme pour une balise particulière, telle que h1.Lorsque vous créez ou modifiez un style CSS pour la balise h1, tout le texte formaté avec la balise h1 est immédiatement mis à jour.
Les styles avancés redéfinissent le formatage pour une combinaison particulière d'éléments, ou pour d'autres formes de sélecteur autorisées par CSS (par exemple, le sélecteur td h2 s'applique lorsqu'un en-tête h2 apparaît dans une cellule de tableau.) Les styles avancés peuvent également redéfinir le formatage pour les balises qui contiennent un attribut id spécifique (par exemple, les styles définis par #myStyle s'appliquent à toutes les balises qui contiennent la paire attribut-valeur id="myStyle").
Les règles CSS peuvent se trouver aux emplacements suivants :
Feuilles de style CSS externes
Collections de règles CSS stockées dans un fichier CSS (.css) externe et séparé (pas un fichier HTML). Ce fichier est lié à une ou plusieurs pages d'un site web en utilisant un lien ou une règle @import dans la section d'en-tête d'un document.
Feuilles de style CSS internes (ou imbriquées)
Collections de règles CSS incluses dans une balise style dans la partie d'en-tête d'un document HTML.
Styles en ligne
Définies dans des instances spécifiques de balises via un document HTML. L’utilisation de styles en ligne n’est pas recommandée.
Dreamweaver reconnaît les styles définis dans les documents existants tant qu'ils respectent les règles de style CSS.Dreamweaver affiche également la plupart des styles appliqués directement en mode Création.(L'aperçu du document dans une fenêtre du navigateur, cependant, vous donne le rendu « en direct » le plus précis de la page.) Certains styles CSS sont générés différemment dans Microsoft Internet Explorer, Netscape, Opera, Apple Safari ou d'autres navigateurs, et certains ne sont pas 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 sur une page web. Trois sources différentes sont responsables des styles que vous voyez sur une page web : la feuille de style créée par l'auteur de la page, les sélections de style personnalisées de l'utilisateur (le cas échéant), et les styles par défaut du navigateur lui-même. Les sujets précédents décrivent la création de styles pour une page web en tant qu'auteur de la page web et de la feuille de style attachée à cette page. Mais les navigateurs ont également leurs propres feuilles de style par défaut qui dictent le rendu des pages web, et en plus de cela, les utilisateurs peuvent personnaliser leurs navigateurs en effectuant des sélections qui ajustent l'affichage des pages web. L'apparence finale d'une page web est le résultat des règles de ces trois sources se rassemblant (ou « en cascade ») pour générer le rendu de la page web de manière optimale.
Une balise commune — la balise de paragraphe, ou balise <p> — illustre le concept. Par défaut, les navigateurs sont fournis avec des feuilles de style qui définissent la police et la taille de police pour le texte de paragraphe (c'est-à-dire le texte qui se trouve entre les balises <p> dans le code HTML). Dans Internet Explorer, par exemple, tout le texte du corps, y compris le texte de paragraphe, s'affiche en Times New Roman, police Moyenne par défaut.
En tant qu'auteur d'une page web, cependant, vous pouvez créer une feuille de style qui remplace le style par défaut du navigateur pour la police de paragraphe et la taille de police. Par exemple, vous pouvez créer la règle suivante dans votre feuille de style :
p {
font-family: Arial;
font-size: small;
}
Lorsqu'un utilisateur charge la page, les paramètres de police de paragraphe et de Taille de police définis par vous en tant qu'auteur remplacent les paramètres de texte de paragraphe par défaut du navigateur.
Les utilisateurs peuvent effectuer des sélections pour personnaliser l'affichage du navigateur de manière optimale pour leur propre utilisation. Dans Internet Explorer, par exemple, l'utilisateur peut sélectionner Affichage > Taille du texte > Très grand pour développer la police de la page à une taille plus lisible s'il pense que la police est trop petite. En fin de compte (au moins dans ce cas), la sélection de l'utilisateur remplace à la fois les styles de navigateur par défaut pour la Taille de police de paragraphe 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 de corps, les balises span héritent de certaines propriétés des balises de paragraphe, et ainsi de suite. Ainsi, si vous créez la règle suivante dans votre feuille de style :
body {
font-family: Arial;
font-style: italic;
}
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 :
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
Tout le Corps de texte sera en Arial et en Italique sauf le paragraphe (et son texte hérité), qui s'affichera en Courier normal (non italique). Techniquement, la balise de paragraphe hérite d'abord des propriétés qui sont définies pour la balise de corps, mais ignore ensuite ces propriétés car elle a ses propres propriétés définies. En d'autres termes, alors que les éléments de page héritent généralement des propriétés d'en haut, l'application directe d'une propriété à une balise provoque toujours un remplacement de la formule standard pour l'héritage.
La combinaison de tous les facteurs abordés ci-dessus, plus d'autres facteurs comme la spécificité CSS (un système qui donne un poids différent à des types particuliers de règles CSS), et l'ordre des règles CSS, créent en fin de compte une cascade complexe où les éléments ayant des priorités plus élevées remplacent les propriétés ayant des priorités plus faibles. Pour plus d'informations sur les règles régissant la cascade, l'héritage et la spécificité, consultez 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 Mise en page 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 un tutoriel sur le formatage du texte avec CSS, voir www.adobe.com/go/vid0153.
À propos des propriétés de la forme courte des styles CSS
La spécification CSS permet la création de styles en utilisant une syntaxe abrégée connue sous le nom de CSS abrégé. Le CSS abrégé vous permet de spécifier les valeurs de plusieurs propriétés en utilisant 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.
Un point clé à noter lors de l'utilisation de CSS raccourci est que les valeurs omises d'une propriété CSS raccourcie se voient attribuer leur valeur par défaut. Cela peut entraîner un affichage incorrect des pages lorsque deux règles CSS ou plus sont attribuées à la même balise.
Par exemple, la règle h1 présentée ci-dessous utilise la syntaxe CSS standard. Notez que les propriétés font-variant, font-stretch, font-size-adjust et font-style se sont vu attribuer leurs valeurs par défaut.
H1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
Réécrite comme une seule propriété raccourcie, la même règle pourrait apparaître comme suit :
h1 { font: bold 16pt/18pt Arial }
Lorsqu'elle est écrite en notation raccourcie, les valeurs omises se voient automatiquement attribuer leurs valeurs par défaut. Ainsi, l'exemple raccourci précédent omet les balises font-variant, font-style, font-stretch et font-size-adjust.
Si vous avez des styles définis dans plusieurs emplacements (par exemple, à la fois intégrés dans une page HTML et importés depuis une feuille de style externe) en utilisant les formes courte et longue de la syntaxe CSS, sachez que les propriétés omises dans une règle raccourcie peuvent remplacer (ou être en cascade) des propriétés qui sont explicitement définies dans une autre règle.
Pour cette raison, Dreamweaver utilise la forme longue de la notation CSS par défaut. Cela évite les problèmes possibles causés par une règle raccourcie qui remplace une règle standard. Si vous ouvrez une page web qui a été codée avec la notation CSS raccourcie dans Dreamweaver, sachez que Dreamweaver créera toutes les nouvelles règles CSS en utilisant la forme longue. Vous pouvez spécifier comment Dreamweaver crée et modifie les règles CSS en modifiant les préférences d'édition CSS dans la catégorie Styles CSS de la boîte de dialogue Préférences (Édition > Préférences sous Windows ; Dreamweaver > Préférences sur Macintosh).
Dreamweaver et CSS
Dans Dreamweaver, vous pouvez travailler avec 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, consultez la section Mise en forme de pages avec CSS Designer.
- Vous pouvez également coder votre CSS à la main. Pour plus d'informations sur les fonctionnalités de codage offertes par Dreamweaver, consultez 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, consultez Préprocesseurs CSS.
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.
