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