Vous êtes sur la page 1sur 11

CONCEPTION DE SITE WEB L‘UNITÉ 6 Introduction au CSS

6.0 Pour commencer white; doors: solid; }

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”>

6.1 Comprendre la syntaxe <div id=”haut”> Placards du haut

Avant de réellement ajouter une feuille de style à une vont ici.</div>


page web, nous devons regarder comment créer les
<div id=” bas “> Placards du bas
styles individuels. D’abord : les sélecteurs.
vont ici.</div>
Sélecteurs
Lorsque vous voulez styler une section de contenu </div>
dans une page, vous devez trouver comment
référencer ce contenu. En termes CSS, ceci s’appelle
Dans ce cas, le CSS serait codé plus efficacement avec
un sélecteur.
quelque chose de cet ordre :
Sélecteurs de balise
div#placards { wood: pine; color:
Toute balise HTML peut être un sélecteur. De plus,
vous pouvez créer des sélecteurs personnalisés white; }
correspondants à vos besoins. Pour aider à clarifier
comment cela fonctionne, revisitons l’analogie de div#haut { doors: glass; }
rénovation de la cuisine du Chapitre 5. Dans cette
div#bas { doors: solid; }
situation, nous avons créé deux divisions de contenu
pour les placards :
Ici, div#placards est un exemple de sélecteur CSS.
<div id=”haut”>Placards du
La partie div du sélecteur indique au navigateur de
commencer à chercher tout le contenu inclus dans
haut vont ici.</div> les éléments div. Ensuite, nous devenons un peu plus
spécifiques. Le dièse (#) indique que le texte qui suit
est la valeur d’un attribut id. Donc, div#placards
<div id=”bas”>Placards du
demande au navigateur de chercher l’élément div
particulier dans lequel l’attribut id est placards.
bas vont ici.</div>
Si ces trois divisions de contenu étaient les trois
seules sur la page, nous pourrions avoir laissé
Si nous voulions utiliser le CSS pour ‘styliser’ les le premier sélecteur aussi simple que : div. Ceci
placards, voici ce à quoi ça pourrait ressembler : indiquerait au navigateur d’appliquer les styles de
bois et de couleur à tous les éléments div de la page,
div#haut { wood: pine; color: avec la deuxième et troisième ligne modifiant le style
des portes pour, respectivement, les placards du haut
white; doors: glass; } et du bas.
Pour passer des rénovations de cuisine à des pages
web, supposons que vous vouliez que tous les articles
div#bas { wood: pine; color:

42 © 2012 Excel With Business


CONCEPTION DE SITE WEB L‘UNITÉ 6 Introduction au CSS

d’une liste présents sur une page soient colorés en points:


bleu. Pouvez-vous imaginer quel sélecteur pourrait
être utilisé pour ce faire ? #footer p { font-size: 12pt; }

li { color: blue; } Un espace unique est placé entre le sélecteur initial et


ses descendants.
Comme vous le constatez, lorsque des balises sont Sélecteurs multiples
utilisées en tant que sélecteurs, les guillemets ne sont
pas inclus. Sinon, n’importe quelle balise peut être Lorsqu’il est nécessaire d’appliquer un style à
utilisée comme sélecteur dans une feuille de style – de multiples divisions de contenu, vous pouvez
par exemple, les paragraphes peuvent être stylisés facilement combiner les sélecteurs en les séparant par
avec la balise p en tant que sélecteur et vous pouvez des virgules. Voici un exemple dans lequel le texte
même styliser tout le texte de la page en utilisant la des paragraphes et des listes est modifié en police
balise du corps en tant que sélecteur. Arial :

Sélecteurs d’identité p, li { font-family: arial; }


Après avoir choisi quel(s) balise(s) vous allez styler,
vous pouvez devenir plus spécifique en référençant
des attributs supplémentaires de cette balise. Vous Sélecteurs de classe
voyez comment nous l’avons réalisé avec l’exemple Les sélecteurs d’identité sont essentiellement des
du placard, mais jetons un œil à un autre exemple : sélecteurs personnalisés que vous pouvez créer,
basés sur la structure de votre page. Néanmoins, les
#navigation { border: sélecteurs d’identité sont uniques – ils ne peuvent
être appliqués qu’à une zone de contenu unique. Et
1px solid black; } si vous vouliez appliquer un style personnalisé sur
de multiples zones de contenu d’une page ? Alors
que vous pourriez certainement utiliser le concept
Notez que nous n’avons pas inclus la balise div, mais de sélecteur multiple que vous venez d’apprendre, il
juste les contenus de l’attribut id pour cette division existe une autre option.
particulière de contenu. Parce que les attributs id
doivent être uniques – pas plus d’un exemplaire de L’attribut de classe peut être appliqué presque de la
ce nom par page – il est acceptable de simplement même manière que l’attribut d’identité, en cela qu’il
référencer le nom d’identité (précédé du dièse peut fournir un nom qu’il est possible de référencer
obligatoire, qui indique que c’est un nom d’id). à une balise. La grosse différence est celle-ci : le nom
donné dans l’attribut de classe peut être réutilisé
Sélecteurs descendants d’un bout à l’autre d’une même page. Examinez cet
Et si nous voulions définir la taille de la police pour exemple :
tous les paragraphes contenus à l’intérieur d’une
division de contenu appelée pied de page ? La <a href=”/index.html”
meilleure manière de la faire est d’utiliser un autre
type de sélecteur : un sélecteur descendant. class=”homeLink”>Accueil</a>

