Dcouverte de la feuille de style' CSS Cascading Style Sheets - PowerPoint PPT Presentation

1 / 14
About This Presentation
Title:

Dcouverte de la feuille de style' CSS Cascading Style Sheets

Description:

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. ... – PowerPoint PPT presentation

Number of Views:293
Avg rating:3.0/5.0
Slides: 15
Provided by: PHIL379
Category:

less

Transcript and Presenter's Notes

Title: Dcouverte de la feuille de style' CSS Cascading Style Sheets


1
Découverte de la feuille de style.
CSSCascading 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.

2
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
    ltbodygt, ltstylegt etc.
  • Entre les balises ltstylegt et lt/stylegt 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.

3
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.

4
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 ltlink 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 ltbodygt aura les
    attributs que nous avons définis dans la feuille
    de style. Pour cela nous utilisons la balise ltdiv
    class"conteneur2"gt
  • 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.

5
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

6
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" !

7
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

8
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.

9
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 !

10
(No Transcript)
11
(No Transcript)
12
(No Transcript)
13
(No Transcript)
14
(No Transcript)
Write a Comment
User Comments (0)
About PowerShow.com