Problème à signaler:


Télécharger Cours sur les feuilles de styles



★★★★★★★★★★3 étoiles sur 5 basé sur 1 votes.
3 stars
1 votes

Votez ce document:



Cours sur les feuilles de styles 

Dans le HTML, le mécanisme permettant de faire ceci est fourni par encore d'autre balises de mise en forme.

On crée un paragraphe en incluant du texte au sein d'une paire de balises <p>...</p>. Un paragraphe en HTML, c'est tout simplement un bloc de texte d'une ou plusieurs phrases avec un petit bout d'espace pour le séparer du suivant : exactement comme ici.

Pour les titres, il y a six différents degrés de mise en valeur, qui vont du plus élevé <hl>...</hl> jusqu'au plus bas <h6>... </h6>. Ils ressemblent à ceci...

Voici un titre hl

Voici un titre h2

Voici un titre h3 Voici un titre h4

Voici un titre h5

Voici un titre h~

Comme vous le voyez, leur taille diminue quand la valeur de leur chiffre augmente, le <ha> faisant à peu près la même taille que la « petite » police du texte que vous lisez ici. <h5> et <h6> sont plus petits, mais en caractères gras.

Il existe une poignée d'autres petites astuces qui permettent de jouer avec le texte pour mettre en valeurs certains mots ou expressions. Plutôt que de penser à leur aspect, réfléchissez à leur fonction réelle.

Le caractère gras est une version plus lourde de la police de texte, et se marque par <b>...</b>. Toutefois, le mot « gras » est un terme de style pour l'impression, et sur le Web il est préférable d'utiliser <strong>...</strong>. Même si cela revient au même sur votre écran, le HTML doit aussi fonctionner sur d'autres supports. Les logiciels qui lisent les pages Web aux personnes malvoyantes comprendront ce strong et le prononceront avec la force nécessaire.

L'italique s'applique, vous l'aurez deviné, grâce à <i>...</i>. Là aussi, avec HTML, mieux vaut ne pas utiliser ce style visuel mais plutôt <em>...</em>. On obtient ainsi un effet d'italique quel que soit l'outil qui reproduit le texte.

Le soulignement peut s'effectuer avec la paire de balises <u>...</u> mais un soulignement dans une page Web a un sens particulier. Il sert généralement à indiquer un lien. Mieux vaut ne pas utiliser le soulignement comme mode de mise en valeur, cela peut créer une confusion pour les lecteurs.

L'autre balise importante est le retour à la ligne <br>. Contrairement aux autres balises, celle-ci ne requiert pas de balise fermante, qui n'aurait pas beaucoup de sens d'ailleurs : où la mettrait-on ?

En utilisant ces balises de mise en forme de base, le texte commence à prendre forme. Il devient plus proche de ce que vous pourriez produire avec un traitement de texte.

Cette page de base aura sans doute un aspect différent dans d'autres navigateurs et sur d'autres ordinateurs. Chaque navigateur a un ensemble de styles par défaut, et sauf instruction contraire de votre part, il utilisera ces données par défaut. Pour ignorer ces styles par défaut, nous allons tout simplement produire nos propres styles qui seront regroupés dans une « feuille de styles » collective.

Deuxième étape: Une Feuille de Style.

Une feuille de style est un concept assez simple, c'est une page de définitions ou de caractéristiques concernant le style qui indiquent au navigateur comment afficher les divers éléments d'une page. Si vous vous demandez où le terme de « cascade » va arriver, ne vous inquiétez pas encore à son sujet. J'y reviendrai plus tard quand nous commencerons à appliquer les styles à notre HTML.

Pour faire simple, nous allons écrire notre feuille de style dans la page Web. Plus tard, vous constaterez que vous pouvez avoir une « feuille de style externe » dans un fichier séparé, qui peut être appelé par plusieurs pages. Le grand avantage, c'est qu'une seule modification dans cette feuille de style principale affectera toutes les pages qui lui sont liées.

