Partie 3 : CSS

Cette partie couvre l'introduction au CSS, l'utilisation de ses propriétés pour la mise en page, le design responsive, les animations et l'adaptation de templates.

1. Concepts & Définitions

CSS (Cascading Style Sheets) : Langage destiné à gérer le contenu et la structure d’une page web. Il permet de gérer la mise en forme (texte, images, tableaux), de dimensionner et positionner les éléments, et de gérer les animations.
Sélecteur (Sélecteur) : Élément clé qui indique sur quels éléments HTML vont s’appliquer les propriétés CSS.
Déclaration CSS : L'ensemble propriété : valeur; qui définit un style.
Règle CSS : L'ensemble d'un sélecteur et de ses déclarations entre accolades {}.
Unités Absolues : Unités non influencées par d'autres dimensions (ex: px, cm).
Unités Relatives : Unités qui varient en fonction de la taille de la police ou de l'élément parent (em, rem) ou du viewport (vh, vw).
Viewport : La zone visible de la page web dans la fenêtre du navigateur.
Flux Normal : Mécanisme de positionnement par défaut en CSS, où les éléments sont gardés selon leur ordre et leur type (bloc, inline).
Flexbox : Méthode de mise en page qui facilite la structuration et la mise en page souple et réactive.
- Conteneur flex (flex container) : La boîte "parent" qui contient les éléments flex.
- Éléments flex (flex items) : Les boîtes "enfants" contenues dans un conteneur flex.
- Axe principal (main axis) : L'axe sur lequel les éléments flex se suivent. Défini par flex-direction.
- Axe secondaire (cross axis) : L'axe perpendiculaire à l'axe principal.
Responsive Web Design (Conception Web Réactive) : Conception qui rend une page web compatible et adaptable à tous les appareils (ordinateurs, tablettes, téléphones) en utilisant HTML et CSS pour redimensionner, masquer, ou déplacer le contenu.
Media Queries : Règle (@media) permettant de définir différentes règles de style pour différents types de médias ou capacités de l'appareil (largeur, hauteur, orientation).
Animations CSS : Permettent de faire passer progressivement un élément d'un style à un autre en modifiant ses propriétés CSS, sans JavaScript.
- Transformations : Opérations 2D/3D comme déplacer (translate), pivoter (rotate), mettre à l'échelle (scale) et incliner (skew).
- Transitions : Permettent de modifier les valeurs des propriétés sur une durée donnée.
- Keyframes (@keyframes) : Règle qui définit l'apparence visuelle d'une animation à différentes étapes de sa progression.
Template (modèle, layout, Gabarit) : Structure répétitive utilisée pour créer des documents partageant une même mise en page.
Charte Graphique : Ensemble des règles fondamentales gérant l'utilisation des signes graphiques qui constituent l'identité graphique d'un site. Elle inclut : logo, couleurs, typographie, icônes, images, menus.

2. Syntaxes & Codes

Syntaxe de base d'une règle CSS :

sélecteur {
    propriété: valeur;
    propriété: valeur;
}

Intégration du CSS :
1. En ligne (attribut style) : <p style="color: blue;">Texte</p>
2. Interne (balise <style>) :
```
<head>
    <style>
        p { color: blue; }
    </style>
</head>
```
3. Externe (fichier .css) - Méthode recommandée :
```
<head>
    <link rel="stylesheet" href="style.css">
</head>
```

Syntaxe @font-face : Pour importer une police personnalisée.

@font-face {
    font-family: 'nomDeMaPolice';
    src: url('chemin/vers/la/police.ttf');
}

Syntaxe Media Query :

@media screen and (max-width: 600px) {
    sélecteur {
        propriété: valeur;
    }
}

Syntaxe @keyframes :

@keyframes nom-animation {
    from { background-color: red; }
    to { background-color: yellow; }
}
/* ou avec des pourcentages */
@keyframes nom-animation {
    0%   { background-color: red; }
    25%  { background-color: yellow; }
    100% { background-color: blue; }
}

3. Attributs & Propriétés

Propriétés de Texte et Police (Typographie)

