Explorer les Livres électroniques
Catégories
Explorer les Livres audio
Catégories
Explorer les Magazines
Catégories
Explorer les Documents
Catégories
Il faut néanmoins reconnaître que le support des feuilles de style, même s'il est
maintenant largement répandu parmi les navigateurs, laisse parfois à désirer, en
particulier en ce qui concerne le positionnement des éléments.
3. Support par les navigateurs
a. Introduction
La situation est bien moins catastrophique qu'elle l'était voici quelques années.
1|Page
format le moins étendu. Les autres navigateurs comme Opera, Mozilla ou Safari,
présentent des performances comparables. Il reste néanmoins nécessaire, avant
leur implémentation, de tester le comportement des propriétés des feuilles de style
sur les navigateurs les plus anciens utilisés par le public visé.
b. Stratégie de développement
En conséquence, compte tenu du bon support des standards par les navigateurs
récents, depuis quelques années se généralise une démarche relativement nouvelle
en matière de développement Web.
Il est également possible de spécifier une feuille de style dite interne. Elle se
place alors entre deux balises <style> et </style>, dans l'entête (<head>) du
document HTML.
2|Page
<meta http-equiv="Content-Type" content="text/html; charset=ISO-
8859-1" />
<style type="text/css"> (...) </style>
</head>
<body> (...) </body>
</html>
L'attribut type est obligatoire ; il précise le type MIME de feuille de style utilisé.
En général, il vaut type="text/css". L'attribut media permet de spécifier le type de
media auquel la feuille de style est destinée :
Une troisième possibilité consiste en l'appel d'un fichier externe. L'appel se fait
via l'élément link, placé dans l'entête du document HTML. L'URL de la feuille de
style externe est spécifiée par la valeur de l'attribut href...
Le sigle CSS signifie Cascading Style Sheet ou encore Feuille de style en cascade.
Pourquoi « cascade » ?
3|Page
s'opposer. Les ordres de style arrivent donc « en cascade ». Comment résoudre les
conflits ?
Comme pour le HTML, le dernier qui parle a raison. On aura donc la hiérarchie :
feuille de style extérieure << feuille de style dans le head << style en attribut
dans la balise
III. La syntaxe
1. Structure générale
a. Construction d'une règle
Une feuille de style est une suite de règles. Voici un exemple de règle :
h2
{
text-align : center;
color : black;
}
Il est facile de décrypter le sens de cette règle : tous les titres de niveau 2 auront
leur texte centré et de couleur noire.
b. Commentaires
Il est possible d'ajouter des commentaires dans une feuille de style. Une zone de
commentaires commence par les caractères /* et se termine par les caractères */.
Elle peut s'étendre sur plusieurs lignes. Par exemple :
4|Page
p
{
text-align : justify;
color : black;
}
h2, h3, ul
{
text-align : center;
color : green;
}
Dans cet exemple, tous les titres de niveaux 2 et 3 et les listes non ordonnées
seront centrés et de couleur verte.
b. Classe
L'attribut class est un attribut qui peut apparaître dans n'importe quelle balise.
Exemple :
5|Page
Pour que tous les éléments de classe truc s'affichent avec un texte rouge et que
tous les éléments de classe machin s'affichent avec un texte bleu, il suffira
d'énoncer les deux règles suivantes :
.truc
{
color : red;
}
.machin
{
color : blue;
}
Cette règle de style aura pour effet d'afficher les éléments de classe truc en
rouge et ceux de classe machin en bleu, comme ci-dessous (invisible à la photocopie
noir et blanc)...
Constatons par cet exemple la propriété d'héritage : l'item Et ceci est écrit en
rouge alors qu'il est dépourvu de l'attribut class... Ainsi, et de manière générale,
les éléments insérés dans un conteneur héritent des propriétés de ce conteneur
même si on ne leur applique pas explicitement de style.
div.menu
{
background-color : gray;
}
6|Page
Il est également possible d'appliquer plusieurs classes à un élément. Ainsi, si
dans la feuille de style on écrit...
.appartient_a_dupont
{
color : red;
}
.vehicule
{
font-style : italic;
}
c. Identifiant
L'attribut id est un attribut qui peut aussi apparaître dans n'importe quel
élément. La très grande différence avec l'attribut class est qu'une valeur de id ne
peut être prise qu'une seule fois dans toute la page Web. C'est un identifiant : par
nature, sa valeur est unique. Exemple :
#monpar, #monimage
{
color : red;
border : solid 0.5em blue;
}
#liste1, #monimage
{
background-color : yellow;
}
#maliste
{
background-color : yellow;
color : orange;
}
7|Page
#item2
{
font-variant : small-caps;
font-style : oblique;
}
3. Sélecteurs complexes
a. Sélecteur contextuel
Prenons un exemple :
h2 em
{
color : blue;
}
Cette règle ne s'appliquera que sur le contenu des éléments em lorsqu'ils seront
eux-mêmes à l'intérieur d'un titre de niveau 2 (h2). Autrement dit, la consigne
s'applique aux éléments em dans le contexte d'un élément h2.
Syntaxe : les sélecteurs simples sont séparés par des espaces. L'enchâssement
est possible avec tous les types de sélecteurs, balise, identifiant, classe comme
l'illustrent les exemples suivants :
.copyright h4
{
color : blue;
}
#toto b
{
font-size : large;
}
ul ul
{
list-style : lower-alpha;
}
h1 b, h2 b, b em
{
color : yellow;
}
b. Pseudo-classes
8|Page
Nous allons prendre l'exemple des liens. Un lien peut être dans trois états
différents :
Pour les éléments a, on appelle pseudo-classes ces trois états possibles. Ce sont
des classes prédéfinies. Voici un exemple :
a:active
{
text-decoration : overline;
}
a:link
{
color : blue;
font-style : italic;
}
a:visited
{
color : green;
font-weight : bold;
}
a
{
text-decoration : none;
}
a:hover
{
text-decoration : underline;
}
:hover, selon la norme, est applicable à n'importe quel élément d'une page, mais
Internet Explorer jusqu'à la version 6 incluse ne le supporte que pour les liens
(éléments <a>).
c. Pseudo-éléments
9|Page
CSS1 décrit plusieurs pseudo-éléments :
Les trois derniers ne sont pas supportés par Internet Explorer. Exemple
d'utilisation :
p:first-letter
{
color : red;
font-size : 200%;
font-weight : bold;
}
Il ne faut laisser aucun blanc entre le nombre et l'unité. Une longueur peut être
précédée d'un signe + ou -.
Notati
Unité Conversion
on
inch In 1in=2,54cm
(pouce)
Centimètr Cm
e
millimètre Mm
1pt=1/72in=0,352778m
Point Pt
m
Pica Pc 1pc=12pt=4,233mm
Exemples d'utilisation :
h1
{
margin : 0.5in;
}
10 | P a g e
h2
{
line-height : 3cm;
}
h3
{
word-spacing : 4mm;
}
h4
{
font-size : 12pt;
}
h5
{
font-size : 1pt;
}
Exemples d'utilisation :
h1
{
margin : 0.5em;
}
h2
{
line-height : 1ex;
}
h3
11 | P a g e
{
font-size : 15px;
}
L'unité pixel est une unité relative, mais Internet Explorer la considère comme
une unité absolue quand elle est appliquée à des tailles de caractères, ce qui
interdit le redimensionnement de la taille de l'affichage sur ce navigateur quand une
taille de caractères est indiquée en pixels.
d. Pourcentages
C'est une fraction de la longueur d'un autre élément : largeur de l'écran, hauteur
des caractères ou toute autre grandeur dépendant du contexte. Exemples
d'utilisation :
p
{
line-height : 120%;
}
td.gauche
{
width : 33%;
}
L'interligne des paragraphes vaut 120% de la hauteur des caractères, tandis que
les cellules de classe gauche occuperont 33% de la largeur du tableau où elles se
trouvent.
e. Couleurs
Les couleurs se codent de la même manière qu'en HTML, mais il est également
possible de spécifier explicitement le codage RGB :
une des seize couleurs standard : aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.
#rrggbb (par exemple, #00cc00).
#rgb (par exemple, #0c0).
rgb(x1,x2,x3), où x1, x2 et x3 sont des entiers compris entre 0 et 2 55
inclus (par exemple rgb(33,45,127)).
rgb(x%,y%,z%) où x, y et z sont des nombres compris entre 0.0 et 100.0
inclus (par exemple rgb(56%,33%,0%)).
12 | P a g e