Cascading Style sheets

Introduction

Après cette présentation

  • Les termes communs au CSS tu connaîtras
  • Le pouvoir des sélecteurs CSS tu maîtriseras
  • Du CSS écrire au bon endroit tu sauras
  • La priorité et le poids des sélecteurs tu anticiperas

Casacding style sheet -Syntaxe

Créer des règles qui spécifient l'apparence du contenu d'un élément

Le code CSS ci-dessous représente une règle CSS composée de :

  • un sélecteur
  • un bloc de déclarations
  • deux déclarations 
  • propriétés
  • valeurs
    p  { 
         font-family: Arial;
         color: gold;
    }

Les sélecteurs css

Sélecteur d'élément p { ... } tous les paragraphes <p>
Sélecteur d'id #histoire { ...} l'élément avec l'attribut : id="histoire"
Sélecteur de class .rouge { ... }
p.rouge { ... }		 éléments avec l'attribut : class="rouge"
paragraphes avec l'attribut : class="rouge"
Grouper des sélecteurs h1, h2, p {...} tous les <h1> et <h2> et <p>
Sélecteur descendant p strong tous les <strong> descendant d'un <p>
Sélecteur adjacent h1 + h2 les <h2> précédés d'un <h1>
Sélecteurs de frêres h1 ~ p les <p> frères de <h1> (au même niveau)
Sélecteur d'enfants nav > ul les <ul> fils de <nav> (! pas petit-fils)
Commentaires /* bla bla */ Expliquer, présenter le code
Désactiver une règle, une déclaration

Exercices : Syntaxe CSS

Faire les exercices 1 à 4 du chapitre "CSS Syntax"

Exercices : sélecteurs css

  • Appliquer la police Arial à tout le document : <html>

  • Mettre un fond vert à l’élément identifié avec id="liste"

  • Mettre le texte en italique aux éléments avec class="intro"

  • Le titres de niveau 1 et les citations longues ont un fond noir et un texte blanc

  • Les liens contenus dans les paragraphes ont un fond rouge et un texte blanc

  • Les paragraphes qui suivent directement un titre de niveau 1 ont une couleur de texte jaune

  • Les paragraphes qui sont au même niveau (frères) que la citation longue ont une bordure noire pointillée de 4px.

  • Les éléments <li> des sous-liste ont un fond bleu

  • Les liens des sous-listes ont un couleur de texte rouge sans soulignement

Commencer exercice

ou écrire du css ?

Dans un fichier CSS externe

<head>
     <link rel="stylesheet" type="text/css" href="monstyle.css">
</head>

En interne, dans l'entête du document

<head>
    <style>
    body {
        background-color: linen;
    }

    h1 {
        color: maroon;
        margin-left: 40px;
    } 
    </style>
</head>

En ligne, directement dans l'élément

<h1 style="color:blue;margin-left:30px;">Je suis un titre</h1>

1. La cascade css par proximité

Text

Plus on est proche, plus on a du poids !

2. La cascade css - Par précision de sélecteur

Plus on est précis, plus on a de poids !

3. La cascade css - Spécificité

Plus on est précis, plus on a de poids !

00000    Selecteur universel          * {color:red;}

00001    Sélection de l'élément    p {color:red;}

00010    Classes                                    .logo {color:red;}
                   Selecteurs d'attribut       a[target="_blank"] {color:red;}
                   Pseudoclasses                     :hover {color:red;}

00100    ID                                                 #histoire {color:red;}

01000    Styles inline                          <h1 style="color:red;">Histoire</h1>
10000    !important                              p {color:red !important;}

Exercices : Syntaxe CSS

Faire les exercices 1 à 4 du chapitre "CSS How To..."

Sélecteur d'attribut

[class] { ... } qui possède un attribut class.
[class="bleu"] { ... } qui possède un attribut class dont la valeur est exactement "bleu".
[class~="bleu"] { ... } qui possède un attribut class dont la valeur contient le mot entier "bleu".
[class^="bleu"] { ... } qui possède un attribut class dont la valeur commence par "bleu".
[class$="bleu"] { ... } qui possède un attribut class dont la valeur se termine par "bleu".
[class*="bleu"] { ... } qui possède un attribut class et dont la valeur contient la chaîne de caractères "bleu".

Pseudo-class

https://flukeout.github.io/

Couleurs

http://hslpicker.com​

HEX
(hexadécimal)		 RGB
(rouge vert bleu)		 HSL
(teinte saturation luminosité)
00 - FF 0 - 255 0 - 360° | 0% - 100%
#RRGGBB rgb(r,g,b) hsl(h,s,l)
#00FF00 rgb(0,255,0) hsl(140, 10%, 90%)
16'777'216 16'777'216 3'682'561

Un petit jeu ?

Exercices : Syntaxe CSS

Faire les exercices 1 à 4 du chapitre "CSS Colors"

Typographie

  • font-family
  • font-size
  • color
  • font-style
  • font-weight
  • font-variant
  • line-height
  • text-decoration
  • text-align
  • text-transform
  • letter-spacing
  • word-spacing

Ne pas utiliser des tailles en px

Exercices : Syntaxe CSS

Faire les exercices 1 à 4 du chapitre "CSS Text" & "CSS Font"