Université on line - Supports - Feuilles de styles CSSII

Supports -> Feuilles de styles

Résumé du cours

Liens

PDFs

Biblio

Dico

Pour retrouver le contenu du cours, vous pouvez feuilleter les pages en utilisant les flèches en bas de page ou accéder directement à une rubrique en cliquant sur les hyperliens du résumé ci-dessous.

Les avantages des feuilles de styles sont multiples, dissociant contenu et mise en forme, la syntaxe CSS est simple d'utilisation. La première étape est bien sûr la structuration du document html, suivie du choix d'un sélecteur et d'un bloc de déclaration. Le choix d'un bon emplacement pour ces styles est également important avant de tester la conformité avec les derniers navigateurs et plates-formes. L'avenir nous dira si cette norme importante percera ?

Le cours

Choisir un emplacement pour les styles

Savoir choisir ses styles est aussi important que de savoir où les placer. Trois niveaux sont possibles pour insérer ces règles de mise en forme dans l'ordre croissant:

Au niveau de la balise
Certaines balises peuvent porter des styles. La syntaxe est du type <P style="color : #CCFFOO">
Cet emplacement est utile quand on veut qu'un style prenne le dessus sur un autre (principe de cascade). En utilisant cette méthode, on peut également copier/coller du code html sans se soucier de styles externes.

Au niveau du document
Dans l'en-tête d'un document (entre les balise HEAD), on peut insérer une série de styles (encadrée par les balises STYLES). Ces styles s'appliqueront à tout le document et l'on pourra faire des copies de cette page en conservant les règles de mise en forme. Il ne faut pas trop abuser de cette technique au risque d'alourdir les pages du site.

Dans une feuille de style externe
Pour des règles de mise en forme s'appliquant à tout un site (couleur de textes, de liens, fond d'écran...), l'utilité de créer une feuille de style externe est évidente. La mise à jour de cette page se répercutera sur l'ensemble des pages. Cette feuille dont l'extension est .CSS ne se charge qu'une seule fois et cela accélère donc la navigation au sein d'un site.

Lien

La page d'accueil en CSS montre l'utilisation d'une feuille de style externe (style.css) ainsi que des styles au niveau de la balise, on aurait pu utiliser des styles au niveau du document pour la mise en forme qui ne se répète pas dans le reste du site:

La feuille de style associée à la page d'accueil en CSS

Cours - Liens - PDFs - Biblio - Dico

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"	Jean-Marc Loisil [universite@online.fr]