Un sélecteur descendant indique au navigateur de


tout d’abord chercher une balise ou une division Supposons que vous vouliez faire que tous les liens de
de contenu, mais de continuer ensuite à appliquer votre page d’accueil soient d’une couleur différente
le style à une certaine balise ou une division de du reste des liens présents sur votre site. Et si
contenu se trouvant à l’intérieur du sélecteur initial. certaines pages de votre site possédaient de multiples
Par exemple, le code suivant ferait que tous les exemplaires du lien de la page d’accueil (tel qu’un lien
paragraphes à l’intérieur de l’élément appelé ‘footer’ vers l’Accueil dans la navigation au sommet, ainsi
(pied de page) auront une taille de police de 12 que dans le pied de page) ? Vous pourriez appliquer

43 © 2012 Excel With Business


CONCEPTION DE SITE WEB L‘UNITÉ 6 Introduction au CSS

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; }

a:hover, a:active { color: orange; } h1 { font-family: verdana;

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

44 © 2012 Excel With Business


CONCEPTION DE SITE WEB L‘UNITÉ 6 Introduction au CSS

le code) sont ainsi nommés parce


qu’ils sont implantés directement
à l’intérieur des éléments stylisés.
Ceci signifie, si vous utilisez un
style incorporé pour faire qu’un
paragraphe ait un texte bleu, que
votre code ressemblera à ceci :

<p style=”color:blue;”>Texte

du paragraphe ici</p>

Avec les styles incorporés,


l’information propriété: valeur est
comprise à l’intérieur de la balise en
utilisant l’attribut de style. La nature
des styles incorporés est telle que
le style n’est appliqué qu’à la balise
spécifique à laquelle il est appliqué.
Ceci signifie qu’ils ne sont pas utiles
pour styliser des pages ou des sites
entiers. En tant que tels, la plupart
des développeurs web n’utilisent
pas beaucoup les styles incorporés
sauf pour appliquer rapidement des
modifications de style petites ou
temporaires.

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:

georgia; color: green; }


<html>
</style>
<head>
</head>
<title>Feuille de style

interne</title> Les déclarations de style dont nous avons discuté


