W11 - Conception de documents et d’interfaces numériques

Adrien Krähenbühl 12 novembre 2019 IUT Robert Schuman

Avant de commencer

Version de CSS: Ce cours se base entièrement sur CSS 3

Rappel doc & stackoverflow-like: \(\rightarrow\) ne recopiez pas bêtement
\(\rightarrow\) developpez.mozilla est une doc. fiable

Premier QCM: \(\rightarrow\) sur Moodle
\(\rightarrow\) au début du prochain TP

Ce que l’on a vu

Concepts du HTML
- les balises et les éléments
- les attributs
- l’imbrication
Les balises
- structurelles (<html>, <head>, <body>, <section>, …)
- textuelles, liens, listes, définitions
- tableaux, formulaires, medias.
Navigateurs et protocole HTTP
- Firefox, Chrome(ium), Opera, etc.
- les requête HTTP et les URL

Au programme aujourd’hui

Les concepts du CSS
- syntaxe
Les sélecteurs
- sélecteurs simples
- combinateurs
- pseudo-classes
Les propriétés
- de textes et de blocs
- comportement en ligne et en bloc
- marges et padding
Flex (certainement en TD)
- principe
- propriétés du conteneur
- propriétés des items

Et jusqu’à la fin du module

Deux cycles vont s’enchaîner :

1 TD + 5 TPs

CSS basique
Flex et transitions
(Media queries)

1 TD + 5 TP

Javascript
2\(^{ème}\) QCM au premier TP

Attention, chaque TP étant basé sur le précédent,
veillez à ne pas accumuler le retard.

CSS, les concepts

CSS, qu’est-ce que c’est ?

Le Cascading Style Sheets est un langage :

permettant de décrire l’apparence d’une page HTML
définit par le W3C
actuellement à la version 3

Inclure du CSS dans du HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style1.css">
        <link rel="stylesheet" href="style2.css">
        <title>Ma page</title>
    </head>
    <body> ... </body>
</html>

index.html

L’utilisation d’un fichier CSS se déclare avec un élément <link> dans l’entête de la page.
Un document HTML peut se référer à plusieurs fichiers CSS.

La syntaxe

selecteur1 {
    proprieteA: valeur;
    proprieteB: valeur;
}

selecteur2,
selecteur3 {
    ...
}

...

style1.css

h1 {
    color: red;
    font-size: 20px;
}

article,
section {
    border: 1px solid black;
}

...

style1.css

Les sélecteurs définissent un ou plusieurs éléments HTML auxquels affecter une ou plusieurs propriétés.
On peut appliquer les mêmes propriétés à plusieurs sélecteurs en les séparant par une virgule.

L’héritage

<section>
    <article>
        <h3>Mon titre</h3>
        <p> Alléchant </p>
    </article>
    <aside>
        <h3> Mon autre titre </h3>
        <p> Bazinga </p>
    </aside>
</section>

section {}

Mon titre

Alléchant

section { color: red; }

Mon titre

Alléchant

section { color: red; }
article { color: blue; }

Mon titre

Alléchant

section { color: red; }
article { color: blue; }
p       { color: green; }

Mon titre

Alléchant

La notion de cascade fait référence aux propriétés CSS qui, lorsqu’elles sont appliquées à un élément HTML, le sont aussi sur tous les enfants par héritage.

Les sélecteurs simples

Sélecteur de type

Pour appliquer une propriété à tous les éléments d’un même type, on indique le nom de l’élément :

/* Appliqué à tous les éléments <p> de la page */
p {
    propriete: valeur;
}

Sélecteur de classe

Pour appliquer une propriété à tous les éléments d’une même classe, on indique le nom de la classe avec un point :

/* Appliqué à tous les éléments
   de classe "recent" */
.recent {
    propriete: valeur;
}

/* Appliqué à tous les articles
   de classe "recent" */
article.recent {
    propriete: valeur;
}

Sélecteur d’identifiant

Pour appliquer une propriété à un élément avec un id spécifique, on indique cet identifiant avec un dièse :

/* Appliqué à l'élément d'identifiant "monId" */
#monId {
    propriete: valeur;
}

Note : un identifiant doit être unique

Sélecteur d’attribut

Pour appliquer une propriété aux élément possédant un attribut donné, on indique son attribut entre crochets :

/* Appliqué aux éléments <p> possédant l'attribut "id" */
p[id] {
    propriete: valeur;
}

Combiner des sélecteurs

Sélecteur de descendants

Pour appliquer des propriétés à tous les descendants B d’un élément A, on utilise la syntaxe A B :

/* Appliqué aux éléments <p> qui sont descendants de <body> */
body p {
    propriete: valeur;
}

Sélecteur d’enfants

Pour appliquer des propriétés aux enfants directs d’un élément, on indique le nom de l’élément et de ses enfants, séparés par un > :

/* Appliqué aux éléments <p> qui sont enfants directs du <body> */
body > p {
    propriete: valeur;
}

Sélecteur de voisin direct

Pour appliquer des propriétés aux éléments B qui sont voisins directs d’éléments A, on utilise la syntaxe A + B :

/* Appliqué aux éléments <p> qui suivent directement un <a> */
a + p {
    propriete: valeur;
}

Sélecteur de voisins généraux

Pour appliquer des propriété aux éléments B qui sont voisins successeurs d’éléments A, on utilise la syntaxe A ~ B :

/* Appliqué aux éléments <p> qui sont voisins en aval d'un <a> */
a ~ p {
    propriete: valeur;
}

Pseudo-classes

Pseudo-classe :first-child

Pour appliquer une propriété à des éléments premier enfant de leur parent, on suffixe le nom de l’enfant avec :first-child :

/* Appliqué à tous les éléments <p> qui sont 1er enfant de leur parent */
p:first-child {
    propriete: valeur;
}

Note : on en déduit le fonctionnement de :last-child.

Pseudo-classe :first-of-type

Pour appliquer une propriété à des éléments premier enfant d’un type donné, on suffixe le nom de l’enfant avec :first-of-type :

/* Appliqué à tous les éléments <p> qui sont le 1er enfant de ce type */
p:first-of-type {
    propriete: valeur;
}

Note : on en déduit le fonctionnement de :last-of-type.

Plus de sélecteurs

Les sélecteurs sont nombreux et les combinaisons infinies. Pour avoir une liste complète des possibilités de sélection offertes par CSS, vous pouvez vous référer à cette doc de Mozilla.

Vous y trouverez entre autre les pseudo-classe ::before et :hover qui seront à utiliser en TP…