Les styles que nous allons employer sont définis dans la partie <head>...</head> de notre page comme ceci :

<style type="text/css" title ="mes_styles" media="all"> <!--

-->

</style>

Ici, vous voyez une paire de balises <style>...</style> mais il y a en plus quelques attributs qui ont besoin d'être expliqués. type ="text/css" indique au navigateur que nous utilisons juste du texte pour décrire les styles, aucune fantaisie ici. title="mes_styles" identifie simplement le style pour votre propre information.

media="all" C'est là où ça commence à devenir intéressant. Vous pouvez avoir une feuille de style pour décrire à quoi ressemble votre page sur un écran d'ordinateur (media="screen") et une autre complètement différente pour définir l'impression (media="print"). Il y existe d'autres médias comme « projection », « tv », « braille » et « aural ». Maintenant vous pouvez comprendre la logique de ne pas employer « bold » et « italic ». Pour l'instant, nous emploierons seulement « all », qui est pour tous les usages.

Les caractères <!-- et --> sont une manière de cacher le texte sur une page Web, on peut seulement le voir dans le code. Ceci s'appelle « commenter » mais comme les styles sont définis dans la section <head>...</head> de la page, ils ne devraient pas apparaître de toute façon.

La première chose que nous allons faire est de définir le style du corps de la page. Tout ce qui est contenu entre les balises <body>...</body> se verra appliquer ce ou ces styles.



La définition de base de la partie « body » ressemble à ceci : le mot body suivi d'une paire d'accolades.

body {}

Nous allons donner à la page une couleur de fond ...

Le style par défaut des navigateurs donne habituellement du texte noir sur une page blanche, mais nous allons changer cela en un gris pâle plus chaud. Voici comment nous définissons une valeur pour la couleur de fond du corps de la page. Notez que nous n'employons pas un signe égale « = » mais deux points « : ».

