Découverte du CSS !

Fonctionnement du CSS

  1. RGB(120,56,13) correspond à #78380d
    • Le RGB permet d'avoir 16 777 216 couleurs différentes.
    • L'hexa (#RRGGBB) permet aussi d'avoir 16 777 216 couleurs différentes.
    • Les navigateurs modernes supportent 140 couleurs nommées.
  3. Utiliser des couleurs nommées est une méthode très représentative, on sait à quoi correspond la couleur directement car elle est nommée. Utiliser l'hexa permet d'être plus précis car on peut préciser plus de teintes de couleurs, comme le RGB. L'Hexa est plus facilement copiable d'une plateforme à une autre comparé au RGB qui est un ensemble de 3 valeur. De plus, l'hexa a une écriture compact (#FFF) qui permet de décrire une couleur plus précisément que les couleurs nommées et plus représentativement que le RGB

Feuilles de styles en cascade

On considère le DOM suivant :

une image de DOM
  1. Il y a 16 noeuds de type ELEMENT et 13 noeuds de type TEXT.
  2.                 
<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

Afin de mettre un fond rouge à "Châtaignes", il faut utiliser le code suivant: ul > li ~ li ~ li ~ li > em{ background-color:red; }

Afin de mettre un fond cyan à "couverture", il faut utiliser le code suivant : h1+ul > li+li > em{ background-color:cyan; }

Pour attribuer une couleur différente au lien selon leur contenu on peut utiliser le code suivant :

Les pseudo-classes et pseudo-éléments

Les pseudo-classes

La différence entre p:hover et p :hover est que l'un fonctionne sur l'élément et l'autre non. p:hover affecte l'élément p au survol de la souris tandis que p :hover ne l'affecte pas.

Les règles de priorités

  1. h1 est rouge, le premier p sera violet puis rouge à partir de la balise em, le second p sera bleu
    • body est concerné par "*", "body" et "body .important". Le classement est :
      • "*" car c'est une règle lié à une balise mais c'est la première
      • "body" car c'est une règle lié à une balise mais après la définition de la règle "*"
      • "body .important" car c'est une règle lié à une classe.
    • h1 est concerné par "*" et "body". Le classement est :
      • "*" car c'est une règle lié à une balise mais avant "body" dans la déclaration
      • "body" car c'est une règle lié à une balise mais après "*" dans la déclaration
    • le premier p est concerné par "*", "body", "#intro", "p", "p.important", "body.important". Le classement est :
      • "#intro" car c'est une règle lié à un id.
      • "p.important" car c'est une règle lié à une classe
      • "body.important" car c'est une règle lié à une classe
      • "p" car c'est une règle lié à une balise après "body" et "*"
      • "*" car c'est une règle lié à une balise
      • "body" car c'est une règle lié à une balise après "*"
    • em est concerné par "*" et "body". Le classement est :
      • "*" car c'est une règle lié à une balise mais c'est la première
      • "body" car c'est une règle lié à une balise mais après la définition de la règle "*"
    • Le second p est concerné par "*", "body", "p", "p.important", "body.important". Le classement est :
      • "body.important" car c'est une règle lié à une classe de plus au niveau que "p.important"
      • "p.important" car c'est une règle lié à une classe de plus bas niveau que "body.important
      • "p" car c'est une règle lié à une balise
      • "*" car c'est une règle lié à une balise mais de plus bas niveau
      • "body" car c'est une règle lié à une balise mais de plus bas niveau