Vous êtes sur la page 1sur 15

HTML5

Une rfrence
pour le dveloppeur web

Rodolphe Rimel

Prface de Raphal Goetter

Groupe Eyrolles, 2011, ISBN : 978-2-212-12982-3


Feuilles de style CSS
B
Tout nest que cascade, style et volupt. Ainsi, du moins, devrait se prsenter
tout document HTML.

Figure 21 background:red ; color:white


HTML 5 - Une rfrence pour le dveloppement web

Dans des temps reculs, lors de lapparition du HTML et des premiers navigateurs,
lesthtisme des pages tait trs limit. Lessentiel de linformation ntait pas destin
un large public et on pouvait se contenter dune mise en pages sommaire. Peu peu,
des balises ont t ajoutes, et certains lments ont t dtourns de leur usage initial
par les webdesigners/intgrateurs pour obtenir un rendu plus complexe lcran.
Ainsi, les tables ont t mises profit pour disposer du contenu en colonnes puis en
grilles, on a vu natre des artifices tels que les images de sparation (nommes
spacer.gif) ou encore limbrication de multiples balises de prsentation (par exemple
<font>) aujourdhui obsoltes.

Ce qui palliait un manque intrinsque du HTML en capacits de contrle graphique


est devenu au fur et mesure un cauchemar en termes de maintenance du code, de
lisibilit et daccessibilit du contenu. La smantique ntait que peu considre, et la
soupe de tags au menu de nombreux sites.
Cest pourquoi les feuilles de style en cascade (Cascading Style Sheets) ont t adop-
tes par le W3C pour rgir lapparence des lments HTML dune page, concernant
la disposition, les dimensions, les couleurs, afin de sparer le contenu et la forme.
Une feuille de style est applicable une infinit de documents HTML, ce qui en
facilite la maintenance et rduit les temps de chargement.

Figure 22
Une feuille CSS pour
de multiples pages HTML

Lobjet de ce chapitre nest pas de dresser un inventaire exhaustif de toutes les techni-
ques affrentes CSS, mais de proposer une introduction et un petit aide-mmoire
vis--vis de HTML 5 auquel les feuilles de style sont intimement lies.

RESSOURCES
R Goetter Raphal, CSS 3, Pratique du design web, Eyrolles 2011
R Goetter Raphal, CSS avances, Eyrolles 2011

610 Groupe Eyrolles, 2005


B Feuilles de style CSS

Les spcifications sont nombreuses et pour certaines encore en mouvement.

RESSOURCE Spcifications CSS


Cascading Style Sheets Level 2 Revision 1 (CSS 2.1)
B http://www.w3.org/TR/CSS21/
Tableau rcapitulatif des spcifications
B http://www.w3.org/Style/CSS/current-work
Cascading Style Sheets (CSS)
B http://www.w3.org/TR/CSS/

Principe gnral
Lapplication dune feuille de style CSS seffectue lorsque celle-ci est lie au docu-
ment par la balise <link>, prsente dans la section <head>.

<link rel="stylesheet" href="styles.css">

Plusieurs feuilles de style peuvent tre charges de la sorte pour un seul document. Il
est aussi envisageable de dclarer directement des instructions CSS entre les balises
<style> et </style>, situes galement dans <head> ou dans une portion du docu-
ment, mais cette faon de faire ne facilite pas la maintenance ni la mise en cache.
Dans le fichier de la feuille de style, on retrouve une ou plusieurs dclarations CSS. Elles
comprennent un slecteur dont le rle est de cibler les lments concerns par chaque
dclaration, suivi dun bloc entre accolades regroupant les proprits appliquer.

p {
text-align: center;
font-weight: bold;
color: orange;
}
header img {
border: 3px solid gray;
margin-bottom: 3em;
}

Dans cet exemple, trois proprits sont appliques aux lments <p> (les paragra-
phes) et deux aux lments <img> situs dans <header>.

Groupe Eyrolles, 2005 611


HTML 5 - Une rfrence pour le dveloppement web

Slecteurs
Lart dcrire de bons slecteurs est somme toute un grand jeu dassemblage parmi les
quelques briques de base existantes, pour sadapter la structure du document
HTML qui doit tre styl. Si HTML et CSS sont issus du mme auteur, alors il lui
appartient de nommer les lments en consquence grce des classes, des identi-
fiants ou des attributs pour les lier aux dclarations CSS, et ce en toute simplicit
pour faciliter la lecture du code source ainsi que son analyse par le navigateur.
Tableau 21 Quelques slecteurs

