Typographie

Styles des principales balises HTML (Formats)

Les exemples présentés dans les panneaux déroulants ci-dessous vous permettent de découvrir les styles appliqués aux principales balises HTML par le template Protostar.

Exemples - Paragraphes, Div & Titres

Exemples - Balises HTML diverses

Blockquote (balise blockquote)

Le format «Blockquote» ajoute une barre verticale grise de 2 pixels à gauche du texte qu'il décale de 30 pixels sur la droite. Sa balise s'ajoute (à l'extérieur) aux balises de paragraphe ou de div présentes initialement.

En complément d'un paragraphe, le format «Blockquote» a une police de 16.25 pixels et une hauteur de ligne de 1.25. En complément d'une div, le texte garde son aspect normal.

Avec l'éditeur JCE ce format ne se sélectionne pas par la liste déroulante comme les autres formats, il a sa propre icône dans la barre d'outils : .

Adresse (balise address)

Le format «Adresse» a une hauteur de ligne de 18 pixels, une marge inférieure externe de 18 pixels également, une valeur «display: block» et une police d'écriture italique.

Code (balise code)

Le format «Code» prend en compte chaque espace inséré. Il s'ajoute à l'intérieur des paragraphes ou div. Ce format a un fond gris clair, une bordure grise légèrement plus foncée d'1 pixel avec des coins arrondis de 3px, une marge intérieure horizontale de 4 pixels et verticale de 2 pixels. Une largeur unique est attribuée à chaque lettre avec une police d'écriture rouge d'une taille de 11 pixels.

Préformaté (balise pre)

Le format «Préformaté» remplit chaque espace du bloc de contenu, les mot peuvent être scindés n'importe où. Ce format a un fond gris clair, une bordure grise légèrement plus foncée d'1 pixel avec des coins arrondis de 3px, une marge intérieure de 8.5 pixels et une marge inférieure externe de 9 pixels. Une largeur unique est attribuée à chaque lettre avec une police d'écriture noire d'une taille de 12 pixels.

Code exemple (balise samp)

Le format «Code exemple» s'ajoute à l'intérieur des paragraphes ou div. Une largeur unique est attribuée à chaque lettre avec une police d'écriture à empattement.

Span (balise span)

Le format «span» n'a pas de style particulier, son but est d'ajouter une balise que vous stylez ensuite soit en éditant le code, soit en utilisant l'éditeur de style (icône AA de la barre d'outils). Elle peut également servir à appliquer un style CSS. Attention toutefois au fait que la balise span ne prend pas en charge les marges verticales.

Article, Aside, Details, Figcaption, Figure, Footer, Header, Hgroup, Nav, Section

Le template Protostar applique la valeur «display:block» aux formats/balises «article, «aside», «details», «figcaption», «figure», «footer», «header», «hgroup» et «nav».

Définition (balise dl>dt)

Le format «Définition» est composé de la balise «dl» qui contient la balise «dt». Il a une marge inférieure de 18 pixels appliquée par la balise «dl», une hauteur de ligne de 18 pixels et un gras appliqué par la balise «dt».

Citation (balise dl>dd)

Le format «Citation» est composé de la balise «dl» qui contient la balise «dd». Il a une marge inférieure de 18 pixels appliquée par la balise «dl», une hauteur de ligne de 18 pixels et une marge gauche de 9 pixels appliquée par la balise «dd».