color: Définit la couleur du texte.
font-style: normal, italic, oblique.
font-variant: normal, small-caps.
font-weight: normal, bold, bolder, lighter, ou valeurs numériques de 100 à 900.
font-size: Valeurs en px, em, rem, %, ou mots-clés (xx-small, x-small, small, medium, large, x-large, xx-large).
font-family: Suite de noms de polices (ex: 'Helvetica Neue', Helvetica, sans-serif).
text-align: left, right, center, justify.
text-decoration: none, underline, overline, line-through, blink.
text-transform: none, uppercase, lowercase, capitalize.
text-indent: Taille du retrait de la première ligne (en px, em, etc.).
letter-spacing: Espace entre les lettres (en px).
word-spacing: Espace entre les mots (en px).
line-height: Hauteur de ligne (en px, em, etc.).
white-space: normal, pre, nowrap, pre-wrap, pre-line.
vertical-align: baseline, super, top, text-top, middle, text-bottom, bottom, sub, inherit.

Propriétés de Boîte (Box Model)

width, height: Définissent la largeur et la hauteur.
margin: Raccourci pour margin-top, margin-right, margin-bottom, margin-left. Définit le retrait extérieur.
padding: Raccourci pour padding-top, padding-right, padding-bottom, padding-left. Définit le retrait intérieur.
border: Raccourci pour border-width, border-style (solid, dashed, dotted...), border-color.
border-radius: Arrondit les coins d'un élément.
box-shadow: Ajoute une ombre à une boîte (ex: 10px 10px 5px gray).
text-shadow: Ajoute une ombre au texte (ex: 2px 2px 3px #FFF).

Propriétés de Fond (Background)

background-color: Définit la couleur de fond.
background-image: url("chemin/image.jpg").
background-repeat: repeat, repeat-x, repeat-y, no-repeat.
background-attachment: scroll (défaut), fixed.
background-position: top, bottom, left, center, right.
background-size: 100% 100%, cover, contain.

Propriétés de Positionnement

position:
- static: Flux normal (défaut).
- relative: Positionné par rapport à sa position normale.
- absolute: Positionné par rapport à son premier ancêtre positionné.
- fixed: Positionné par rapport au viewport, reste visible au défilement.
top, right, bottom, left: Coordonnées de positionnement.
float: left, right, none, inherit.
clear: left, right, both, none. Utilisé pour nettoyer les flottants.
z-index: Gère la superposition des éléments positionnés.

Propriétés Flexbox

Pour le conteneur (.conteneur):
- display: flex; : Active le contexte Flexbox.
- flex-direction: row (défaut), row-reverse, column, column-reverse.
- flex-wrap: nowrap (défaut), wrap, wrap-reverse.
- flex-flow: Raccourci pour flex-direction et flex-wrap.
- justify-content: Alignement sur l'axe principal. Valeurs : flex-start, flex-end, center, space-between, space-around, space-evenly.
- align-items: Alignement sur l'axe secondaire. Valeurs : stretch, flex-start, flex-end, center, baseline.
Pour les éléments (.element):
- order: Ordre d'affichage (valeur numérique).
- flex-grow: Facteur d'agrandissement (nombre).
- flex-shrink: Facteur de rétrécissement (nombre positif).
- flex-basis: Taille par défaut de l'élément.
- flex: Raccourci pour flex-grow, flex-shrink, et flex-basis.
- align-self: Surcharge align-items pour un seul élément.

Propriétés d'Animation & Transition

transition: Raccourci pour transition-property, transition-duration, transition-timing-function, transition-delay.
transform: Applique une transformation 2D/3D. Fonctions : translate(), rotate(), scale(), skew(), rotateX(), rotateY(), rotateZ().
animation: Raccourci pour toutes les propriétés animation-*.
animation-name: Nom de la règle @keyframes à appliquer.
animation-duration: Durée d'un cycle d'animation (ex: 4s).
animation-delay: Délai avant le début de l'animation.
animation-iteration-count: Nombre de répétitions (infinite pour une boucle).
animation-direction: normal, reverse, alternate, alternate-reverse.
animation-timing-function: Courbe de vitesse de l'animation.
animation-play-state: running, paused.
animation-fill-mode: none, forwards, backwards, both.

4. Exemples Pratiques (Codes complets du PDF)

Sélecteur de type
```
div {
    background-color: yellow;
}
```

Sélecteur de classe

<tr class="impaire">...</tr>

.impaire {
    background-color: rgba(255, 255, 0, 0.2);
}

Sélecteur d'ID

<tr id="sel">...</tr>

#sel {
    background-color: rgba(255, 255, 0, 0.2);
}

Sélecteurs d'attribut

/* Éléments <a> avec un attribut title */
a[title] { color: purple; }
/* href exact */
a[href="https://example.org"] { color: green; }
/* href contient "example" */
a[href*="example"] { font-size: 2em; }
/* href finit par ".org" */
a[href$=".org"] { font-style: italic; }
/* class contient le mot "logo" */
a[class~="logo"] { padding: 2px; }

