CSS (Cascading Style Sheet - Feuilles de style en cascades) est un "système" qui permet de pallier aux graves insuffisances du langage HTML.
Endroits où placer ses sélecteurs
Redéfinition d'une balise existante
Création d'une balise inexistante
Utilisation de * et body pour tous les éléments
Sélecteurs sensibles à la casse
Combinaison de plusieurs classes
Création d'une classe pour une balise spécifique
Les balises génériques SPAN et DIV
Utilisation du joker * pour les descendants
Styles différents selon le mode d'affichage
Feuille de style CSS locale au navigateur
La tableaux sont traités dans cette page à part.
Avant de parler de "Cascade", ou même de "Feuille", nous allons parler de "Style".
Lorsque vous concevez une page web, vous désirez qu'elle soit jolie : qu'elle ait une couleur de fond, des images, et du texte formaté différemment selon ce que vous voulez écrire.
Un peu comme cette page elle-même, d'ailleurs ! Vous voyez le petite texte d'introduction en blanc sur fond gris noir ? C'est stylé, non ?
Il y a quelques années, on se contentait de coder en HTML (HyperText Markup Language), et une page web pouvait ressembler à ceci :
Les chats
Les chats sont de sympathiques animaux de compagnie.
Leur nourriture
Les chats mangent principalement de la viande. Ce sont des "Canivores".
<h1>
Les chats
</h1>
<p>
<FONT COLOR="#CC0000">
Les chats sont
</FONT>
de
<strong>
sympathiques
</strong>
</p>
<h2>
Leur nourriture
</h2>
<p>
<FONT COLOR="#CC0000">
Les chats mangent
</FONT>
principalement de la viande. Ce sont des "
<em>
Canivores
</em>".
</p>
Vous comprenez aisément le fonctionnement : les balises telles que <h1>, ou <em>, encadrent le texte qu'il s'agit de mettre en forme.
Par exemple, <h1> veut dire "Header 1", soit "Titre 1", c'est à dire un tout gros titre. <h2>, veut dire un titre moins gros, et <em> : italique.
Ainsi, vous savez que ce qui est écrit en <h1> apparaîtra en gros sur l'écran.
Oui, mais gros comment ? Beaucoup plus gros que <h2> ? Et pourquoi en noir et pas en bleu par exemple ?
En fait, beaucoup de choses vont dépendre du navigateur utilisé. Internet Explorer n'affiche pas les choses exactement comme FireFox ou Safari, ou Google Chrome ou Opéra.
Nous avons peu de contrôle, car nous ne savons pas quel navigateur nos visiteurs vons utiliser pour visiter notre belle page web.
Comment puis-je savoir si vous utilisez FireFox, Internet Explorer ou un autre navigateur ?
2ème problème : vous voyez que le début de nos deux phrases sont écrites en rouge. Et si tout à coups, vous vouliez les écrire en vert par exemple ?
Evidemment, il n'y a qu'à les sélectionner l'une puis l'autre, et les mettre en vert, tiens !
Mais maintenant, imaginez que j'ai 40 pages web, avec, au total, 850 débuts de phrases rouges.... J'aurai tôt fait de me dire : "Oh puis zut, je les laisse en rouge ! Je n'ai pas le courage de les transformer en bleu l'une après l'autre, j'en ai pour l'après-midi !"
Le CSS va pallier à tout ça, et bien plus, vraiment bien plus encore !
Avant de se lancer dans les CSS, préparez une page HTML de base qui va ressembler à ceci :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ma belle page html</title>
<link href="feuillestyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body leftmargin="0px" rightmargin="0px" topmargin="0px" bottommargin="0px">
</body>
</html>
Il existe des balises de type Block et Inline.
Par exemple, la balise <p> est une balise de type block. <strong> est une balise de type inline (Mise en évidence : souvent en gras). Je n'ai rien défini en CSS, j'ai juste ce code :
<body>
un <p> deux </p> trois
<br />
quatre <strong> cinq </strong> six
</body>
Qui va donner :
un
deux
trois
quatre cinq six
Les balises de type block impliquent, imposent donc, un saut de paragraphe avant et après. Tandis que les balises inline ne font pas ça.
Il existe une balise inline neutre et block neutre (Qui n'imposent aucune mise en forme. C'est <div> et <span>
un <div> deux </div> trois
<br />
quatre <span> cinq </span> six
qui donne :
un
deux
trois
quatre cinq six
Il est possible de contrarier les prédéfinitions HTML. Par exemple, admettons que vous désiriez utiliser la balise <blockquote> en mode inline, on peut faire comme ceci.
<body>
un <blockquote> deux </blockquote> trois
</body>
Qui va donner :
un
deux
trois
<head>
<style type="text/css">
blockquote {display:inline;}
</style>
</head>
<body>
un <blockquote> deux </blockquote> trois
</body>
Qui va donner :
un deux trois
Il faut faire attention aux balises imbriquées. A l'intérieur d'un <div>, on peut imbriquer d'autres balises inline ou block (y compris d'autres <div>), mais pour les balises prédéfinies, c'est une autre histoire, et rien n'est simple.
Une chose est certaine : il est "interdit" imbriquer une balise de block dans une balise inline. Toutefois, si on se risque à l'exercice, on obtient un résultat probant.
<p> est une balise de block. Elle ne peut théoriquement pas contenir d'autres balises de block : seulement des balises inline. Or, quand on teste le code suivant, dans lequel l'insère une balise <div> au sein d'un <p>, ça fonctionne dans Google Chrome, Internet Explorer et FireFox :
<p>
un
<div>
Deux
</div>
trois
</p>
</body>
un
deux
trois
Pour voir le détail de ces exceptions, voyez cette page sur Alsa-créations.
En sortant de cette page, on est tenté de remplacer toutes les balises par des <span> et des <div> uniquement. Ce qui est possible, mais rend la page incompréhensible au niveau de la sémantique (par exemple sur les moteurs de recherche). D'autre part, on perd ainsi certaines fonctions prédéfinies pratiques au sein du logiciel de conception de site web, comme DreamWeaver par exemple.
Les valeurs des éléments sont en rapport à l'élément parent (enveloppant). Prenons l'exemple de marges :
<head>
<style type="text/css">
.truc{margin-left: 100px;}
.machin{margin-left: 100px;}
</style>
</head>
<body left-margin="0px right-margin="0px" top-margin="0px" bottom-margin="0px">
un
<div class="truc">
deux
<div class="machin">
trois
</div>
</div>
</body>
Qui va donner :
un
deux
trois
"trois" est donc décalé de 100 pixels par rapport à sa balise parente "truc". Et "truc" est décalé de 100 pixels par rapport à sa balise parente qui est tout définie à 0 : <body>
L'héritage est la passation d'une propriété de haut en bas. La cascade est la résolution des conflits.
Comme ceci :
Nous avons la classe truc définie en fond jaune. Immédiatement, elle est écrasée par un fond rose, et finalement, re-écrasée par une définition locale bleue. Ce phénomène d'écrasements successifs s'appelle "cascade".
Dans la première définition de la classe truc, l'écriture est définie en rouge, puis, on ne s'en occupe plus. Elle n'est plus écrasée. Donc, elle se propage naturellement "vers le bas". Cette propagation naturelle s'appelle "héritage".
Il existe des cas ou, heureusement, l'héritage ne s'applique pas. C'est le cas des balises inline incluses dans des balises de block. Bien qu'il soit tout à fait possible de créer des marges dans les balises inline, celles ci ne sont pas héritées de la balise parente. Dans cet exemple, la couleur de fond vert va être transmise d'armoire à tiroir, mais pas la marge de gauche :
Résultat (Marge de 20 pixels sur la gauche OK, même si on ne s'en rend pas compte) - Notez que le fond vert a été correctement hérité.
Je suis un manteau. Je suis une chaussette. Je suis une veste
Regardez la différence avec le code suivant :
Cette fois, vous avez la marge de gauche du paragraphe, toujours OK, et, puisque l'héritage n'est pas entré en action, nous l'avons imposé à Tiroir, et vous constatez qu'il y a effectivement une marge de 20 pixels à gauche de "Je suis une chaussette" :
Je suis un manteau. Je suis une chaussette. Je suis une veste
Les liens hypertextes peuvent être mis en forme lors de plusieurs événements.
Dans ce premier exemple, nous nous contentons de mettre en fond vert tous les liens hypertextes :
<style type="text/css">
a{background-color:#00FF00;}
</style>
</head>
<body>
<!-- Le lien hypertexte #, c'est simplement pourqu'il mène juste en haut de cette même page. On aurait évidemment pu mettre n'importe quelle adresse à la place -->
un <a href="#">deux</a> trois
Maintenant nous allons, à l'aide de ce qu'on appelle des pseudo-classes, déterminer les mises en formes des liens hypertexte lorsque :
L'ordre de ces événements doit être ainsi : link - visited - hover et active, sinon ça ne fonctionne pas
<style type="text/css">
/* Cette mise en forme initiale ne sera du coup plus du tout utilisée */
{background-color:#00FF00;}/* Vert*/
a:link {background-color:#0066FF;} /* Lien pas encore visité : bleu*/
a:visited {background-color:#FFFF00;} /* Lien déjà visité : jaune */
a:hover {background-color:#FF66FF;} /* La souris passe par dessus (sans clic) : rose*/
a:active {background-color:#9999CC;} /* le bouton de la souris est appuyé : violet*/
</style>
</head>
<body>
un <a href="#">deux</a> trois <br/>
quatre <a href="#">cinq</a> six
Essayez :
<style type="text/css">
.truc:first-letter{background-color:#00FF00}
.truc:first-line{background-color:#FF6600}
</style>
</head>
<body>
<p class="truc">un deux trois. un deux trois. un deux trois. <br/>
un deux trois. un deux trois. </p>
un deux trois. un deux trois. un deux trois.
un deux trois. un deux trois.
Pour illustrer ceci, nous allons utiliser un fichier de base html : fichierbase.htm, premierefeuillestyleexterne, deuxiemefeuillestyleexterne et troisiemefeuillestyleexterne.
Pour des raisons pratiques, je commence par reproduire les feuilles de style externes.
premierefeuillestyleexterne.css
@import url(troisiemefeuillestyleexterne.css);
grisdanspremierefeuillestyleexterne
{
background-color: #333333;
color: #CCCCCC;
}
deuxiemefeuillestyleexterne.css
vertfoncedansdeuxiemefeuillestyleexterne
{
background-color: #00FF00;
color: #006600;
}
troisiemefeuillestyleexterne.css
violetdanstroisiemefeuillestyleexterne
{
background-color: #9900FF;
color: #CCCCFF;
}
fichierbase.htm
<head>
<link href="premierefeuillestyleexterne.css" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(deuxiemefeuillestyleexterne.css);
localpage
{
background-color: #00CCFF;
color: #0000CC;
}
</style>
</head>
<body>
<localbalise style="background-color:#FFFF00">Jaune, couleur par défaut noir</localbalise> <br/>
<localbalise style="background-color:#FF6600;color:#990000">Rouge fonce sur orange</localbalise> <br/>
<localpage>bleu foncé sur bleu clair</localpage> <br/>
<localpage style="color:#006600">vert foncé sur bleu clair</localpage> <br/>
<grisdansfeuillestyleexterne>Gris, depuis la 2ème feuille de style</grisdansfeuillestyleexterne> <br/>
<vertfoncedansdeuxiemefeuillestyleexterne>Vert, depuis la feuille de style externe</vertfoncedansdeuxiemefeuillestyleexterne> <br/>
<violetdanstroisiemefeuillestyleexterne>Violet, depuis la 3ème feuille de style, (appelée depuis la 1ère feuille de style)</violetdanstroisiemefeuillestyleexterne> <br/>
</body>
Nous avons ici une balise localbalise qui a simplement la propriété background-color définie à jaune. Toutes les autres propriétés sont les propriétés par défaut (couleur de caractères noire, police arial, etc.)
Nous réutilisons local balise, avec simplement cette fois deux propriétés. Nous avons, en plus, la couleur de police qui est définie.
Ces définitions sont un peu contraires à la philosophie des CSS qui veut que l'on puisse réutiliser les mises en formes. Or, ici, c'est du coup par coup.
<localpage>bleu foncé sur bleu clair</localpage>
Cette définition est puisée dans la section <head>, à l'intérieur de
<style type="text/css">
<localpage style="color:#006600">vert foncé sur bleu clair</localpage>
Cette mise en forme est hybride. Elle va également chercher sa définition dans la section <style type="text/css">, mais elle écrase localement la couleur de caractères.
Il y a deux syntaxes d'appel d'un fichier CSS externe :
La 2ème méthode comporte l'avantage de pouvoir aussi s'écrire dans un fichier CSS. D'ailleurs, dans mon exemple, premierefeuillestyleexterne.css appelle troisiemefeuillestyleexterne.css de cette manière.
On peut ainsi avoir une cascade de feuilles externes CSS.
Cette mise en forme provient donc clairement de premierefeuillestyleexterne.css
Cette mise en forme provient donc clairement de deuxiemefeuillestyleexterne.css
Et enfin, cette mise en forme provient de troisiemefeuillestyleexterne.css, elle même appelée par premierefeuillestyleexterne.css, elle-même appelée depuis le fichier html fichierbase.htm.
Les commentaires ne se délimitent pas de la même manière en html ou en css :
Attention : cette technique fonctionne dansd FireFox, mais PAS dans Internet Explorer.
Cette technique ressemble un peu à la suivante.
Le point "." qui précède fondvert veur dire qu'il s'agit d'une classe. Une classe qui peut s'adapter à toute sorte de balise (ici : p et h1)
Ce qui veut donc dire qu'on pourra également définir des classes uniquement pour certaines balises.
En réalité, le point est l'écriture raccourcie de *.
On aurait pu écrire *.fondvert {background-color:#00FF00;}
Il est possible de créer des classes, qui sont utilisables autant de fois qu'on veut dans une page HTML, et on peut également créer des ID qui fonctionnent strictement de la même manière que les classes, mais les ID sont censés n'être représentés qu'une seule fois dans la page. Or, il n'y a aucune erreur si on utilise plusieurs fois le même ID.
Pour qu'une classe soit un ID, on remplace le point (.) par #, et class par ID, comme ceci :
<style type="text/css">
#truc{background-color:#00FF00;}
.machin{background-color:#FFFF00;}
ok
ok
ok
ok
non
non
En cas de conflit, l'id l'emporte sur la classe. Etudions ce cas d'école : nous avons un id armoire et une classe armoire :
Ici, toute la page est sur fond vert.
Une autre possibilité aurait été de redéfinir la balise <body> :
L'utilisation aurait été la même qu'avec l'étoile *.
un
deux
trois
Attention : ne vous amusez pas a créer deux sélecteurs avec la même orthographe mais une casse différente, car certains anciens navigateurs ne sont justement pas case-sensitive.
Il peut y avoir conflit, comme par exemple :
Dans ce cas, c'est la règle de la cascade qui s'applique. C'est à dire que la priorité se donne de haut en bas.
Peu importe qu'il soit écrit <p class = "fondvert ecriturerouge"> ou <p class = "ecriturerouge fondvert">, .ecriturerouge est défini en premier et .fondvert en deuxième, donc, .fondvertécrase .ecriturerouge,d'ou l'écriture vert foncé qui supplante l'écriture rouge.
Ici, fondvert ne peut s'appliquer à la balise h1. (il prendra la mise en forme par défaut).
<span> est une balise dite "en ligne". C'est à dire qu'elle ne s'accomode pas des retours chariots. Comme ceci :
Va afficher :
un deux trois
Même si dans le code source html "un", "deux" et "Trois" sont en dessous l'un de l'autre.
Bien. Voici <div>, avec la même classe :
un <div class = "fondvert"> deux </div> trois
Ce code va afficher :
un
Même si dans le code html, tout est écrit sur une seule ligne. Remarquez le fond vert qui prend toute la largeur de la page.
On peut être tenté d'écrire la totalité d'un site web à l'aide de balises <span> et <div>.
Dans l'exemple ci-dessous, on utilise une fois la balise <span> avec un attribut gras, et, juste en dessous, on utilise la balise prédéfinie en HTML <strong>
un deux trois
un deux trois
Constatez que la balise prédéfinie s'appelle <strong> et pas <bold>. C'est à dire qu'elle a un sens plutôt sémantique que de mise en forme. Strong veut dire "fort" en français, c'est du texte fort, important.
Les navigateurs vont donc mettre ce texte en évidence. Et ils vont tous s'accorder pour écrire le texte dit "strong" naturellement en ... gras !
On ne peut pas exclure qu'une nouvelle mouture d'un navigateur, ou un navigateur un peu exotique, décide de mettre tous les textes <strong> en rouge par exemple.
Du coup, vous pourriez vous dire que pour garder la pleine maîtrise de l'affichage de voitre page web, vous préférez la technique du <span class="gras">.
L'inconvénient est que cette balise <span> n'est absolument pas comprise par les moteurs de recherche.
Comme personne (a part Larry Page et Sergey Brin, les fondateurs) ne connaît précisément les techniques qu'utilise Google pour référencer vos pages, vous risquez d'être moins bien référencé !
Tandis que si vous utilisez la balise <strong> (même avec une classe, ça ne dérange pas), Google peut se dire "tiens, ce terme est important, je vais faire en sorte que si un utilisateur le recherche, la page web apparaisse en meilleure position que s'il recherche du texte "normal".
Bien entendu, si vous mettez l'ensemble de votre page en <strong>, ça n'a plus de sens, et Google risque de vous considérer comme un tricheur.
Si l'histoire des navigateurs qui peuvent mettre le texte <strong> en rouge à la place de gras vous effraie, rien n'empêche de créer une classe comme ceci (imaginons que voius désiriez imposer la couleur bleu foncé) :
<style type="text/css">
strong
</style>
</head>
<body>
un <strong>deux</strong> trois
Note personnelle : Google, et tous les moteurs de recherche, se rendent bien compte que chacun programme ses pages HTML "à sa sauce". Du coup, je pense que ce fameux "poids sémantique" va perdre de plus en plus de son sens au profit du simple contenu de texte, qu'il soit encadré de div, span, strong, p, ou n'importe quoi d'autre.
L'un des gros avantages des <span> et des <div> avec une balise prédéfinie, comme <p>, c'est que les <span> et <div> peuvent s'imbriquer, mais pas <p>
par exemple :
On pourrait s'attendre à quelque chose comme ceci :
debut
milieu
fin
Mais en fait, assez bizarrement, le début et le milieu fonctionnent bien mais pas la fin, comme ceci :
debut
milieu
fin
Par contre, avec <span> ou <div>, tout va bien :
debutmilieufin
La même chose avec <div> a simplement pour effet de passer à la ligne chaque élément :
Il est possible d'imbriquer des <span> dans des <div>. On peut aussi imbriquer des div dans des div, et des span dans des span (mais pas des div dans des span)
La dernière ligne n'est pas en italique puisqu'il s'agit seulement de la classe fondvert de la balise <p>.
On a la possibilité de donner une mise en forme à un sélecteur s'il en suit directement un autre, comme ceci :
Ce système de "+" permet de jongler habilement. Voici comment mettre en forme le 3ème paragraphe qui suit un titre <h1> :
Il est possible de définir des classes qui soient effectives seulement lorsqu'elles font partie d'une certaine balise.
Comme ceci : Nous définissons un fond jaune pour toutes les classes .fondcouleur. Ensuite, nous précisions que tous les .fondcouleur qui sont inclus dans un <h1> sont oranges.
Et pour corser le tout, un 2ème niveau : toutes les classes .fondcouleur qui sont dans une classe (que nous n'avons pas mis en forme) .truc, elle même encapsulée dans <h1> appliqueront un fond gris.
C'est ce qu'on appelle des "descendants"
Ainsi, selon ce modèle, si nous avions une classe .fondcouleur incluse dans la classe .truc, elle même incluse dans (par exemple un <p> (à la place de <h1>), ce texte serait écrit en jaune, qui est la défnition "générique" de .fondcouleur.
Il y a une petite nuance entre "enfant" et "descendant". Une classe enfant doit directement descendre de la classe "père", comme ceci :
Voici les nuances entre p>.fondcouleur et p .autrefondcouleur :
Exemple 1, nous avons la balise <p>, en classe "fondcouleur". Il n'y a aucune imbrication : fond gris !
Exemple 2 : Nous avons la balise <p>, dans laquelle il y a un span de classe fondcouleur : c'est le cas d'un enfant : .fondcouleur qui est "incrusté" dans la balise <p>. Le fond sera donc ... jaune !
Constatons que ce fond aurait pu être jaune ou orange si .autrefondcouleur s'était appelé fondcouleur. C'est la raison pour laquelle j'ai deux dénominations (En fait il aurait été orange, puisqu'il aurait respecté le principe d'écrasement (cascade) (Celui le plus bas l'emporte)
Exemple 3 : le fond vert, sans surprise
Exemple 4 : c'est ici que c'est très intéressant : nous avons le fond orange car .autrefondcouleur est un descendant de <p>, mais pas son enfant direct, puisqu'entre deux, il y a ... .truc !
Exemple 5 : tout aussi intéressant : le fond n'est pas jaune, parce que le signe ">" veut bien dire "enfant direct". C'est à dire qu'entre <p> et fondcouleur, il y a truc ! Du coup, on se rabat sur la définition "générique" : gris
Voici une manière de mettre en forme tous les textes qui se trouvent dans n'importe quelle balise, du moment que celle ci se trouve à l'intérieur d'un <div> en classe truc :
va donner (la balise <b> veut juste dire "gras") ceci : même s'il y a deux niveaux enfants (<span> et ensuite <b>), tout le monde (a part le texte directement inséré dans le <div>)sera en vert :
un deux trois quatre cinq
six sept huit neuf dix
Parfois, le CSS est terriblement vicieux, et un espace peut provoquer des effets complètement différents.
Prenons ce premier exemple : nous définissons l'élément <div> lorsqu'il est en classe truc. Ainsi donc, seul "Un" sera écrit en vert.
Bien. Maintenant, considérons qu'à la place de
Nous avons :
Comme vous le voyez, la différence est minime : il y a juste un espace entre div et.truc.
Et ça change TOUT !
Car maintenant, il ne s'agit plus de la définition de la classe truc de la balise <div>, mais d'une sous balise quelconque de classe truc qui se trouve à l'intérieur de la balise enveloppante <div>. On comprend mieux avec cet exemple :
A l'aide des pseudo-éléments CSS 2.0 :before et :after
va donner
Je suis au debutun deux troisJe suis à la fin
Exemple :
D'après la priorité de haut en bas, on peut s'attendre à ce que "un" soit écrit en vert. Mais cet ordre est contrarié par la spécificité des sélecteurs. Et là, on constate que le plus spécifique est le fond rouge. Et bien, contre toute attente, il semblerait que la définition jaune ait autant de poids que la rouge, alors que la rouge est plus précise, plus spécifique.
CSS permet de transformer du texte en minuscules ou majuscule. C'est simple :
</style>
</head>
<body>
<p class="minuscule">Un DEUX
tRoiS quatre</p>
<p class=""> Un DEUX
tRoiS quatre</p>
un deux trois quatre
UN DEUX TROIS QUATRE
Il est très possible de définir des styles CSS pour l'affichage à l'écran et pour l'impression.
Ce premier exemple appliquera les styles pour tous les médias :
<link href="stylegeneral.css" rel="stylesheet" type="text/css">
</head>
L'exemple suivant appliquera les styles seulement pour l'écran :
C'est à dire que la page sera correctement mise en forme, mais lorsque vous irez dans le menu Fichier/Aperçu avant impression, vous verrez la page sans styles CSS.
Si vous désirez avoir une feuille de style pour l'écran et une autre pour l'impression, il faudrait avoir ceci :
Il est possible de définir et redéfinir plusieurs fois la même balise. Les navigateurs n'y voient pas de problème.
La philosophie est simple : sera prioritaire le style défini dans la balise elle-même :
<!-- Rouge foncé sur orange -->
<p style="background-color:#FF6600;color:#990000">Je suis dans la ligne</p>
Ensuite, la priorité va simplement du haut en bas !
Le fait d'attacher des feuilles de style ne change pas la donne. Les navigateurs vont se comporter comme s'ils importaient la feuille de style dans le document actuel.
Imaginons une page html qui lie deux feuilles de style, en plus de définitions internes :
Et une 2ème feuille de style css :
Voici maintenant la page html (presque) complète :
Regardons surcharge.htm : nous avons un premier lien à style1css.css, qui contient deux définitions de <p> (gris qui a été écrasé par violet).
violet est ensuite écrasé par les définitions internes à style1css.css (violet est donc écrasé par bleu, qui est de suite écrasé par vert).
Et nous lions un second fichier externe style2css.css : brun écrase vert, et jaune écrase brun.
Grand gagnant : jaune !
La première phrase est donc écrite en jaune, la 2ème en orange, puisque la définition locale écrase tout ce qui a été précédemment défini
Et nous avons encore une phrase jaune. Elle est jaune bien qu'il s'agisse de la classe test de la balise <p>, puisque la classe test n'existe pas.
Savez-vous qu'il existe une feuille de style locale sur votre PC ?
Il y en a une par navigateur. Par exemple, pour Firefox, vous la trouverez dans :
C:\Program files\Mozilla Firefox\res. Le fichier s'appelle html.css.
Vous pouvez faire l'expérience de supprimer les définitions <h1>, <h2> et <h3> par exemple, puis créer un fichier html avec des balises <h1>, <h2> et <h3>, et vous verrez que, dans Firefox, les titres ne sont plus mis en forme du tout.
Attention : Faites une copie de sécurité du fichier avant de faire cette opération !
Dans Internet explorer, j'ignore ou se cache cette feuille de style (si elle existe), mais voici comment il est possible d'attacher sa propre feuille de style qui sera utilisée prioritairement dès que vous utilisez IE.
Allez dans le menu Outils/Options Internet. Cliquez sur le bouton"Accessibilité" (En bas à droite). Cochez la case "Mettre les documents en forme en utilisant ma feuille de style", et choisissez simplement votre feuille CSS qui contiendra la redéfinition des balises HTML (Tout ou partie)
On peut imposer qu'une valeur ne soit pas surchargée, comme ceci :
<style type="text/css">
p
Nous avons donc bien le bleu clair comme fond, qui est immédiatement écrasé par le vert, qui est aussi !important...
Le rose n'a pas droit au chapitre.
Et nous avons une police jaune foncé.
Même si le style semble être imposé localement rouge foncé sur fond orange, les clauses !important passent devant, et finalement, ce sera du texte jaune foncé sur fond vert.
Pour mieux comprendre, voici comment les navigateurs mettent les priorités :
Bien que l'on puisse concevoir entièrement un site avec des balises <div> et <span>, il est bien, sémantiquement parlant, d'utiliser les balises existantes
Leur fonctionnement est identique.
Résultat :
L' ONU
L' UN
Les polices sont un vrai casse-tête. En effet, tout le monde n'a pas les mêmes polices installées sur son ordinateur. De plus, les PC et les macs n'ont pas les mêmes polices "de base" installées.
Du coup, le rayon d'action est fort limité.
On peut utiliser les grandes familles de police pour obtenir un résultat a peu près convaincant, comme ceci :
Qui va donner ce résultat :
Je suis serif
Je suis sans-serif
Je suis cursive
(Je suis fantasy)
Je suis monospace
Attention : n'utilisez PAS fantasy, parce que la police utilisée est complètement différente selon les navigateurs ! Ou, plus radicalement, le navigateur va simplement utiliser une police de base (Si vous ouvrez cette page dans Internet Explorer ou dans FireFox, vous verrez la différence fondamentale.
Il est possible d'essayer d'utiliser une police précise, et, si celle-ci n'existe pas sur le PC du visiteur, la famille de police précisée sera utilisée, comme ceci :
S'il ne trouve pas "Super Geniale Police" (Attention : c'est case sensitive), il va utiliser "Courier New", sinon Courier, et sinon la police générique de type monospace.
Les polices comportant des espaces sont indiquées entre guillemets.
Je Suis Normal. Je Suis Special. Je Suis Normal.
On peut exprimer la taille de la police de manière absolue : en pixels par exemple, ou avec des mots clé :
On peut également parler en relatif à l'élément parent avec %, ex ou em.
On peut utiliser l'intéressant attribut smaller. Il permet d'écrire plus petit en fonction de la taille de l'élément parent (mais de combien plus petit ? Il semblerait à peu près à 85% de la taille)
Attention : Bien que ça puisse paraître pratique, on ne peut pas imbriquer d'éléments de bloc dans les titres H1, H2, etc.
</style>
</head><body leftmargin="0px" rightmargin="0px" topmargin="0px" bottommargin="0px">
Les listes de définitions fonctionnent presque comme des listes, sauf que chaque élément est constitué d'un terme <dt> et de sa définition <dd>. On peut avoir plusieurs termes avec la même définition, ou un terme avec plusieurs définitions... Voire plusieurs termes avec plusieurs définitions, mais est-ce que ça peut avoir un sens ?
Exemple
<dl>
<dt>Vivant</dt>
<dd>n'est pas mort</dd>
<dd>joyeux drille</dd>
<dt>Bleu</dt>
<dt>Blue</dt>
<dd>Couleur primaire</dd>
</dl>
On peut utiliser diverses unités de mesure pour les tailles de texte, marges, etc. Pour mieux comprendre, voici un exemple avec une marge gauche de 10 (cm, mm, %, etc.)
Il y a des unités absolues (comme le cm par exemple : c'est indéboulonnablement 10 mm, point barre), et des unités relatives comme ex qui représente la hauteur de la lettre x de l'élément parent (tout dépend de la taille des caractères donc
Sous l'appellation sybilline "Modèle de boîte" se cachent des principes très simples. Il s'agit simplement des marges et des bordures.
Il y a trois propriétés qui permettent de mettre en page correctement ces marges et bordures :
Si vous désirez uniquement préciser des marges, comme par exemple ne pas coller un texte tout à gauche, mais lui laisser un peu d'air, la propriété border suffira. Mais si vous désirez encadrer votre texte, vous devrez utiliser border.
Vous pouvez ainsi encadrer votre texte avec border, et, en plus, préciser que ce cadre devra avoir une "marge d'aération" margin. Si maintenant, vous trouvez que le cadre enserre vraiment le texte de trop près, vous pouvez le faire "respirer" à l'intérieur du cadre lui même avec padding.
Le border-style: solid est indispensable, sinon, la bordure n'apparait pas. On peut remplacer solid par d'autres mots clés pour par exemple avoir une bordure en pointillés.
Constatez donc l'addition des pixels : entre quatre et cinq, il y a 10 pixels de margin, suivis de 10 pixels de border et finalement 10 pixels de padding.
Dans le dessin, les flèches colorées montrent les marges et espaces du côté gauche, mais le principe est le même à droite, en haut et en bas. à droite et à gauche, le texte s'écarte pour laisser la place à ces marges et bordures, tandis qu'en haut et bas, rien n'est agencé correctement, et le texte est masqué.
margin, padding et border sont ici utilisés pour les 4 côtés, mais chacune de de ces propriétés est déclinée pour chacun des côtés. Par exemple, pour border, nous avons :
Il est possible de définir une image en fond (background-image). Ce premier exemple montre une image qui est répétée sur toute la largeur et toute la longueur :
Dans cet exemple, on refuse de répéter l'image avec background-repeat:no-repeat;. Du coup elle se stocke par défaut en haut à gauche.
Ici, nous répétons seulement en horizontal : (On aura compris qu'en remplaçant x par y, la répétition est verticale).
Il est maintenant possible de positionner précisément l'image. Ici nous la positionnons à 20% du côté gauche, et à 20 pixels du haut de l'élément parent. On comprendra que pour avoir l'image exactement a centre du texte, il suffit de préciser 50% 50%.
Quelques mots-clés permettent de coincer l'image dans les coins. Par exemple, la voici en bas droite :
Il est également possible, lorsqu'on donne une image en font à toute la page HTML, d'utiliser background-attachment:fixed; Ceci permettra de laisser le font en place sans qu'il "scrolle"
On peut définir assez exactement l'interligne avec css. voici un double interligne :
Et voici des lignes compressées à 75% de leur interligne de base (qui est 1 par défaut)