Création des pages web
CM 2 : Bases de CSS
Techniques Web (statique)
› HTML Données
› CSS Représentation
› JavaScript Interaction
CSS
› Cascade style sheets
› Utilisées pour formater les éléments (couleur, taille de
police etc)
Styles: utilisation dans HTML
› Dans l’entête ou dans le corps (balise style) :
<style>
p {text-color: red}
</style>
› Fichier appart (inclus par la balise link):
<link rel="stylesheet" href="[Link]" type="text/css">
› Élément (attribut style)
<li style="background-color: blue">
Changement du style
› Si un site utilise une feuille de style externe, en
changeant cette feuille, le site peut être relooké
complètement.
Syntaxe
élément {attribut: valeur;
attribut2: valeur2}
› Exemples
– Change tous les paragraphes dans le document:
p {color: red; font-size: 14pt;
text-decoration: underline}
– Change uniquement la cellule:
<tr><td style="background-color: red;"></tr>
› Commentaire:
/* texte */
Attributs de base
› Couleur (texte, fond)
› Police (taille, type, soulignement, gras)
› Alignement
› Positionnement
› Cadres
› Attributs des listes
Divisions génériques
Pour mieux utiliser CSS (ainsi que pour des éléments
dynamiques):
› div : division paragraphe (block)
› span : division inline
Exemple
<div style="text-align: center;
text-decoration: underline; font-size: large;
font-weight: bold">Ce texte
<span style="color:red"> rouge </span> est
centré, grand, gras et souligné </div>
Classes
› Une classe est comme une variable – elle permet de
définir un style qu’on applique ensuite dans le document.
› Définition :
.nom {attributs css}
› Application :
<p class="nom"> … </p>
<div class="nom"> … </p>
Exemple
<style>
.left { text-align: left }
.bcenter { text-align: center; font-weight: bold}
[Link] {background-color: red}
</style>
<p class="bcenter"> Ce paragraphe est centré et en
gras </p>
Ids
› Un id ressemble à une classe, mais est utilisé pour
souligner l’unicité de l’élément.
› Définition :
#nom {attributs css}
› Application :
<p id="nom"> … </p>
<p id="nom"> … </p>
Exemple
› <style>
#info { text-align: center;
font-weight: bold}
</style>
<p id="info"> Ce paragraphe est centré et en
gras </p>
Classes spéciales
a:link style du lien
a:visited style d’un lien visité
élément:hover style de l’élément lorsque la sourie
pointe sur lui
Combinateurs CSS
› Groupage: <div class="jaune">
h1, h2, h3, h4, h5, h6 { color: red; font-family: sans-serif } <div>
…
› Cascade: <p>…</p>
</div>
.jaune p { background-color: yellow } </div>
› Descendant direct: <div class="jaune">
.jaune > p { background:-color yellow } <p>…</p>
</div>
› Voisin:
<div>…</div>
div + p {background-color: yellow }
<p>…</p>
› Sélection des attributs:
p[menu="toto"] {
background-image: url([Link]) } <p menu="toto">
Exemples de sélecteurs
.red Tous les éléments qui ont la classe red
[Link] Tous les paragraphes qui ont la classe red
.red p Tous les paragraphes qui ont comme parent
(sont dedans) un élément qui a la classe red
.red p em Tous les éléments em situés à l’intérieur d’un
paragraphe qui sont à l’intérieur d’un élément
de classe red
.red > p Tous les paragraphes qui ont comme parent
immédiat un élément qui a la classe red
.menu ul li:hover Les items d’une liste non-ordonnée se
trouvant à l’intérieur de la classe menu. Le
style s’appliquera uniquement lorsqu’on
passe avec la sourie au-dessus de l’élément.
.menu ul > li[active=true] L’item immédiat d’une liste non-ordonnée se
trouvant à l’intérieur d’un élément de la
classe menu. L’item doit avoir l’attribut
active="true"
Exemple
<style>
.jaune {background-color: yellow}
.texte_vert {color: green}
.jaune div+p {color: red}
p[x=y] {background-color: purple}
</style>
<div class = "jaune">
<div class = "texte_vert">
<p>paragraphe1</p>
<p>paragraphe2</p>
<p x="y">paragraphe 3</p>
</div>
<p>paragraphe 4</p>
</div>
Manipulation du texte et du fond
color Couleur du texte
background-color Couleur du fond
background-image Image de fond
text-decoration Ligne au-dessous ou au dessous du texte
text-transform Passage en minuscules/MAJUSCULES
text-indent Décalage de la première ligne du paragraphe
text-shadow Ombre sur le texte
font-style Texte normal ou italique
font-weight Texte normal ou gras
font-variant Police small caps
font-size Taille de la police
opacity Transparence de l’élément
text-align Alignement du texte (gauche, centré, …)
Couleurs et mesures
› Couleurs:
– Noms : red, lightgrey, tomato, … – 140 noms de couleurs.
– Valeur hexadécimale: #rrggbb – #ff6347
– Valeur décimale: rgb(255,0,0)
– Valeur avec transparence: rgba(255,0,0,0.5)
› Mesures:
– cm
– Pixels (font-size: 14px)
– em (font-size: 1em). 1em = la largeur de la lettre m
– ex (font-size: 1ex). 1ex = l’hauteur de la lettre x
– Pourcentage (font-size: 120%). 200% - c’est 2 fois plus grand
que la valeur par défaut.
Polices externes
› Dans l’entête:
<link href='[Link]
rel='stylesheet' type='text/css’>
› Dans un fichier de style css
@import url([Link]
› Utilisation:
section { font-family: 'Montserrat', sans-serif; }
Attention: il faut avoir une connexion Internet (vers Google) pour que cela
fonctionne.
Modèle de boite CSS
Margin
Bordure
Padding
Contenu
Bordure
border-style Style de la bordure (continu, pointillé, etc)
border-width Largeur de la bordure
border-color Couleur de la bordure
border-radius Arrondir la bordure
border-top-* Bordure supérieure
border-bottom-* Bordure inférieure
border-left-* Bordure gauche
border-right-* Bordure droite
border Raccourci pour maj la bordure
Exemples:
border-top-style: dotted
border: 1px solid black
Marge/padding
› margin-top, margin-bottom, margin-left, margin-right
› padding-top, padding-bottom, padding-left, padding-right
› margin ou padding avec 2 ou 4 arguments comme
raccourci
Tableaux
› Pour enlever l’espace entre le tableau et sa bordure externe:
table { border-collapse: collapse; }
› Pour mettre une bordure autour des cellules du tableau:
td, th { border: 1px solid black; }
Listes
› Changement du symbole : list-style-type
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Site de référence
› On utilisera l’adresse suivante comme référence CSS:
[Link]
