CSS

Raconté par Vincent Jugé
sur la base d'un cours créé par Rémi Forax

Historique des versions

CSS	1996
CSS level 2	1998
CSS level 2 revision 1	2011
CSS 3	Selector(2011), Color(2011), Media Queries(2012), ...
CSS 4	???

L'attribut style

L'attribut style permet de changer le style d'une balise,
par exemple pour la colorier en orange.

<p>
  L'attribut <b>style</b> permet de changer
  le style d'une balise, <br>
  par exemple pour la colorier
  <b style="color: orange;">en orange</b>.
</p>

La balise style

La balise style permet de définir des styles qui seront valides pour tout le document.


<html>
  <head> 
    <style>
      strong {
        color: orange;
      }
    </style>
  </head>
  ...

Toutes les balises strong seront orange.

Le fichier .css

Pour que plusieurs pages HTML aient le même style,
le style est écrit dans un fichier .css référencé
par les différentes pages.


<html>
  <head> 
    <link rel="stylesheet" type="text/css" href="example.css">
  </head>
  ...

Id d'élément

Si l'on veut que seule une balise ait un style particulier, on peut donner un identifiant à cette balise.


<ul>
  <li id="important">Don't cross the streams !</li>
</ul>

On utilisera '#' et l'id dans le style.


li#important {
  color: orange;
}

Classe d'élément (1/2)

On peut aussi vouloir distinguer plusieurs balises. On indique les balises qui appartiennent à une même classe.


<ul>
  <li>Say hello</li>
  <li class="important">Don't cross the streams !</li>
  <li class="important">To Infinity and Beyond !</li>
</ul>

On utilisera '.' et le nom de la classe dans le style.


li.important {
  color: orange;
}

Classe d'élément (2/2)

Une classe peut concerner plusieurs balises, et une balise peut avoir plusieurs classes.


<ul>
  <li class="order">Say hello</li>
  <li class="important order">Don't cross the streams !</li>
  <li class="important">To Infinity and Beyond !</li>
</ul>

On utilisera '.' et le nom de la classe dans le style.


li.important {
  color: orange;
}
.order {
  font-weight: bold;
}

La syntaxe

Un style est une liste de sélecteurs auxquels
sont associées des propriétés.


selecteur1 {
  nom1: valeur1;
  nom2: valeur2;
}

/* ceci est un commentaire */
selecteur2 {
  autre-nom: autre-valeur;
}

'/*' démarre un commentaire, '*/' le finit.

Selecteurs

E	éléments de type E
E1 E2	un élément E1 suivi par E2
E#myid	élément dont l'id est myid
E.myclass	élément dont la class est myclass
E[foo]	éléments avec un attribut foo
E[foo="val"]	élément dont l'attribut foo a la valeur val
E::first-letter	première lettre d'un texte (pseudo élément)
E:first-child ou E:last-child	premier élément ou dernier élément (pseudo classe) (CSS3 selector)
a:link, a: visited, a:hover, a:active	état d'un lien

Exemple de sélecteurs

Exemple d'application d'un style à des éléments
et des pseudo-éléments.

p { color: green; } p::first-line { color: red; } p::first-letter { color: blue; }

La première ligne est la première ligne affichée

Cascading Style Sheet

Cascading signifie que si l'on applique un style à un élément, le style est propagé [1] à tous ses sous-éléments.

body { color: blue; } li { color: green; }

[1] ou hérité, si l'on regarde du point de vue des enfants.

CSS (algo 1/2)

L'algorithme marche en 2 temps :
1. on applique les sélecteurs dans l'ordre du fichier ;


body {
  color: blue;
}
li {
  color: green;
}

CSS (algo 2/2)

L'algorithme marche en 2 temps :
2. on propage les styles.


body {
  color: blue;
}
li {
  color: green;
}

Couleurs

Il y a plusieurs façons d'indiquer une couleur.

maroon | red | orange | yellow | olive | purple | fuchsia | white | lime | green | navy | blue | aqua | teal | black | silver | gray
rgb(255, 255, 255)
rgb(100%, 100%, 100%)
#FFFFFF

CSS3 Color définit encore d'autres façons...

<p style="color: teal">
  Il y a plusieurs façons d'indiquer une couleur.
</p>

Unités

Il existe plusieurs unités de taille :

%	pourcentage de l'écran
em	proportionnelle à la fonte courante (16 px avec la fonte par défaut)
px	en pixels
mm, cm, in, pt	en unités physiques

Propriétés par catégorie

propriétés des textes & images
propriétés des listes & tables
propriétés des boîtes

⚠ Catalogue ! ⚠

Propriétés des textes & images

Mise en page du texte

text-decoration:
none | underline | overline | line-through
text-align: left | right | center | justify
text-indent: indentation en début de paragraphe
line-height: hauteur d'une ligne

p { text-align: left; text-indent: 1em; line-height: 1.2em; }

Familles de Police

Noms génériques de familles de police qui marchent indépendamment des polices installés sur le client

Nom générique	Exemples de polices
sans serif	Arial, Helvetica
serif	Times Roman, Garamond
monospace	Courier, Lucida Console

Police de caractères

font-family: noms spécifiques puis nom générique
font-style: normal | italic | oblique
font-weight: normal | bold
font-variant: normal | small-caps
font-size: en %, pt, px ou em

p {
  font-family: "Arial", "Helvetica", "Verdana", sans-serif;
  font-style: oblique;
  font-weight: bold;
  font-size: 1.3em;
}

Image & Alignement Vertical

vertical-align:: baseline | sub | super | top | text-top | middle | bottom | text-bottom

p { font-size: 1.2em; } img.ok1 { vertical-align: baseline; } img.ok2 { vertical-align: text-top; } img.ok3 { vertical-align: middle; }

