Recueil d'exemples CSS complet

Texte CSS

• Définir la couleur du texte

• Aligner le texte

• Retourner le texte

• Décorer le texte

• Définir l'intervalle entre les caractères

• Définir l'intervalle entre les mots

• Définir l'intervalle entre les lignes de texte

• Conserver les espaces et les retours chariot

• Retour à la ligne des textes à l'intérieur de l'élément

• Alignement vertical de l'image dans le texte

Police CSS

• Définir la police du texte

• Définir la taille de la police

• Définir le style de la police

• Définir la variante de la police

• Définir la police en gras

• Définir toutes les propriétés de police en une seule déclaration-Propriétés abrégées de police

Lien CSS

• Définir les styles des différents états des liens

• Supprimer le soulignement par défaut des hyperliens

• Supprimer le contour en tiret borgne des hyperliens

• Créer une boîte de lien

• Flippage d'image

Liste CSS

• Spécifier les points de liste et les numéros dans la liste

• Définir la position du marqueur d'élément de liste

• Définir l'image comme marqueur d'élément de liste

• Créer un menu déroulant simple

• Définir toutes les propriétés des listes en une seule déclaration-Attribut de raccourci des listes

Tableau CSS

• Définir la bordure du tableau

• Spécifier la taille du tableau

• Créer un meilleur tableau en pliant les bordures du tableau

• Définir l'alignement horizontal du texte dans les cellules du tableau

• Définir l'alignement vertical du contenu

• Spécifier comment afficher les cellules vides

• Spécifier le remplissage des cellules du tableau

• Spécifier l'algorithme de mise en page du tableau-Automatique ou fixe

• Définir la position du titre du tableau

Arrière-plan CSS

• Définir la couleur de fond de l'élément

• Définir l'image comme arrière-plan de l'élément

• Répéter l'image de l'arrière-plan horizontalement ou verticalement

• Spécifier la position de l'image de l'arrière-plan

• Arrière-plan fixe, ne pas le faire glisser avec les éléments contenus

• Définir toutes les propriétés des arrière-plans en une seule fois-Attribut de raccourci des arrière-plans

• Définir la taille de l'image de l'arrière-plan

• Définir la coupe de l'arrière-plan

• Définir l'origine de l'arrière-plan

• Ajouter plusieurs arrière-plans à l'élément

Unités CSS

• Utiliser des unités absolues (par exemple, px, pt, cm, etc.)

• Utiliser des unités relatives (par exemple, em, ex, %, etc.)

Taille CSS

• Définir la largeur et la hauteur de l'élément

• Définir la largeur et la hauteur maximales de l'élément

• Définir la largeur et la hauteur minimales de l'élément

• Contrôler le débordement

Alignement CSS

• Alignement des éléments de texte et des éléments en ligne dans les éléments en bloc

• Centrer les éléments en bloc en utilisant les attributs de marge

• Aligner les éléments horizontalement en utilisant l'attribut float

• Aligner les éléments en horizontal et vertical en utilisant l'attribut position

• Prévenir l'effondrement du parent avec l'attribut clear

• Créer un menu horizontal simple

Positionnement CSS

• Placer l'élément par rapport à la fenêtre du navigateur

• Positionner l'élément par rapport à son élément parent

• Positionner l'élément par rapport à sa position normale

• Utiliser z-Les éléments en surbrillance overlapping avec l'attribut index

Affichage CSS

• Masquer l'élément en utilisant l'attribut visibility

• Supprimer l'élément du DOM en utilisant l'attribut display

• Afficher l'élément comme un élément en ligne

• Afficher l'élément comme un élément en bloc

• Plier les éléments de tableau

Bordures et contours CSS

• Dessiner une bordure autour de l'élément

• Dessiner une bordure autour des côtés de l'élément

• Définir différents styles pour les bordures

• Définir toutes les propriétés des bordures en une seule fois-Attribut de raccourci des bordures

• Créer des coins arrondis autour de l'élément

• Créer une bordure en utilisant une image