Slecteur Exemples lments concerns


Slecteur dlment nav { } <nav>
p { } <p>
ul { } <ul>
Slecteur de classe .remarque { } Tout lment portant lattribut
div.remarque { } class="remarque"
<div class="remarque">.
Slecteur did #intro { } Tout lment portant lattribut id="intro"
header#intro { } <header id="intro">.
Slecteur dattribut [alt] { } Tout lment possdant un attribut alt
input[type=submit] { } <input type="submit">.
[rel=nofollow] { } Tout lment portant lattribut rel="nofollow".
Slecteur denfant direct ul>li { } Tout lment <li> enfant direct dun <ul>.
Slecteur dlment h1+p { } Tout lment <p> immdiatement prcd par un l-
adjacent ment <h1>.
Slecteur dlments frres h2~p { } Un ou plusieurs lments <p> prcds par un l-
ment <h2>.

Les slecteurs peuvent senchaner, spars par des espaces, pour combiner leurs effets.
nav ul>li { ... }

Ce slecteur sadresse aux lments <li> enfants directs de <ul>, lui-mme situ dans
un quelconque <nav>.
#intro p.remarque { ... }

Ce slecteur sadresse aux lments <p> de classe remarque, situs dans llment pos-
sdant lidentifiant intro.
Spars par des virgules, les slecteurs sappliquent une numration de plusieurs
familles dlments.
nav ul>li, #intro p.remarque { ... }

612 Groupe Eyrolles, 2005


B Feuilles de style CSS

Cette dclaration sadresse aux lments <li> enfants directs de <ul>, lui-mme situ
dans un quelconque <nav>... et indpendamment aux lments <p> de classe
remarque, situs dans llment possdant lidentifiant intro.

Proprits
Les proprits sont des paires de cls et valeurs. La cl est le nom de la proprit, suivie
des deux-points, termine par la valeur qui peut revtir diffrentes formes : mots-cls,
valeur numrique simple, valeur numrique avec unit, chane de texte, etc.
Les combinaisons offertes par les proprits CSS, leurs valeurs et les techniques associes
sortent du cadre de ce modeste chapitre qui pourrait lui seul dpasser tous les autres en
longueur. Pour en savoir plus, consultez les rfrences proposes dans lintroduction.
Tableau 22 Quelques units courantes

Unit Description Type dunit


px Pixels Relative
% Pourcentage (en gnral par rapport llment parent) Relative
em Cadratin (relatif la taille de la police) Relative
ex Hauteur de la lettre x Relative
in Pouces (= 2,54 cm) Absolue
cm Centimtres (= 10 mm) Absolue
mm Millimtre Absolue
pt Points (= 1/72 in) Absolue
pc Picas (= 12 pt) Absolue

Les units les plus pertinentes pour un affichage lcran restent px, %, et em.
Tableau 23 Texte

Proprit Rle
color Couleur du texte
font (Dclaration groupe)
font-weight Graisse
font-size Taille de police
font-family Famille de police
font-variant Variante
font-stretch tirement du texte
text-decoration Dcoration de texte

Groupe Eyrolles, 2005 613


HTML 5 - Une rfrence pour le dveloppement web

Tableau 23 Texte (suite)

Proprit Rle
text-transform Transformation de texte
text-align Alignement
text-justify Justification
text-indent Indentation
line-height Hauteur de ligne
word-spacing Espacement de mot
word-wrap Retour la ligne

Exemple
p {
font-weight: bold;
color: #005A9C;
text-align: left;
line-height: 150%;
}

Tableau 24 Fonds

Proprit Rle
background (Dclaration groupe)
background-color Couleur de fond
background-image Image de fond
background-repeat Rptition de limage de fond
background-position Position de limage de fond
background-attachment Attache de limage de fond par rapport la page
background-origin Position du fond par rapport la bote de llment
background-size Taille de limage de fond par rapport aux dimensions de llment

Exemple
div {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}

RESSOURCE Tutoriels CSS sur Alsacreations


Arrire-plans avec CSS 3 Backgrounds
B http://www.alsacreations.com/tuto/lire/808-arriere-plans-css3-background.html

