Cet article explique comment utiliser les feuilles de style en cascade (CSS) pour formater le texte d'une page dans Dreamweaver. Vous pouvez utiliser CSS pour formater et positionner le texte d'une manière que HTML ne peut pas, vous offrant ainsi plus de flexibilité et de contrôle sur l'apparence de votre page.
Comprendre CSS
Les feuilles de style en cascade (CSS) sont un ensemble de règles de formatage qui contrôlent l'apparence du contenu d'une page Web. Lorsque vous utilisez CSS pour formater une page, le contenu et la présentation sont séparés. Le contenu de la page (code HTML) se trouve dans son propre fichier HTML, tandis que les règles CSS qui définissent la représentation du code se trouvent dans un autre fichier (une feuille de style externe) ou dans une autre partie du document HTML (généralement une section). L'utilisation de CSS vous offre une grande flexibilité et un meilleur contrôle sur l'apparence de votre page, du positionnement précis de la mise en page aux polices et styles spécifiques.
CSS vous permet de contrôler de nombreuses propriétés que vous ne pouvez pas contrôler en utilisant uniquement HTML. Par exemple, vous pouvez spécifier différentes tailles de police et unités (pixels, points, etc.) pour le texte sélectionné. En utilisant CSS pour définir la taille de la police en pixels, vous pouvez également garantir une approche plus cohérente de la mise en page et de l'apparence des pages sur plusieurs navigateurs.
Les règles de formatage CSS se composent de deux parties : les sélecteurs et les déclarations. Les sélecteurs sont des termes qui identifient les éléments formatés (tels que P, H1, nom de classe ou ID), tandis que les déclarations sont utilisées pour définir les éléments de style. Dans l'exemple suivant, H1 est le sélecteur et tout ce qui se trouve entre accolades ({}) est une déclaration :
Voici le contenu cité :
H1 {
font
-size:16 pixels;
font-family:Helvetica
;
Une déclaration se compose de deux parties : des propriétés (telles que font-family) et des valeurs (telles que Helvetica). L'exemple ci-dessus crée un style pour la balise H1 : le texte de toutes les balises H1 liées à ce style aura une taille de 16 pixels et utilisera la police Helvetica et le gras.
Le terme « en cascade » fait référence à la possibilité d'appliquer plusieurs styles au même élément ou à la même page Web. Par exemple, vous pouvez créer une règle CSS pour appliquer la couleur, une autre règle pour appliquer des marges, puis appliquer les deux au même texte sur une page. Les styles définis « cascadent » sur les éléments de votre page Web, créant finalement le design souhaité.
Le principal avantage du CSS est qu'il est facile à mettre à jour ; tant qu'une règle CSS est mise à jour, le formatage de tous les documents utilisant le style défini sera automatiquement mis à jour vers le nouveau style.
Les types de règles suivants peuvent être définis dans Dreamweaver :
Les règles CSS personnalisées (également appelées « styles de classe ») vous permettent d'appliquer des propriétés de style à n'importe quelle plage de texte ou bloc de texte. Tous les styles de cours commencent par un point (.). Par exemple, vous pouvez créer un style de classe appelé .red, définir la propriété color de la règle sur rouge, puis appliquer le style à une partie du texte du paragraphe stylisé.
Les règles de balises HTML redéfinissent le format de balises spécifiques (telles que p ou h1). Lorsque vous créez ou modifiez une règle CSS pour une balise h1, tout le texte formaté avec la balise h1 est immédiatement mis à jour.
Les règles de sélection CSS (styles avancés) redéfinissent le formatage de combinaisons spécifiques d'éléments ou d'autres formes de sélection autorisées par CSS (par exemple, appliquez le sélecteur td h2 chaque fois qu'un en-tête h2 apparaît dans une cellule de tableau). Les styles avancés peuvent également redéfinir le format des balises qui contiennent un attribut id spécifique (par exemple, un style défini par #myStyle peut être appliqué à toutes les balises qui contiennent la paire attribut/valeur id="myStyle").
Créer une nouvelle feuille de style
Tout d’abord, vous allez créer une feuille de style externe contenant des règles CSS définissant les styles de texte de paragraphe. Lorsque vous créez des styles dans une feuille de style externe, vous pouvez contrôler l'apparence de plusieurs pages Web simultanément à partir d'un emplacement central sans avoir à définir des styles pour chaque page Web individuellement.
Les règles CSS peuvent être situées aux emplacements suivants :
Une feuille de style CSS externe est une série de règles CSS stockées dans un fichier .css externe distinct (et non un fichier HTML). Le fichier .css est lié à une ou plusieurs pages du site Web à l'aide de liens dans la section d'en-tête du document.
Une feuille de style CSS interne (ou intégrée) est une série de règles CSS contenues dans la balise de style dans la section d'en-tête d'un document HTML. Par exemple, l'exemple suivant définit la taille de police pour tout le texte d'un document comportant des balises de paragraphe définies :
:<head>
<style>
p{
taille de police : 80px
}
</style>
</head>：
Les styles en ligne sont définis dans des instances de balises spécifiques au sein du document HTML. Par exemple,
"p style="taille de police : 9px""
Définit la taille de la police uniquement pour les paragraphes formatés avec des balises contenant des styles en ligne.
Dreamweaver restitue la plupart des propriétés de style que vous appliquez et les affiche dans la fenêtre Document. Vous pouvez également prévisualiser le document dans une fenêtre de navigateur pour voir comment les styles sont appliqués. Certaines propriétés de style CSS apparaissent différemment dans Microsoft Internet Explorer, Netscape Navigator, Opera et Apple Safari.
Sélectionnez "Fichier"> "Nouveau".
Dans la boîte de dialogue Nouveau document, sélectionnez Page de base dans la colonne Catégorie, sélectionnez CSS dans la colonne Page de base, puis cliquez sur Créer.
Une feuille de style vierge apparaîtra dans la fenêtre Document. Les boutons du mode Conception et du mode Code ont été désactivés. Les feuilles de style CSS sont des fichiers texte brut et leur contenu ne sera pas utilisé pour être affiché dans un navigateur.
Enregistrez ("Fichier"> "Enregistrer") cette page sous cafe_townsend.css.
Lorsque vous enregistrez votre feuille de style, assurez-vous de l'enregistrer dans le dossier cafe_townsend (le dossier racine de votre site Web).
Tapez le code suivant dans la feuille de style :
p{
famille de polices : Verdana, sans empattement ;
taille de police : 11 px ;
couleur : #000000 ;
hauteur de ligne : 18 px ;
remplissage : 3 px ;
}
Lorsque vous saisissez du code, Dreamweaver utilise des astuces de code pour suggérer des options qui vous aideront à finaliser votre saisie. Lorsque vous voyez le code que vous souhaitez que Dreamweaver complète pour vous, appuyez sur Entrée (Windows) ou Retour (Macintosh).
N'oubliez pas d'ajouter un point-virgule après la valeur de l'attribut à la fin de chaque ligne.
Le code complété ressemblera à l'exemple suivant :
Pour afficher le guide, choisissez Aide > Références, puis choisissez Référence CSS O'Reilly dans le menu contextuel du panneau Références. Enregistrez la feuille de style.
Feuille de style ci-jointe
Lorsque vous attachez une feuille de style à une page Web, les règles définies dans la feuille de style sont appliquées aux éléments correspondants de la page. Par exemple, lorsque vous attachez la feuille de style cafe_townsend.css à la page index.html, tout le texte du paragraphe (texte formaté avec des balises dans le code HTML) est formaté selon les règles CSS que vous définissez.
Dans la fenêtre Documents, ouvrez le fichier index.html de Cafe Townsend. (Si le fichier est déjà ouvert, cliquez sur son onglet.)
Sélectionnez le premier texte que vous avez collé dans la page dans Tutoriel : Ajouter du contenu à la page.
Regardez dans l'inspecteur Propriétés et assurez-vous que le paragraphe est formaté à l'aide de balises de paragraphe.
Si le menu local Format de l'inspecteur des propriétés indique Paragraphe, le paragraphe a été formaté à l'aide de la balise de paragraphe. Si le menu local Format de l'inspecteur des propriétés indique Aucun ou autre chose, sélectionnez Paragraphe pour formater le paragraphe.
Répétez l'étape 3 pour le deuxième paragraphe.
Dans le panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur le bouton Attacher une feuille de style dans le coin inférieur droit du panneau.
Dans la boîte de dialogue Attacher une feuille de style externe, cliquez sur Parcourir et accédez au fichier cafe_townsend.css créé dans la section précédente.
Cliquez sur OK.
Le texte dans la fenêtre Document sera formaté selon les règles CSS dans la feuille de style externe.
Explorez le panneau Styles CSS
Le panneau Styles CSS vous permet de suivre les règles et propriétés CSS qui affectent l'élément de page actuellement sélectionné ou l'ensemble du document, et de modifier les propriétés CSS sans ouvrir une feuille de style externe.
Veuillez vous assurer que la page index.html est ouverte dans la fenêtre Document.
Dans le panneau Styles CSS (Fenêtre > Styles CSS), cliquez sur Tout en haut du panneau, puis vérifiez vos règles CSS.
En mode "Tous", le panneau CSS vous montre toutes les règles CSS qui s'appliquent au document actuel, qu'elles se trouvent dans une feuille de style externe ou dans le propre document. Vous devriez voir deux catégories principales dans le volet Toutes les règles : une catégorie de balises et une catégorie cafe_townsend.css.
Si la catégorie d'étiquette n'est pas développée, cliquez sur le signe plus (+) pour développer la catégorie.
Cliquez sur la règle du corps.
La propriété background-color avec une valeur de #000000 apparaît dans le volet Propriétés inférieur.
Notez que vous devrez peut-être réduire d'autres panneaux, tels que le panneau Fichier, pour voir le panneau Styles CSS complet, et vous pouvez également modifier la longueur du panneau Styles CSS en faisant glisser la bordure entre les volets.
Vous définissez la couleur d'arrière-plan de la page dans Didacticiel : Création d'une mise en page basée sur un tableau à l'aide de la boîte de dialogue Modifier les propriétés de la page. Lorsque vous définissez les propriétés de la page de cette manière, Dreamweaver écrit un style CSS intégré au document.
Cliquez sur le signe plus (+) pour développer la catégorie cafe_townsend.css.
Cliquez sur RègleP.
Toutes les propriétés et valeurs définies dans la feuille de style externe pour la règle p apparaîtront dans le volet Propriétés ci-dessous.
Dans la fenêtre Document, cliquez une fois n'importe où dans les deux paragraphes que vous venez de formater.
Dans le panneau Styles CSS, cliquez sur Actuel en haut du panneau, puis inspectez vos styles CSS. En mode Actuel, le panneau CSS vous montre un résumé des propriétés de la sélection actuelle. Les propriétés affichées correspondent aux propriétés de la règle p dans la feuille de style externe.
Dans la section suivante, vous utiliserez le panneau Styles CSS pour créer une nouvelle règle. Créer de nouvelles règles à l'aide du panneau Styles CSS est beaucoup plus simple que de saisir les règles manuellement, tout comme lorsque vous avez initialement créé une feuille de style externe.
Créer de nouvelles règles CSS
Dans cette section, vous utilisez le panneau Styles CSS pour créer une règle CSS ou un style de classe personnalisé. Les styles de classe vous permettent de définir les propriétés de style de n'importe quelle plage ou bloc de texte et peuvent être appliqués à n'importe quelle balise HTML. Pour plus d'informations sur les différents types de règles CSS, consultez Comprendre CSS.
Dans le panneau Styles CSS, cliquez sur Nouvelle règle CSS dans le coin inférieur droit du panneau.
Dans la boîte de dialogue Nouvelle règle CSS, sélectionnez Classe dans l'option Type de sélecteur. Cette option doit être sélectionnée par défaut.
Entrez .bold dans la zone de texte Nom.
Assurez-vous de taper un point (.) avant le mot « gras ». Tous les styles de classe doivent commencer par un point.
Dans le menu contextuel « Définir dans », sélectionnez cafe_townsend.css. Ce fichier doit être sélectionné par défaut.
Cliquez sur OK.
La boîte de dialogue Définition de règle CSS apparaît, indiquant que vous créez un style de classe appelé .bold dans le fichier cafe_townsend.css.
Dans la boîte de dialogue « Définition de règle CSS », procédez comme suit :
Dans la zone de texte « Police », saisissez Verdana, sans-serif.
Dans la zone de texte Taille, saisissez 11 et sélectionnez Pixels dans le menu contextuel immédiatement à droite.
Dans la zone de texte Hauteur de ligne, saisissez 18 et sélectionnez Pixels dans le menu contextuel immédiatement à droite.
Choisissez Gras dans le menu local Poids.
Dans la zone de texte Couleur, saisissez #990000.
Astuce Pour plus d'informations sur les propriétés CSS, consultez le Guide de référence O'Reilly fourni avec Dreamweaver. Pour afficher le guide, choisissez Aide > Références, puis choisissez Référence CSS O'Reilly dans le menu contextuel du panneau Références.
Cliquez sur OK.
Cliquez sur le bouton Tous en haut du panneau Styles CSS.
Si la catégorie cafe_townsend.css n'est pas développée, cliquez sur le bouton plus (+) à côté de la catégorie.
Vous pouvez constater que Dreamweaver a ajouté le style de classe .bold à la liste des règles définies dans la feuille de style externe. Si vous cliquez sur une règle .bold dans le volet Toutes les règles, les propriétés de la règle apparaissent dans le volet Propriétés. Les nouvelles règles apparaissent également dans le menu local Style de l'inspecteur des propriétés.
Appliquer le style de classe au texte
Vous avez maintenant créé une règle de classe et l’avez appliquée à du texte de paragraphe.
Dans la fenêtre Document, sélectionnez les quatre premiers mots du texte du premier paragraphe : Le chef visionnaire du Café Townsend.
Dans l'inspecteur des propriétés (Fenêtre > Propriétés), choisissez gras dans le menu local Style.
Un style de style "gras" sera appliqué à votre texte.
Répétez l'étape 2 pour appliquer le style « gras » aux quatre premiers mots du deuxième paragraphe.
Enregistrez la page.
Formater le texte de la barre de navigation
Vous utiliserez ensuite CSS pour appliquer des styles au texte du lien de la barre de navigation. De nombreuses pages Web utilisent des images rectangulaires colorées avec du texte intégré pour créer des barres de navigation. Cependant, si vous utilisez CSS, tout ce que vous devez définir est le texte du lien et un certain formatage. En utilisant la propriété display: block et en définissant la largeur du bloc, vous pouvez créer efficacement un rectangle sans utiliser d'image supplémentaire.
Créer une nouvelle règle de navigation
Ouvrez le fichier cafe_townsend.css s'il n'est pas déjà ouvert, ou cliquez sur son onglet pour afficher le fichier.
Définissez une nouvelle règle en tapant le code suivant après le style de classe .bold dans le fichier :
.navigation {
}
Il s'agit d'une règle vide.
Le code du fichier devrait ressembler à l'exemple suivant :
Enregistrez le fichier cafe_townsend.css.
Vous utiliserez ensuite le panneau Styles CSS pour ajouter des propriétés à la règle.
Si le fichier index.html n'est pas ouvert, ouvrez-le.
Dans le panneau Styles CSS, assurez-vous que le mode Tous est sélectionné, sélectionnez la nouvelle règle .navigation et cliquez sur Modifier les styles dans le coin inférieur droit du panneau.
Dans la boîte de dialogue « Définition de règle CSS », procédez comme suit :
Dans la zone de texte « Police », saisissez Verdana, sans-serif.
Sélectionnez 16 dans le menu contextuel Taille, puis sélectionnez Pixels dans le menu contextuel immédiatement à sa droite.
Sélectionnez Normal dans le menu local Style.
Sélectionnez Aucun dans la liste Modification.
Choisissez Gras dans le menu local Poids.
Dans la zone de texte Couleur, saisissez #FFFFFF.
Pour afficher le guide, choisissez Aide > Références, puis choisissez Référence CSS O'Reilly dans le menu contextuel du panneau Références.
Cliquez sur OK.
Vous allez maintenant utiliser le panneau Styles CSS pour ajouter plus de propriétés à la règle .navigation.
Dans le panneau Styles CSS, assurez-vous que la règle .navigation est sélectionnée, puis cliquez sur Afficher la vue en liste.
La vue Liste fait en sorte que le volet Propriétés affiche toutes les propriétés disponibles par ordre alphabétique (contrairement à la vue Définir les propriétés, qui affiche uniquement les propriétés qui ont été définies).
Cliquez dans la colonne à droite de la propriété background-color.
Pour voir le contenu complet d'une propriété, placez le pointeur de la souris sur la propriété.
Entrez la valeur hexadécimale #993300 et appuyez sur Entrée (Windows) ou Retour (Macintosh).
Astuce Pour voir l'impact de votre travail sur une feuille de style externe, laissez le fichier cafe_townsend.css ouvert dans la fenêtre Document pendant que vous travaillez. Lorsque vous effectuez des sélections dans le panneau Styles CSS, vous verrez également Dreamweaver écrire du code CSS dans la feuille de style.
Recherchez la propriété d'affichage (vous devrez peut-être faire défiler vers le bas), cliquez une fois dans la colonne de droite et sélectionnez le bloc dans le menu contextuel.
Recherchez la propriété padding, cliquez une fois dans la colonne de droite, entrez une valeur de 8 pixels et appuyez sur Entrée (Windows) ou Retour (Macintosh).
Recherchez la propriété width, cliquez une fois dans la colonne de droite, entrez 140 dans la première zone de texte, sélectionnez Pixels dans le menu contextuel et appuyez sur Entrée (Windows) ou Retour (Macintosh).
Cliquez sur Afficher les propriétés des paramètres pour afficher uniquement les propriétés que vous avez définies dans le volet Propriétés.
Cliquez sur le fichier cafe_townsend.css pour l'afficher. Vous verrez que Dreamweaver a ajouté toutes les propriétés que vous avez spécifiées au fichier.
Enregistrez et fermez le fichier cafe_townsend.css.
Vous avez maintenant créé une règle qui formate le texte de la barre de navigation. Ensuite, vous appliquerez la règle aux liens sélectionnés.
Appliquer les règles
Avec la page index.html ouverte dans la fenêtre Document, cliquez sur le mot Cuisine pour placer le point d'insertion quelque part dans le mot.
Dans le sélecteur d'étiquette, cliquez sur l'étiquette la plus à droite.
Cette opération sélectionnera tout le texte de l’étiquette ou du lien spécifié.
Dans l'inspecteur des propriétés (Fenêtre > Propriétés), sélectionnez Navigation dans le menu contextuel Style.
Dans la fenêtre Document, l'apparence du texte Cuisine a complètement changé. Le texte est désormais formaté sous forme de bouton de barre de navigation en fonction des propriétés que vous avez définies pour la règle .navigation dans la section précédente.
Répétez les étapes 1 à 3 pour chaque lien dans la barre de navigation.
Vous devez attribuer un style de classe de navigation à chaque étiquette ou lien, il est donc important de sélectionner chaque lien individuellement à l'aide du sélecteur d'étiquette, puis d'attribuer un style de classe à chaque lien un par un.
Si vous rencontrez des difficultés pour formater le texte du lien, assurez-vous qu'il y a des espaces (et non des retours chariot) entre chaque (ou groupe de) mots liés. Assurez-vous également que l'espace entre les deux liens n'est pas lui-même lié. Si les espaces sont liés, sélectionnez soigneusement les espaces liés, décochez la zone de texte Lien dans l'inspecteur des propriétés et appuyez sur Entrée (Windows) ou Retour (Macintosh).
Lorsque vous avez fini de formater tous les mots dans la barre de navigation, enregistrez la page et prévisualisez votre travail dans un navigateur (Fichier > Aperçu dans le navigateur).
Vous pouvez cliquer sur le lien pour vous assurer qu'il fonctionne.
Ajouter un effet de survol de la souris
Vous allez maintenant ajouter un effet de survol qui modifie la couleur d'arrière-plan de la barre de navigation chaque fois que le pointeur de la souris passe sur un lien. Pour ajouter un effet de survol, ajoutez une nouvelle règle contenant la pseudo-classe :hover.
À propos... À propos de :hover Pseudo-classes Les pseudo-classes sont un moyen d'affecter certains éléments d'un document HTML, non pas en fonction du code HTML du document lui-même, mais en fonction d'autres conditions externes appliquées par le navigateur Web. Les pseudoclasses peuvent être dynamiques, ce qui signifie que lorsque l'utilisateur interagit avec le document, les éléments de la page peuvent gagner ou perdre des pseudoclasses.
La pseudo-classe :hover affecte les modifications apportées à un élément de page formaté lorsque l'utilisateur passe le pointeur de la souris sur l'élément. Par exemple, lorsque vous ajoutez la pseudo-classe :hover à un style de classe .navigation (.navigation:hover) pour créer une nouvelle règle, tous les éléments de texte formatés avec la règle .navigation changeront en fonction des propriétés du .navigation : règle de survol.
Ouvrez le fichier cafe_townsend.css.
Sélectionnez la règle .navigation entière.
Copiez le texte ("Modifier">"Copier").
Cliquez une fois à la fin de la règle, puis appuyez plusieurs fois sur Entrée (Windows) ou Retour (Macintosh) pour créer de l'espace.
Collez ("Éditer" > "Coller") le texte copié dans l'espace que vous venez de créer.
Ajoutez la pseudo-classe :hover au sélecteur .navigation collé comme suit :
Dans la nouvelle règle .navigation:hover, remplacez la couleur d'arrière-plan actuelle (#993300) par #D03D03.
Enregistrez et fermez le fichier.
Ouvrez le fichier index.html dans la fenêtre Document et prévisualisez la page dans un navigateur (Fichier > Aperçu dans le navigateur).
Lorsque vous placez le pointeur de la souris sur un lien, vous pouvez voir le nouvel effet de survol.