Formation CSS (Cascade Style Sheets) Feuille de style

Hiérachie des styles
● Ordre de priorité :
style en ligne > style de document > @import > link
Différence entre @import et link :
✗ Équivalence lorsqu’une seule balise <link>
✗ Lorsqu’il y a plusieurs feuilles externes, @import est préférable, car il y a fusion des styles. La feuille du dernier import est prioritaire.
Classes de style
● Les classes de style permettent de définir plusieurs styles différents pour une ou plusieurs balises.
● On peut définir des classes régulières (attachées à une balise) ou bien génériques (pour l’ensemble des balises).
● Définition d’une classe dans une feuille de document ou externe :
✗Classe régulière d’un paragraphe : P.nomclasse
{propriétés : valeurs ; etc.. }
Classe générique : .nomclasse {propriétés : valeurs ; etc.. }
● Exploitation :
✗Pour une classe régulière : <P class= »nomclasse »>abc</p>.
✗ Pour une classe générique on peut utiliser les balises <div> et <span>.
Pseudo-classes
Les pseudo-classes permettent de définir l’affichage de styles pour certains états de balises.
Les noms sont prédéfinis.
Elles sont rattachées au nom de la balise par « : »
et non « . ».
Principales pseudo-classes : A:link, A:active,
A:visited, P:first-letter, P:first-line.
Attention à la compatibilité des navigateurs avec les pseudo-classes introduites dans CSS2
(A:hover, A:focus, :first-child, :lang).
Identificateur
● L’attribut id assigne à l’élément correspondant unidentificateur unique au sein du document.
● On peut définir des identificateurs réguliers (attachés à une balise) ou bien génériques (pour l’ensemble des balises).
● Définition d’un identificateur dans une feuille de document ou externe : #jaune {color :
jaune} ou H1#bleu {color : blue}
● Exploitation : <span id= »jaune »>Jaune</span>ou <H1 id= »jaune »>Titre bleu</H1>
DIV et SPAN
Balises introduites dans HTML 4.
DIV : Crée une division au sein d’un document. Fonctionnement sur un bloc.
SPAN : Permet de déléguer le formatage du texte entre les balises à
une feuille de style. Fonctionnement sur la ligne.
Attribut « id » pour identifier une zone
Exemple: <div id= »menu »>…</div>