Les liens

Il existe des pseudo-classes reflétant l'état d'un lien.


a:link {  /* lien non visité */
  color: green;
}
a:visited { /* lien visité */
  color: green;
}
a:hover { /* souris au-dessus du lien */
  color: teal;
}
a:active { /* on clique sur le lien */
  color: red;
}

Propriétés des listes & tables

Style des listes

list-style-type:: none | disc | circle | square | decimal | upper-alpha | lower-alpha | upper-roman | lower-roman

ol { list-style-type: upper-alpha; } ul { list-style-type: lower-roman; }

Bordure des tables

Il est possible de mettre des bordures et sur la table et sur les td et th.

table { border-collapse: collapse; } table, th, td { border: 1px solid black; }

border-collapse fond plusieurs bordures en une seule.

Largeur/hauteur des tables

La taille de la table est calculée par son contenu, sauf si on utilise les propriétés width et height.

table { width: 100%; border: 1px solid black; } th { height: 30px; } td { padding: 3px; }

padding définit l'espacement entre le texte et la case.

Alignement du texte

text-align: left | center | right
aligne le texte dans les cases.

table { width: 100%; border-collapse: collapse; } th { border-bottom: 1px solid black; } .col1 { text-align: center; } .col2, .col3 { text-align: right; }

Alignement vertical

vertical-align: top | center | bottom
aligne verticalement le texte dans la case.

table { border-collapse: collapse; } th { height: 40px; background-color: orange; vertical-align: center; } th, td { border-bottom: 1px solid black; } .col2, .col3 { text-align: right; }

Bandes qui facilitent la lecture

On utilise la pseudo classe :nth-child
avec les valeurs odd ou even sur une ligne (tr).

table { border-collapse: collapse; } tr:nth-child(odd) { background-color: lightgray; } // tr:hover { background-color: lightblue; } th { background-color: orange; } th, td { border-bottom: 1px solid black; } .col2, .col3 { text-align: right; }

Avec le même principe, on peut utiliser la pseudo classe :hover.

Propriétés des boîtes

Inline vs block

Pour l'affichage, les éléments sont séparés en 2 catégories :

Les inlines, qui, comme du texte, sont
affichés de gauche à droite ;
Les blocks (boîtes), qui prennent toute la largeur
et dont la hauteur est de la somme des
hauteurs des sous-éléments.

A et BOLD sont des inlines, P, UL ou LI sont des blocks.

Span vs div

Balises sans propriété par défaut :

<span> est un inline ;
<div> est un block.


<div class="error">
  Une <span class="important">erreur</span> s'est produite ...
</div>

Couleur & image de fond

background-color spécifie une couleur de fond.
background-image spécifie une image de fond.


<div class="box1">Lorem ipsum dolor sit ...</div>
<div class="box2">Lorem ipsum dolor sit ...</div>

.box1 { background-color: silver; } .box2 { background-image: url("images/css/paper.jpg"); }

CSS Box Model

Le CSS définit 3 propriétés définissant les boîtes autour du contenu.

padding: espace à l'intérieur de la boîte ;
border: bordure autour des boîtes ;
margin: espace entre les boîtes.

Padding & margin


<div class="box1">Box1</div>
<div class="box2">Box2</div>

.box1, .box2 { margin: 50px; padding: 20px; } .box1 { background-color: teal; } .box2 { background-color: silver; }

Bordure

border-color: couleur
border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset
border-width: largeur de bordure

.box1, .box2 { background-color: silver; margin: 20px; padding: 10px; border-style: dotted dashed solid double; }

Texte et boîte flottante

float: left | right
indique que le texte passe autour de la boîte flottante.

.box { background-color: silver; margin: 10px; padding: 20px; float: left; }

On peut utiliser cette technique pour positionner des boîtes.

Positionnement flottant

float répartit les boîtes à gauche et à droite.
clear permet d'arrêter l'affichage flottant.

.box-left { background-color: teal; margin: 10px; padding: 20px; float: left; } .box-right { background-color: silver; margin: 10px; padding: 20px; float: right; } .box-clear { background-color: olive; padding: 20px; clear: both; }

Float et alignement vertical

Une boîte avec la propriété float ne supporte pas l'alignement vertical.

.box { background-color: teal; border: 1px solid black;
       float: left; vertical-align: bottom; }
.box-clear { background-color: olive; clear: both; }

Inline Block

display: inline-block
permet de voir un élément comme un inline
et donc de pourvoir utiliser vertical-align.

.box { background-color: teal; border: 1px solid black; display: inline-block; vertical-align: bottom; } .box-clear { background-color: olive; clear: both; }

Mais attention aux espaces car ils sont gérés comme faisant partie de l'affichage !

Positionnement

position permet de positionner un élément.

.box {
  position: relative; 
  left: 10px;
  top: 10px;
}

static: comportement normal
fixed: par rapport au coin en haut à gauche de la fenêtre
relative: par rapport à la position habituelle
absolute: par rapport à la boîte marquée relative

Les valeurs de left, top, right, bottom peuvent être négatives.

relative/absolute

absolute permet de placer une boîte par rapport à une boîte relative.

<div class="container">
   boîte de classe container
   <div class="valid"></div>
</div>

.container {
  position: relative;
  border: 1px solid black;
  padding: 0px 0px 40px 0px;
}
.valid:after {
  content: url(good.png);
  position: absolute;
  z-index: 9999;
  right: 5px;
  bottom: 0px;
}

Et pour la partie dynamique ?

Et comment on

clique sur un élément ?
change ce qui est affiché dynamiquement ?
fait des boucles, des tests, etc. ?

On ne fait pas ça en CSS, on utilise JavaScript pour cela !