TD2 - Les bases de CSS

Les couleurs en CSS

rgb(120, 56, 13) correspond à #78380D en hexadécimal.
Il y a 147 couleurs nommées en CSS, contre 16 millions environ (256³=16777216) en hexadécimal ou en utilisant rgb().
Les couleurs nommées sont plus parlantes mais offrent peu de possibilités. L'hexadécimal et rgb() offrent 16 millions de possibilités ; l'hexadécimal, à priori le moins lisible, est un plus pratique à écrire et à copier-coller, ce qui fait qu'il est très utilisé.

Le DOM

Cet arbre possède 16 nœuds de type ELEMENT et 13 nœuds de type TEXT.

Code HTML correspondant :

                    
<body>
    <header>
        <h1>Les papous</h1>
    </header>
    <main>
        <section>
            <h2>Définition</h2>
            <p>Les <em>papous</em> sont les habitants de Papouasie.</p>
        </section>
        <section>
            <h2>Classification</h2>
            <ul>
                <li>Les papous papa.</li>
                <li>Les papous pas papa.</li>
            </ul>
        </section>
    </main>
    <footer>
        Site réalisé par<i>C. Levi-Strauss</i>
        en partenariat avec<i>A. Franquin</i>.
    </footer>
</body>

Combiner des sélecteurs

On peut utiliser le code CSS suivant :

            
li + li + li + li > em {
    color: red;
}

body > ul > li > em {
    color: cyan;
}

Sélecteur d'attributs

On peut utiliser la feuille de style suivant :


/* Liens internes (par déduction) */
a {
    color: green;
}

/* Adresses mail */
a[href=^"mailto"] {
    color: red;
}
                
/* Liens externes */
a[href=^"http://"],
a[href=^"https://"] {
    color: orange;
}

Pseudo-classes

On peut utiliser la feuille de style suivant :
```
h1:hover,
h2:hover {
    color: red;
}
```
p:hover sélectionne un paragraphe survolé par le pointeur de la souris, tandis que p :hover sélectionne un élément contenu dans un paragraphe et survolé par le pointeur de la souris.

Pseudo-éléments

On peut utiliser la feuille de style suivant :

blockquote > p::before {
    content: "« ";
    color: cadetblue;
}
blockquote > p::after {
    content: " »";
    color: cadetblue;
}
blockquote,
blockquote p {
    background-color: aliceblue;
}

Règles de priorité

Quelles sera la couleur des différents éléments de cette page ? Essayez de le trouver par vous-même avant de tester ce code pour vérifier.
- Ma page : marron.
- Ceci est un paragraphe : violet.
- assez remarquable : marron.
- Et que dire de celui-ci ? : bleu.
On ne fait apparaître ici que les règles s'appliquant directement à chaque élément (et non les règles qui seraient héritées s'il n'y avait pas de règles s'appliquant directement à l'élément).
- body :
  - règle body : (0,0,1)
  - règle * : (0,0,0)
  La règle body l'emporte donc la couleur sera rouge.
- h1 :
  - règle * : (0,0,0)
  La règle * s'applique, la couleur sera donc marron.
- p id="intro" class="important" :
  - règle #intro : (1,0,0)
  - règle body .important : (0,1,1)
  - règle p.important : (0,1,1)
  - règle p : (0,0,1)
  - règle * : (0,0,0)
  La règle #intro l'emporte.
- em :
  - règle * : (0,0,0)
  La règle * est la seule à s'appliquer directement à cet élément ; la couleur sera donc marron.
- p class="important" :
  - règle body .important : (0,1,1)
  - règle p.important : (0,1,1)
  - règle * : (0,0,0)
  Les règles p.important et body .important ont la même sélectivité, c'est donc la dernière (dans le fichier CSS) qui l'emporte ; la couleur sera donc bleue.