CSS et DREAMWEAVER (Suite et fin)  Les liens

CSS : rappels Cascading Style Sheet = feuille de style en cascade Feuille de style = un document… qui regroupe toutes les définitions et les caractéristiques de style et de mise en forme des pages web qui indique la mise en forme au navigateur

CSS : les avantages Maintenance simplifiée du site Changer l’apparence de toutes les pages en une seule fois Création de pages HTML allégées avec moins de balises Gestion de la compatibilité entre les navigateurs Compatibles avec les sites dynamiques (connexion SGBD) et avec les modèles/templates.

CSS feuille externe Appel du fichier : 2 méthodes ou <link rel="stylesheet" href= "../chemin/nom_fichier.css" type="text/css"> ou <style type="text/css"> <!-- @import url("../chemin/CSS/nom_fichier.css"); --> </style>

Attribut de classe (CLASS) : CSS dans le détail Un style s’applique : à une balise du code HTML exemple : H1, P , A (lien hypertexte) Attribut de classe (CLASS) : .nom-de-la-classe { propriétés ; } Attribut ID (utilisable une seule fois dans la page) : #nom-id {

Appeler les sélecteurs dans le code Pour la balise…rien besoin de faire Pour les classes (.nom_class) : <p class="nom_class"> texte, image, tableau,…</p> <span class="nom_class"> texte, image, tableau,…</span> <balise class="nom_class"> texte, image, tableau,…</balise> Pour les attributs ID (#premier) : <div id="premier" > texte… image… tableau...</div>

Utiliser Dreamweaver pour manipuler des styles / CSS Type : apparence des éléments textuels (police, couleur…) Arrière-plan : pour rajouter une image, une couleur par exemple Bloc : positionnement du texte du paragraphe Boîte : gestion des marges autour et à l’intérieur de l’élément Bordure : les contours Liste : mise en forme des listes Positionnement : positionnement dans la page de l’élément Extensions : pour modifier la forme du curseur par ex.

Les liens avec les feuilles de style (Principes) Appliquer un style à la balise A Nouveauté du HTML 4 : les pseudo-classes Utiliser des propriétés liées aux événements de la balise A a link : lien par défaut a visited : lien déjà visité a hover : lien survolé a active : lien appuyé …dans le même ordre !

Les liens avec les feuilles de style (dans le code) Sur la feuille de style CSS : a:link { les propriétés de mise en forme } a:visited { les propriétés de mise en forme } a:hover { les propriétés de mise en forme } a:active { les propriétés de mise en forme }

Les liens avec les feuilles de style (Dreamweaver) Ajouter un style sur une feuille :

On peut imaginer de mixer des classes avec des pseudo-classes : Pour aller plus loin On peut imaginer de mixer des classes avec des pseudo-classes : Exemple : a.classe1 {propriétés de mise en forme de la balise A dans la classe1} OU a.classe1:visited, a:link.classe1 {propriétés de mise en forme}

Pour aller plus loin http://openweb.eu.org/css/ http://css.alsacreations.com/ http://fr.selfhtml.org/css/index.htm http://css.mammouthland.net/ Pour l’impression : http://actuel.fr.selfhtml.org/articles/css/mise_en_page_imp/index.htm