Combinateur de voisin direct +

li:first-of-type + li {
    color: red;
}

Combinateur de voisins généraux ~
```
p ~ span {
    color: red;
}
```

Combinateur enfant >

div > span {
    background-color: blue;
}

Combinateur descendant (espace)
```
li li {
    list-style-type: circle;
}
```

Pseudo-classe :hover sur un lien

a:hover {
    text-decoration: underline;
    color: green;
    background-color: #CFE1EB;
}

Flexbox : Conteneur de base

<div class="conteneur">
    <div class="element">Élément 1</div>
    <figure class="element">Élément 2</figure>
    <div class="element">Élément 3</div>
</div>

.conteneur {
    display: flex;
}

Media Query pour la navigation responsive

.demo a {
    float: left;
    display: block;
    /* ... autres styles ... */
}

@media screen and (max-width: 600px) {
    .demo a {
        float: none;
        width: 100%;
    }
}

Animation avec @keyframes

<div></div>

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Animation de position avec @keyframes

@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
div {
    position: relative; /* Important pour que left/top fonctionnent */
    /* ... autres styles ... */
}

Transformation translate()

div:hover {
    transform: translate(50px, 100px);
}

Transition sur width

div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
}
div:hover {
    width: 300px;
}

5. Spécifications Techniques

Codification des couleurs :
- Nommées : grey, red, etc. (16 noms normalisés par W3C).
- Hexadécimal : #RRGGBB (ex: #808080).
- RGB : RGB(128, 128, 128). Valeurs de 0 à 255.
Unités de mesure :
- Absolues : px (pixels), in (pouces), cm (centimètres), mm (millimètres), pc (picas), pt (points).
- Conversion : 1 in = 96 px, 1 cm = 37,8 px, 1 mm = 3,78 px.
- Relatives au texte : em (taille de police du parent), rem (taille de police de la racine), ex (hauteur de la lettre 'x'), ch (largeur du caractère '0').
- Relatives au viewport : vh (1% de la hauteur du viewport), vw (1% de la largeur du viewport), vmin (le plus petit de vh ou vw), vmax (le plus grand de vh ou vw).
Sélecteurs d'attributs (détails) :
- [attr]: Possède l'attribut.
- [attr=valeur]: Valeur exacte.
- [attr~=valeur]: Contient le mot valeur dans une liste séparée par des espaces.
- [attr|=valeur]: Est exactement valeur ou commence par valeur-.
- [attr^=valeur]: Commence par valeur.
- [attr$=valeur]: Se termine par valeur.
- [attr*=valeur]: Contient la sous-chaîne valeur.
Liste complète des pseudo-classes (reproduction des tableaux p.143-144) :
- :checked, :disabled, :empty, :enabled, :first-of-type, :in-range, :invalid, :last-child, :last-of-type, :not(p), :nth-child(2), :nth-last-child(2), :nth-last-of-type(2), :nth-of-type(2), :only-of-type, :only-child, :optional, :out-of-range, :read-only, :read-write, :required, :root, :target, :valid, :link, :visited, :active, :hover, :focus, :first-letter, :first-line, :first-child, :before, :after, :lang(it).

6. Points Critiques

Recommandation d'intégration : La méthode recommandée pour intégrer du CSS est d'utiliser un fichier externe (.css) lié via la balise <link>, car elle sépare le contenu (HTML) de la présentation (CSS).
Positionnement et Flux : Comprendre que position: absolute ou fixed sort un élément du flux normal, tandis que position: relative ne le fait pas.
Nettoyage des flottants : La propriété clear est essentielle pour contrôler le layout après avoir utilisé float.
Responsive Design : Le Responsive Design est basé uniquement sur HTML et CSS. Il est crucial d'utiliser les Media Queries pour adapter les styles en fonction de la taille de l'écran.
Flexbox : L'orientation des axes (flex-direction) est fondamentale car elle détermine le comportement de justify-content (axe principal) et align-items (axe secondaire).
Animations : Pour que les animations de position (top, left, etc.) fonctionnent, l'élément doit avoir une propriété position autre que static (ex: relative, absolute).
Templates : L'utilisation de templates permet la cohérence visuelle mais peut limiter la flexibilité du design. Il faut bien définir les besoins fonctionnels avant de choisir un template.
Charte Graphique : C'est le document de référence pour toute l'identité visuelle. Chaque élément (logo, couleurs, etc.) a un rôle précis dans la communication de la marque.

🔗 Navigation