Sébastien Roy, Université de Montréal
Sébastien Roy, Université de Montréal
13 février 2023
Le matériel de ce cours peut être réutilisé, sujet à la licence CC BY-SA 4.0.
Les feuilles de style en cascade, nommées CSS, est un langage informatique simple qui décrit la présentation des documents HTML et XML.
<link> dans la section <head>)<style> dans le HTMLstyle="..."Ces styles s'appliquent dans l'ordre.... (sauf lorsque !important)
Un exemple: exemples/moncss1.htmlRappel des styles originaux des premiers navigateurs web...
A noter:
Les styles par défauts peuvent changer d'un navigateur à l'autre, et selon les préférences de l'utilisateur...
Si on veut remettre tout à zéro... » css resetInsérer dans la section <head>...</head>)
une balise <link>.
<link rel="stylesheet" href="moncss.css"/>
moncss.css.
@import
<style>Utile pour définir des styles directement dans le HTML.
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
...
À noter: Cette balise va dans la section <head>...</head>
style=""Permet d'ajuster les détails de présentation, au niveau d'un élément particulier. Prioritaire, mais déconseillé. Utiliser en dernier recours!
style="propriété:valeur;propriété:valeur;..."
Par exemple:
<h1 style="color:red;>Introduction</h1>
Ce utilise des sélecteurs. Les plus simples:
class="..."Définit une categorie d'élément, qu'on peut attribuer à plusieurs éléments différents.
<h1 class="enorme">Introduction</h1>
id="..."Définit un identificateur d'élément, attribuable à un seul élément.
<h1 id="monintro">Introduction</h1>
/* ... */ )
<style>
h1 { font-style: italic; }
.enorme { color:red; font-size:72px }
#monintro { background-color:lightblue; }
</style>
.#| Sélecteur | Exemple | Description |
|---|---|---|
| .class | .intro | Tous les éléments avec l'attribut class="intro" |
| #id | #blub | L'élément (unique) avec l'identification id="blub" |
| element | p | Tous le éléments <p> |
| .class1.class2 | .nom1.nom2 | Tous le éléments avec les classes nom1 et nom2 présentes dans l'attribut class |
| .class1 .class2 | .nom1 .nom2 | Tous les éléments avec la classe nom2 qui sont déscendant d'un élément avec la classe nom1 |
| element.class | p.intro | Tous les éléments <p> avec une classe class="intro" |
| element,element | div, p | Tous les éléments <div> et tous les éléments <p> |
| element element | div p | Tous les éléments <p> à l'intérieur d'un élément <div> |
| element>element | div > p | Tous les éléments <p> qui ont un <div> comme parent immédiat |
:) sélectionnent en fonction d'un état...
| :active | a:active | Le lien, lorsqu'il est actif (on clic dessus) |
| :first-child | p:first-child | Chaque élément <p> qui est le premier enfant de son parent |
| :last-child | p:last-child | Chaque élément <p> qui est le dernier enfant de son parent |
| :hover | a:hover | L'élément sous la souris |
| :link | a:link | Les liens qui n'ont pas été visités |
| :visited | a:visited | Les liens qui ont déjà été visités |
| :not(selector) | :not(p) | Tous les éléments qui ne sont pas <p> |
::) sélectionnent des parties d'éléments...
| ::after | p::after | Juste avant le contenu de chaque élément <p> |
| ::before | p::before | Juste après le contenu de chaque élément <p> |
| ::first-letter | p::first-letter | La première lettre de chaque élément <p> |
| ::selection | ::selection | Selects the portion of an element that is selected by a user |

width, height, padding, border, margin min-width, max-width, box-sizing...
box-sizing: content-box
div {
box-sizing: content-box;
width: 400px;
height: 100px;
border: 10px solid red;
padding: 20px;
margin: 25px;
background-color: lightblue;
}

box-sizing: border-box
div {
box-sizing: border-box;
width: 400px;
height: 100px;
border: 10px solid red;
padding: 20px;
margin: 25px;
background-color: lightblue;
}


rgb() ou hls()
<span style="color:tomato;">Tomate!</span>
<span style="color:rgb(255, 99, 71);">Tomate!</span>
<span style="color:#ff6347;">Tomate!</span>
<span style="color:hsl(9, 100%, 64%);">Tomate!</span>
opacityrgba() ou hlsa()
<span style="color:tomato;">Tomate!</span>
<span style="opacity:0.8;color:tomato;">Tomate!</span>
<span style="color:rgba(255, 99, 71,0.6);">Tomate!</span>
<span style="color:#ff634766;">Tomate!</span>
<span style="color:hsla(9, 100%, 64%,0.2);">Tomate!</span>
a { color:tomato; }
...
.intro h1 { color:tomato; }
...
p.majeur { color:tomato; }
...
» (couplage) » Parce que c'est sûr qu'on va vouloir changer la couleur...
a, .intro h1, p.majeur { color:tomato; }
Brise la cohésion!!!...
On peut faire mieux...
<a class="tomate"> ..... <p class="tomate"> .....
et dans le CSS:
.tomate { color:tomato; }
:root { --tomate: #ff6347; }
a { color:var(--tomate); }
...
.intro h1 { color:var(--tomate); }
...
p.majeur { color:var(--tomate); }
...
On peut changer la couleur tomate très facilement!--tomate
Le texte doit être du texte, pas une image!!!
Grossir le texte (200%) ne doit par détruire la page!
Les icônes sont aussi disponibles sous la forme d'une police... (font awesome)
| Absolu | |
|---|---|
px | pixels (96 pixels par pouce)*** |
cm | centimètre |
in | pouce |
pt | point (72 points par pouce) |
| Relatif | |
|---|---|
em | Relatif à la taille de la police (font-size) |
% | % de l'élément parent |
vw, vh | 1% de la taille de l´écran |
En html, on empile des blocs, et dans les blocs, il y a des lignes de texte.
<div> va créer un bloc. (élément block-level)<span> va créer un élément texte (élément inline).<div> et <span><div>, les éléments suivant forment des blocs:<h1> - <h6>,
<p>,
<ul>, <ol>,
<li>,
<header>,
<footer>,
<section>, ...
À part <span>, les éléments suivants sont inline:
<strong>,
<em>,
<a>,
<img>,
<sub>,
<sup>, ...
Comment placer tous ces blocs et éléments inline dans la page?
<display> détermine comment on affiche un élément.
| display: none | L"élément est invisible |
| display: block | L'élément est un bloc |
| display: inline | L'élément est en-ligne |
display détermine le comportement des éléments à l'affichage:
| display: inline-block | L'élément est en-ligne, mais avec une largeur et hauteur (vieux!!) |
| display: table | L'élément est affiché comme une table (!!!) |
| display: list-item | L'élément est affiché comme un li (!!!) |
| display: grid | L'élément est un conteneur grid |
| display: inline-grid | L'élément est un en-ligne grid |
| display: flex | L'élément est un conteneur flex |
| display: inline-flex | L'élément est un en-ligne flex |
display:block)display:inline ou inline-block)Les propriété importantes:
position | Type de positionnement du bloc |
top | Position par rapport au haut du conteneur |
left | Position par rapport à la gauche du conteneur |
@media not|only mediatype and (expressions) { ... }
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Fondement du Design web réactif (Responsive Web Design).