<style>
précédemment sont simplement comprises à
l’intérieur d’un élément de style (entre les balises de
body { font-family: style d’ouverture et de fermeture) dans la partie d’en-
tête d’une page.

45 © 2012 Excel With Business


CONCEPTION DE SITE WEB L‘UNITÉ 6 Introduction au CSS

Styles externes • Les noms de police qui comprennent deux


ou trois mots devraient être inclus dans des
Le dernier type de feuille de style – une feuille de
guillemets uniques.
style externe – est presque similaire à la feuille de
style interne, sauf que le contenu est placé dans un De plus In addition, il est commun d’inclure de
fichier texte séparé, puis sauvé sur le serveur avec multiples familles de police préférées, au cas où une
une extension de fichier .css. La Figure 6-1 montre n’est pas disponible sur le système de l’utilisateur. Ce
une capture d’écran d’une telle feuille de style. processus est appelé cascade. Voici un exemple qui
tient compte de chacune de ces situations :
6.3 Caractéristiques de style de police
Maintenant que vous savez comment sont créés p { font-family: ‘comic sans’,
différents types de feuilles de style, examinons les ‘comic sans ms’, arial, sans-serif; }
options pour personnaliser certaines caractéristiques
de page.
Ici, nous disons au navigateur d’afficher tous les
Œils paragraphes dans la fonte Comic Sans. Mais, si elle
Lorsque vous créez un document sur votre n’est pas disponible, il devrait chercher Comic Sans
traitement de texte favori, un des choix consiste en MS (un autre nom de Comic Sans). Au cas où les
quelle police utiliser. En CSS, la police elle-même options Comic Sans sont introuvables, Arial sera
est définie en utilisant la propriété famille de police, utilisé. Toutefois, si aucune des trois premières fontes
font-family. ne sont accessibles pour le navigateur, toute fonte
sans-serif est autorisée.
p { font-family: arial; }
Il existe des manières de forcer une page à
afficher une police non chargée sur le
Cette propriété peut être appliquée sur pratiquement système d’un utilisateur, mais elles vont un peu
n’importe quel morceau de contenu de votre page, au-delà de la portée de ce cours. Rendez-vous sur
à compter que le contenu est rendu sous forme de http://webdesign.tutsplus.com/articles/typography-
texte. Pour clarifier, vous ne pourrez pas modifier le articles/a-web-designers-guide-to-font-
texte implanté dans une image avec cette propriété replacement-methods/ pour en apprendre plus au
(non plus, d’ailleurs, qu’avec aucune autre propriété sujet de certaines de ces méthodes.
CSS).
Lorsque vous personnalisez la famille de police du Tailles
texte de vos pages, il est important de se souvenir
Après la famille de police, la caractéristique suivante
que, pour que l’utilisateur voie le texte dans cette
la plus commune pour le style est la taille. Les
police particulière, elle doit être chargée sur son
tailles de police peuvent être décrites en utilisant
ordinateur ou sur son appareil. Voici quelques autres
plusieurs méthodes différentes, chacune possédant
astuces à garder à l’esprit lorsque vous personnalisez
ses avantages et ses inconvénients. Le Tableau 6-1
les familles de police :
l’explique.
• La capitalisation des noms de police varie
Notez que deux unités de mesure sont évolutives,
de système à système, donc nous vous
mais deux ne le sont pas. Celles qui ne sont
recommandons de vous en tenir aux noms en
pas évolutives sont préférées par les experts en
minuscule dans vos feuilles de style.
ergonomie et en accessibilité parce qu’ils permettent
• De la même manière, les noms de police réels aux utilisateurs de facilement ajuster la taille de fonte
peuvent quelque peu varier. Pour compenser, si si nécessaire. Si vous utilisez une unité évolutive,
vous voulez utiliser une police connue comme assurez-vous de tester vos pages dans différentes
étant référencée sous différents noms, vous tailles de fonte, pour être sûr qu’elles évoluent
pouvez lister les deux. élégamment.

46 © 2012 Excel With Business


CONCEPTION DE SITE WEB L‘UNITÉ 6 Introduction au CSS

Unité Description Évolutif Exemple

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%.

Table 6-1: Unités de mesure par tailles de fonte

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.

Il existe plusieurs autres manières de spécifier les h3 { color: rgb(0,0,255); }


valeurs de couleur en CSS, en plus du nom de la h4 { color: hsl(240,50%,20%); }
couleur. Dans les premiers jours du HTML, nous
devions tous utiliser des maths (ouin !) pour calculer
les codes hexadécimaux des couleurs afin de les Autres propriétés
référencer sur nos pages web. La valeur d’une couleur
hexadécimale ressemble à ceci : #003366, avec les En plus de modifier la famille, la taille, la couleur des

47 © 2012 Excel With Business


CONCEPTION DE SITE WEB L‘UNITÉ 6 Introduction au CSS

Propriété Description Exemples

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)

text-shadow: 3px 3px gray;


text-shadow Ajoute une ombre au texte vous devez spécifier l’épaisseur et
la couleur de l’ombre, vous pouvez également ajouter du flou text-shadow: 2px 2px 3px blue;
et modifier la couleur)

Table 6-2: Autres propriétés de texte et de police populaires

polices, il existe plusieurs autres caractéristiques et


polices pouvant être ajustées avec CSS. Le Tableau propriétés commençant toutes par le même mot,
6-2 établit la liste des plus communes. Rendez-vous comme font-size, font-face et font-style, vous pouvez
sur http://www.w3schools.com/cssref/ - font et utiliser la sténo de CSS pour rendre le processus plus
http://www.w3schools.com/cssref/ - text pour de efficace. Pour faire simple, groupez-les simplement
plus amples explications. ainsi :

Solution miracle : utilisez la sténographie ! p { font: 12px arial italic; }


À chaque fois que vous voulez ajuster plusieurs

48 © 2012 Excel With Business


CONCEPTION DE SITE WEB L‘UNITÉ 6 Introduction au CSS

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

49 © 2012 Excel With Business


CONCEPTION DE SITE WEB L‘UNITÉ 6 Introduction au CSS

Alignement l’esprit qu’elles sont réalisées en relation avec la boîte


