Fiche de révision : CSS et mise en forme web

📋 Plan du Cours

1. Rôle et insertion du CSS
2. Règles, commentaires et sélecteurs
3. Classes, identifiants et cascade
4. Texte, polices et alignement
5. Couleurs et arrière-plans
6. Bordures, ombres et transparence
7. Pseudo-classes interactives

📖 1. Rôle et insertion du CSS

🔑 Notions clés & Définitions

• CSS : Permet de mettre en forme le code HTML, notamment les couleurs, les polices, les tailles, les images de fond et la mise en page.

📝 Points essentiels

• Pour relier un fichier CSS externe à une page HTML, il faut placer dans l’en-tête un élément link avec rel="stylesheet" et href="css/style.css".

• Le CSS peut être écrit:

  • dans un fichier .css
  • dans l’en-tête <head> du fichier HTML
  • dans les balises HTML via l’attribut style

💡 Astuce mémo

CSS externe réutilisable, CSS inline à éviter

📖 2. Règles, commentaires et sélecteurs

🔑 Notions clés & Définitions

• Règle CSS : Contient un sélecteur, des propriétés CSS et une valeur pour chaque propriété.

★ À maîtriser

• Le sélecteur universel * sélectionne toutes les balises.

Compléments

• Les commentaires CSS sont multilignes et se placent entre /* et */.

• Le sélecteur p strong sélectionne les balises strong situées à l’intérieur d’une balise p, #navigation a sélectionne les balises a à l’intérieur d’un élément ayant l’identifiant navigation, et h2 + p sélectionne le premier paragraphe situé après un titre h2.

💡 Astuce mémo

Sélecteur → propriété → valeur

📖 3. Classes, identifiants et cascade

🔑 Notions clés & Définitions

• Attribut id : Identifie un élément HTML qui ne peut être utilisé qu’une fois dans le code HTML et se cible en CSS avec le signe #.

📝 Points essentiels

📌 Lorsque plusieurs déclarations CSS s’appliquent, l’ordre des déclarations est important dans la cascade CSS.

📌 L’attribut class permet d’appliquer une même classe CSS à plusieurs balises HTML, en utilisant un sélecteur précédé d’un point, comme .classe1.

💡 Astuce mémo

Classe répétable, identifiant unique

📖 4. Texte, polices et alignement

★ À maîtriser

📌 La propriété font-family accepte plusieurs polices de secours et se termine généralement par une police disponible comme serif ou sans-serif.

📌 La propriété text-align accepte left, center, right et justify, mais l’alignement ne fonctionne que sur les balises de type block comme p, div et les titres.

• La propriété font-size accepte des tailles absolues comme 12px, 5mm ou 0.5cm, ainsi que des tailles relatives comme 1em, 1.3ex ou 130 %.

Compléments

• Les propriétés de mise en forme du texte sont:
  • font-style
  • font-weight
  • text-decoration

📖 5. Couleurs et arrière-plans

★ À maîtriser

📌 La propriété background-color définit la couleur de fond d’un élément, notamment celle de la page avec body ou d’une portion de texte avec mark.

• La propriété color accepte des couleurs prédéfinies, une notation hexadécimale comme #EE5B47 ou une notation rgb comme rgb(235,98,123).

• La propriété background-image permet d’ajouter une image de fond avec url(), tandis que background-attachment: fixed fixe le fond et background-repeat accepte repeat, no-repeat, repeat-x ou repeat-y.

Compléments

📌 La super-propriété background permet de combiner plusieurs propriétés d’arrière-plan et plusieurs images de fond dans une même déclaration.

📖 6. Bordures, ombres et transparence

★ À maîtriser

📌 La propriété opacity varie de 1 pour un élément totalement opaque à 0 pour un élément totalement transparent.

• La super-propriété border peut recevoir la largeur, la couleur et le type de bordure, par exemple border: 3px blue double.

• La propriété box-shadow accepte le décalage horizontal, le décalage vertical, l’adoucissement du dégradé et la couleur, tandis que text-shadow utilise les mêmes paramètres pour l’ombre du texte.

Compléments

• La propriété background-color: rgba(255, 0, 0, 0.5) définit un rouge à moitié transparent.

• La propriété border-radius arrondit les angles d’un élément, par exemple avec border-radius: 20px.

📖 7. Pseudo-classes interactives

★ À maîtriser

📌 La pseudo-classe :hover modifie l’apparence d’un élément lorsque le curseur est placé dessus et peut être utilisée avec n’importe quelle balise ou classe.

Compléments

• La pseudo-classe :active s’applique au moment du clic et sert en pratique principalement pour les liens.

• La pseudo-classe :focus indique qu’un élément a été sélectionné, notamment par l’affichage d’une bordure pointillée autour de lui.

• La pseudo-classe :visited indique qu’un lien a déjà été visité.

💡 Astuce mémo

Survol → clic → focus → visite

📊 Tableaux de synthèse

Modes d’insertion du CSS