Vous êtes sur la page 1sur 8

Partie III

CSS3
Les notions de base

Création de sites WEB statiques Réalisé par Mme N .MGHARBI 1


Plan
 Introduction
 Où écrire le code CSS?
 Indentation et commentaires
 Sélecteurs simples
 Sélecteur complexes

Création de sites WEB statiques Réalisé par Mme N .MGHARBI 2


Introduction
 Le CSS permet de mettre en page un
contenu en lui appliquant des styles
 Un sélecteur permet de cibler un ou
plusieurs éléments HTML.
 Il existe des sélecteurs simples et complexes.
 Une propriété permet de choisir l’aspect d’un
élément HTML qu’on souhaite modifier.

Création de sites WEB statiques Réalisé par Mme N .MGHARBI 3


Où écrire le code CSS?
 Il existe 3 manières pour écrire le code:
 En se servant de l’élément<Style> au sein de
l’ élément <Head>
 En ajoutant l’attribut style directement dans la
balise de l’élément qu’on souhaite modifier
 En l’écrivant sur un fichier séparé d’extension
.css, c’est la méthode la plus recommandée.
 Pour lier la feuille de style au fichier html, il faut ajouter
à ce dernier un nouvel élément <link> dans <Head>
avec les attributs REL et HREF.
Création de sites WEB statiques Réalisé par Mme N .MGHARBI 4
Indentation et commentaires
 Pour la clarté et la propreté du code,
l’indentation et les commentaires sont
également conseillés pour le langage CSS
 Les commentaires en CSS n’impactent pas le
style.
 On écrit les commentaires entre les deux
symboles suivants: /* et */.
 Exemple: /* commentaire */

Création de sites WEB statiques Réalisé par Mme N .MGHARBI 5


Sélecteurs simples
 Pour appliquer le style, on peut:
 Préciser des aspects (styles) pour chaque
sélecteur
 Ou appliquer les mêmes modifications à plusieurs
sélecteurs en les séparant par des virgules
p, h1{
color: red;
}

Création de sites WEB statiques Réalisé par Mme N .MGHARBI 6


Sélecteurs complexes
 les sélecteurs #id et .class permmettent de
cibler un élément en particulier plutôt qu’un
type d’élément.
 Méthode:
 Partie HTML: Ajouter les attributs id et
/ou class à l’intérieur de la balise de l’élément
cible en lui affectant une valeur
 Partie CSS: cibler cet élément en l’appelant par
son id ou sa classe.

Création de sites WEB statiques Réalisé par Mme N .MGHARBI 7


Sélecteurs complexes
 Différences entre id et class:
 On ne peut trouver deux éléments avec la même
valeur de l’attribut id.
 En revanche, on a le droit d’affecter la même
valeur de l’attribut class à plusieurs éléments du
même document HTML

Création de sites WEB statiques Réalisé par Mme N .MGHARBI 8

Vous aimerez peut-être aussi