conteneur. Nous parlerons de ceci plus en détail et
Supposons que vous voulez qu’un paragraphe soit
des autres propriétés des boîtes CSS dans le Chapitre
aligné sur le bord droit, plutôt que sur le bord
10 : Conception de couche présentation.
gauche, comme il l’est par défaut. La propriété text-
align peut vous aider. La seule astuce consiste à vous Espace dans et autour de la boîte
souvenir que vous alignez le texte horizontalement, à
l’intérieur de sa ‘boîte’ conteneur. Donc, si vous avez Si vous revenez aux Figures 6-2 et 6-3, vous pouvez
placé un paragraphe à l’intérieur d’une division de voir qu’il y a deux propriétés utilisées pour spécifier
contenu appelée ‘TextePrincipal’ et que cette partie la quantité d’espace noir dans et autour des boîtes de
de votre site couvre la largeur totale de votre page contenu. Le remplissage constitue l’espace autour du
web, le texte serait, tout du long, aligné sur le bord contenu à l’intérieur des bordures de la boîte alors
droit de la page. que les marges sont l’espace à l’extérieur des bordures
de la boîte.
Mais si la zone du conteneur ne couvre que la moitié
de la page, le texte serait toujours aligné le long du Les valeurs de marge (margin) et de remplissage
bord droit du conteneur – ce qui, dans ce cas, signifie (padding) peuvent être spécifiées individuellement,
qu’il serait aligné au milieu de la page. en tant que marge à droite, par groupes ou toutes
ensembles. Par exemple, voici comment nous
pourrions styliser une boîte avec des marges de
<div id=”TextePrincipal”
Code exemplaire Explication
style=”text-align:right;

vertical-align:top;”> text-align:justify; La méthode de justification est


déterminée par le navigateur
text-justify:auto;

L’exemple de code précédent


text-align:justify; Semblable à l’option 'newspaper', mais
possède des propriétés
optimisée pour le contenu d’Asie de
d’alignement pour les text-justify:distribute;
l’Est
espaces horizontal et vertical
dans la division de contenu text-align:justify; Semblable à l’option 'distribute', mais
TextePrincipal. Les options avec la dernière ligne également
text-justify:distribute-all-lines;
d’alignement horizontal sont left, justifiée
right, center et justify (gauche,
droite, centré et justifié). Lorsque text-align:justify; L’espacement entre les mots est
vous utilisez text-align: justify, text-justify:inter-word;
augmenté ; la dernière ligne n’est pas
vous pouvez également utiliser la justifiée
propriété text-justify pour spécifier
exactement comment devrait être text-align:justify; L’espacement entre les caractères
justifié le texte. Le Tableau 6-3 idéographiques et les mots est
text-justify:inter-ideograph;
augmenté ou réduit
établit la liste des méthodes de
justification disponibles.
text-align:justify; Justifie le contenu sans aucun
Les possibilités communes espacement entre les mots, optimisé
text-justify:inter-cluster;
pour le contenu de l’Asie de l’Est
d’alignement vertical comprennent
top (haut), bottom (bas), middle
(milieu), sub (comme si le contenu text-align:justify; Étire les scripts en cursive, utilisé
principalement pour les polices arabes
était en indice, en subscript) et text-justify:kashida;
super (comme si le contenu était
en exposant, en superscript). text-align:justify; L’espacement entre les mots et les
lettres est augmenté ou réduit
Lorsque vous spécifiez ces text-justify:newspaper;
propriétés d’alignement, gardez à
Table 6-3: Méthodes de justification CSS

50 © 2012 Excel With Business


CONCEPTION DE SITE WEB L‘UNITÉ 6 Introduction au CSS

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;

<p style=”padding: 2px 4px 6px 8px;”> padding: 5px;

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

51 © 2012 Excel With Business


CONCEPTION DE SITE WEB L‘UNITÉ 6 Introduction au CSS

Propriété Description Exemples

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

border: 5px blue dotted;


border Spécifie le style de bordure de la boîte ; une valeur unique est
utilisée pour les quatre côtés, deux valeurs sont utilisées pour haut/ border: 2px 4px;
bas et gauche/droite, quatre valeurs sont utilisées pour haut, droite,
border-color: blue;
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é border-radius: 10px;
border-style: dotted;
box-sizing: content-box;
box-sizing Spécifie si les valeurs de remplissage et de bordure sont comprises
dans les propriétés de largeur et de hauteur box-sizing: border-box;

width: 250px;
width Spécifie la largeur de la boîte de contenu
width: 25%;
Table 6-4: Méthodes de justification CSS

• Ressources CSS d’Eric Meyer – http://meyerweb.


com/eric/css/
• Merveilles du CSS – http://www.csswonders.
com/
• Smashing Magazine: CSS – http://www.
smashingmagazine.com/tag/css/

PROCHAINE L‘UNITÉ 7 Concevoir pour écrans

52 © 2012 Excel With Business