🌟 Guide Complet des Éléments CSS3 🌟
🌟 1) Sélecteurs CSS 🌟
Les sélecteurs servent à cibler des éléments HTML afin de leur appliquer des styles spécifiques.
Voici les principaux types :
🔹 Sélecteur universel : *
• Rôle : Sélectionne tous les éléments de la page.
• Utilisation : Souvent pour « remettre à zéro » les marges et les paddings de tous les
éléments.
• Exemple :
* {
margin: 0;
padding: 0;
}
🔹 Sélecteur d’élément (balise) : element
• Rôle : Sélectionne tous les éléments d’un certain type (par ex. tous les <p> ou tous les <h1>).
• Utilisation : Appliquer un style à un élément spécifique, peu importe où il se trouve.
• Exemple :
p {
color: blue;
}
→ Tous les <p> seront en bleu.
🔹 Sélecteur de classe : .class
• Rôle : Sélectionne tous les éléments qui ont un attribut class avec une valeur donnée.
• Utilisation : Idéal pour styliser plusieurs éléments de manière similaire.
• Exemple :
.highlight {
background-color: yellow;
}
→ Tous les éléments avec class="highlight" auront un fond jaune.
🔹 Sélecteur d’ID : #id
• Rôle : Sélectionne un seul élément ayant un id donné (unique dans la page).
• Utilisation : Pour un style unique à un élément précis.
• Exemple :
#entete {
font-size: 24px;
}
→ L’élément avec id="entete" aura une taille de police de 24px.
🔹 Sélecteur d’attribut : [attr]
• Rôle : Cible les éléments qui possèdent un attribut donné (peu importe sa valeur).
• Exemple :
input[required] {
border: 2px solid red;
}
→ Tous les <input> avec required auront une bordure rouge.
🔹 Sélecteur d’attribut avec valeur : [attr="valeur"]
• Rôle : Cible les éléments qui possèdent un attribut avec une valeur précise.
• Exemple :
a[target="_blank"] {
color: green;
}
→ Les liens qui s’ouvrent dans un nouvel onglet seront verts.
🔹 Sélecteur combiné (élément + classe) : [Link]
• Rôle : Cible les éléments <element> qui ont aussi une certaine classe.
• Exemple :
[Link] {
font-style: italic;
}
→ <h2 class="soustitre"> sera en italique.
🔹 Pseudo-classes de lien
• a:link : Lien non visité.
• a:visited : Lien déjà visité.
• a:hover : Lien survolé.
• a:active : Lien actif (clic).
Exemple :
a:link {
color: blue;
}
a:hover {
color: red;
}
🌟 2) Propriétés de mise en forme du texte 🌟
Ces propriétés permettent de personnaliser l’apparence du texte : police, taille, alignement, etc.
🔹 font-family
• Rôle : Définit la police (ou une liste de polices alternatives).
• Exemple :
body {
font-family: Arial, sans-serif;
}
🔹 font-weight
• Rôle : Épaisseur du texte.
• Valeurs possibles : normal, bold, bolder, lighter, ou valeurs numériques (100 à 900).
• Exemple :
h1 {
font-weight: bold;
}
🔹 font-style
• Rôle : Style de la police (normal ou italique).
• Valeurs possibles : normal, italic, oblique.
• Exemple :
em {
font-style: italic;
}
🔹 font-size
• Rôle : Taille du texte.
• Valeurs possibles : unités absolues (px, pt) ou relatives (em, rem, %).
• Exemple :
p {
font-size: 16px;
}
🔹 font (super-propriété)
• Rôle : Raccourci pour font-style, font-weight, font-size, font-family.
• Exemple :
p {
font: italic bold 14px Arial;
}
🔹 text-align
• Rôle : Alignement horizontal du texte.
• Valeurs possibles : left, center, right, justify.
• Exemple :
h2 {
text-align: center;
}
🔹 text-shadow
• Rôle : Ajoute une ombre au texte.
• Syntaxe : décalage-x décalage-y flou couleur.
• Exemple :
h1 {
text-shadow: 2px 2px 5px gray;
}
🔹 text-transform
• Rôle : Transformation des lettres (majuscules, minuscules).
• Valeurs possibles : uppercase, lowercase, capitalize.
• Exemple :
h1 {
text-transform: uppercase;
}
🔹 color
• Rôle : Couleur du texte.
• Exemple :
p {
color: #333333;
}
🌟 3) Propriétés des listes 🌟
Permettent de styliser les listes <ul> ou <ol>.
🔹 list-style-type
• Rôle : Définit la forme des puces ou numéros.
• Valeurs : disc, circle, square, decimal, upper-roman, none, etc.
• Exemple :
ul {
list-style-type: square;
}
🔹 list-style-position
• Rôle : Position des puces par rapport au texte.
• Valeurs : inside (à l’intérieur du bloc) ou outside (par défaut, à gauche).
• Exemple :
ul {
list-style-position: inside;
}
🔹 list-style-image
• Rôle : Utilise une image comme puce.
• Exemple :
ul {
list-style-image: url('[Link]');
}
🔹 list-style (super-propriété)
• Rôle : Raccourci pour list-style-type, list-style-position et list-style-image.
• Exemple :
ul {
list-style: square inside url('[Link]');
}
🌟 4) Propriétés d’arrière-plan (background) 🌟
Ces propriétés permettent de personnaliser l’arrière-plan des éléments HTML.
🔹 background-color
• Rôle : Définit la couleur de fond de l’élément.
• Valeurs : Couleurs en nom (red, blue), hexadécimal (#ff0000), RGB (rgb(255,0,0)),
etc.
• Exemple :
body {
background-color: #f0f0f0;
}
→ Le fond de la page sera gris clair.
🔹 background-image
• Rôle : Définit une image d’arrière-plan.
• Exemple :
div {
background-image: url('[Link]');
}
→ L’élément <div> aura l’image [Link] en fond.
🔹 background-repeat
• Rôle : Définit si l’image de fond se répète ou non.
• Valeurs :
o repeat : répète sur les deux axes (défaut).
o repeat-x : répète horizontalement.
o repeat-y : répète verticalement.
o no-repeat : pas de répétition.
• Exemple :
div {
background-repeat: no-repeat;
}
→ L’image sera affichée une seule fois.
🔹 background-size
• Rôle : Définit la taille de l’image de fond.
• Valeurs :
o auto (taille originale),
o cover (remplit tout l’élément),
o contain (contenu entier visible),
o valeurs en px, %.
• Exemple :
div {
background-size: cover;
}
→ L’image remplit le conteneur sans déformation.
🔹 background (super-propriété)
• Rôle : Regroupe les autres propriétés (color, image, repeat, size).
• Exemple :
body {
background: #f0f0f0 url('[Link]') no-repeat center/cover fixed;
}
→ Fond gris clair, image centrée, sans répétition, couvrant tout l’écran et fixe au scroll.
🌟 5) Transformation (transform) 🌟
Cette propriété applique des effets de transformation 2D ou 3D aux éléments.
🔹 transform
• Rôle : Transforme la forme, la taille ou la position d’un élément.
• Valeurs :
o rotate(angle) : rotation.
o scale(x, y) : redimensionnement.
o translate(x, y) : déplacement.
o skew(x-angle, y-angle) : inclinaison.
• Exemple :
div:hover {
transform: rotate(15deg);
}
→ Quand on survole le <div>, il tourne de 15°.
🔹 Autres exemples courants :
/* Déplacer un élément de 50px à droite et 20px en bas */
div {
transform: translate(50px, 20px);
}
/* Agrandir un élément 2 fois en largeur */
div {
transform: scale(2, 1);
}
/* Inclinaison de 20° sur X et 10° sur Y */
div {
transform: skew(20deg, 10deg);
}
🌟 6) Propriétés des images 🌟
Ces propriétés permettent d’appliquer des effets visuels aux images (et autres éléments).
🔹 filter
• Rôle : Applique des effets visuels (filtres) aux éléments (images, vidéos…).
• Valeurs possibles :
o blur(px) : flou.
o grayscale(%) : niveaux de gris.
o invert(%) : inversion des couleurs.
• Exemple :
img {
filter: grayscale(100%);
}
→ L’image sera en noir et blanc.
🌟 7) Propriétés des tableaux 🌟
Ces propriétés permettent de définir l’apparence des tableaux <table>.
🔹 table-layout
• Rôle : Contrôle le comportement du tableau concernant la largeur des colonnes.
• Valeurs possibles :
o auto (par défaut) : la largeur des colonnes dépend du contenu.
o fixed : largeur des colonnes définie par le CSS ou la première ligne.
• Exemple :
table {
table-layout: fixed;
}
→ Le tableau aura une largeur uniforme pour toutes ses colonnes.
🔹 border-collapse
• Rôle : Contrôle la façon dont les bordures des cellules s’affichent.
• Valeurs possibles :
o separate (par défaut) : bordures distinctes.
o collapse : les bordures fusionnent.
• Exemple :
table {
border-collapse: collapse;
}
→ Bordures fusionnées, aspect plus épuré.
🌟 8) Propriétés des boîtes 🌟
Ces propriétés s’appliquent à la boîte CSS d’un élément : dimensions, position, ombres, marges, etc.
🔹 width et height
• Rôle : Définit la largeur et la hauteur de l’élément.
• Valeurs possibles : px, %, em…
• Exemple :
div {
width: 300px;
height: 200px;
}
→ <div> aura une taille fixe.
🔹 position
• Rôle : Définit le mode de positionnement.
• Valeurs :
o static (par défaut) : élément dans le flux normal.
o relative : déplacement par rapport à sa position initiale.
o absolute : hors flux, par rapport à l’élément parent positionné.
o fixed : par rapport à la fenêtre (ne bouge pas au scroll).
o sticky : comportement collant (reste fixe lors du scroll dans la zone).
• Exemple :
div {
position: absolute;
top: 20px;
left: 30px;
}
🔹 float
• Rôle : Fait flotter un élément à gauche ou à droite de son conteneur.
• Valeurs : left, right, none.
• Exemple :
img {
float: right;
}
→ L’image sera à droite et le texte l’enveloppera.
🔹 padding
• Rôle : Ajoute de l’espace à l’intérieur de l’élément.
• Exemple :
p {
padding: 10px;
}
🔹 margin
• Rôle : Ajoute de l’espace autour de l’élément.
• Exemple :
p {
margin: 20px;
}
🔹 box-shadow
• Rôle : Ajoute une ombre à l’élément.
• Syntaxe : décalage-x décalage-y flou couleur.
• Exemple :
div {
box-shadow: 4px 4px 6px rgba(0,0,0,0.3);
}
→ Ombre discrète sous le bloc.
🔹 display
• Rôle : Définit le type de boîte.
• Valeurs : block, inline, inline-block, none, etc.
• Exemple :
span {
display: block;
}
🔹 top, bottom, left, right
• Rôle : Positionne un élément positionné (relative, absolute, fixed, sticky).
• Exemple :
div {
position: fixed;
bottom: 0;
right: 0;
}
🔹 overflow
• Rôle : Définit ce qui se passe si le contenu dépasse la boîte.
• Valeurs : visible, hidden, scroll, auto.
• Exemple :
div {
overflow: auto;
}
🔹 opacity
• Rôle : Contrôle la transparence.
• Valeurs : de 0 (transparent) à 1 (opaque).
• Exemple :
img {
opacity: 0.6;
}
🌟 9) Propriétés des bordures 🌟
Ces propriétés définissent l’apparence des bordures d’un élément.
🔹 border-color
• Rôle : Couleur de la bordure.
• Exemple :
div {
border-color: red;
}
🔹 border-style
• Rôle : Style de la bordure.
• Valeurs : solid, dashed, dotted, double, none…
• Exemple :
div {
border-style: dashed;
}
🔹 border-width
• Rôle : Largeur de la bordure.
• Valeurs : thin, medium, thick ou en px.
• Exemple :
div {
border-width: 2px;
}
🔹 border-radius
• Rôle : Arrondir les coins.
• Exemple :
div {
border-radius: 10px;
}
→ Coins arrondis de 10 px.
🔹 border (super-propriété)
• Rôle : Raccourci pour border-width, border-style, border-color.
• Exemple :
div {
border: 2px solid black;
}
Parfait ! Voici la dernière partie ultra détaillée pour les sections 10 et 11 :
🌟 10) Transition 🌟
Les transitions permettent d’ajouter un effet d’animation progressif lors du changement d’état
d’un élément (par ex. couleur au survol, taille, opacité…).
🔹 transition-property
• Rôle : Spécifie quelle propriété CSS va être animée.
• Valeurs possibles : nom de la propriété CSS (background-color, width, all…).
• Exemple :
div {
transition-property: background-color;
}
→ Seule la couleur de fond sera animée.
🔹 transition-duration
• Rôle : Temps que va durer la transition.
• Valeurs : en s (secondes) ou ms (millisecondes).
• Exemple :
div {
transition-duration: 0.5s;
}
🔹 transition-delay
• Rôle : Temps d’attente avant de commencer la transition.
• Valeurs : en s ou ms.
• Exemple :
div {
transition-delay: 0.2s;
}
→ L’animation commencera après 0,2 seconde.
🔹 transition (super-propriété)
• Rôle : Raccourci pour tout définir en une seule ligne :
property duration timing-function delay.
• Exemple :
div {
transition: background-color 0.5s ease 0.2s;
}
→ Fond change en 0,5 s avec 0,2 s de délai.
🔹 Exemple complet :
<style>
div {
background-color: blue;
transition: background-color 0.3s ease;
}
div:hover {
background-color: green;
}
</style>
<div>Survolez-moi !</div>
→ Quand on survole le <div>, il passe progressivement de bleu à vert.
🌟 11) Animation 🌟
Les animations permettent d’exécuter une série d’étapes CSS (keyframes) de manière fluide.
🔹 @keyframes
• Rôle : Définit les différentes étapes de l’animation.
• Syntaxe :
@keyframes nomAnimation {
0% { propriété: valeur; }
50% { propriété: valeur; }
100% { propriété: valeur; }
}
• Exemple :
@keyframes glisse {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
→ Déplace un élément de 0 à 100px.
🔹 animation-name
• Rôle : Nom de l’animation à utiliser (défini par @keyframes).
• Exemple :
div {
animation-name: glisse;
}
🔹 animation-duration
• Rôle : Durée totale de l’animation.
• Exemple :
div {
animation-duration: 2s;
}
🔹 animation-delay
• Rôle : Temps avant que l’animation démarre.
• Exemple :
div {
animation-delay: 1s;
}
🔹 animation-iteration-count
• Rôle : Nombre de répétitions.
• Valeurs : 1 (une seule fois), infinite (en boucle).
• Exemple :
div {
animation-iteration-count: infinite;
}
🔹 animation-direction
• Rôle : Sens de lecture de l’animation.
• Valeurs :
o normal : de début à fin (par défaut).
o reverse : de fin à début.
o alternate : alterne normal et reverse.
• Exemple :
div {
animation-direction: alternate;
}
🔹 animation (super-propriété)
• Rôle : Raccourci pour :
name duration timing-function delay iteration-count direction.
• Exemple :
div {
animation: glisse 2s ease 0s infinite alternate;
}
→ Animation fluide et infinie alternant le sens.
🔹 Exemple complet d’animation :
<style>
@keyframes clignote {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
p {
animation: clignote 1s infinite;
}
</style>
<p>Ce texte clignote !</p>
→ Le texte <p> disparaît puis réapparaît toutes les secondes.