Typographie et CSS
Les formats
Les formats sont des styles HTML par défaut, qui peuvent être personnalisés par l'ajout de valeurs de style CSS.
Par exemple, la balise body qui représente le corps d'une page a pour ce site les propriétés suivantes (entre paranthèse sont notées les valeurs HTML par défaut):
body {
color: #444; (color: #000;)
font-family: "Ubuntu", Verdana, Geneva, Arial, Helvetica, sans-serif;
(font-family:'Times New Roman', Times, serif;)
font-size: 0.9rem; (font-size:16px;)
line-height: 1.4rem; (line-height:20px;)
}
Les autres formats de ce site sont personnalisés tels présentés ci-dessous.
Blocs de contenu
Paragraphe (balise p)
Le paragraphe est un bloc de contenu (texte, médias) qui ajoute un espace avant et après (voir entre le titre et ce texte). Le paragraphe se choisit dans la liste déroulante "Format".
Par défaut dans l'éditeur JCE, la création d'un nouveau contenu insère automatiquement un paragraphe. Vous pouvez changer cette valeur en choisissant une div par défaut, soit dans la configuration de JCE, soit dans le profil JCE utilisé.
Par défaut également, l'appui sur la touche "ENTER" crée un nouveau paragraphe. Pour créer un simple "Saut de ligne" (retour chariot), il faut appuyer sur la touche "ENTER" tout en maintenant la touche "Majuscule" enfoncée.
Formats des titres
Les "Titres" permettent de démarquer des blocs de contenu tout en les hierarchisant. Pour une bonne indexation du contenu dans les moteurs de recherche, il est important de n'utiliser qu'une fois le titre 1 dans la page et de respecter l'ordre des titres.
Une couleur bleue et la police "Tauri" est appliquée aux titres. La taille est différente pour chaque titre. Les titres se choisissent dans la liste déroulante "Format".
Titre 1 (balise h1)
La taille du titre 1 est de "2rem"
Titre 2 (balise h2)
Paragraphe de texte...
Titre 3 (balise h3)
Paragraphe de texte...
Titre 4 (balise h4)
Paragraphe de texte...
Titre 5 (balise h5)
Paragraphe de texte...
Titre 6 (balise h6)
Paragraphe de texte...
Retrait (balise blockquote)
Le format «Retrait» ajoute 30 pixels devant le bloc de texte (avec ou sans la balise p ou div).
Le format «Retrait» se choisit dans la liste déroulante"Format".L'utilisation de ce format permet d'appliquer par la suite un style CSS à la balise «blockquote» pour le style «accolade» (voir plus bas).
Définition (balise dt)
Citation (balise dd)
Code (balise code)
Le format «Code» prend en compte chaque espace inséré, attribue un fond gris clair ainsi qu'une largeur unique à chaque lettre avec une police d'écriture verte à empattement (décoration). Le texte ne peut pas être justifié.
Le format «Code» se choisit dans la liste déroulante "Format".
Exemple code (balise samp)
Le format «Exemple code» prend en compte chaque espace inséré, attribue un fond gris clair ainsi qu'une largeur unique à chaque lettre avec une police d'écriture bleue à empattement (décoration). Le texte ne peut pas être justifié. Le format «Exemple code» se choisit dans la liste déroulante "Format".Préformaté (balise pre)
Le format «Préformaté» permet de prendre en compte chaque espace inséré.
Il se choisit dans la liste déroulante"Format".
Les styles CSS
Vous pouvez afficher les balises visuellement en cliquant sur l'icône 
Styles CSS appliqués aux retraits (balise blockquote)
Le format «Retrait» avec le style CSS «accolade» appliqué à du texte ou un bloc de contenu Div.
Le format «Retrait» avec le style CSS «accolade» appliqué à un bloc de texte Paragraphe ajoute une image et un retrait à droite.
Styles CSS appliqués aux lignes horizontales (balise hr) 
Ligne horizontale normale
Ligne horizontale avec le style «points»
Ligne horizontale avec le style «traits»
Styles CSS pour illustration de blocs de contenu
Ces styles permettent d'illustrer du contenu par des icônes ou de la couleur en les appliquant à des parties de texte (balise span) ou à des blocs de contenu (balise p et div).
Les styles CSS appliqués à du texte en le sélectionnant puis en choisissant le style dans la liste déroulante ajoute automatiquement la balise «span» autour du contenu sélectionné.
Pour applique un style CSS à un bloc de texte «Paragraphe» ou «Div», vous devez sélectionnez sa balise (p ou div) dans la barre d'état sous l'éditeur comme dans l'image ci-dessus...
| accolade | bloc_note | Bloc_idee |
| bloc_info | bloc_alerte | bloc_go |
| bloc_cadenas | bloc_ok | bloc_stop |
| bloc_plus | bloc_moins | bloc_telecharger |
| bloc_recherche | bloc_gris | bloc_jaune |
| bloc_bleu | bloc_vert | bloc_rouge |
| note | idee | info |
| alerte | go | cadenas |
| ok | stop | plus |
| moins | telecharger | recherche |
Syles CSS pour illustration de contenu simple
Ces styles permettent d'illustrer un élément par de petites icônes en les appliquant à des parties de texte (balise span) ou à des blocs de contenu (balise p et div).
Les styles CSS appliqués à du texte en le sélectionnant puis en choisissant le style dans la liste déroulante ajoute automatiquement la balise «span» autour du contenu sélectionné.
Pour applique un style CSS à un bloc de texte «Paragraphe» ou «Div», vous devez sélectionnez sa balise (p ou div) dans la barre d'état sous l'éditeur comme dans l'image ci-dessus...
| Style texte_bloc et la suite sans style... | ||
| Style texte_note | Style texte_idee | Style texte_info |
| Style texte_alerte | Style texte_ok | Style texte_cadenas |
| Style texte_attention | Style texte_dossier | Style texe_fichier |
| Style texte_pdf | Style texte_excel | Style texte_word |
| Style texte_image | Style texte_media | Style texte_audio |
| Style texe_archive | Style texte_telecharger | Style texte_star |
| Style texte_fils_rss | Style texte_recherche | Style texte_accueil |
| Style texte_coeur |
Style texte_contact | Style texte_groupe |
| Style texte_telephone | Style texte_portable | Style texte_imprimer |
| Style texte_email | Style texte_lien | Style texte_carte |
| Style texte_calendrier | Style texte_montre | Style texte_caddie |
Styles CSS des listes à puces (balise ul + li) 
La balise «ul» correspond au bloc de la liste et la balise «li» aux lignes.
Par défaut, trois graphiques sont disponibles pour les puces. Si vous créez un quatrième niveau, le dernier graphique sera utilisé. Vous pouvez changer le graphique à l'aide de la liste déroulante des puces.
Exemple de liste à puces sans style CSS :
- Ligne 1 affichant par défaut un disque rempli
- Ligne 2 avec un retrait affichant par défaut un cercle vide
L'application d'un retrait ajoute une nouvelle balise «ul» et «li»
- Ligne 3 avec un second retrait affichant par défaut un carré rempli
L'application du second retrait ajoute à nouveau une balise «ul» et «li»
- Ligne 3 avec un second retrait affichant par défaut un carré rempli
- Ligne 2 avec un retrait affichant par défaut un cercle vide
Les styles CSS des listes à puces s'appliquent à la balise «ul» et non «li» !
|
|
|
|
|
|
|
|
|
|
|
|
Vous pouvez en tout temps changer un style CSS appliqué à une balise en la sélectionnant puis en cliquant sur l'outil «Syles XHTML» 