body { background-color: #e8eae8 }

Qu'est-ce que c'est, #e8eae8 ?

Les couleurs sur les pages Web sont définies en mélangeant 256 nuances de rouge, de vert et de bleu dans diverses proportions. Les humains ont 10 doigts sur leurs mains, donc ils comptent par dix. Les ordinateurs préfèrent compter par seize, bien qu'ils n'aient pas de doigts, mais une fois que vous allez au-dessus de neuf, il n'y a aucun numéro pour représenter 10, 11, 1 2, 13, 14, et 15. Aussi nous leurs substituons les lettres a, b, c, d, e, f. Ainsi, quand on compte en « hexadécimal », 10 est représenté par « a » et 15 par « f ». Quand vous allez au-dessus de 15, vous ajoutez un deuxième chiffre et « 10 » représente 16. En utilisant cette méthode, tous les nombres de 0 à 255 peuvent être représentés par deux nombres ou lettres. 255 équivaut ainsi à FF, #ffffff sera du blanc et #000000 du noir.

Notre couleur de fond est donc rouge e8 ( 23 2), vert ea ( 234), bleu e8 ( 23 2). Le signe dièse devant précise qu'il s'agit de nombres hexadécimaux et non de décimaux ordinaires.

Parfois vous verrez seulement trois caractères, par exemple, #2a0. C'est une notation courte pour 22aa00. Quand il y a les deux mêmes caractères dans chacune des trois valeurs de couleur, vous pouvez vous passer du second caractère et votre navigateur comprendra ce que cela signifie.

En utilisant seulement trois chiffres, vous pouvez avoir 4096 couleurs différentes. Avec six chiffres, les possibilités sont de seize millions.

Avec des couleurs à un seul chiffre, le rouge, le vert et le bleu ont chacun 16 étapes de luminosité, qui peuvent être combinées de nombreuses façons afin de produire toutes les autres.

 Si vous codez à la main, employer des valeurs de couleur à trois chiffres est plus simple et probablement suffisant.

Quoi qu'il en soit, ajoutons maintenant une couleur pour la police afin de remplacer le noir. Elle a été choisie avec l'outil « pipette » dans Photoshop, c'est ainsi un nombre hexadécimal de 6 chiffres ...

body { background-cotor: #e8eae8; cotor: #5d665b }

Notez comment la couleur de fond et la couleur de premier plan (pour le texte) sont séparées par un point-virgule. Faites attention à ne pas mélanger les deux points et les points-virgules ou les choses tourneront vraiment mal.

Et maintenant, de façon à ce que le texte ne s'étende pas jusqu'aux bords de notre page, nous pouvons entourer la page d'une marge. « margin : 50px » est ajouté à notre définition de style pour la partie « body », de nouveau séparée de la précédente par un point-virgule.

body {

background-cotor: #e8eae8;

cotor: #5d665b;

margin: 5Upx

}

N'importe quel texte que nous ajouterons maintenant à la page sera par défaut d'un gris-vert foncé sur un fond gris pâle. Nous verrons plus tard comment ceci peut être redéfini pour des cas spéciaux.

Jetons un oeil sur ce que nous avons fait jusqu'ici. ()

Troisième étape: appliquer du style au texte

Nous nous sommes déjà débarrassés du côté brut du noir et blanc pour le remplacer par quelque chose de plus doux, mais on peut faire beaucoup plus. On peut changer la police d'écriture, la taille des caractères, la quantité d'espace entre les lignes et ajouter des détails de mise en valeur comme des retraits de paragraphes.

La police d'écriture

Nous allons commencer par le style de police, dans la mesure où c'est ce qui va apporter le plus grand changement. À la différence du papier, les pages Web ne peuvent utiliser que les polices qui sont installées sur l'ordinateur de l'utilisateur: on ne peut donc pas se contenter d'indiquer la police qui nous plaît le plus, il faut utiliser celles qui sont communes à tous les ordinateurs (celles qui sont préinstallées avec le système). Cela réduit considérablement le choix. Vous allez vous apercevoir que vous êtes limités à deux ou trois polices serif, à autant de sans-serif et à un style de type machine à écrire, à espacement constant : monospace. Au lieu de ne choisir qu'un seul style de police, on indique une famille, dans l'espoir qu'une d'entre elles sera installée sur l'ordinateur du visiteur.

Ci-dessus : quelques polices courantes sur les ordinateurs Windows et Mac. Vous ne pouvez jamais être certain que telle ou telle police est présente, il faut donc fournir des alternatives.

Voici une indication courante de famille de polices sans-serif :

font-famity: Verdana, Geneva, Ariat, sans-serif;

Voici une famille de polices serif :

font-famity: Georgia, "Times New Roman", Times, serif;

Remarquez que lorsque le nom d'une police contient plus d'un mot, l'ensemble doit être placé entre guillemets à l'anglaise : "Times New Roman".



Ajoutons les polices sans-serif à nos styles et voyons ce que ça donne.

Notre page en police sans-serif» (

La taille des caractères

La question de la taille qu'on assigne aux caractères est très délicate. Pour l'impression, on peut fixer une taille de police en points, et le caractère aura toujours cette même taille. Il occupera toujours le même espace sur la page, et les retours à la ligne seront toujours à l'endroit que vous aurez choisi.

Sur le Web, les tailles de caractères ne sont pas gravées dans le marbre, et elles peuvent changer d'un ordinateur à l'autre, parfois du tout au tout. En fonction de la taille de l'écran de l'internaute, de son système d'exploitation et de son navigateur, les caractères peuvent devenir tellement petits qu'ils en sont illisibles, ou aussi grands que dans des méthodes de lecture pour enfants. Les internautes ont heureusement la possibilité de choisir une taille « confortable » dans les préférences de leur navigateurs, et donc de réduire un peu ces variations de taille, mais le résultat peut rester très différent de ce que vous attendiez.

Vue la popularité grandissante du Wi-Fi et des systèmes de poche, les modes de navigation sur vos pages vont changer radicalement dans les prochaines années. Pour que vos pages restent lisibles à long terme, vous devez raisonner en termes de maquettes liquides qui s'adaptent à la taille de l'écran.

Répétez après moi : « Le Web, ce n'est pas la même chose que le papier ! »

Tailles de caractères relatives

Si vous voulez que vos pages touchent le plus large public, mieux vaut assigner une taille de caractères relative à la taille que le visiteur aura choisie par défaut. Il y a plusieurs façons d'assigner des tailles de caractères relatives. Vous pouvez utiliser des pourcentages de la valeur par défaut (%), ou bien une unité nommée « em », qui correspond à 100%. 1. 2em revient à 1 20%. La meilleure méthode est d'utiliser un ensemble de descriptions pré-définies qui font penser à des tailles de tee-shirts. « Medium » revient à 100%, ou 1em. « Smaller » est une taille en-dessous, et « Larger » une taille au dessus. Il y a aussi x-small, xx-small, x-large et xx-large. L'intérêt d'utiliser ce système par rapport aux pourcentages ou aux ems, c'est que les navigateurs ne laisseront pas la police d'écriture devenir si petite qu'on ne puisse plus la lire. Imaginez, par exemple, que vous indiquiez une taille de caractères de 0.7em ou de 70% qui rendrait très bien sur votre PC. Pour quelqu'un équipé d'un Mac avec une taille de caractères par défaut plus petite, ce 70% pourrait faire passer vos caractères sous le seuil de la lisibilité. xx-small est une bonne solution pour déterminer quelle est la taille de caractères minimum que l'ordinateur peut afficher.

xx-large x-large l arge medium small x-small xx-small

Caractères xx-small : C'est petit mais le texte reste lisible Avec une taille fixe trop petite : C'est beaucoup trop petit

Tailles de caractères absolues

Si votre site ne concerne qu'un nombre limité de visiteurs qui utilisent à peu près le même type d'ordinateur que vous, vous pouvez également indiquer des tailles de caractères en pixels. Les pixels ne varient pas tellement d'un ordinateur de bureau à l'autre, et la taille des caractères sera similaire, sinon identique. Dès que l'on passe à des ordinateurs portables ou bien de poche, ou encore à des moniteurs très grands et à haute résolution, les tailles de pixels s'éloignent de la norme, et la taille des caractères sera modifiée d'autant.

Pour que vous puissiez percevoir les différences, j'ai placé ci-dessous trois paragraphes de texte en utilisant trois méthodes : les pourcentages, les tailles de tee-shirts et les pixels. Sur mon écran sous Mozilla, leurs tailles sont quasi-identiques, mais ce n'est peut-être pas le cas sur le vôtre.

Cette ligne est définie à 85% de la taille du texte qui l'entoure. Cette ligne est définie en x-small.

Cette ligne est définie à 11px absolument.

Notez qu'il ne faut jamais utiliser les « points » pour indiquer des tailles de caractères, c'est une unité d'impression.

L'interlignage

La quantité d'espace entre les lignes est d'environ 1 20% de la taille de caractères par défaut. On peut en ajouter un peu plus, ce qui améliore généralement la lisibilité, surtout si les lignes sont longues. J'évoquerai la longueur des lignes plus tard. Dans notre page d'exemple actuelle, la longueur des lignes est déterminée par la largeur de la fenêtre du navigateur, donc elle est peut-être plus grande qu'il ne faudrait.

Pour changer l'interlignage, nous avons à nouveau l'option relative (en % ou en ems) ou absolue (en px). Dans notre exemple, j'ai indiqué une hauteur de ligne (line-height), c'est-à-dire la hauteur du caractère et de l'espace supplémentaire au dessus, à 180% de la taille de caractères (small) pour toute la page. Comme la définition du style de la partie « body » commence à être un peu longue, je l'ai séparée en plusieurs lignes. Le navigateur s'en moque, mais c'est plus facile à lire par des humains. Tant que les accolades sont présentes et que chaque définition de style est séparée des autres par un point-virgule, tout va bien.

body {

background-color: #e8eae8;

color: #5d665b;

margin: 50px;

font-family: Verdana, Geneva, Arial, sans-serif;



font-size: small;

line-height: 180%

}

Nous avons maintenant une page plus « aérée » » ()

Les paragraphes

Tout ce que nous avons réalisé jusqu'à présent concernait l'ensemble de la page. Maintenant nous allons voir comment appliquer notre style à des zones plus précises.

Comme je l'ai évoqué précédemment, de gros morceaux de texte peuvent être découpés en paragraphes pour les rendre plus faciles à lire. Il existe plusieurs façons de séparer visuellement les paragraphes. On peut ajouter de l'espace supplémentaire, ou pourquoi pas faire un retrait de première ligne.

En typographie créative, les designers souhaitent parfois utiliser d'autres techniques moins courantes, comme un retrait d'à peu près la moitié de la largeur de la colonne, ou un retrait négatif. Les CSS sont capables de gérer tout cela, mais le séparateur de paragraphes par défaut est un « espacement de paragraphe » qui fait à peu près la moitié de la hauteur de ligne (line-height).

Pour qu'un bloc de texte devienne un paragraphe, contentez-vous de l'encadrer par une paire de balises <p>...</p>. Pour pouvoir manipuler le style des paragraphes avec CSS, on ajoute p { } aux définitions de style dans la partie « head » de la page, à la suite des styles pour « body ». Entre les accolades, ajoutez text-indent: 3em; (indent est le mot anglais pour « retrait », NdT)

<style type="text/css" title ="mes~styles" media="all">

<~--

body { background-color: #e8eae8;

color: #5d665b;

margin: 50px;

font-family: Verdana, Geneva,

Arial, sans-serif;

font-size: small;

line-height: 180%

}

p { text-indent: 3em } -->

officiellement un paragraphe (en termes de HTML).

Les titres

J'ai déjà expliqué les six niveaux de titre que le HTML propose par défaut. Rien ne nous oblige à les conserver tels quels, nous pouvons les redéfinir selon nos besoins. Là encore, il ne s'agit que d'ajouter d'autres définitions aux styles.

Par défaut, les titres sont en grands caractères gras, et dotés d'espacements supplémentaires au-dessus et en-dessous. Souvenez-vous que les titres h1, h2 et h3 sont plus gros que le texte normal, tandis que h5 et h6 sont plus petits. Amusons-nous avec un titre h3 pour changer sa couleur et sa police de caractères.

h3 {cotor: #966b72; font-famity: Georgia, "Times New Roman", Times, serif }

Nous avons maintenant des titres» ()

Vous remarquez peut-être que j'ai ajouté une ligne vide sous le deuxième titre. Si vous vous contentez de mettre un paragraphe vide (<p></p>) cela ne marchera pas, il doit y avoir quelque chose entre les balises. Un espace ne fonctionnera pas non plus (<p> </p>) parce que HTML ignore les espaces s'ils ne sont pas entre deux caractères. Ce dont nous avons besoin, c'est d'un caractère invisible que nous fournit HTML sous le nom d'espace insécable que l'on peut taper &nbsp; comme ici:

<p>&nbsp;</p>

L'espace insécable est également très utile placé entre deux mots que vous ne souhaitez pas voir séparés lorsque la ligne se termine : des noms de personnes ou d'entreprises par exemple.

D'autres petites manips

Avant d'aborder la partie suivante, essayons de modifier quelques petites choses dans notre page de texte.

Dans la définition de la partie « body », j'ai mis une marge de 5O pixels pour tous les côtés. Il est possible d'avoir différentes marges pour la gauche, la droite, le haut et le bas. Il n'y a qu'à les séparer comme ceci (respectivement marge du haut, de gauche, de droite et du bas, Nd7) :

margin-top: 7Upx; margin-teft: 12Upx; margin-right: 5Upx; margin-bottom: 7Upx;

Cela va donner quelque chose plus proche d'une page imprimée, avec une marge de gauche plus importante. J'ai aussi appliqué à deux ou trois mots du gras (strong) et des italiques (em). Attention, les italiques rendent mal sur certains ordinateurs, et deviennent particulièrement difficiles à lire quand la taille est réduite.

Voyez notre page quand le texte a reçu ses styles » () Désormais, vous disposez d'une page qui commence à avoir du style, et sans avoir fourni trop d'efforts. Toutefois, elle ressemble encore à un document tapé à la machine ou à l'aide d'un traitement de texte. Dans le prochain article, nous verrons d'autres possibilités de mise en page plus intéressantes.

En attendant, vous pouvez vous amuser avec les valeurs des styles de la page que vous venez de créer. Essayez différentes polices et tailles de caractères, différents interlignages. Mais surtout, visionnez votre page avec autant de navigateurs différents que possible, pour observer toutes les différences de rendu.

Quatrième étape: plus de mise en forme pour le texte

Avant d'aller plus loin dans la mise en forme du texte, c'est une bonne idée de vous familiariser avec quelques termes basiques de typographie.

Quand nous parlons de la taille de la police, ou font-size en CSS, cela fait référence à la distance entre le sommet d'une lettre majuscule comme « A » jusqu'au bas d'une lettre à jambage comme « p » ou « y ». Il peut aussi y avoir un léger espace supplémentaire appelé « interlignage ». Ce mot vient du fait que les imprimeurs utilisaient des petites lattes de plomb entre les lignes pour leur donner plus d'espace. (NdT : En anglais, « interlignage » se dit « leading » et le plomb se traduit « lead ».)



Aujourd'hui, on n'utilise plus de plomb. On dit juste qu'il y a un certain espace entre la base d'une ligne de caractères et la suivante. L'interlignage est donc la hauteur du caractère plus cet espace supplémentaire. Dans une définition CSS, nous pourrions dire line-height: 180%; avec la valeur spécifiée en pourcentage, em ou pixels (px). On reviendra sur l'interlignage un peu plus loin.

Vertical-align vous permet d'ajuster la ligne de base pour des lettres individuellement par rapport au reste du texte mais relève plutôt pour un usage spécialisé (comme les formules mathématiques), et on ne va pas s'étendre sur son cas ici. Dans l'exemple basique ci-dessous, j'aurais pu utiliser la balise <sup>z</sup> mais le recours à CSS permet plus de contrôle.

E=MC

Les CSS nous donnent également le contrôle sur l'interlettrage (ou crénage), c'est-à-dire l'espace entre chaque caractère ou mot.

C'est très pratique pour ajouter un style visuel à un gros titre. UN TITRE ESPACÉ.

letter-spacing: 0.5em; word-spacing: 0.5em

Penser à la lisibilité

Avant que les navigateurs ne supportent aussi bien les CSS qu'à l'heure actuelle, il y avait une caractéristique essentielle qui manquait au formatage du texte en HTML, et que maîtrisait même la plus modeste des machines à écrire , l'interlignage. Quand il y a trop peu ou pas du tout d'espace entre les lignes, elles deviennent déprimantes et difficiles à lire. Et plus les lignes s'allongent, plus le problème s'accentue.

Des lignes trop courtes interrompent trop le schéma de lecture de l'œil de la gauche vers la droite.

Des lignes plus longues que la normale sont aussi fatigantes et le début de la ligne suivante devient difficile à localiser.

Pour une lecture confortable, une ligne de texte devrait être de la même longueur que une fois et demie à deux fois la longueur d'un alphabet en minuscules. Ce qui signifie entre quarante et soixante caractères ou huit à dix mots.

Si les lignes sont plus longues, un interlettrage plus grand aide à la lisibilité. Au début, beaucoup de pages web avaient leurs textes qui s'étendaient d'un bord à l'autre de la fenêtre, sans se soucier de la taille d'écran. Les écrans sont devenus plus larges, mais la pratique continue chez certains.

Par défaut, il y a un petit interlettrage dans les paramètres de texte des navigateurs. C'est approximativement 20 % de la taille de la police (hauteur d'une majuscule plus le jambage inférieur). Avec CSS vous pouvez avoir autant d'interlignage que vous le souhaitez. Si vous utilisez des tailles de polices relatives, vous pouvez le spécifier comme un pourcentage de la taille de la police. Exemple : font-size: 1em; line-height: 1.5em (ce qui équivaut à 150%). Si vous utilisez des tailles de polices fixes, vous pouvez indiquer quelque chose comme : font-size: 11px; line-height: 16px.

body {

color: #5d665b;

font-size: small;

font-family: Verdana, Geneva, Arial, sans-serif;

background-color: #e8eae8

}

Le bloc de texte en bas de l'exemple est encapsulé dans une division de la page <div>...</div>. C'est comme une page dans une page. Elle possède une marge gauche de 250px, une marge droite de 200px, et l'interlignage est défini à 180%. Ces styles sont ajoutés aux spécifications générales de l'élément body par un procédé appelé « héritage ». Exactement comme un enfant qui peut hériter de certaines caractéristiques de ses parents, puis à son tour les transmettre à ses enfants, certains styles CSS « cascadent » quand ils sont imbriqués dans d'autres styles.

<div style="margin-left: 250px; margin-right: 200px;

line-height: 180%">...</div>

Les divisions de page (<div>) sont une part très importante de CSS et nous les étudierons plus en détail la prochaine fois.

Le contraste

Contrairement à une page imprimée que vous lisez par la réflexion de la lumière, la page sur un écran d'ordinateur est lumineuse. La différence de luminosité entre le texte noir et la page blanche est d'une amplitude beaucoup plus grande sur un écran que sur une page imprimée. Quand on lit de grandes zones de texte noir sur fond blanc, c'est un peu comme quand on se promène sous un grand soleil sans lunettes noires. On finit peut-être par se protéger les yeux en mettant sa main en visière, mais par défaut on a plutôt tendance à plisser des yeux et à se sentir mal à l'aise sans vraiment savoir pourquoi.

Réduire le contraste du texte des pages web permet une lecture plus confortable et moins stressante. Cela dit, si vous diminuez trop le contraste, vous commencez à rendre les choses difficiles pour les gens ayant une faible vision.

Dans un article comme celui-ci (NdT: la page ) où il y a beaucoup de texte à lire et où le lecteur est amené à rester quelque temps devant son écran, il est important d'offrir un environnement aussi confortable que possible. J'ai donc utilisé une teinte de fond légère et des couleurs douces.

Cinquième étape: des listes à gogo

Une autre technique très courante pour mettre en forme des documents consiste à utiliser des « listes ». Elles ressemblent à des paragraphes, avec de petites choses en plus.

HTML peut nous fournir des listes de base qui ont soit des puces (listes non numérotées) <ul>...</ul>, soit des chiffres (listes numérotées) <ol>...</ol> en tête de chaque élément de la liste <li>...</li>. Chaque catégorie présente quelques options que l'on peut indiquer dans le HTML : li type =°square° donne des puces carrées, li type=°i° donne des chiffres romains en bas de casse.



Liste non numérotée par défaut:

Élément de liste non numérotée Élément de liste non numérotée Élément de liste non numérotée

Liste non numérotée avec puces carrées:

Élément de liste non numérotée Élément de liste non numérotée Élément de liste non numérotée

Liste numérotée par défaut:

  1. Élément de liste numérotée 1
  2. Élément de liste numérotée 2
  3. Élément de liste numérotée 3

Liste ordonnée avec chiffres romains :

  1. Élément de liste numérotée 1
  2. Élément de liste numérotée 2

iii.           Élément de liste numérotée 3

Les CSS vous offrent davantage de choix et de contrôle : il suffit d'ajouter une définition pour ol ou ul à vos styles.

ol {list-style-type: lower-roman; margin: lem 0 lem 40px }



1137