Typographie et CSS

format_liste
Formats dans l'éditeur
Pour appliquer un style à du texte, sélectionnez-le et choisissez celui que vous souhaitez appliquer dans la liste déroulante «Format» ou «Styles 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".

Div (balise div)
La Div est un bloc de contenu (texte, médias) qui n'ajoute pas d'espace avant et après (voir entre le titre et ce texte). La Div 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...balise_barre-etat

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)

Le format «Définition» n'a aucun style par défaut et volontairement aucun style appliqué par la feuille de style CSS car il est fréquemment utilisé par des extensions lui appliquant elles-même un style. Le format «Définition» se choisit dans la liste déroulante"Format".

Citation (balise dd)

Le format «Citation» (balise dd) ajoute un astérisque en haut à gauche. Le texte a une taille de 90% et un espace à gauche de 15 pixels. Le format «Citation» se choisit dans la liste déroulante "Format".

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 visualchars

balises_affichees

Les Styles CSS s'appliquent depuis la liste déroulante de l'éditeur après avoir sélectionné la balise dans la barre d'état sous l'éditeur (voir image précédente et suivante).

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_liste
Styles CSS dans l'éditeur


Styles CSS  appliqués aux lignes horizontales (balise hr)  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) bullist

listes

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 :

Les styles CSS des listes à puces s'appliquent à la balise «ul» et non «li» !

  • liste_note
  • liste_idee
  • liste_info
  • liste_alerte
  • liste_go
  • liste_cadenas
  • liste_ok
  • liste_stop
  • liste_plus
  • liste_moins
  • liste_telecharger
  • liste_recherche

Vous pouvez en tout temps changer un style CSS appliqué à une balise en la sélectionnant puis en cliquant sur l'outil «Syles XHTML» style

xhtml_texte

xhtml_fond

xhtml_bloc

xhtml_boite

xhtml_bordure

xhtml_liste

xhtml_position

Haut de page