introduction principes syntaxe
Cours 04
CSS3
introduction principes syntaxe
au programme...
1 introduction
2 principes
3 syntaxe
3
introduction principes syntaxe
tout cela manque quand même de style
chaque élément HTML est affiché par le navigateur avec un style par
défaut.
les éléments <h1> apparaissent avec une police de taille 2em et
« en gras »
les éléments <p> forment des blocs qui s’affichent les uns en
dessous des autres avec une marge haute et basse de 1em et leur
texte est affiché avec la police par défaut du navigateur
les éléments <q> sont encadrés par des guillemets
les éléments <strong> sont en gras
etc.
introduction principes syntaxe
CSS
il est possible de modifier le style par défaut grâce aux CSS
CSS
Cascading Style Sheets
feuilles de style « en cascade »
introduction principes syntaxe
au programme...
1 introduction
2 principes
3 syntaxe
introduction principes syntaxe
un concept important
séparation de la forme et du contenu
il faut définir séparément la forme et le contenu
la structure d’un document et son contenu sont décrits en HTML
sa présentation est gérée par les CSS
1 on crée le document (contenu et structure) sans se préoccuper de
sa mise en forme
2 on conçoit la (les !) mise(s) en forme
puis éventuellement on les modifie/adapte
introduction principes syntaxe
avantages
document HTML et feuille CSS peuvent être définis dans des
fichiers séparés
création plus efficace
code HTML plus simple et plus lisible
on peut changer la feuille de style sans modifier le document
on peut avoir plusieurs feuilles de style pour un document
l’homogénéité visuelle d’un site est facilitée
plusieurs pages peuvent partager la même feuille de style
introduction principes syntaxe
principe
le langage CSS définit un ensemble de propriétés qui ont une
influence sur l’affichage des éléments d’une page
pour chaque propriété il existe un ensemble de valeurs possibles
il est possible de fixer ces propriétés pour chacun des éléments
d’un document HTML
les propriétés agissent sur l’apparence de la boı̂te d’un élément
les propriétés concernent
l’apparence du contenu (fonte, style, couleur, ...)
la taille de la boı̂te (largeur, marges, ...)
le positionnement de la boı̂te (absolu ou relatif, visibilité)
...
introduction principes syntaxe
au programme...
1 introduction
2 principes
3 syntaxe
introduction principes syntaxe
règle CSS
Règle CSS
Une règle CSS définit
la valeur d’une propriété CSS pour un sélecteur donné
selecteur { propriete : valeur }
le sélecteur détermine les éléments sur lesquels s’applique la règle
introduction principes syntaxe
syntaxe
il est possible de regrouper plusieurs règles d’un même sélecteur
les définitions sont alors séparées par des points-virgules
h1 { « tous les éléments <h1> auront
color : blue ;
font - size : 12 px ;
leur texte en bleu et une taille
} de police de 12px »
introduction principes syntaxe
syntaxe
il est possible de regrouper plusieurs règles d’un même sélecteur
les définitions sont alors séparées par des points-virgules
h1 { « tous les éléments <h1> auront
color : blue ;
font - size : 12 px ;
leur texte en bleu et une taille
} de police de 12px »
introduction principes syntaxe
syntaxe
on peut factoriser les règles partagées par des sélecteurs
les sélecteurs sont alors séparés par des virgules
« les éléments <h1> et les éléments
h1 , h2 { <h2> auront leur texte en bleu et
color : blue ;
font - size : 12 px ; une taille de police de 12px »
}
introduction principes syntaxe
syntaxe
on peut factoriser les règles partagées par des sélecteurs
les sélecteurs sont alors séparés par des virgules
h1 , h2 { « les éléments <h1> et les éléments
color : blue ;
font - size : 12 px ;
<h2> auront leur texte en bleu et
} une taille de police de 12px »
introduction principes syntaxe
feuille de style
une feuille de style CSS regroupe un ensemble de règles CSS
introduction principes syntaxe
intégration des règles CSS à l’HTML
différentes possibilités :
Sans CSS
CSS dans le code HTML à proscrire !
règles CSS “en dur” dans le document
Feuille de style externe : la solution à adopter
introduction principes syntaxe
déclaration d’une feuille CSS
dans l’entête (<head>) du document HTML :
<link type="text/css" rel="stylesheet"
href="[Link]" />
ou aussi :
<link type="text/css" rel="stylesheet" href="[Link]" media="screen"/>
introduction principes syntaxe
Exemples de propriétés
font-family : le type de police utilisée pour le contenu,
font-size : la taille des caractères (en px, em, %, etc.)
font-style : normal, italic, oblique
font-weight : normal, bold, lighter, etc.
border : la bordure autour du contenu de l’élément (couleur,
style, ...)
width : largeur du contenu (%, px, em, cm)
color et background-color : couleurs du texte et de
l’arrière-plan (rgb(0,128,255), hexa #AAAAAA, symboles
prédéfinis (navy, white, ...), hsl,)
structurer un document exemple attribut class second exemple
l’attribut class
l’attribut class
existe pour tous les éléments
permet de marquer et donc d’identifier des éléments d’un
document comme appartenant à une même « classe »
ajoute une sémantique commune aux éléments de la même classe
sémantique « locale »
donc encore plus faible que celle des balises html
exemples :
<p class="remarque">
<article class="enonce"> et <article class="solution">
<strong class="motcle">
<li class="question">
structurer un document exemple attribut class second exemple
<span> et <div>
l’attribut class donne son sens aux balises génériques
<span> et <div>
<span> : élément générique pour contenus phrasés
<div> : élément générique pour contenus blocs
aucune sémantique particulière
avec class ajout d’un niveau de sémantique faible
<span class="celebrite">Winston Churchill</span>
<div class="cursus">
structurer un document exemple attribut class second exemple
mais il faut utiliser les balises existantes quand c’est possible
<strong> plutôt que <span class="important">
<time> plutôt que <span class="date">
<h2> plutôt que <div class="titre">
<header> plutôt que <div class="entete">
structurer un document exemple attribut class second exemple
< div >
< div >
< h3 >
Technologies du Web 1
< span > TW1 </ span >
</ h3 >
< div > JC Routier </ div >
< div >
S2 SESI :
Math - Info
et Info - EEA
</ div >
< div >1 h30 Cours , ... </ div >
< div >4 ECTS </ div >
</ div > <! -- info -- >
<p >
Présentation des ...
</ p >
</ div >
structurer un document exemple attribut class second exemple
< div class = " ue " id = " tw1 " >
< div class = " info " >
< h3 class = " intitule " >
Technologies du Web 1
< span class = " alias " > tw1 </ span >
</ h3 >
< div class = " responsable " > JC Routier </ div >
< div class = " cursus " >
< span class = " semestre " > S2 SESI </ span > :
< span class = " parcours " > Math - Info </ span >
et < span class = " parcours " > Info - EEA </ span >
</ div >
< div class = " volume " >1 h30 Cours , ... </ div >
< div class = " credits " >4 ECTS </ div >
</ div > <! -- info -- >
<p class = " programme " >
Présentation des ...
</ p >
</ div >
ajout de blocs de structuration
cf <div class="info">
structurer un document exemple attribut class second exemple
id
l’attribut id permet de désigner de manière unique un élément d’un
document
ancre dans la page.
style CSS particulier
sélecteur : #tw1 ou [Link]#tw1
utilisation en javascript (cf. ultérieurement)