Scheda di revisione: Maîtrise des sélecteurs CSS et structuration HTML

📋 Plan du Cours

1. Construction de la page d'accueil HTML avec id et class
2. Différences entre id et class en CSS et leur ciblage
3. Création et gestion des liens entre pages HTML
4. Application des couleurs et arrière-plans en CSS
5. Mise en forme du texte : taille, style et alignement
6. Gestion des dimensions, marges et espacements en CSS
7. Glossaire des balises HTML essentielles pour structurer le contenu
8. Propriétés CSS pour les bordures, coins arrondis et effets sur les liens

📖 1. Construction de la page d'accueil HTML avec id et class

🔑 Notions clés & Définitions

• Class : Attribut HTML permettant d'assigner un ou plusieurs noms à un élément, utilisé pour cibler plusieurs éléments en CSS et pouvant être réutilisé sur différents éléments.

📝 Points essentiels

• Les attributs id et class sont utilisés pour identifier et cibler des éléments en CSS.
• L'attribut id doit être unique sur la page, tandis que class peut être réutilisée sur plusieurs éléments.
• Utilise des id et des class pour pouvoir les cibler en CSS ensuite.

💡 À retenir

Les attributs id et class sont utilisés pour identifier et cibler des éléments en CSS.

📖 2. Différences entre id et class en CSS et leur ciblage

🔑 Notions clés & Définitions

• Class : Un attribut HTML pouvant être attribué à plusieurs éléments pour les regrouper et les cibler en CSS avec un point suivi du nom de la classe.

📝 Points essentiels

