Qu'est-ce qu'un style?
Pour appliquer un style à certaines balises d'une page web, il est nécessaire de pouvoir les différencier.
Pour ce faire on utilise des sélecteurs, ceux-ci permettent de cibler les éléments d'une page.
Un style permettra donc de dire : "Je veux que tous les éléments de ce type aient ce style".
Un style se compose de deux parties :
- un sélecteur qui précise sur quoi doit porter la règle
- un ensemble de déclarations (couple propriété : valeur) placées entre accolades qui indiquent le style à appliquer
S'il y a plusieurs couples, ceux-ci sont séparés par des points-virgules.
Certaines propriétés peuvent avoir plusieurs valeurs, les différentes valeurs sont alors séparées par un espace.
Il faut de préférence utiliser les propriétés raccourcies afin d'éviter de rallonger inutilement la description des styles.
Les sélecteurs
Il faut éviter de surcharger les sélecteurs, de les rendre trop compliqués, 3 étages est un maximum qu'il ne faudrait jamais dépasser.
| Notation |
Nom |
Signification |
| Les sélecteurs de types (S.) |
| * |
S universel |
cible toutes les balises. |
X |
S de types |
cible toutes les balises X. |
| X Y |
S descendant |
cible toutes les balises Y dont un ancêtre est une balise X. |
| X > Y |
S d'enfant |
cible toutes les balises Y enfant direct d'une balise X. |
| X + Y |
S adjacent |
cible toutes les balises Y dont le prédécesseur immédiat est une balise X; X et Y ont le même père. |
| X ~ Y |
S adjacent général |
cible toutes les balises Y dont le prédécesseur est une balise X; X et Y ont le même père. |
| .val |
S de classe |
cible toutes les balises ayant pour l'attribut class la valeur "val", une classe peut apparaître autant de fois que désiré. |
| #val |
S d'identificateur |
cible la balise ayant pour l'attribut id la valeur "val", un identifiant ne peut apparaître qu'une fois dans la page html. |
| Les sélecteurs d'attributs |
| [attr] |
|
vrai si présence de l'attribut attr quelle que soit sa valeur. |
| [attr="val"] |
|
vrai si présence de l'attribut attr de valeur "val". |
| [attr^="val"] |
|
vrai si présence de l'attribut attr dont la valeur commence par la chaîne "val". |
| [attr$="val"] |
|
vrai si présence de l'attribut attr dont la valeur finit par la chaîne "val". |
| [attr*="val"] |
|
vrai si présence de l'attribut attr dont la valeur contient la sous-chaîne "val". |
| [attr|="val"] |
|
vrai si présence de l'attribut attr dont la valeur débute par la chaîne "val" au sein de valeurs séparées par des traits-d'union. |
| [attr~="val"] |
|
vrai si présence de l'attribut attr dont la valeur contient la chaîne "val" au sein de valeurs séparées par des espaces. |
| Les pseudo-classes, elles permettent de sélectionner des éléments en
fonction de leur état. |
a : link
a : visited
a : hover
a : active |
les hyperliens |
cible les liens non visités, visités, survolés, cliqués. |
X : hover
X : active
X : focus |
les objets |
cible les objets survolés, activés (sur clic de la souris) ou prêts à recevoir des données (les formulaires). |
| Les pseudo-classes structurelle |
X:first-child
X:last-child |
|
vrai si l'élément sélectionné est le premier fils de son père
vrai si l'élément sélectionné est le dernier fils de son père. |
X:nth-child(n)
X:nth-last-child(n) |
|
X qui est le n-ième enfant de son parent en comptant depuis le premier enfant
X qui est le n-ième enfant de son parent en comptant depuis le dernier enfant |
Les pseudo-éléments, ils spécifient un état supplémentaire qu'il serait difficile de spécifier autrement
(ex:
comment spécifier le 1er enfant d'un élément?) |
X::first-line
X::first-letter
X::after
X::before |
première ligne
première lettre
"après" l'élément
"avant" l'élément |
cible la première ligne de l'objet X
cible la première lettre de l'objet X
pour insérer du contenu après l'élément
pour insérer du contenu avant l'élément |
| Les pseudo-classes pour les formulaires |
| :focus |
|
cible l'élément de formulaire qui a le focus |
:disabled
:enabled |
|
cible les élément actifs ou non de la page |
:checked |
|
spécifique aux cases à cocher, sélectionne les cases à cocher |
:required
:optional |
|
cible les élément requis ou optionnels |
| :default |
(pour mémoire) |
cible les élément sélectionnés par défaut, par exemple dans une liste ou pour les cases à cocher |
:valid
:invalid |
(pour mémoire) |
cible les élément valides ou non valides |
:inrange
:out-of-range |
(pour mémoire) |
cible les élément dont la valeur est ou n'est pas comprise entre min et max |
:read-only
:read-write |
(pour mémoire) |
cible les élément en lecture seule, ou en lecture-écriture |
Le sélecteur universel
Toutes les balises sont concernées par le style.
Démo
<style>
* {font-style:italic;}
</style>
</head>
<body>
<h1>Modigliani</h1>
<h2>le visage d'ange.</h2>
<p>Modigliani est décédé en 1919, lorsque son épouse Jeanne Hébuterne...</p>
Le sélecteur de type
- on associe un style aux balises
- si on veut associer le même style à 2 ou plusieurs balises on les sépare par des virgules
Démo
<style>
body {background-color:#00ff00}
h1 {text-align:center;color:red}
h2,h3 {text-align:left;color:#000000} /* même style pour h2 et h3 */
p {font-style:italic;color:blue}
</style>
</head>
<body>
<h1>Modigliani</h1>
<h2>le visage d'ange.</h2>
<h3>l'ami de picasso.</h3>
<p>Modigliani est décédé en 1919, lorsque son épouse Jeanne Hébuterne...</p>
L
e sélecteur descendant
Rappel: par défaut <em> met le texte en italique
- le premier <em> est dans une balise <p> et subit donc le style
- le deuxième <em> est dans une balise <div> et ne subit donc pas le style
Démo
<style>
body {background-color:#00ff00}
h1 {text-align:center;color:red}
p,div {color:blue}
p em {text-decoration:underline;color:red;}
</style>
</head>
<body>
<h1>Phineas</h1>
<h2>Le boss</h2>
<p>Le maître de <em>Perry</em>, frère de Pherb....</p>
<h1>Pherb</h1>
<h2>L'ingénieur</h2>
<div>A la base de toutes <em>les inventions</em>, frère de Phineas...</div>
L
e sélecteur d'enfant
Côté style le signe > indique qu'on vise les enfants directes de la balise.
Démo
<style>
body {background-color:#00ff00}
h1 {text-align:center;color:red}
p {color:blue}
p > em {text-decoration:underline;color:red;}
</style>
</head>
<body>
<h1>Phineas</h1>
<h2>Le boss</h2>
<p>Le maître de <em>Perry</em>, frère de Pherb...., sacré <em>Perry</em>...</p>
<h1>Pherb</h1>
<h2>L'ingénieur</h2>
<p>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p>
L
e sélecteur adjacent
- dans l'exemple côté style le signe + indique qu'on vise le premier <p> précédé directement par un <h2>
- le premier <p> a pour prédécesseur direct la balise <h2> et subit donc le style
- le deuxième <p> a pour parent direct la balise <h1> et ne subit donc pas le style
Démo
<style>
body {background-color:#00ff00}
h1 {text-align:center;color:red}
p {color:blue}
h2 + p {text-decoration:underline;color:red;}
</style>
</head>
<body>
<h1>Phineas</h1>
<h2>Le boss</h2>
<p>Le maître de <em>Perry</em>, frère de Pherb....</p>
<p>Et patatra...</p>
<h1>Pherb</h1>
<p>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p>
L
e sélecteur adjacent général
dans l'exemple côté style le signe ~ indique qu'on vise
tous les <p> précédé
directement par un <h2>
Démo
<style>
body {background-color:#00ff00}
h1 {text-align:center;color:red}
p {color:blue}
h2 ~ p {text-decoration:underline;color:red;}
</style>
</head>
<body>
<h1>Phineas</h1>
<h2>Le boss</h2>
<p>Le maître de <em>Perry</em>, frère de Pherb....</p>
<p>Et patatra...</p>
<h1>Pherb</h1>
<p>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p>
L
e sélecteur de classe
- l'attribut class appel le style décrit dans la fs
- la classe est représentée par un "." dans la fs
- une même classe peut être appelée par plusieures balises
Démo
<style>
body {background-color:#00ff00}
p.descr {color:blue;}
p.perso {color:red;}
</style>
</head>
<body>
<h1>Phineas</h1>
<h2>Le boss</h2>
<p>Le maître de <em>Perry</em>, frère de Pherb....</p>
<p class=descr>Le maître de <em>Perry</em>, frère de Pherb....</p>
<p class=perso>Le maître de <em>Perry</em>, frère de Pherb....</p>
<h1>Pherb</h1>
<h2>L'ingénieur</h2>
<p>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p>
<p class=descr>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p>
<p class=perso>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p>
l
e sélecteur d'identificateur
- l'attribut id appel le style décrit dans la fs
- l'identificateur est représenté par "#" dans la fs
- un même identificateur ne peut être utilisé qu'une seule fois, et donc par une et une seule balise.
Démo
<style>
body {background-color:#00ff00}
#tete {border:solid 2px rgba(100,100,100,1);width:600px;text-align:center;}
p.descr {color:blue;}
p.perso {color:red;}
</style>
</head>
<body>
<h1 id="tete">Phineas et pherb</h1>
<h1>Phineas</h1>
<h2>Le boss</h2>
<p>Le maître de <em>Perry</em>, frère de Pherb....</p>
<p class=descr>Le maître de <em>Perry</em>, frère de Pherb....</p>
<p class=perso>Le maître de <em>Perry</em>, frère de Pherb....</p>
<h1>Pherb</h1>
<h2>L'ingénieur</h2>
<p>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p>
<p class=descr>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p>
<p class=perso>A la base de <strong>toutes <em>les inventions</em>, frère </strong>de Phineas...</p>
l
e sélecteur d'attribut X[attr]
La balise qui porte l'attribut attr subit le style.
Démo
<style>
body {background-color:#00ff00}
p[personnage] {color:blue;}
</style>
</head>
<body>
<h1>Phineas et pherb</h1>
<p personnage="famprinc">Le premier d'entre eux, Perry</p>
<p>Le maléfique Heinz Doofenschmirtz</p>
<p>Vanessa, la fille de Heinz Doofenschmirtz</p>
<p>Pour le reste, il s'agit du secteur des trois Etats...</p>
L
e sélecteur d'attribut X[attr="val"]
La balise qui porte l'attribut attr dont la valeur est exactement val subit le style.
Démo
<style>
body {background-color:#00ff00}
p[personnage="famprinc"] {color:blue;}
p[personnage="famdoof"] {color:red;}
</style>
</head>
<body>
<h1>Phineas et pherb</h1>
<p personnage="famprinc">Le premier d'entre eux, Perry</p>
<p personnage="famdoof">Le maléfique Heinz Doofenschmirtz</p>
<p personnage="famdoof">Vanessa, la fille de Heinz Doofenschmirtz</p>
<p personnage="famreste">Pour le reste, il s'agit du secteur des trois Etats...</p>
L
e sélecteur d'attribut X[attr^="val"]
La balise qui porte l'attribut attr dont la valeur commence par val subit le style.
Démo
<style>
body {background-color:#00ff00}
p[personnage^="fam"] {color:blue;}
</style>
</head>
<body>
<h1>Phineas et pherb</h1>
<p personnage="famprinc">Le premier d'entre eux, Perry</p>
<p personnage="famdoof">Le maléfique Heinz Doofenschmirtz</p>
<p personnage="famdoof">Vanessa, la fille de Heinz Doofenschmirtz</p>
<p personnage="famreste">Pour le reste, il s'agit du secteur des trois Etats...</p>
L
e sélecteur d'attribut X[attr$="val"]
La balise qui porte l'attribut attr dont la valeur se termine par val subit le style.
Démo
body {background-color:#00ff00}
p[personnage$="doof"] {color:blue;}
</style>
</head>
<body>
<h1>Phineas et pherb</h1>
<p personnage="famprinc">Le premier d'entre eux, Perry</p>
<p personnage="famdoof">Le maléfique Heinz Doofenschmirtz</p>
<p personnage="famdoof">Vanessa, la fille de Heinz Doofenschmirtz</p>
<p personnage="famreste">Pour le reste, il s'agit du secteur des trois Etats...</p>
L
e sélecteur d'attribut X[attr*="val"]
La balise qui porte l'attribut
attr dont la valeur
contient val subit le style.
Démo
<style>
body {background-color:#00ff00}
p[personnage*="am"] {color:blue;}
</style>
</head>
<body>
<h1>Phineas et pherb</h1>
<p personnage="famprinc">Le premier d'entre eux, Perry</p>
<p personnage="famdoof">Le maléfique Heinz Doofenschmirtz</p>
<p personnage="famdoof">Vanessa, la fille de Heinz Doofenschmirtz</p>
<p personnage="famreste">Pour le reste, il s'agit du secteur des trois Etats...</p>
L
e sélecteur d'attribut X[attr|="val"]
La balise qui porte l'attribut
attr dont la valeur
commence par
val au sein d'une valeur contenant des -.
Démo
<style>
body {background-color:#00ff00}
p[personnage|="famprinc"] {color:blue;}
</style>
</head>
<body>
<h1>Phineas et pherb</h1>
<p personnage="famprinc-ext">Le premier d'entre eux, Perry</p>
<p personnage="famdoof">Le maléfique Heinz Doofenschmirtz</p>
<p personnage="famdoof">Vanessa, la fille de Heinz Doofenschmirtz</p>
<p personnage="famreste">Pour le reste, il s'agit du secteur des trois Etats...</p>
L
e sélecteur d'attribut X[attr~="val"]
La balise qui porte l'attribut
attr dont la valeur
commence par
val au sein d'une valeur contenant des espaces.
Démo
<style>
body {background-color:#00ff00}
p[personnage~="famprinc"] {color:blue;}
</style>
</head>
<body>
<h1>Phineas et pherb</h1>
<p personnage="famprinc ext">Le premier d'entre eux, Perry</p>
<p personnage="famdoof">Le maléfique Heinz Doofenschmirtz</p>
<p personnage="famdoof">Vanessa, la fille de Heinz Doofenschmirtz</p>
<p personnage="famreste">Pour le reste, il s'agit du secteur des trois Etats...</p>
L
es pseudo-classes des hyperliens
!!! L'odre doit être absolument respecté: a:visited -> a:hover -> a:active -> a !!!
Démo
<style>
body {background-color:#00ff00}
a:visited {color:white;text-decoration:none;}
a:hover {color:blue;text-decoration:underline;}
a:active {color:black;text-decoration:none;} /*au clic*/
a {font-size:2em;color:red;text-decoration:none;} /*idem ps link*/
</style>
</head>
<body>
<h1>Phineas et pherb</h1>
<a href="#">Phineas</a>
L
es pseudo-classes des balises
Démo
<style>
div {
color:red;
border:solid 2px green;
}
input[type="text"]:focus {
background-color:salmon;
}
div:hover {color:blue;}
div:active {color:black;}
</style>
</head>
<body>
Votre nom: <input type=text></input>
<br><br>
<div>Plus je connais les hommes, plus j’aime mon chien. Plus je connais les femmes, moins j’aime ma chienne.</div>
L
es pseudo-classes premier enfant et dernier enfant
Le sélecteur first-child correspond à chaque élément qui est le premier enfant de son parent.
Le sélecteur last-child correspond à chaque élément qui est le dernier enfant de son parent.
Démo
<style>
p:first-child{
color:red;
}
p:last-child{
font-size:2em;
}
</style>
</head>
<body>
<p>Les femmes n’ont jamais eu envie de porter un fusil, pour moi c’est quand même un signe d’élégance morale.</p>
<p>Une femme sans homme, c’est comme un poisson sans bicyclette.</p>
<p>La culture, c’est comme l’amour. Il faut y aller par petits coups au début pour bien en jouir plus tard.</p>
<p>Les imbéciles n’ont jamais de cancer. C’est scientifique.</p>
<p>Desproges.</p>
<div>
<p>J’ai le plus profond respect pour le mépris que j’ai des hommes.</p>
<p>Les animaux sont moins intolérants que nous : un cochon affamé mangera du musulman.</p>
<p>Tous les animaux sont utiles à l’homme, parce qu’ils nous aiment, nous gardent et qu’on les bouffe.</p>
<p>Desproges.</p>
</div>
L
es pseudo-classes structurelles
Il faut avant toute chose repérer qui est le parent!!!
X:nth-child(n) est
l'élément X qui est le n-ième enfant de son parent en comptant depuis le premier enfant
X:nth-child(2n) représente tous les éléments X pairs du parent en comptant depuis le premier enfant.
--
X:nth-child(2n+1) représente tous les éléments X impairs du parent en comptant depuis le premier enfant.
X:nth-last-child(n) est l'élément X qui est le n-ième enfant de son parent en comptant depuis le dernier enfant.
X:nth-last-child(2n) représente tous les éléments X pairs du parent en comptant depuis le dernier enfant.
X:nth-last-child(2n+1) représente tous les éléments X impairs du parent en comptant depuis le dernier enfant.
Démo
<style>
p:nth-child(4){
color:red;
}
p:nth-last-child(2){
font-size:2em;
}
</style>
</head>
<body>
<p>Les femmes n’ont jamais eu envie de porter un fusil, pour moi c’est quand même un signe d’élégance morale.</p>
<p>Une femme sans homme, c’est comme un poisson sans bicyclette.</p>
<p>La culture, c’est comme l’amour. Il faut y aller par petits coups au début pour bien en jouir plus tard.</p>
<p>Les imbéciles n’ont jamais de cancer. C’est scientifique.</p>
<p>Desproges.</p>
<div>
<p>J’ai le plus profond respect pour le mépris que j’ai des hommes.</p>
<p>Les animaux sont moins intolérants que nous : un cochon affamé mangera du musulman.</p>
<p>Tous les animaux sont utiles à l’homme, parce qu’ils nous aiment, nous gardent et qu’on les bouffe.</p>
<p>Desproges.</p>
</div>
L
es pseudo-éléments
Démo
<style>
p::before {
content:"Citations - "
}
p::after {
content:"- Desproges"
}
p::first-letter {
font-size:3em;
}
p::first-line {
color:red;
}
</style>
</head>
<body>
<p>
C’est complètement faux de dire que le cochon est sale, c’est le paysan qui est sale de mettre le cochon dans la merde.
<br> Au Laos, les cochons vivent dans la nature,
ils dorment dans les maisons, ils ne sont pas plus sales que les Laotiens qui sont des gens très propres.<br>
Simplement, les cochons s’appellent Kiki… et les Laotiens mangent leurs chiens.
</p>
:
disable :enabled
Démo
<style>
input[type=text]:disabled{
background-color:#FFAAAA;
}
option:disabled{
background-color:#FFAAAA;
}
</style>
</head>
<body>
<form action="">
Nom: <input type="text" name="nom" disabled><br>
Prénom: <input type="text" name="prenom"><br>
Pays:
<select>
<option value=1 >Belgique</option>
<option value=5>Espagne</option>
<option value=4 disabled>France</option>
<option value=5>Italie</option>
<option value=2 disabled>Luxembourg</option>
<option value=3 >Pays-Bas</option>
</select>
</form>
:
focus
Démo
<style>
input[type=text]:focus{
background-color:#FFAAAA;
}
</style>
</head>
<body>
<form action="">
Nom: <input type="text" name="nom"><br>
Prénom: <input type="text" name="prenom"><br>
</form>
