Exemple CSS
- Page précédente Élément en grille CSS
- Page suivante Quiz CSS
Sélecteurs CSS
Utilisation CSS
Commentaires CSS
Couleurs CSS
Arrière-plans CSS
- Définir la couleur de fond de la page
- Définir la couleur de fond pour différents éléments
- Définir l'image comme fond de page
- Comment répeter l'image de fond uniquement dans la direction horizontale
- Comment positionner l'image de fond
- Image de fond fixe (Cette image ne défile pas avec le reste de la page)
- Tous les attributs de fond dans une seule déclaration
- Exemple avancé de fond
Bordures CSS
- Définir l'épaisseur des quatre bords
- Définir l'épaisseur du bord supérieur
- Définir l'épaisseur du bord inférieur
- Définir l'épaisseur du bord gauche
- Définir l'épaisseur du bord droit
- Définir le style des quatre bords
- Définir le style du bord supérieur
- Définir le style du bord inférieur
- Définir le style du bord gauche
- Définir le style du bord droit
- Définir la couleur des quatre bords
- Définir la couleur du bord supérieur
- Définir la couleur du bord inférieur
- Définir la couleur du bord gauche
- Définir la couleur du bord droit
- Tous les attributs de bord dans une seule déclaration
- Ajouter des arrondis aux angles de l'élément
- Définir différents bords pour chaque côté
- Tous les attributs de bord supérieur dans une seule déclaration
- Tous les attributs de bord inférieur dans une seule déclaration
- Tous les attributs de bord gauche dans une seule déclaration
- Tous les attributs de bord droit dans une seule déclaration
Marge CSS
- Définir différentes marges extérieures pour chaque côté de l'élément
- Utiliser un raccourci de marge avec quatre valeurs
- Utiliser un raccourci de marge avec trois valeurs
- Utiliser un raccourci de marge avec deux valeurs
- Utiliser un raccourci de marge avec une seule valeur
- Définir la marge extérieure sur auto pour centrer les éléments dans le conteneur
- Permettre à la marge extérieure gauche d'hériter de l'élément parent
- Fusion des marges extérieures
Marge interne CSS
- Définir différents espaces intérieurs pour chaque côté de l'élément
- Utiliser un raccourci d'espace intérieur avec quatre valeurs
- Utiliser un raccourci d'espace intérieur avec trois valeurs
- Utiliser un raccourci d'espace intérieur avec deux valeurs
- Utiliser un raccourci d'espace intérieur avec une seule valeur
- Espace intérieur et largeur de l'élément (ne pas définir box-sizing)
- Espace intérieur et largeur de l'élément (définir box-sizing)
- Définir l'espace intérieur gauche de l'élément
- Définir l'espace intérieur droit de l'élément
- Définir l'espace intérieur supérieur de l'élément
- Définir l'espace intérieur inférieur de l'élément
Hauteur / Largeur CSS
- Définir la hauteur et la largeur de l'élément
- Définir la largeur maximale de l'élément
- Définir la hauteur et la largeur de différents éléments
- Utiliser pourcent pour définir la hauteur et la largeur de l'image
- Définir la largeur minimale et maximale de l'élément
- Définir la hauteur minimale et maximale de l'élément
Modèle de boîte CSS
Profil CSS
Texte CSS
- Définir la couleur du texte pour différents éléments
- Aligner le texte
- Supprimer la ligne sous le lien
- Ornements de texte
- Contrôler la casse des lettres dans le texte
- Retirer l'indentation du texte
- Définir l'intervalle de caractère
- Définir l'intervalle de ligne
- Définir la direction du texte de l'élément
- Augmenter l'espacement des lettres
- Définir l'ombre de texte de l'élément
- Désactiver le retour à la ligne dans l'élément
- Aligner verticalement l'image dans le texte
Polices CSS
- Définir la police du texte
- Définir la taille de la police
- Définir la taille de la police en px
- Définir la taille de la police en em
- Définir la taille de la police en pourcentage et en em
- Définir le style de la police
- Définir la variante de la police
- Définir la gravité de la police
- Tous les attributs de police dans une seule déclaration
Liens CSS
Listes CSS
- Tous les différents marqueurs de liste dans une liste
- Utiliser une image comme marqueur de liste
- Positionner le marqueur de liste
- Supprimer la configuration par défaut de la liste
- Tous les attributs de liste dans une seule déclaration
- Définir le style de liste en utilisant la couleur
- Liste avec bordure pleine largeur
Tableaux CSS
- Définir une bordure noire pour les éléments table, th et td
- Utiliser border-collapse
- Bordure d'un seul côté du tableau
- Définir la largeur et la hauteur du tableau
- Définir l'alignement horizontal du contenu (text-align)
- Définir l'alignement vertical du contenu
- Définir la marge interne des éléments th et td
- Séparateur horizontal
- Tableau avec survol
- Tableau en barres
- Définir la couleur de la bordure du tableau
- Définir la position du titre du tableau
- Tableau responsive
- Créer un tableau esthétique
Affichage CSS
- Comment masquer un élément (visibility:hidden)
- Comment ne pas afficher un élément (display:none)
- Comment afficher un élément en bloc comme un élément en ligne
- Comment afficher un élément en ligne comme un élément en bloc
- Comment utiliser CSS et JavaScript ensemble pour afficher ou masquer du contenu
Positionnement CSS
- Placer l'élément par rapport à la fenêtre du navigateur
- Placer l'élément par rapport à sa position normale
- Positionnement absolu de l'élément
- Positionnement adhésif
- Éléments superposés
- Définir la forme de l'élément
- Définir le bord supérieur de l'image en utilisant la valeur en pixels
- Définir le bord inférieur de l'image en utilisant la valeur en pixels
- Définir l'extrémité gauche de l'image en utilisant une valeur en pixels
- Définir l'extrémité droite de l'image en utilisant une valeur en pixels
- Positionnement de texte d'image (coin supérieur gauche)
- Positionnement de texte d'image (coin supérieur droit)
- Positionnement de texte d'image (coin inférieur gauche)
- Positionnement de texte d'image (coin droit inférieur)
- Positionnement de texte d'image (centré)
Débordement CSS
- Utilisation de overflow: visible - Le débordement n'est pas tronqué. Il est rendu en dehors de la boîte de l'élément.
- Utilisation de overflow: hidden - Le débordement est tronqué, et le reste du contenu est caché.
- Utilisation de overflow: scroll - Le débordement est tronqué, mais une barre de défilement est ajoutée pour voir le reste du contenu.
- Utilisation de overflow: auto - Si le débordement est tronqué, ajoutez une barre de défilement pour voir le reste du contenu.
- Utilisation de overflow-x et overflow-y
Flottage CSS
- Utilisation simple de la propriété float
- Flottage d'une image avec bordure et marge vers la droite du paragraphe
- Flottage d'une image avec un titre à droite
- Flottage du premier caractère du paragraphe à gauche
- Fermeture du flot (via propriété clear)
- Fermeture du flot (via hack clearfix)
- Création de boîtes flottantes
- Création d'images côte à côte
- Création de boîtes d'égalité (via flexbox)
- Création d'un menu horizontal
- Création d'un exemple de mise en page web
inline-block CSS
Élément aligné CSS
- Centrage via marge externe
- Centrage de texte horizontal
- Centrage d'image horizontal
- Alignement à gauche/droite via position
- Alignement à gauche/droite via position - Solution de navigation entre navigateurs
- Alignement à gauche/droite via float
- Alignement à gauche/droite via float - Solution de navigation entre navigateurs
- Centrage vertical via padding
- Centrage vertical et horizontal
- Centrage vertical via line-height
- Centrage vertical et horizontal via position
Combinateur CSS
Pseudo-classes CSS
- Ajout de couleurs différentes aux liens
- Ajout d'autres styles pour les liens
- Utilisation de :focus
- :first-child - Correspond à la première occurrence de l'élément p
- :first-child - Correspond à l'élément i premier dans tout élément p
- :first-child - Correspond à tous les éléments i situés dans le premier élément p enfant
- Utiliser :lang
Pseudo-éléments CSS
Génération de contenu CSS
Opacité CSS
Barre de navigation CSS
- Barre de navigation verticale avec style complet
- Barre de navigation horizontale avec style complet
- Barre de navigation verticale fixe de pleine hauteur
- Barre de navigation horizontale fixe
- Barre de navigation collée (ne fonctionne pas dans IE ou Edge 15 et versions antérieures)
- Barre de navigation supérieure réactive
- Barre de navigation latérale réactive
Liste déroulante CSS
Galeries d'images CSS
Sprite d'image CSS
Sélecteurs d'attributs CSS
- Sélectionner tous les éléments <a> avec l'attribut target
- Sélectionner tous les éléments <a> avec l'attribut target="_blank"
- Sélectionner tous les éléments avec un attribut title contenant une liste de mots séparés par des espaces, l'un des mots étant "flower"
- Sélectionner tous les éléments avec une valeur de l'attribut class commençant par "top" (doit être le mot entier)
- Sélectionner tous les éléments avec une valeur de l'attribut class commençant par "top" (ne doit pas être le mot entier)
- Sélectionner tous les éléments avec une valeur de l'attribut class se terminant par "test"
- Sélectionner tous les éléments avec une valeur de l'attribut class contenant "te"
Formulaires CSS
- Champ d'entrée de largeur complète
- Champ d'entrée rempli
- Champ d'entrée avec bord
- Champ d'entrée avec bord inférieur
- Champ d'entrée avec couleur
- Champ d'entrée au point d'entrée
- Champ d'entrée au point d'entrée 2
- Champ d'entrée avec icône
- Boîte de recherche avec animation
- Définir le style de la zone de texte
- Définir le style du menu déroulant
- Définir le style du bouton
- Formulaire réactif
Compteurs CSS
Conception de site web CSS
Coins arrondis CSS
Images de bordure CSS
Arrière-plans CSS
- Ajouter plusieurs images de fond à l'élément
- Définir la taille de l'image de fond
- Utiliser "contain" et "cover" pour redimensionner l'image de fond
- Définir la taille de l'image de fond
- Image de fond de pleine taille (couvrant complètement la zone de contenu)
- Utiliser background-origin pour définir la position de placement de l'image de fond
- Utiliser background-clip pour définir la zone de dessin de l'arrière-plan
Dégradé CSS
- Dégradé linéaire - De haut en bas
- Dégradé linéaire - De gauche à droite
- Dégradé linéaire - Diagonale
- Dégradé linéaire - Angle spécifique
- Dégradé linéaire - Plusieurs indicateurs de couleur
- Dégradé linéaire - Arc-en-ciel + texte
- Dégradé linéaire - Transparence
- Dégradé linéaire - Dégradé linéaire répété
- Dégradé radial - Distribution uniforme des indicateurs de couleur
- Dégradé radial - Intervalle différent des indicateurs de couleur
- Dégradé radial - Définir la forme
- Dégradé radial - Différents mots-clés de dimension
- Dégradé radial - Dégradé radial répété
Effet d'ombre CSS
- Effet d'ombre simple
- Ajouter une couleur à l'ombre
- Ajouter un effet de flou à l'ombre
- Texte blanc avec une ombre noire
- Ombres lumineuses rouges
- Ombres lumineuses rouges et bleues
- Texte blanc avec des ombres noires, bleues et bleues foncées
- Ajouter un box-shadow simple à l'élément
- Ajouter une couleur à box-shadow
- Ajouter des effets de couleur et de flou à box-shadow
- Créer un effet de carte en papier similaire à un texte
- Créer un effet de carte en papier similaire à un image Polaroid
Effets de texte CSS
- Spécifier comment présenter le contenu en surplus à l'utilisateur
- Comment afficher le contenu en surplus lorsque le curseur est sur l'élément
- Permettre à un texte long de se briser et de passer à la ligne suivante
- Définir les règles de saut de ligne
- Définir le mode d'écriture du texte (écriture horizontale ou verticale)
Polices web CSS
Transformations 2D CSS
- translate() - Suppression de l'élément à partir de la position actuelle
- rotate() - Rotation des éléments dans le sens des aiguilles d'une montre
- rotate() - Rotation des éléments dans le sens inverse des aiguilles d'une montre
- scale() - Agrandissement de l'élément
- scale() - Réduction de l'élément
- skewX() - Inclinaison des éléments le long de l'axe X
- skewY() - Inclinaison des éléments le long de l'axe Y
- skew() - Inclinaison des éléments le long des axes X et Y
- matrix() - Rotation, agrandissement, déplacement et inclinaison des éléments
Transformations 3D CSS
Transitions CSS
- Transition - Changement de la largeur d'un élément
- Transition - Changement de la largeur et de la hauteur d'un élément
- Définir différentes courbes de vitesse pour la transition
- Définir un décalage pour l'effet de transition
- Ajouter une transformation à l'effet de transition
- Définir toutes les propriétés de transition dans une propriété abrégée
Animations CSS
- Lié l'animation à un élément
- Animation - Changement de la couleur de fond d'un élément
- Animation - Changement de la couleur de fond et de la position d'un élément
- Animation avec décalage
- Exécuter l'animation trois fois avant de s'arrêter
- Animation éternelle
- Animation en sens inverse
- Animation alternée
- Courbe de vitesse d'animation
- Propriété abrégée d'animation
Boutons d'information CSS
Image avec style CSS
- Image arrondie
- Image circulaire
- Miniature
- Miniature en tant que lien
- Image réactive
- Texte d'image (haut gauche)
- Texte d'image (haut droit)
- Texte d'image (bas gauche)
- Texte d'image (haut droit)
- Texte d'image (centré)
- Image Polaroid
- Filtre d'image en niveaux de gris
- Avancé - Image modale réalisée par CSS et JavaScript
Object-fit CSS
Boutons CSS
- Bouton CSS de base
- Couleur du bouton
- Taille du bouton
- Bouton arrondi
- Bord de bouton coloré
- Bouton suspendu
- Bouton avec ombre
- Bouton désactivé
- Largeur du bouton
- Groupe de boutons
- Groupe de boutons avec bords
- Bouton avec animation (effet de suspension)
- Bouton avec animation (effet de touche)
- Bouton avec animation (effet de vague)
Pagination CSS
Colonnes multiples CSS
- Créez des colonnes multiples
- Définissez l'intervalle entre les colonnes
- Définissez le style des règles entre les colonnes
- Définissez la largeur des règles entre les colonnes
- Définissez la couleur des règles entre les colonnes
- Définissez la largeur, le style et la couleur des règles entre les colonnes
- Définissez combien de colonnes l'élément doit couvrir
- Définissez la largeur recommandée pour les colonnes
Interface utilisateur CSS
Variables CSS
Box Sizing CSS
Flexbox CSS
- Flexbox avec trois éléments flexibles
- Flexbox avec trois éléments flexibles - direction rtl
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- Tri des éléments flexibles
- Margin-right:auto;
- Margin:auto; = centrage parfait
- Définissez align-self sur les éléments flexibles
- Définissez la longueur de l'élément flexible par rapport à d'autres parties de l'élément flexible
- Créez une bibliothèque d'images responsive avec le flexbox
- Créez un site web responsive avec le flexbox
Requêtes média CSS
Requêtes média CSS - Plus d'exemples
- Définir différentes couleurs d'arrière-plan en fonction de la largeur de l'écran
- Menu de navigation réactif
- Colonnes réactives en utilisant la flottaison
- Colonnes réactives en utilisant le Flexbox
- Cacher des éléments via des requêtes média
- Taille de police réactive
- Bibliothèque d'images réactives
- Site web réactif
- Changement de mise en page de page en fonction de l'orientation du navigateur
- Largeur minimale à largeur maximale
Conception de site web réactif CSS
Grille CSS
- Page précédente Élément en grille CSS
- Page suivante Quiz CSS
