Université Cheikh Anta Diop
Ecole Supérieure Polytechnique
Département Génie Informatique
PROGRAMMATION WEB
SURVOL DU LANGAGE CSS
Formateur
M. Mouhamed DIOP
[Link]@[Link]
Ecole Supérieure Polytechnique NIVEAU LICENCE 1
HTML ET CSS
le W3C préconise de maintenir une séparation entre la structure et la
présentation d’un document
Séparation du fond et de la forme
Il adjoint au HTML la notion de feuille de style à travers le langage CSS
HTML décrit la structure du document, CSS se charge de la présentation.
Un même document HTML peut être présenté de différentes façons à l'aide de
différentes feuilles de style.
2
Les feuilles de styles CSS
Apparues vers les années 1990s
Standard W3C qui s’est imposé au détriment de la “confrontation” Nescape
Navigator/Internet Explorer
Chacun créait ses propres balises de mise en forme
Plusieurs versions
CSS1, CSS2, CSS3
Leur champ d’action ne s’étend pas uniquement au médium screen
Autres médias: print, projection, braille, aural/speech, …
3
Rôle des feuilles de styles
Mise en forme des pages Web
Séparation du fond et de la forme
Plusieurs vertues
Contribuer à la rapidité de la navigation sur le Web
Les feuilles de style sont conservées dans le cache du client
Leur utilisation est imposée en XHTML
4
Localisation des feuilles de styles
Balise STYLE
En entête de page
<style type=“text/css”>….</style>
Balise LINK
En entête de page
<link rel=“stylesheet” type= “text/css” href=“url”/>
Attribut STYLE des éléments HTML
Dans tout le corps du document
<baliseOuvranteOuVide style=“…”>
5
Syntaxe des feuilles de styles
Différente de HTML
Une feuille de styles est un ensembre de règles
Forme d’une règle
Un sélecteur
Elément ou groupe d’’éléments HTML
Une déclaration
Liste d’associations attributs:valeurs séparées par des “;”, le tout entre accolades
Exemple de règle
h1 { color: blue; text-align: center; }
Non sensibles à la casse
Il est conseillé de les écrire en lettres minuscules
6
La règle @import
Intégrée depuis CSS2
<style type="text/css">
@import url([Link]);
</style>
Permet d’inclure des feuilles de styles dans d’autres
Ce qui permet de créer des feuilles de styles dynamiques sans devoir recopier
plusieurs fois le même code
Différence avec <link>?
7
Les différents sélecteurs
Les sélecteurs de balises
Utilisés dans le précédent exemple
Les sélecteurs de classes
Une classe est un nom donné à un ensemble d’éléments HTML à distinguer
Les sélecteurs d’identifiants
Un identifiant ou id est le nom attribué à un élément unique dans le document
HTML
Les pseudo-classes et les pseudo-éléments
Variantes pour certaines fonctionnalités, par exemple les liens
8
Les sélecteurs de balises
Toutes les balises HTML
Exemple
p {margin-top: 0; margin-bottom: 0 }
Supprime tous les interlignes entre paragraphes en attribuant à la balise <p> des marges
haute et basse nulles
9
Les sélecteurs de classes
Une classe est un nom composé de caractères alphanumériques et dont on baptise les
éléments concernés.
Un sélecteur de classe reprend son nom en le préfixant d’un point
Exemples
.ma_classe, .toto, .entete, …
Pour attribuer un comportement différent à certains éléments, il suffit de leur appliquer au
moins une classe
Une classe peut s’appliquer à des éléments différents
Le même élément peut recevoir plusieurs classes
Exemples
.sommaire { color: red; }
.titre2 { text-align: center; }
<a href=“..." class="sommaire">lien rouge</a>
<p class="sommaire titre2">un paragraphe rouge et centré</p> 10
Les sélecteurs d’identifiants
Un identifiant est comme une classe. Il s’en distingue en ce qu’il ne peut
porter qu’au plus sur un objet du document.
Les sélecteurs CSS s’y réfèrent par l’emploi d’un caractère dièse (#) suivi de
son nom
Exemples : #exemple, #toto, #banniere2, …
Exemple
#monId { background-color: yellow; }
En HTML
<div id=”monID">contenu</div>
11
Les pseudo-classes et les pseudo-éléments
Ils créent des mécanismes ou des relations qui ne sont pas réalisables en HTML
CSS crée des éléments spécifiques à certaines actions (comme le survol d’un lien) ou à
certaines arborescences (comme le premier paragraphe d’un bloc)
Les techniques qui les correspondent permettent de styler un contenu n’apparaissant
même pas dans le code du document
Un exemple courant est l’utilisation de la pseudo-classe :hover
Prend effet lorsque le pointeur de la souris survole l’élément concerné
Autres exemples de pseudo-éléments
:first-letter et :first-line
Agissent sur la première lettre ou la première ligne d’un paragraphe, indépendamment de la balise qui
structure son contenu
12
Les pseudo-classes et les pseudo-éléments:
Exemples
a:hover { text-decoration: none; }
Affectera tous les liens de la page lors de leur survol par le pointeur de la souris
[Link]:hover { text-decoration: none; color:red; }
Affectera tous les liens de la page qui sont de la classe “lien” lors de leur survol par le
pointeur de la souris
13
Syntaxes de regroupements
Regroupement des sélecteurs
.texte, p, h1, h2 { margin-left: 0; }
Regroupement des propriétés
Certaines propriétés génériques prévoient une version raccourcie, permettant l’application de
plusieurs valeurs en une seule déclaration.
Exemples
La propriété font rassemble les valeurs des propriétés font-style, fontsize, font-family, font-
weight et line-height
border rassemble border-width, border-style, border-color
background rassemble background-image, background-color,
background-position, background-repeat, background-attachment
14
Sélection hiérarchique (1/2)
Sélectionner les balises dotées de certaines classes ou de certains identifiants
[Link]
a#bar
On peut ainsi ne sélectionner que les éléments contenus dans d’autres
Exemple: Les paragraphes contenus dans un bloc <div>
On écrira le sélecteur sous la forme “ancêtre descendant”
en séparant ces deux éléments d’un blanc
Exemples
a img {border-width: 0;}
Ne supprimera que les bordures des images contenues dans un lien. La descendance peut aussi être indirecte
#menu li a {propriétés}
S’appliquera à tous les <a> descendant d’un <li> lui-même descendant d’un élément d’identifiant menu 15
Sélection hiérarchique (2/2)
Il est possible de prendre en compte les attributs des éléments pour les sélectionner
Exemple
a[title="menu"] {color: blue;}
ne colorera en bleu que les liens possédant un attribut title de valeur menu
Autres possibilités
:first-child désigne le premier élément de son élément parent
Le signe ‘>’ désigne un sélecteur d’enfant
div>p s’applique à l’élément <p> enfant de <div>
le signe ‘+’ désigne un sélecteur adjacent.
div+p s’applique à <p> lorsqu’il est précédé d’un élément <div>
16
A vous de jouer !
Les standards CSS couvrent plusieurs centres d’intérêt
Les couleurs
La typographie et la mise en forme de caractères
Les bordures, arrières-plans et images
Le positionnement
Etc.
17
MERCI DE VOTRE ATTENTION
18