• Dessiner un contour autour de l'élément

• Dessiner une bordure autour de l'élément sans affecter les éléments environnants

Marges et remplissage CSS

• Définir les marges de chaque côté de l'élément

• Définir toutes les propriétés des marges dans une seule déclaration-Attribut de raccourci des marges

• Définir le remplissage des bords de l'élément

• Définir toutes les propriétés de remplissage en une seule fois-Attribut de raccourci de remplissage

L'opacité CSS

• Définir la transparence de l'élément

• Effet de basculement d'image et transparence

• Le texte dans une boîte transparente

Le contenu généré par CSS

• Spécifier les guillemets

• Les parties et les catégories numérotées automatiquement

• Utilisez CSS pour insérer du contenu généré

Les pseudo-classes CSS

• Définir des styles pour différents états des liens hypertextes

• Utilisez le pseudo-classe :focus pour appliquer un style aux éléments de formulaire au pointeur

• Utilisation de :first-Le pseudo-classe child applique un style aux premiers éléments enfants de l'élément

• Utilisation de :first-Définir le style du dernier élément enfant de l'élément avec la pseudo-classe child

• Utilisation de :nth-La pseudo-classe child pour l'élément nth-Définir le style child

• Utiliser la pseudo-classe :lang() pour définir le style pour une langue spécifique

• Utiliser les pseudo-classes avec les sélecteurs

Pseudo-éléments CSS

• Utilisation de:: first-L'élément pseudo:: letter crée un effet de premier mot en tombée

• Utilisation de:: first-L'élément pseudo:: first ligne de texte réglé de différentes manières

• Insérer du contenu avant ou après l'élément en utilisant les pseudo-éléments:: before ou:: after

• Utiliser un pseudo-élément dans une classe

CSS3Dégradé

• Créer un dégradé linéaire de haut en bas

• Créer un dégradé linéaire de gauche à droite

• Créer un dégradé linéaire suivant la diagonale

• Définir la direction du dégradé linéaire en utilisant un angle

• Créer un dégradé linéaire en utilisant plusieurs marqueurs de couleur

• Définir l'arrêt de position de la couleur dans la création du dégradé

• Dégradé linéaire répété

• Créer un dégradé radial

• Définir la forme du dégradé radial

• Définir la taille du dégradé radial

• Dégradé radial répété

• Utiliser la transparence pour les dégradés

CSS3Ombre

• Créer un effet d'ombre de boîte

• Ajouter plusieurs ombres de boîte à la boîte de l'élément

• Créer un effet d'ombre de texte

CSS3 2Transformation D

• Utilisation de la méthode translate() pour déplacer les éléments

• Utilisation de la méthode Rotate() pour tourner les éléments

• Utilisation de la méthode scale() pour agrandir ou réduire la taille des éléments

• Application de la méthode matrix()2Transformation D

• Appliquer plusieurs transformations à un élément

CSS3 3Transformation D

• Utilisation de translate3Méthode d() appliquée pour déplacer les éléments dans l'espace 3D

• Utilisation de rotate3Méthode d() appliquée pour tourner les éléments dans l'espace 3D

• Utilisation de scale3Méthode d() appliquée pour agrandir ou réduire les éléments dans l'espace 3D

• Utilisation de matrix3Application de la méthode d()3Transformation D

• Appliquer plusieurs3Transformation D appliquée aux éléments

CSS3Transition

• Appliquer l'effet de transition à la couleur de fond

• Appliquer l'effet de transition à plusieurs propriétés

• Définir toutes les propriétés de transition en une fois-Propriétés de raccourci de transition

CSS3Animation

• Éléments animés sur les pages web

• Définir les claveaux dans la création de l'animation

• Définir toutes les propriétés d'animation en une fois-Propriétés de raccourci d'animation

CSS3Layout en colonnes multiples

• Créer un layout en colonnes multiples

• Définir le nombre de colonnes ou la largeur

• Définir l'espace entre les colonnes

• Ajouter des règles ou des lignes verticales entre les colonnes