Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Dreamweaver CC pour PC/Mac (édition 2018)
  3. Mise en forme CSS des caractères
Extrait - Dreamweaver CC pour PC/Mac (édition 2018) Concevoir des sites interactifs et attractifs
Extraits du livre
Dreamweaver CC pour PC/Mac (édition 2018) Concevoir des sites interactifs et attractifs
1 avis
Revenir à la page d'achat du livre

Mise en forme CSS des caractères

Les principes généraux

Nous allons bien sûr utiliser une mise en forme conforme aux standards d’aujourd’hui : mise en évidence du texte avec les styles "classiques" gras, italique, etc. et une mise en forme avec les styles CSS dédiés aux caractères.

La mise en forme avec les styles classiques

1. Le gras, l’italique et l’emphase

Sachez que par défaut, Dreamweaver utilise pour la mise en forme en gras et en italique deux éléments HTML bien particuliers. Dans la norme W3C, les éléments HTML sont <b> pour appliquer du gras et <i> pour l’italique. Ces deux éléments HTML donnent juste un aspect décoratif au texte, mais ne donnent aucun sens au texte à mettre en forme. Pour donner un sens sémantique au contenu à mettre en évidence (l’emphase), le W3C préconise d’utiliser les éléments <strong> et <em>. Ces deux éléments ont un rendu visuel identique à <b> et <i>.

La deuxième raison d’utiliser <strong> et <em> est d’être en conformité avec les préconisations pour l’accessibilité des pages web pour les personnes handicapées qui utilisent une synthèse vocale dans leur navigateur. Ainsi, quand le synthétiseur rencontre l’élément <em> (pour une mise en forme visuelle en italique), le volume augmente un peu. Quand le synthétiseur rencontre l’élément <strong> (pour une mise en forme visuelle en gras), le volume augmente plus.

 Pour gérer ce changement, allez dans les Préférences (menu...

La mise en forme avec les styles CSS

1. Un rappel sur les sélecteurs

Nous allons créer et appliquer des styles CSS à une sélection de caractères ou de mots. Souvenez-vous que vous pouvez utiliser un sélecteur de classe qui permet de créer un style, de définir ses propriétés et de l’appliquer aux sélections de votre choix. Vous pouvez aussi utiliser les sélecteurs d’élément qui permettent de redéfinir la mise en forme d’un élément HTML existant. Par exemple, vous pouvez redéfinir la mise en forme de l’élément HTML <strong> pour qu’il apparaisse avec une couleur et un fond coloré. Dès que dans votre page web vous insérez une emphase <strong>, la mise en forme définie s’applique. 

2. Créer un style CSS

Vous pouvez créer des styles enregistrés dans le document HTML ou dans un fichier CSS externe. Reportez-vous au chapitre Feuilles de style CSS si besoin est.

3. Les propriétés CSS

Nous allons passer en revue les propriétés disponibles pour les caractères. Dans le panneau CSS Designer, les propriétés de texte sont accessibles en cliquant sur le bouton Texte.

images/18C09-002.png

Les propriétés pour le texte

1. La propriété color

 Utilisez cette propriété si vous souhaitez appliquer une couleur au texte.

images/18C09-003.png

2. La propriété font-family

Nous retrouvons les mêmes éléments techniques que ceux que nous avions étudiés dans le chapitre Mise en forme CSS des pages. Reportez-vous à ce chapitre pour revoir ces notions.

images/18C09-004.png

Notez que vous pouvez vous-même saisir les polices que vous souhaitez.

 Dans le champ font-family, faites un double clic.

 Saisissez le nom de la police que vous souhaitez utiliser. Si vous avez plusieurs polices, séparez-les par une virgule.

Si vous avez une police constituée de plusieurs mots, indiquez son nom entre guillemets. Exemple : "Times New Roman".

 Validez votre saisie avec la touche Entrée.

3. La propriété font-style

La propriété font-style permet de déterminer si vous souhaitez avoir de l’italique. Les valeurs possibles sont :

normal

Pas d’italique.

italic

Utilisation de la police avec sa déclinaison, son dessin italique.

oblique

Application d’un faux italique (inclinaison des caractères) pour les polices qui n’ont pas d’italique.

4. La propriété font-variant

La propriété font-variant permet d’appliquer des petites capitales avec la valeur small-caps.

5. La propriété font-weight

La propriété font-weight permet de déterminer la graisse de la police, c’est-à-dire si vous souhaitez avoir du gras ou pas. Le W3C a proposé d’harmoniser les valeurs de graisse avec des valeurs uniformisées : de 100 à 900. Mais les fondeurs...

Les propriétés de la boîte

1. Le texte et la boîte

Tous les éléments HTML sont affichés dans une boîte, y compris une sélection de texte sélectionnée et stylée avec l’élément <span>. Nous allons donc pouvoir appliquer des propriétés CSS concernant la boîte : arrière-plan, remplissage et bordure.

2. La propriété background-color

Cette propriété vous permet d’appliquer une couleur d’arrière-plan à une sélection de mots.

images/18C09-011.png

 Utilisez le sélecteur de couleur background-color pour choisir la couleur à appliquer. 

images/18C09-012.png

 Validez avec la touche Entrée la couleur sélectionnée.

 Vous pouvez aussi saisir vous-même la valeur voulue dans le champ background-color, en indiquant l’unité, en hexadécimal avec le caractère # dans cet exemple.

images/18C09-013.png

3. La propriété padding

 La propriété padding est accessible dans la catégorie Disposition.

images/18C09-014.png

La propriété padding permet d’ajouter un espace entre la limite de la boîte et son contenu. Vous pouvez appliquer la même valeur sur les quatre côtés en cliquant sur le bouton en forme de chaîne au centre du schéma, comme c’est le cas dans l’exemple ci-dessous. Sinon vous définissez...