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 textes
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 textes

La mise en forme CSS

Pour rappel, les conteneurs de texte sont les éléments qui contiennent du texte : les en-têtes (<h1> à <h6>), les paragraphes (<p>), les paragraphes de citation (<blockquote>), les listes (simples à puces <ul>, numérotées <ol> et de définition <dl>) et le texte pré-formaté (<pre>).

1. Les sélecteurs utilisables

Vous pouvez créer deux types de sélecteurs principaux, les sélecteurs de classe qui permettent de créer, de définir une mise en forme et de l’appliquer aux conteneurs de texte que vous voulez. Vous pouvez aussi créer des sélecteurs d’élément, qui permettent de redéfinir la mise en forme d’un élément HTML existant. Une utilisation classique est de redéfinir la mise en forme des en-têtes (<h1> à <h6>) pour avoir une certaine homogénéité de présentation pour tous les en-têtes du site web.

Ces conteneurs utilisent bien sûr le modèle de boîte. Reportez-vous au chapitre Feuilles de style CSS pour revoir le modèle de boîte si cela vous semble nécessaire.

La mise en forme au niveau du texte

1. Les propriétés

Les propriétés concernant le texte sont disponibles dans le panneau CSS Designer, dans l’onglet Propriétés, dans la catégorie Texte.

images/18C10-001.png

2. La propriété line-height

Cette propriété permet de gérer l’interligne de votre texte. Elle est placée dans la catégorie Texte, car l’interligne est à fixer en fonction de la taille de caractère. Vous saisissez la valeur et l’unité de l’interligne souhaitées.

images/18C10-002.png

3. La propriété text-align

Vous retrouvez les alignements de texte classiques. Vous avez dans l’ordre : alignement à gauche (left), alignement à droite (right), alignement centré (center) et justifié (justify).

images/18C10-003.png

4. La propriété text-indent

 Sous ce terme se trouve le non moins classique retrait de première ligne. Indiquez la valeur et l’unité voulues.

images/18C10-004.png

5. La propriété white-space

Cette propriété, moins usitée, vous permet de gérer l’utilisation des espaces dans votre texte.

images/18C10-005.png
  • La valeur normal permet de ne conserver qu’un seul espace comme il est d’usage en HTML.

  • La valeur nowrap indique qu’il n’y a pas de coupure de fin de phrase. Si vous avez du texte dans un paragraphe ayant une largeur fixe, le texte n’ira jamais à...

La mise en forme au niveau du bloc

1. Les propriétés

Nous allons maintenant étudier les propriétés qui s’appliquent au niveau du bloc contenant le texte.

Ces propriétés sont accessibles dans le panneau CSS Designer, dans l’onglet Propriétés, dans la catégorie Disposition, Bordure et Arrière-plan.

2. Les propriétés de largeur et de hauteur

 Avec les propriétés Width et Height de la catégorie Disposition, vous pouvez déterminer la largeur et la hauteur de vos conteneurs : des paragraphes, des en-têtes… Vous indiquez la valeur et choisissez l’unité à utiliser.

images/18C10-006.png

Dans cet exemple, le premier paragraphe utilise la largeur disponible dans la fenêtre du navigateur (pas de largeur spécifiée), le deuxième paragraphe a une largeur de 300 px.

images/08sf004.png

Reportez-vous à la fin du chapitre Feuilles de style CSS pour revoir la notion de boîte.

 Vous pouvez aussi définir des largeurs et des hauteurs minimales et maximales à ne pas dépasser. Utilisez les propriétés min-width, min-height, max-width et max-height.

images/18C10-007.png

3. La propriété display

Cette propriété va vous permettre de modifier l’affichage par défaut des éléments HTML. Nous avons deux types d’affichage principaux :

  • L’affichage en blocs (block), qui affiche les éléments les uns sous les autres. C’est la valeur des éléments de type paragraphe, en-tête, listes...

  • L’affichage en ligne (inline), qui affiche les éléments les uns à côté des autres, dans un élément de type bloc. C’est l’affichage des éléments de type image (<img>), objet de formulaire (<input>), de mise en forme (<strong>)...

 Dans la liste déroulante de la propriété display, choisissez l’affichage souhaité.

images/18C10-008.png

Exemple classique : faire des listes horizontales. L’élément <li> correspond à un item d’une liste. Si vous appliquez la valeur inline à la propriété display, pour l’élément <li>, vos items de liste s’afficheront horizontalement.

4. La propriété box-sizing

Nous l’avions...

La mise en forme des listes

1. Les propriétés

Les propriétés concernant la mise en forme des listes se trouvent dans la catégorie Texte.

images/18C10-031.png

Cette catégorie va vous permettre de mettre en forme vos listes simples à puces et vos listes numérotées.

2. La propriété list-style-position

Cette propriété permet d’indiquer si la puce doit être dans la liste du texte (inside) ou à l’extérieur (outside) quand les items de la liste sont sur plusieurs lignes.

Dans cet exemple, nous avons choisi une image (puce.gif) et elle est placée à l’intérieur du texte (inside).

images/18C10-032.png

Le rendu dans un navigateur :

images/08sf008.png

3. La propriété list-style-image

Cette propriété vous permet de choisir une image à la place des puces ou des énumérations.

images/18C10-033.png

4. La propriété list-style-type

Cette propriété vous permet de choisir quel type de liste vous souhaitez utiliser. Voici les valeurs les plus courantes :

disc

Liste à puces en rond plein noir.

circle

Liste à puces en rond creux (blanc).

square

Liste à puces en carré.

decimal

Liste numérotée avec des chiffres.

lower-roman

Liste numérotée en chiffres romains minuscules.

upper-roman

Liste numérotée en chiffres romains majuscules.

lower-alpha

Liste numérotée en lettres minuscules....