Lors de la Séance 1, nous avons appris à structurer notre contenu avec les balises HTML de base. La Séance 2 nous a montré comment organiser ce contenu de manière sémantique et comment cibler précisément les éléments avec différents sélecteurs CSS. Aujourd'hui, nous allons aborder un concept fondamental pour la mise en page : comment les éléments HTML occupent l'espace sur la page et comment nous pouvons contrôler cet espace.
Pourquoi un style s'applique et pas un autre ? La réponse se trouve dans les 3 règles fondamentales de la Cascade CSS. Les comprendre est la clé pour ne plus jamais être frustré par son CSS.
Chaque sélecteur a un "poids" ou une "force". Un sélecteur plus spécifique l'emporte sur un moins spécifique. L'ordre de force est : Style en ligne > ID > Classe / Pseudo-classe > Balise.
<p id="mon-para" class="texte-bleu" style="color: green;">Quel sera ma couleur ?</p>/* Le plus faible : sélecteur de balise */
p { color: red; }
/* Plus fort : sélecteur de classe */
.texte-bleu { color: blue; }
/* Encore plus fort : sélecteur d'ID */
#mon-para { color: purple; }
/* Le plus fort de tous : style en ligne (attribut style dans le HTML) */
/* Le texte sera donc VERT. */Certaines propriétés CSS (comme color, font-family) sont héritées par les éléments enfants de leur parent, tandis que d'autres (comme border, padding) ne le sont pas.
<div class="parent">
<p>Ce texte hérite de la couleur et de la police de son parent.</p>
</div>.parent {
color: #4F46E5; /* Cette couleur sera héritée par le <p> */
font-family: 'Georgia', serif;
border: 1px solid black; /* Cette bordure ne sera PAS héritée */
}Si deux règles ont exactement la même spécificité, c'est la dernière déclarée dans votre fichier CSS qui l'emporte.
<p class="texte-important">Ce texte sera-t-il rouge ou bleu ?</p>/* Les deux sélecteurs ont la même spécificité (une classe) */
.texte-important { color: red; }
.texte-important { color: blue; }
/* Le texte sera BLEU car c'est la dernière règle déclarée. */Pour chaque exercice, créez un nouveau fichier HTML et CSS (ou continuez sur les fichiers de la Séance 1/2 si vous le souhaitez, en les organisant bien). N'oubliez pas de lier votre fichier CSS dans le <head> de votre HTML.
<div> contenant le texte "Je suis une boîte !".<div> :
width: 250pxheight: 150pxbackground-color: #FFDDC1 (pêche pâle)padding: 20pxborder: 5px solid #FF8C00 (orange foncé)margin: 30px<div>, chacune avec un texte simple (ex: "Bloc 1", "Bloc 2", "Bloc 3").<span>, chacune avec un texte simple (ex: "Inline 1", "Inline 2", "Inline 3").<a> (liens fictifs), chacune avec un texte simple (ex: "Lien A", "Lien B", "Lien C").<div>, <span> et <a> pour bien visualiser leurs limites.display: inline-block; aux balises <div> et <span>. Donnez-leur une width et une height fixes (ex: 100px).<div>, chacun avec le texte "Ma Boîte".<div> les mêmes styles : width: 200px, height: 100px, padding: 20px, border: 5px solid black, background-color: lightblue.box-sizing: content-box; au premier <div> (c'est le comportement par défaut, mais spécifiez-le).box-sizing: border-box; au second <div>.<ul>) de 5 éléments (<li>) représentant des "Compétences".list-style-type: none;).<li>) une couleur de fond légère, un padding, et une margin-bottom.font-weight pour rendre le texte des éléments de liste plus gras.line-height des paragraphes de votre page pour améliorer la lisibilité.Pour ce TP, vous allez appliquer les concepts du Modèle de Boîte et de la propriété display pour créer une "carte de produit" simple, en utilisant dès le début notre Design System.
Créer une carte de produit visuellement cohérente en utilisant uniquement les variables (tokens) de notre Design System pour les styles.
tp-seance3 avec index.html et styles.css.index.html, utilisez la structure HTML de la carte produit fournie dans la version précédente de cet exercice.styles.css, n'utilisez que des variables de notre Design System pour les styles :/* Applique box-sizing à tous les éléments */
*, *::before, *::after {
box-sizing: border-box;
}
.product-card {
width: 320px;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-4);
margin: var(--space-8) auto; /* Centre la carte sur la page */
box-shadow: var(--shadow-lg);
}
.product-image {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
}
.product-title {
font-size: var(--font-size-xl);
color: var(--color-text-base);
font-weight: 600;
margin-bottom: var(--space-2);
}
.add-to-cart-button {
display: inline-block;
width: 100%;
background-color: var(--color-primary);
color: var(--color-surface);
padding: var(--space-4);
border-radius: var(--radius-md);
text-align: center;
font-weight: 600;
margin-top: var(--space-4);
border: none;
cursor: pointer;
}index.html dans le navigateur. La carte doit avoir une apparence cohérente avec les styles de base du cours, car elle utilise les mêmes tokens de design.