découverte de la feuille de style. css cascading style sheets il ne s'agit pas ici de faire un...
TRANSCRIPT
Découverte de la feuille de style. CSS
Cascading Style Sheets
Il ne s'agit pas ici de faire un cours de code CSS ! Il faudrait un certain nombre de chapitres et surtout commencer par le commencement à savoir le HTML et le XHTML.
Mais pour la plupart, vous êtes habitués (ées) à modifier des lignes de code dans des sources Outlook Express sans savoir pour autant concevoir la totalité de la page. De même avec une animation écrite en JavaScript, nous savons la modifier, l'adapter alors qu'en créer une, nous serait difficile.
Dans les pages qui suivent nous verrons un exemple de feuille de style CSS, comment copier des fragments de codes, les dupliquer, modifier les valeurs qui nous intéressent et surtout identifier leur fonction.
Utilité de la feuille de style
Voici des lignes de code que vous connaissez. Bien que ce soit un message Outlook Express, c'est du html. Vous reconnaissez les balises <body>, <style> etc.
Entre les balises <style> et </style> vous pouvez retrouver, quelques fois, des petits morceaux de code CSS. Dans l'exemple ci-contre il s'agit de la scrollbar qui est définie ici.
Ces lignes de code pourraient bien êtres une page de votre site Internet.
Si vous vouliez faire d'autres pages avec les mêmes attributs il vous faudrait, à chaque fois recopier le code. Et si vous aviez 100 pages et que vous vouliez changer la couleur de la scrollbar, il faudrait reprendre les 100 pages une à une pour les modifier.
La solution ? Vous l'avez compris, c'est de faire une feuille de style extérieure nommée par exemple styles.css et mettre un lien dans chaque page créée. On dit que l'on "attache" une feuille de style.
Le code de la feuille de style CSS
Voici donc une partie de code d'une feuille de style. La syntaxe est un peu différente du html ou xhtml.
Nous trouvons des { pour ouvrir une propriété, des . devant un nom de propriété…
Généralement les noms donnés aux identifiants de balises comme "header" sont en anglais. Mais vous pouvez très bien les nommer en français comme j'ai nommé "conteneur3" la partie centrale de ma page.
Le principal étant de nommer de manière identique les identificateurs dans notre page html !
Lorsque dans notre page html nous ferons référence au header, tous les attributs ci contre seront pris en compte. Le fond sera fait d'une image qui s'appelle header1.jpg, ce fond ne se répétera pas, il aura une hauteur de 160pixels etc.
Si dans la nouvelle page que je suis en train de réaliser, je préfère les attributs définis dans header2, je n'aurai qu'a faire référence à header2.
Côté code html de la page
Voici votre bonne vieille page codée en html.
Vous avez vos balises habituelles, plus quelques unes spécifiques qui font référence à la feuille de style.
Tout d'abord <link qui établi la liaison avec la feuille de style. La feuille de style s'appelle ici styles.css (nous verrons plus loin comment attacher la feuille de style dans Dreamweaver)
Ensuite nous indiquons que le <body> aura les attributs que nous avons définis dans la feuille de style. Pour cela nous utilisons la balise <div class="conteneur2">
Ce "body" avec son "conteneur2" aura une tête de page appelée header2.
Et ainsi de suite … le navigateur, qui lit le code dans cet ordre, affichera ce que vous avez défini, et ira chercher dans la feuille CSS, les attributs "class" indiqués dans votre code html.
Dans Dreamweaver
Supposons que vous ayez déjà une ébauche de site; avec une page faisant appel à une feuille de style.
Sur le screenshot ci-contre vous avez à gauche la feuille de style, et à droite la page en question en affichage "fractionné" qui permet de voir à la fois le code et la création.
Nous souhaitons ajouter une nouvelle page.
Nous faisons Fichier/Nouveau
Création d'une nouvelle page
Dans la fenêtre qui s'affiche nous choisissons Page de base.
Vous notez au passage les autres créations qui nous sont maintenant plus familières: CSS, Conception de page CSS, XML…
Nous créons une page de base HTML en cliquant sur Créer, que nous enregistrons sous le nom de "Ma nouvelle page" !
Attacher une feuille CSS
Nous venons de créer notre nouvelle page; elle est enregistrée sous le nom de ma_nouvelle_page
Dans Dreamweaver nous allons dans le haut à droite et ouvrons si ne n'est déjà fait la fenêtre Styles CSS.
Nous cliquons sur l'icône "Attacher une feuille de style"
Ce qui provoque l'ouverture de la fenêtre ci-contre.
En effet, pour des raisons de clarté et de bonne compréhension, vous aurez peut-être choisis de faire plusieurs feuilles de styles. Dans ce cas choisissez le fichier CSS qui vous convient et faites OK
Prêt à composer votre nouvelle page
Vous pouvez constater ci-contre des nouveautés.
Si votre page html est encore vide (il n'y a rien dans le body) en revanche vous avez une série d'outils prédéfinis qui sont dans votre fenêtre "Création" sous l'onglet "Styles CSS"
D'autre part dans la fenêtre en bas "Propriétés" vous avez le choix des attributs que vous avez définis dans votre feuille CSS.
Il ne vous reste plus qu'à mettre ça dans le bon ordre.
Bonne création !
Je ne vous cache pas que pour débuter mieux vaut avoir un modèle que vous pourrez modifier à loisir.
Un ouvrage sur le XHTML et CSS n'est pas vraiment superflu !
Je vous donne dans la diapo suivante un rappel des Propriétés, Sélecteurs, Pseudo class et autres Pseudo éléments ! ! !
Il est évident que tout cela ne se maîtrise pas en une journée.
Patience donc !
Si vous souhaitez allez plus avant dans les CSS, demandez !