• Une class peut être attribuée à plusieurs éléments et se cible en CSS avec un point suivi du nom de la classe (ex : .accroche).
• Les sélecteurs id ont une spécificité plus élevée que les sélecteurs class en CSS.
• La syntaxe CSS pour cibler un id utilise un dièse (#) suivi du nom de l'id, différente de celle pour cibler une class qui utilise un point (.).
• /* Cibler une class (.) */

💡 À retenir

Savoir distinguer et utiliser correctement les sélecteurs id et class en CSS permet un ciblage précis des éléments pour la stylisation.

📖 3. Création et gestion des liens entre pages HTML

🔑 Notions clés & Définitions

• Href : 💡 Liens entre pages — Dans un même dossier, les liens s'écrivent simplement avec le nom du fichier : href="apropos.html". Pas besoin d'une adresse internet complète.
• Balise sans fermeture : L'attribut alt est alt

📝 Points essentiels

• Les liens relatifs s'écrivent simplement avec le nom du fichier (ex : href="apropos.html") sans besoin d'adresse complète.
• Un menu de navigation identique sur plusieurs pages permet de naviguer facilement entre elles.
• Ouvre le fichier apropos.html. Ajoute un contenu différent sur ton thème, ainsi qu'un menu de navigation identique à celui d'index.html pour pouvoir naviguer entre les deux pages.

💡 À retenir

Maîtriser la création de liens relatifs entre pages HTML permet d'assurer une navigation fluide.

📖 4. Application des couleurs et arrière-plans en CSS

🔑 Notions clés & Définitions

• Propriété color : propriété CSS qui définit la couleur du texte d’un élément HTML. Elle peut être spécifiée par des noms de couleurs ou des codes couleur.

• Propriété background-color : propriété CSS qui détermine la couleur de fond d’un élément HTML. Elle peut également utiliser des codes hexadécimaux ou des noms de couleurs.

• Codes couleur hexadécimaux : représentation de couleurs en utilisant une séquence de six caractères précédés du symbole #, par exemple #f0f4ff ou #222222.

• Noms de couleurs CSS : désignations en anglais de couleurs reconnues par CSS, telles que steelblue ou navy, permettant de spécifier une couleur sans utiliser de code hexadécimal.

📝 Points essentiels

• La propriété color permet de définir la couleur du texte dans un élément HTML, en utilisant soit un nom de couleur (ex : red), soit un code hexadécimal (ex : #ff0000), ou encore une valeur rgb (ex : rgb(255,0,0)). Elle cible directement le contenu textuel.

• La propriété background-color sert à appliquer une couleur de fond à un élément HTML, pouvant être une couleur nommée (ex : steelblue) ou un code hexadécimal (ex : #001122). Elle influence l’arrière-plan visuel de l’élément.

• Les couleurs peuvent être spécifiées via des codes hexadécimaux, tels que #f0f4ff ou #222222, ou par des noms en anglais comme navy ou steelblue. Ces méthodes offrent différentes options pour personnaliser l’esthétique.

• Les couleurs appliquées en CSS peuvent cibler des éléments via leur id (ex : #menu) ou leur classe, permettant une personnalisation précise de l’apparence selon la structure du document.

💡 À retenir

L’utilisation combinée des propriétés color et background-color, avec des codes hexadécimaux ou des noms de couleurs, permet d’améliorer l’esthétique visuelle d’un site en ciblant précisément les éléments via id ou classe.

📖 5. Mise en forme du texte : taille, style et alignement

🔑 Notions clés & Définitions

• Taille : Caractéristique CSS qui détermine la dimension du texte, exprimée en unités comme pixels (px) ou em, par exemple 16px ou 36px.

📝 Points essentiels

• La propriété font-size règle la taille du texte, par exemple 16px ou 36px.
• La propriété font-style permet de définir le style du texte, notamment normal ou italic.
• La propriété text-align contrôle l'alignement horizontal du texte, avec left, center ou right.

💡 À retenir

Modifier la taille, le style et l'alignement du texte avec CSS permet d'améliorer la lisibilité et la présentation du contenu.

📖 6. Gestion des dimensions, marges et espacements en CSS

🔑 Notions clés & Définitions

• Width : Propriété CSS qui définit la largeur d'un élément, par exemple 800px ou 50%.
• Margin : Propriété CSS qui gère les marges extérieures d'un élément, permettant de centrer ou espacer.

📝 Points essentiels

• La propriété width définit la largeur d'un élément, par exemple 200px ou 50%.
• La propriété margin gère les marges extérieures, avec des valeurs comme 0 auto pour centrer horizontalement.
• La propriété padding gère les marges intérieures, par exemple 10px ou 5px 15px.

💡 À retenir

Savoir contrôler les dimensions et espacements en CSS permet de structurer harmonieusement la page.

📖 7. Glossaire des balises HTML essentielles pour structurer le contenu

🔑 Notions clés & Définitions

: balise qui encadre le titre principal d'une page ou d'une section, indiquant son importance maximale et étant unique dans la page.

: balise qui délimite une section principale ou un sous-titre, permettant de hiérarchiser le contenu en subdivisions structurées.

: balise utilisée pour définir une sous-section ou un titre de niveau inférieur, permettant une organisation hiérarchique détaillée.

• : balise qui met en évidence un texte en gras avec une importance sémantique, signalant une information essentielle ou forte.

📝 Points essentiels

• La balise

  définit le titre principal de la page, étant unique et représentant l'élément central de hiérarchisation du contenu.

• La balise

  sert à introduire une section principale, permettant de structurer le texte en parties distinctes.

• La balise

  est utilisée pour les sous-sections, afin d'organiser davantage le contenu sous un titre secondaire.

• La balise met en gras un texte pour souligner son importance sémantique, sans simplement changer son style visuel, mais en indiquant sa valeur significative dans le contenu.

💡 À retenir

Les balises

,

et

structurent hiérarchiquement le contenu, facilitant la lecture et la compréhension, tandis que met en valeur les éléments clés par une importance sémantique.

📖 8. Propriétés CSS pour les bordures, coins arrondis et effets sur les liens

🔑 Notions clés & Définitions

• Propriété border : propriété qui définit l'épaisseur, le style et la couleur de la bordure d'un élément, permettant d'encadrer visuellement cet élément.
• Propriété border-radius : propriété qui arrondit les coins d'un élément, pouvant aller jusqu'à 50% pour obtenir une forme circulaire ou elliptique.
• Pseudo-classe a:hover : état d'un lien modifié lorsque la souris le survole, permettant d'appliquer des effets visuels pour indiquer l'interactivité.

📝 Points essentiels

• La propriété border permet de créer une bordure visible autour d’un élément en spécifiant son épaisseur (ex : 2px), son style (ex : solid, dashed) et sa couleur (ex : black, red).
• La propriété border-radius sert à arrondir les coins d’un élément, avec une valeur en pixels ou en pourcentage ; une valeur de 50% transforme un carré en cercle.
• La pseudo-classe a:hover modifie l’apparence d’un lien lorsque la souris le survole, ce qui peut inclure la couleur, la bordure ou d’autres effets visuels.
• Ces effets visuels sur les liens améliorent l’interactivité en signalant visuellement qu’un lien est actif ou survolé, renforçant l’expérience utilisateur.

💡 À retenir

Utiliser les propriétés CSS border, border-radius et la pseudo-classe a:hover permet d’embellir les éléments et de créer des effets dynamiques sur les liens, rendant la navigation plus intuitive et attractive.

📊 Tableaux de Synthèse

Comparatif id et class en CSS

Attribut	Utilisation	Ciblage en CSS	Unicité
id	Attribut unique pour un seul élément	Utilise # suivi du nom de l'id	Oui, doit être unique
class	Attribut réutilisable pour plusieurs éléments	Utilise . suivi du nom de la classe	Non, peut être partagé par plusieurs éléments

⚠️ Pièges & Confusions Fréquentes

1. Confusion entre l'utilisation de # pour id et . pour class en CSS.
2. Oublier que l'attribut id doit être unique sur une page.
3. Utiliser une même classe pour des éléments qui nécessitent des styles différents.
4. Ne pas respecter la spécificité plus élevée des sélecteurs id en CSS.
5. Mélanger les sélecteurs de ciblage dans le CSS, comme utiliser # pour un élément qui doit être ciblé par une classe.
6. Ne pas utiliser de noms explicites ou cohérents pour les classes et ids.
7. Oublier de mettre à jour le HTML ou le CSS si on modifie les noms de classes ou d'ids.

✅ Checklist Examen

1. Vérifier que chaque id est unique dans la page.
2. Utiliser des noms de classes descriptifs et cohérents.
3. Cibler correctement les éléments en CSS avec # pour id et . pour class.
4. Ne pas utiliser d'ids pour des styles qui doivent être réutilisables.
5. Employer des classes pour des styles communs à plusieurs éléments.
6. Respecter la hiérarchie et la spécificité des sélecteurs CSS.
7. Vérifier que le ciblage CSS correspond bien aux attributs HTML.
8. Documenter les noms de classes et d'ids pour une meilleure maintenance.
9. Éviter d'utiliser des noms de classes ou d'ids trop génériques.
10. Utiliser des préfixes ou suffixes pour organiser les classes si nécessaire.
11. Valider la cohérence entre le HTML et le CSS.