Module Com231A - Web et Bases de Données Notion 2: introduction aux CSS

La page est créée Nadia Leger

Finances

Français

Like
Partager
Intégrer
Plein écran
Diapositives
Télécharger HTML
Télécharger PDF
Abus

←

CONTINUER À LIRE

→

Transcription du contenu de la page

Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous

Module Com231A - Web et Bases de Données
Notion 2: introduction aux CSS
1. CSS : Cascading Style Sheets
Avec XHTML, vous vous êtes concentré sur le contenu et la structure logique de vos pages.
Maintenant, vous allez voir comment l'utilisation de CSS (Cascading Style Sheets = Feuilles
de Styles en Cascade) va vous permettre d'améliorer la présentation et l'esthétique de vos
pages. L'utilisation des CSS et de XHTML permet une bonne distinction entre le contenu de
la page et sa présentation.
Nous avons vu en XHTML la balise qui sert à définir un titre. La CSS va, par
exemple, vous permettre de déclarer que tous vos titres seront de couleur rouge et avec
la police Arial, dans tout votre document.
Cela permet d'écrire une seule page XHTML et de proposer différentes présentations de
cette même page. Allez sur le site du module, dans la rubrique dédiée au CSS. L'exemple 1 et
l'exemple 2 vous proposent la même page XHTML à laquelle on a associée deux CSS
différentes. Regardez le code de ces deux CSS et essayez de trouver à quoi correspond
chacune des lignes.
Inversement, une CSS peut très bien servir pour plusieurs pages Web et ainsi toutes les
pages de votre site auront la même présentation.
Le nombre d'attributs et de valeurs étant très importants, nous ne ferons pas ici le tour
exhaustif de tout ce que l'on peut faire avec des CSS. Nous ne verrons pas non plus l'aspect
'en cascade' des feuilles de style.

2. Déclaration d'une CSS par fichier externe
Il existe plusieurs manières de déclarer une CSS. Nous ne verrons ici que la déclaration
d'une CSS par le biais d'un fichier externe.
Vous devez indiquer dans votre fichier XHTML dans la balise le nom du fichier
contenant la description de votre style. Par exemple, pour lier la feuille de style style1.css
vous devez rajouter la ligne suivante :

Vous devez ensuite écrire votre feuille de style dans le fichier style1.css. Par exemple, la
feuille de style suivante permet de modifier le style de toutes les balises :
h1 {
font-family: Arial, Helvetica,sans-serif; /* changer le style de la police */
font-size: 14px; /* changer la taille de la police */
color: #00ff00; /* changer la couleur de la police */
background-color :#000000; /* changer la couleur de fond */
}

Exercice 1
1- Chargez le gabarit d'un fichier XHTML avec appel de CSS à partir du site du module;
Rajoutez des paragraphes et des balises et dans votre page.
2- Créez une feuille de style style1.css permettant de modifier l'apparence de la balise
;
3- Validez votre fichier XHTML avec le validateur W3C;
4- Validez votre feuille de style avec le validateur dédié aux CSS :
http://jigsaw.w3.org/css-validator/ (lien sur le site du module)
5- Faites en sorte que les titres de niveau 2 apparaissent en vert dans votre page.

Dans la suite des TP et dans votre projet, vous devrez valider vos pages XHTML mais
aussi valider vos feuilles de style.

3. Le codage de la couleur
La couleur sur un ordinateur est générée à partir d'un mélange de 3 couleurs, le rouge, le
vert et le bleu. Chaque couleur est représentée par un chiffre entre 0 et 255. 0 étant l'absence
de couleur et 255 la couleur intégrale. Finalement ce chiffre est représenté en valeur
hexadécimale. Ainsi le noir est représenté par 00 00 00 et le blanc par FF FF FF. Pour
indiquer une couleur vous devez combiner les trois valeurs rouge-vert-bleue précédées par le
symbole #. Par exemple, pour obtenir la couleur bleu vous devez utiliser la combinaison
#000099. Vous pouvez ainsi créer vos propres couleurs.
Il existe plusieurs mots réservés pour les couleurs les plus classiques :
- black = noir,
- white = blanc,
- red = rouge,
- blue = bleu,
- …

4. La syntaxe des CSS
Comme dit précédemment, il existe plusieurs façons de déclarer des CSS. Nous nous
limiterons ici aux "jeux de règles". Une règle est définie comme suit :

avec :
• le sélecteur correspondant à la balise en code pur HTML, dont on veut modifier les
propriétés;

• le sélecteur est suivi d'un bloc de déclarations entre accolades, ce bloc définissant
       l'ensemble des modifications (ie des déclarations) que l'on souhaite faire sur la balise;
     • La déclaration se compose de deux parties :
       - la propriété par exemple font-size (ie la taille de la police);
       - la valeur, par exemple : 16pt (ie la valeur que l'on veut donner à la taille de la
           police)

