eclaireur.net

Mise en forme des éléments HTML

1 - La propriété clip

La propriété clip permet de rogner la zone d'affichage d'un élément HTML.

Syntaxe : p, img { clip: rect(5px, 40px, 45px, 5px);}
Avoir plus d'information sur la propriété clip

2 - La propriété visible

Définit si un élément HTML doit être visible ou non. La place occupée par cet élément est cependant réservée, que l'élément soit visible ou non.

Syntaxe : p { visibility: visible; }
Avoir plus d'information sur la propriété visible

3 - La propriété content

Cette propriété est très peu utilisée car elle n'est pas encore reconnu par Internet explorer, elle a pour but de générer un contenu sur un élément précis, vous pouvez l'ajouter avant ou après celui-ci (en utilisant les éléments :before et :after.

Syntaxe : a:before {content:" Lien : (";} a:after {content:") ";}.

Et voila comment on peut afficher par exemple des liens qui affichent la langue de l'élement pointé.

Syntaxe CSS : a[hreflang]:after{ content: "\0000a0[" attr(hreflang) "]"; }
Syntaxe HTML <a href="monlienEtranger" hrreflang="en">Mon lien étranger</a>

4 - La propriété quotes

Cette propriété permet de spécifier le type de guillemet (quotes) à mettre autour d'une balise.

Syntaxe : q { quotes: '"' '"' }.
Avoir plus d'information sur la propriété quotes

5 - Les propriétés acronym, abbr

Elle permettent de mettre en valeur les acronymes et autres abréviations. Certains navigateurs (dont Internet Explorer) ne les signalent pas donc nous pouvons remédier à cela avec ces quelques lignes.

Syntaxe : acronym, abbr{ border-bottom: 1px dotted; cursor : help; }

6 - La propriété focus

Cette propriété peut être utilisée pour la mise en forme des liens mais dans notre exemple on l'utilisera plutôt pour une meilleure présentation des champs d'un formulaire.

Syntaxe : input:focus, textarea:focus { background-color:white; color:red; }
Avoir plus d'information sur l'utilisation de la propriété focus

Mise en forme du texte

7 - La propriété text-shadow

La propriété text-shadow permet de créer un effet d'ombre sur le texte. Elle définit un décalage de l'ombrage, et peut en option, spécifier une zone de flou et la couleur de l'ombrage.

Syntaxe : h1 {text-shadow:4px,4px,4px,blue ; }
Attention tout de même cette propriété appartient à la version 2.0 des feuilles de style CSS et n'est encore interprétée à l'heure actuelle par aucun des navigateurs répandus.

8 - La propriété font-size-adjust

Cette propriété spécifie si la taille de la police doit être choisie en fonction de la hauteur des lettres en minuscule ou de celle des lettres en capitales.

Syntaxe : p { font-size-adjust: 0.58; }
Avoir plus d'information sur l'utilisation de la propriété font-size-adjust

9 - La propriété font-stretch

Elle mentionne l'étirement de la police à quel point la police paraît étroite ou large.

Syntaxe : h2 {font-stretch:wider;}
Attention tout de même cette propriété appartient à la version 2.0 des feuilles de style CSS et n'est encore interprétée à l'heure actuelle par tous les navigateurs répandus.

10 - La propriété font-variant

Elle permet de manipuler le texte : le tranfsormer avec des lettres en petites capitales...

Syntaxe : h4 {font-variant:small-caps;}
Avoir plus d'information sur l'utilisation des propriétés CSS dans la mise en forme du texte

Mise en forme des tableaux

11 - La propriété caption-side

Cette propriété indique la position du titre dans un tableau (contenu dans la balise caption). Syntaxe : caption {caption-side:bottom;}

12 - la propriété table-layout

Permet d'indiquer au navigateur comment il doit interpréter la taille du tableau. Cette propriété évite aux navigateurs d'avoir besoin de lire tout le contenu pour attribuer une taille au tableau, en d'autres termes d'accélérer l'affichage des grands tableaux.

13 - la propriété empty-cells

Elle permet d'afficher ou non les cellules vides du tableau.

Syntaxe : table {empty-cells:show}
Avoir plus d'information sur l'utilisation des propriétés CSS dans la mise en forme des tableaux

Impression du document

14 - Les propriétés counter-reset et counter-increment

Même fonctionnement que les sections pour la numérotation des pages. Attention tout de même certains navigateurs ne les prennent pas en compte encore. Syntaxe :

[CSS] body { counter-reset: section; /* Remet les compteurs à 0 */ } h1:before { counter-increment: section; /* Incremente le compteur de section */ content: "Section " counter(section) ": "; /* Affiche le compteur */ } [/CSS]

Avoir plus d'informations sur counter-reset et counter-increment

15 - La propriété marks (Traits de coupe et repères de montage)

Les CSS permettent de gérer la mise en page pour l'impression mais aussi les traits de coupes (en anglais cut marks). Ce sont des lignes d'aide qui sont utilisées dans la photocopie et dans l'impression (massicot) pour la coupe de pages.

Syntaxe : @page: { marks:cross; }

Je rajouterai à la propriété marks, les propriétés page-break-before et page-break-after. Elles sont utiles pour l'impression d'une longue page, pour être certain de ne pas imprimer un titre en bas de page.

Syntaxe : H1 { page-break-before: always }

Avoir plus d'information sur l'impression des documents

Pour ceux qui souhaiterai lire encore des conseils CSS, je vous invite à lire cet article de W3Québec de 2004 Dix trucs CSS que vous ne connaissez peut-être pas qui n'a pas pris une ride