D
ans le Chapitre 5, nous avons évoqué
les manières de structurer le contenu
en utilisant le HTML. Plus d’une fois, Ou, parce que plusieurs caractéristiques de style sont
nous avons dit « nous parlerons plus tard de la les mêmes pour les deux divisions, vous configurez
manière de styliser le contenu ». Ce chapitre trois divisions de contenu – une pour chaque types
est une introduction à ce « plus tard ». En de placards, puis une troisième qui contient les deux
particulier, les concepts examinés dans ce chapitre divisions de placards.
transformeront vos fichiers HTML principalement
basés texte en des pages ayant du style. <div id=”placards”>
une classe à chacun de ces liens, puis styliser en la propriété la plus communément appliquée en
fonction, comme ceci : CSS. En fait, nous l’avons déjà utilisée plusieurs fois
dans ce chapitre pour parler de la manière dont
.homeLink { color: red; } fonctionnent les sélecteurs. Dans l’exemple suivant,
deux propriétés sont utilisées (famille de police, font-
family) et couleur, color) pour styliser les titres de
Les sélecteurs d’identité possèdent des dièses en niveau un sur une page web :
préambule, mais les sélecteurs de classe sont précédés
de points. Alors que vous pouvez inclure le nom de la h1 { font-family: verdana;
balise avant le point, comme dans a.LienAccueil, ce
n’est pas nécessaire dans ce cas. color: green; }
Sélecteurs de lien
Comme vous le constatez, la syntaxe de base est:
Comme vous le savez désormais, les liens possèdent
trois états basiques : non visités, visités et actifs (en
train d’être cliqués). Un état additionnel (survol) sélecteur { propriété: valeur; }
survient lorsque la souris est placé sur le lien, mais
sans avoir cliqué.
Lorsque des combinaisons de multiples propriétés
CSS nous donne la capacité d’appliquer différents et valeurs sont utilisées, des points-virgules les
styles aux liens, en fonction de leur état. Pour ce séparent. De plus, la combinaison propriété: valeur
faire, nous utilisons un sélecteur de balise, puis nous finale est également suivie d’un point-virgule.
ajoutons deux-points, suivis par le nom de l’état, Alors que, jusqu’à présent, nous avons montré des
comme ceci : combinaisons de multiples propriété: valeur sur une
seule ligne, certains développeurs préfèrent donner
a:link { color: blue; } à chacune sa propre ligne, pour une lecture plus
simple.
a:visited { color: gray; }
color: green; }
Dans cet exemple, nous avons coloré les liens non
visités en bleu, les liens visités en gris et les liens
actifs et survolés en orange. Chaque méthode convient, donc tout dépend de
votre préférence personnelle.
Note : les quatre états de lien doivent être stylisés
dans l’ordre dans lesquels nous les avons placés ici : S’il existe des dizaines de sélecteurs CSS, il
a:link, puis a:visited, suivi de a:hover, a:active. doit exister des centaines de propriétés.
Nous en évoquerons plusieurs dans le reste de ce
Il existe des dizaines de différents types de chapitre, mais pour en apprendre plus à propos de
sélecteurs – trop pour tous les évoquer ici. chacune d’elle, rendez-vous sur http://www.
Pour en apprendre plus à propos de chacun d’eux, w3schools.com/cssref/.
rendez-vous sur http://www.w3schools.com/cssref/
css_selectors.asp.
6.2 Choisir la méthode
Propriétés & valeurs Il existe trois types basiques de feuilles de style :
incorporée, interne et externe. Celle qui est utilisée
Vous les avez déjà vues en action, mais vous devez dépend de plusieurs facteurs.
probablement en apprendre plus. Les propriétés
sont les caractéristiques réelles stylisées dans vos Styles incorporés
pages web. La propriété couleur est probablement
Les styles incorporés (également appelés styles dans
<p style=”color:blue;”>Texte
du paragraphe ici</p>
Styles internes
Une feuille de style interne est
comprise dans la partie d’en-tête Figure 6-1: Un exemple de feuille de style externe.
d’une page HTML unique. Ceci signifie
que les styles ne sont appliqués qu’aux arial; color: black; }
balises pertinentes sur cette page. Les feuilles de style
internes sont, par conséquent, utiles pour gérer les h1 { font-family:
styles d’une seule page, mais pas d’un site web entier.
georgia; color: purple; }
Examinez le code suivant pour voir à quoi peut
ressembler une très brève feuille de style interne : h2 { font-family:
font-size: 2em
Ems 1em = taille de fonte actuelle du navigateur de l’utilisateur, donc Oui
2em = 2 x la taille de fonte actuelle. Si vous ne l’avez pas spécifié
autrement et que la fonte par défaut de l’utilisateur est de 12pt,
2em serait donc 24pt.
font-size: 10px
Pixels Les écrans sont mesurés en pixels, il est donc naturel de Non
s’attendre à ce que les fontes d’écran soient mesurées en
pixels. Toutefois, parce que les résolutions d’écran varient
quelque peu (de 72 à 96 point par pouce), les fontes peuvent
sembler un peu plus petites ou plus grandes sur chaque.
font-size: 12pt
Points Les fontes de la page imprimée sont mesurées en points. Il y a 72 Non
points par pouce.
font-size: 120%
Pourcentages 100% = taille actuelle de la fonte du navigateur de l’utilisateur, Oui
donc 200% = 2 x la taille de fonte actuelle. Si vous ne l’avez pas
spécifié autrement, la taille de fonte par défaut du navigateur est
égale à 100%.
Finalement, le choix de quelle(s) unité(s) utiliser deux premiers caractères représentant la valeur
est basé sur les préférences personnelles. Les deux rouge, la deuxième paire comptant pour la valeur
méthodes les plus populaires sont les ems et les verte et la paire finale pour la valeur bleue.
pixels, puisqu’une combinaison de texte évolutif
(pour la copie du corps) et de tailles fixes (pour la Si vous êtes particulièrement nostalgique, ou que
navigation) peuvent souvent vous aider à obtenir le vous aimez simplement les maths, vous pouvez bien
meilleur des deux mondes. entendu continuer à utiliser les valeurs hexa pour
changer les couleurs en CSS. Cette page fournit une
Couleurs référence visuelle au plus communes des 216 valeurs
de couleur hexa: http://html-color-codes.com.
Jusqu’à présent, nous vous avons uniquement
montré la méthode la plus basique de spécification
des couleurs en CSS, qui est l’utilisation des noms h2 { color: #346782; }
de couleur. Il existe 147 noms de couleurs prédéfini
pour nous en HTML/CSS. Vous pouvez trouver ici
la liste de ces noms, ainsi que la manière dont elles Vous pouvez également spécifier la couleur en
s’affichent à l’écran: http://www.w3schools.com/ utilisant les valeurs RVB (rouge, vert, bleu, en
cssref/css_colornames.asp. anglais RGB pour red, green, blue) ou TSL (Teinte,
Saturation, Luminosité, en anglais HSL pour hue,
saturation, and lightness) de la même manière que le
h1 { color: darkblue; } font les outils graphiques tels que Photoshop.
font-style: italic;
font-style Spécifie si le texte est italique ou oblique
font-style: oblique;
font-variant: small-caps;
font-variant Spécifie si le texte est affiché en petite capitalisation
font-variant: none;
font-weight: bold;
font-weight Modifie la graisse
font-weight: bolder;
font-stretch: condensed;
font-stretch Modifie la largeur horizontale
font-stretch: expanded;
direction: rtl;
direction Modifie la direction (de gauche à droite ou de droite à gauche)
direction: ltr;
word-spacing: 20px;
word-spacing Modifie l’espacement entre chaque caractère
word-spacing: normal;
letter-spacing: -2px;
letter-spacing Modifie l’espacement entre chaque mot
letter-spacing: 1px;
line-height: 200%;
line-height Modifie la hauteur de chaque ligne de texte
line-height: 24pt;
text-decoration: underline;
text-decoration Spécifie n’importe quelle décoration, telle que soulignement
ou overline text-decoration: line-through;
ext-indent: 100px;
text-indent Spécifie l’alinéa de la première ligne d’une boîte de texte
text-indent: 5%;
text-transform: uppercase;
text-transform Modifie la capitalisation
text-transform: capitalize;
text-outline: 1px black;
text-outline Ajoute un contour au texte (vous devez spécifier l’épaisseur
et la couleur du contour, vous pouvez également ajouter du text-outline: 2px 2px yellow;
flou)
6.4 Styliser les boîtes internes de texte • box-sizing: border-box; — les valeurs de hau-
teur et de largeur comprennent les bordures et le
Jusqu’alors, nous avons principalement stylisé le remplissage
texte à l’intérieur des balises le contenant, comme • box-sizing: content-box; — les valeurs de hauteur
p ou h2, en modifiant les caractéristiques de style. et de largeur ne comprennent pas les bordures ni
Mais vous pouvez également facilement styliser le remplissage
l’alignement, les bordures et l’espacement de ce texte.
Le faire requiert de penser au texte lui-même comme Après avoir spécifié quel type de taille de boîte vous
s’il était contenu à l’intérieur d’une ‘boîte’ (même si utiliserez, vous pouvez correctement assigner des
vous ne pouvez pas voir les quatre côtés de la boîte valeurs pour la hauteur et la largeur de la boîte de
lorsque la page est affichée dans un navigateur). texte. La Figure 6-2 fournit un exemple visuel de la
Largeur et Hauteur manière dont les diverses propriétés de la boîte fonc-
tionnent ensemble pour styliser une boîte définie en
Avant de pouvoir styliser les aspects individuels des tant que ‘border-box’, où les valeurs de hauteur et de
boîtes de texte, envisagez tout d’abord de définir la largeur incluent les bordures et le remplissage.
largeur et la hauteur pour que le navigateur sache
combien d’espace mettre de côté pour styliser le La Figure 6-3 montre comment est assignée une boîte
contenu. définie en ‘content-box’, où la hauteur et la largeur
de la boîte de contenu n’incluent pas les bordures ni
Styliser les boîtes de contenu peut très le remplissage. Les marges ne sont jamais comprises
rapidement devenir extrêmement complexe. dans les dimensions de la boîte de contenu, mais sont
Cette partie offre une vue d’ensemble très basique. ajoutées à ces dimensions lorsque le navigateur offre
Le Chapitre 10 : Conception de couche présentation un rendu de la page.
évoque le concept plus en profondeur.
Les valeurs de hauteur et de largeur doivent inclure
Pour comprendre comment spécifier la taille d’une l’unité de mesure, telle que px (pour pixels), cm
boîte, nous devons tout d’abord examiner com- (pour centimètres) ou % (pour un pourcentage de la
ment CSS gère les boîtes de texte. Malheureusement, boîte). Donc, si vous voulez créer une boîte de con-
certains navigateurs possèdent leur propre interpré- tenu de 150px par 200px, où ces valeurs n’incluent
tation de la boîte de texte standard. Heureusement, pas les bordures ni le remplissage, voici ce à quoi le
CSS3 nous offre une manière de nous assurer que code pourrait ressembler :
nous jouons sur le même terrain de jeu. La propriété
box-sizing, soit taille de boîte, est utilisée pour ac- div#section1 { box-sizing: content-
complir cette tâche. Elle possède deux options pos- box; width: 150px; height: 200px; }
sibles :
Figure 6-2: : Réglages lorsque la propriété box- Figure 6-3: Réglages lorsque la propriété box-
sizing est définie en tant que border-box sizing est définie en tant que content-box
cinq pixels en haut et en bas, mais huit pixels sur la de bordure incluent points pointillés (dotted), solid,
gauche et la droite : double, groove, ridge, inset et outset.
La spécification CSS la plus récente nous donne
<p style=”margin: 5px 8px;”> finalement la capacité de facilement arrondir les
coins de la boîte. Pour ce faire, utilisez la propriété
border-radius, comme ceci :
Lorsque vous spécifiez deux valeurs, la première
indique le haut et le bas, et la seconde valeur indique
la gauche et la droite. Lorsque vous assignez des p.quote { border-width: 1px;
valeurs uniques, elles sont codées dans l’ordre
suivant : haut, bas, gauche, droite ou dans le sens des border-color: blue;
aiguilles du montre en commençant au sommet.
border-style: dashed;
border-radius: 25px;
Bordures }
Les boîtes de texte peuvent également avoir des
tailles de bordure, indépendantes des tailles de
remplissage et de marge. La propriété bordure Pour récapituler, le Tableau 6-2 expose les propriétés
(border) fonctionne presque de la même manière évoquées dans cette partie.
que les propriétés de marge et de remplissage. Vous
pouvez spécifier les valeurs individuellement, par 6.5 En savoir plus
groupes ou toutes en même temps. Dans cet exemple, Comme vous pourriez déjà l’avoir réalisé, il existe
il y a une bordure large de deux pixels en haut et en beaucoup de souplesse dans la manière dont
bas, mais pas de bordure à gauche ni à droite. sont appliqués les styles sur les pages. Utilisez les
informations fournies ici comme point de départ
pour votre développement CSS, puis passez en
div#footer { border: 2px 0px; }
revue les ressources listées à la fin du chapitre pour
explorer les choses plus en profondeur. Au final,
Vous pouvez également personnaliser la couleur vous trouverez vos propres méthodes favorites de
et le format de la bordure, en ajoutant quelques méthodes de stylisation pour répondre à vos besoins
options supplémentaires à votre feuille de style. personnels de développement web.
Dans le fragment de code suivant, nous avons créé
Livres :
un paragraphe spécial avec une bordure d’un pixel
pointillée en bleu. (Le remplissage est compris pour • Sergey’s HTML5 & CSS3 Quick Reference par
empêcher que le texte ne frotte contre la bordure Sergey Mavrody
bleue.)
• HTML & CSS: Design and Build Websites par
Jon Duckett
p.quote { border-width: 1px; • CSS Pocket Reference par Eric A. Meyer
border-color: blue;
Didacticiels et références en ligne :
border-style: dashed; • W3C – http://www.w3.org/Style/CSS/learning.
en.html
padding: 5px; }
• Écoles W3C – http://www.w3schools.com/css/
En plus de traits pointillés (dashed), d’autres styles • Jardin Zen du CSS – http://www.csszengarden.
com
text-align: left;
text-align Spécifie l’alignement horizontal à l’intérieur d’une boîte de texte
text-align: right;
vertical-align: top;
vertical-align Spécifie l’alignement vertical à l’intérieur d’une boîte de texte
vertical-align: bottom;
text-justify: inter-word;
text-justify Spécifie comment devrait être justifié un texte
text-justify: distribute;
margin: 5px;
margin Spécifie la taille des marges de la boîte ; une valeur unique est
utilisée pour les quatre côtés, deux valeurs sont utilisées pour haut/ margin: 10px 5px;
bas et gauche/droite, quatre valeurs sont utilisées pour haut, droite,
margin-left: 4px;
bas, gauche (dans cet ordre) ; il est également possible de spécifier
individuellement les valeurs en ajoutant le nom du côté à la propriété margin-top: 2px;
padding: 10px;
padding Spécifie la taille du remplissage de la boîte ; une valeur unique est
utilisée pour les quatre côtés, deux valeurs sont utilisées pour haut/ padding: 2px 5px 15px 18px;
bas et gauche/droite, quatre valeurs sont utilisées pour haut, droite,
padding-right: 5px;
bas, gauche (dans cet ordre) ; il est également possible de spécifier
individuellement les valeurs en ajoutant le nom du côté à la propriété padding-bottom: 25px
width: 250px;
width Spécifie la largeur de la boîte de contenu
width: 25%;
Table 6-4: Méthodes de justification CSS