614 Groupe Eyrolles, 2005


B Feuilles de style CSS

Tableau 25 Ombrages et transparence

Proprit Rle
text-shadow Ombrage du texte
text-outline Contour du texte
box-shadow Ombrage dun lment bote
opacity Opacit

Exemple
footer {
opacity: 0.5;
text-shadow: 0px 0px 9px #777;
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px;
}

RESSOURCE Tutoriels CSS sur Alsacreations


Les ombrages en CSS 3
B http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html

Tableau 26 Bordures

Proprit Rle
border (Dclaration groupe)
border-color Couleur du bord
border-spacing Espacement du bord
border-collapse Fusion du bord
border-style Style du bord
border-width Largeur de la bordure
border-radius Rayon du bord arrondi
border-image Style de bord avec image
outline Contour
outline-style Style du contour
outline-color Couleur du contour
outline-width Largeur du contour

Exemple
.arrondi {
border: 5px solid yellow;
border-radius: 20px;
}

Groupe Eyrolles, 2005 615


HTML 5 - Une rfrence pour le dveloppement web

:focus {
outline: thick solid #fc0;
}

Tableau 27 Positionnement et dimensionnement

Proprit Rle
display Mode daffichage
float, clear Mode flottant
position Positionnement
z-index Ordre de recouvrement
vertical
overflow Mode de dpassement de bloc
overflow-y Mode de dpassement de bloc vertical
overflow-x Mode de dpassement de bloc horizontal
width Largeur
height Hauteur
top Position par rapport au haut
left Position par rapport la gauche
right Position par rapport la droite
bottom Position par rapport au bas
padding Marge interne
margin Marge externe
min-height Hauteur minimale
max-height Hauteur maximale
min-width Largeur minimale
max-width Largeur maximale
vertical-align Alignement vertical
visibility Visibilit
rotation Rotation
rotation-point Point de rotation

Exemple
img.illustration {
float: right;
margin-left: 2em;
max-width: 50%;
rotation: 10deg;
rotation-point: bottom left;
}

616 Groupe Eyrolles, 2005


B Feuilles de style CSS

Tableau 28 Listes

Proprit Rle
list-style Style de liste
list-style-type Type de puce pour les lments de la liste
list-style-image Image de puce pour les lments de la liste
list-style-position Position de la puce

Exemple
ul li {
list-style: disc;
}

Tableau 29 Autres

Proprit Rle
cursor Apparence du curseur
direction Direction dcriture

Exemple
input[type=submit]
cursor: pointer;
}

Tableau 210 Animations

Proprit Rle
animation (Dclaration groupe)
animation-delay Dlai danimation
animation-direction Sens danimation
animation-duration Dure danimation
animation-iteration-count Nombre ditrations
animation-name Nom danimation
animation-timing-function Fonction dacclration

Exemple
div {
animation-name: 'diagonale';
animation-duration: 3s;
animation-iteration-count: 5;
}

Groupe Eyrolles, 2005 617


HTML 5 - Une rfrence pour le dveloppement web

@keyframes 'diagonale' {
from {
left: 0;
top: 0;
}
to {
left: 150px;
top: 200px;
}
}

Tableau 211 Transformations

Proprit Rle
transform (Dclaration groupe)
transform-origin Point dorigine de la transformation
transform-style Style de transformation
perspective Effet de perspective
perspective-origin Point dorigine de la perspective
backface-visibility Visibilit de larrire de llment transform

Exemple
h1 {
transform: rotate(8deg);
}

Tableau 212 Transitions

Proprit Rle
transition (Dclaration groupe)
transition-delay Dlai de transition
transition-duration Dure de transition
transition-property Proprit laquelle appliquer la transition
transition-timing-function Fonction dacclration pour la transition

Exemple
img.transition.couleur {
transition: transform .5s ease-in;
}
img.transition.couleur:hover {
transform: rotate(10deg);
}

618 Groupe Eyrolles, 2005


B Feuilles de style CSS

RESSOURCE Tutoriels CSS sur Alsacreations


Transitions CSS 3
B http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html

Une petite quantit de nouvelles proprits CSS 3 ont t implmentes au fur et


