 |
Dictionnaire |
 |
|
DIV
et SPAN
Les balises html DIV et SPAN permettent de délimiter
une zone de contenu sans influencer la mise en forme.
Elles sont donc très utiles pour appliquer
des styles et créer des boîtes.
La balise DIV se différencie de la balise SPAN
par l'insertion avant et après d'un
saut de ligne.
Héritage
Comprendre la notion d'héritage est important
dans l'écriture d'une feuille de
style. Une balise parente encadre par définition
des balises enfants (Ainsi la balise <HTML>
est la balise parente de tout un document et la balise
<TITLE> est fille de <HEAD> et petite
fille de <HTML>). L'orsque l'on applique
un règle de style
à une balise parent, ce style se répercute
par défaut sur toutes les balises enfants,
sauf si d'autres styles sont spécifiés
localement.
ID
Attribuer à une balise html une ID <P ID=titre>
permet de cibler la mise en forme en utilisant un
sélecteur
d'ID du type P#titre{font-family: fantasy}. À
la différence d'une classe,
une ID doit s'appliquer à un seul élément
d'une page html. On peut utiliser des ID notamment
pour animer avec DHTML
des boîtes et donc
éviter les confusions entre les éléments.
Médias
Une nouveauté des CSS2
est de pouvoir appliquer un style en fonction du média
(périphérique de restitution). Une règle-at
(@media) associera ainsi un style selon que la page
est restituée par un synthétiseur vocal,
un équipement braille, un portable, une imprimante,
un projecteur multimédia, un écran d'ordinateur
ou encore une télévision.
L'affectation
sera du type :
@media print {
body{background-color : white : color : black}
}
Pseudo-classe
Une pseudo-classe permet de définir plus précisément
un sélecteur
en fonction de l'environnement et de l'utilisation.
Par exemple, la pseudo-classe objet survolé
( :hover) permet d'associer un style à
un lien survolé par la souris a :hover.
D'autres pseudo-classe s'appliquent au premier fils d'un
sélecteur (voir
notion d'héritage) first-child,
aux éléments activés :active, en attente
:focus ou encore aux langues utilisées :lang(fr)...
Pseudo-élément
Dans le même esprit qu'une pseudo-classe,
un pseudo-élément permet de délimiter
une mise en forme à une partie d'une balise
html. Ainsi les pseudo élément first-letter
et first-line appliqueront un règle
de style respectivement a la première lettre
d'un paragraphe (lettrine) et à la première
ligne d'un bloc de texte. De même les pseudo-éléments
:before et :after permettent d'insérer
du contenu avant et après une élément
html (H2 :before{content : " Sous-titre "}).
Règle de style
C'est la brique de base de définition
d'un style, chaque règle se compose de
sélecteur
et d'un bloc de déclaration:
|
 |
|
|
|
|
|
Exemple |
|
| Une
image avec une bordure originale?
Il
suffit d'insérer la règle suivante entre les
balises HEAD de votre document html:
<style
type="text/css">
<!--
img { border-style: groove}
-->
</style>
|
|
|
Copies ou reproductions strictement réservées
à l'usage privé ou pédagogique dans un cercle de classe.
|
| "Supports de cours sur le réseau"
|
|
| |
|