Ecrire une feuille de style revient donc à décrire un jeu / ensemble de règles, chaque règle
modifiant une balise XHTML.
On peut classer les propriétés en plusieurs catégories:
         -   les propriétés de couleur et de fond
         -   les propriétés associées aux polices et au texte (caractères et formatage d'un texte);
         -   les propriétés associées aux listes (présence ou non de puces, …);
         -   les propriétés associées aux tables (styles des bordures d'un tableau, …);

5.       Propriétés de couleur et de fond
Nous allons commencer par voir les propriétés servant à modifier la couleur du texte et le
fond d'un document. Il s'agit des propriétés suivantes:
         -   color : pour définir la couleur du texte;
         -   background-color : pour définir la couleur de fond du document;
         -   background-image : pour spécifier une image de fond dans le document.

Ces propriétés peuvent s'associer à différentes balises comme par exemple :
         -   à la balise  pour définir la couleur et le fond de l'ensemble de votre page
             web;
         -   à une balise  pour définir seulement vos titres;

Comme nous l'avons vu précédemment, vous pouvez indiquer la valeur de la couleur en
hexadécimal ou en langue anglaise.
body { /* l'ensemble du document aura ces propriétés */
     color: #434a6a;
     background-color: white;
     background-image:url(../fleur1.jpg);
}

h1 {
         color: #e8eaff;
         background-color :#babcec;
}

Remarque : /* … */ servent à rajouter des commentaires dans votre code, qui ne seront pas
vus sur votre site.

                                                                                                   3

6.      Propriétés associées aux polices et au texte
Les propriétés permettant de modifier du texte sont les suivantes:
        -   font-family: police de caractères; valeur: une police, par exemple Verdana,
            Arial, Helvetica, Geneva, …;
        -   font-size: taille de la police; valeur : une taille, par exemple 12px;
        -   font-style: style de la police; valeur : normal, italic;
        -   font-weight: épaisseur de la police; valeur : normal, bold, bolder,
            lighter;
        -   text-decoration: soulignement           du texte; valeur : none, underline,
            overline, line-through
        -   text-align : alignement du texte; valeur : left, right, center, justify
        -   letter-spacing : distance entre les lettres; valeur : une distance, par exemple
            1px;

  Exercice 2
  Reprenez la feuille de style de l'exercice 1 et complétez cette feuille (ainsi que la page
HTML pour avoir un exemple assez conséquent) :
     1- en rajoutant de la couleur;
     2- en modifiant les polices;
     3- Validez votre fichier XHTML avec les validateurs.

7.      Propriétés associées aux listes
Les propriétés permettant de modifier les listes sont les suivantes:
        -   list-style-type : type de puces à appliquer dans la liste; valeur : disc,
            circle, square, decimal, none;
        -   list-style-image : spécification d'une image à utiliser comme puce à la place
            des puces habituelles utilisées dans des listes; valeur : url(image.gif);

                                                                                          4

8.     Propriétés associées aux tableaux
Les propriétés des bordures

   Les CSS fournissent un ensemble de propriétés permettant de définir les bordures qu'il
s'agisse de bordures de tableau, de zone de texte, etc. Vous pouvez utiliser les propriétés
suivantes pour donner un style à la bordure de vos tableaux:
       -   border-color : couleur de la bordure; valeur : une couleur;
       -   border-style : forme de la bordure; valeur : none, hidden, dotted, dashed,
           solid, double groove, ridge, inset, outset;
       -   border-width : épaisseur             de   la      bordure;   valeur:   épaisseur     ou
           thin, medium, thick;
   Chaque côté de la bordure étant indépendant des autres, ces propriétés existent aussi
classées en fonction du côté qu’elles traitent. Par exemple : pour le top (le haut): border-
top-color, border-top-style et border-top-width. Il existe la même chose pour
bottom, left et right.

L'exemple suivant permet d'obtenir un tableau dont chaque case est entourée avec une bordure
bleue avec un texte centré dans la case. Par contre, la bordure du tableau lui-même n'est
affichée qu'en haut et en bas.
  table, td {
    border-color : #6495ed;
    border-top-style : solid ;
    border-bottom-style : solid ;
    border-width :thin;
    text-align : center;
  }

  td {
    border-left-style : solid ;
    border-right-style : solid ;
  }

Les propriétés propres des tables

Les propriétés suivantes n'existent que pour les tableaux:
       -   padding : espace entre la bordure et le contenu des cellules; valeur : la largeur;
       -   border-collapse : fusionner la bordure du tour du tableau et la bordure des
           cases; valeur : collapse pour fusionner, separate pour séparer les bordures.
Rajouter la propriété : border-collapse: collapse; dans le jeu de règles précédents
pour table et td donne alors l'affichage suivant :

                                                                                                 5

9.       Les classes
   On a vu précédemment que lorsque l'on définissait un style pour un élément HTML, tous
les éléments HTML du même nom étaient définis de la même manière. Par exemple,
lorsqu'on crée une règle pour les tableaux, tous tableaux sont identiques dans toutes nos
pages. L’intérêt d’utiliser une classe pour définir un style est d’avoir plusieurs styles possibles
pour un élément HTML donné. On pourra, par exemple, avoir un tableau avec des bordures et
un autre tableau sans bordure.
    La syntaxe pour déclarer une classe dans une CSS est de la forme suivante :
    balise.NomClasse
{
    propriété1 : valeur1 ;
    propriété2 : valeur2 ;
    …
    propriétéN : valeurN ;
}
    L'appel de cette classe dans le fichier HTML est :
    …

L'exemple suivant permet d'avoir deux cellules de couleurs différentes dans un tableau.
Extrait de code HTML correspondant au tableau:
    
         une cellule grise 
         une cellule bleue 
      
Code CSS associée:
     td.grise
    {
      background-color: grey;
    }

    td.bleue
    {
      background-color: blue;
    }

    Exercice 3
     1- Créez la liste imbriquée suivante :
         lundi : tennis, math, info;
         mardi : biologie, tennis, anglais
         mercredi : tennis, histoire, théâtre

                                                                                                 6

2- En utilisant les classes, faites en sorte que
       a. les jours de la semaine apparaissent en bleu clair, en police arial, gras, sur un
          fond bleu foncé,
       b. les matières apparaissent en noir, sur fond bleu clair, en police verdana, avec
          des images comme puces,
3- Validez vos pages (HTML et CSS).

                                                                                         7

Vous pouvez aussi lire