mesure dans les moteurs de rendu, officiellement de manire exprimentale, avec des
prfixes spcifiques. Cest par exemple le cas de border-radius qui existait initiale-
ment sous le nom de -moz-border-radius pour les navigateurs Gecko (Mozilla),
-webkit-border-radius pour les navigateurs WebKit (Chrome, Safari). Opera a
quant lui choisi de lintgrer directement, mais utilise le prfixe -o- pour ses pro-
pres exprimentations. Une fois tous les tests concluants, la proprit adopte son
nom dfinitif, sans prfixe.

RESSOURCE Tutoriels CSS sur Alsacreations


Les prfixes vendeurs en CSS
B http://www.alsacreations.com/article/lire/1159-prefixes-vendeurs-css-proprietaires.html

Pseudo-classes et pseudo-lments
Les pseudo-classes et pseudo-lments affinent les capacits des slecteurs. Ils scri-
vent la suite du slecteur initial, concatns par un signe deux-points : .
Tableau 213 Quelques pseudo-classes et pseudo-lments

Pseudo-* Rle
:link Lien
:visited Lien visit
:hover lment survol
:active lment actif
:focus lment ayant le focus
:first-child Premier enfant
:last-child Dernier enfant
:nth-child(n) n-ime enfant
:nth-last-of-child(n) n-ime dernier enfant
:nth-of-type(n) n-ime type dlment
:nth-last-of-type(n) n-ime dernier type dlment
:first-of-type Premier type dlment

Groupe Eyrolles, 2005 619


HTML 5 - Une rfrence pour le dveloppement web

Tableau 213 Quelques pseudo-classes et pseudo-lments (suite)

Pseudo-* Rle
:last-of-type Dernier type dlment
:only-child Enfant unique
:only-of-type lment de type unique
:checked tat coch
:enabled tat activ
:indeterminate tat indtermin
:not(expr) Ngation de lexpression
::first-letter Premire lettre
::first-line Premire ligne

Exemple
a:hover {
text-decoration:underline;
}
p::first-letter {
font-size: 2em;
}

Rgles @
Les rgles @ sont des instructions plus volues pouvant se retrouver dans les
feuilles de style pour moduler leur comportement ou ajouter des informations qui ne
pourraient trouver leur place dans des dclarations classiques.
Tableau 214 Quelques rgles @

Proprit Rle
@import Importer une autre feuille de style CSS.
@charset Dclaration de lencodage des caractres.
@page Dfinir des rgles gnrales pour les mdias pagins.
@font-face Importer un fichier de police (fonte) externe.
@media Dfinir des requtes de mdia.

620 Groupe Eyrolles, 2005


B Feuilles de style CSS

Exemple

@import "autres_styles.css";
@import url("impression.css") print;

@page {
size: 15cm 20cm;
margin: 2cm;
marks: cross;
}

@font-face {
font-family: maPolice;
src: url(ToutSaufComicSans.otf);
font-weight: bold;
}
p {
font-family: maPolice;
}

@media print {
body {
font-size: 2em;
background: white;
}
nav {
display: none;
}
}

Media queries
Les media queries (ou requtes de mdia) sont une fonctionnalit bien utile de CSS
pour adapter le design et la prsentation gnrale dune page web selon le priph-
rique de consultation. Depuis la navigation sur mobiles jusquaux plages braille, la
prsentation est ajuste selon les capacits de rendu, par exemple en modifiant la
taille du texte ou son agencement.
La syntaxe dune media query est une suite de conditions satisfaire. Au besoin, le
navigateur valuera lexpression et chargera les styles y correspondant ou les rechar-
gera dynamiquement sil y a lieu.

Groupe Eyrolles, 2005 621


HTML 5 - Une rfrence pour le dveloppement web

Exemple de media query

@media screen and (min-width: 200px) and (max-width: 640px) {


section {
display: block;
clear: both;
margin: 0;
}
}

Ici, lon sadresse un cran (screen) dont la rsolution en largeur est comprise
entre 200 et 640 pixels. Si le navigateur se retrouve dans cette condition, les lments
de type <section> passeront tous en mode bloc, sans aucune marge, pour une
meilleure disposition verticale sur un petit cran.
Pour dcouvrir la magie des media queries, consultez larticle en ligne rdig par votre
auteur dvou.

RESSOURCE Tutoriels CSS sur Alsacreations


Les Media Queries CSS 3
B http://www.alsacreations.com/article/lire/930-css3-media-queries.html

622 Groupe Eyrolles, 2005

Vous aimerez peut-être aussi