Exemples CSS


Exemple CSS

Arrière-plan CSS

Définir la couleur d'arrière-plan de la page

Définir la couleur d'arrière-plan des différents éléments

Définir une image comme arrière-plan de la page

Mauvaise image d'arrière-plan

Comment répéter l'image d'arrière-plan dans le sens horizontal

Comment positionner l'image d'arrière-plan

Une image d'arrière-plan fixe ( cette image ne défilera pas avec le reste de la page)

Définissez toutes les propriétés d'arrière-plan dans une seule instruction

Exemple d'arrière-plan avancé


Explication des propriétés d'arrière-plan

Texte CSS

Définir la couleur du texte pour différents éléments

Alignement du texte

Supprimer le soulignement du lien

Décorer le texte

Lettres de contrôle dans le texte

Texte en retrait

Spécifie la distance entre les caractères Espace

spécifie l'espace entre les lignes

définit la direction du texte de l'élément

Augmenter l'espace entre les mots

Désactiver l'habillage du texte dans un élément

Alignement vertical des images dans le texte


Explication de l'attribut Texte

Police CSS

Définir la police du texte

Définissez la taille de la police

Définissez la taille de la police en utilisant px

Définissez la taille de la police en utilisant em

Définir la taille de la police en utilisant le pourcentage et em

Définir le style de police

Définir la transformation de la police

Définissez l'épaisseur de la police

Définissez toutes les propriétés de la police dans une seule instruction


Explication de l'attribut Police

Lien CSS

est un lien visité/non visité Ajouter différentes couleurs

Utiliser la décoration du texte sur le lien

Spécifiez la couleur de fond du lien

Ajouter d'autres styles vers des hyperliens

Avancé - Créer une boîte de liens


attribut de lien Expliquer

Liste CSS

Toutes les différentes balises d'éléments de liste dans une liste

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

Définir une image comme marqueur d'élément de liste à l'aide d'une solution multi-navigateurs

Définir toutes les listes dans une seule instruction Attributs

css supprimer l'élément de liste style par défaut li


Explication des attributs de liste

Table CSS

Spécifie l'élément th, td d'un tableau, ajoutez une bordure noire

Utiliser border-collapse

Spécifiez la largeur et la hauteur du tableau

Définir le contenu Alignement horizontal (alignement du texte)

Définir l'alignement vertical du contenu (alignement vertical)

Spécifier le remplissage des éléments TH et TD

Spécifier la couleur de la bordure du tableau

Définir la position du titre du tableau

Créer un tableau fantaisie


Explication de propriétés de la table

Modèle de boîte CSS

Spécifiez la largeur totale de l'élément à 250 pixels

Utilisez la solution Crossbrowser pour spécifier que la largeur totale de l'élément est de 250 pixels


Explication du modèle de boîte

Bordure CSS

Définir quatre La largeur de chaque bordure

Définir la largeur de la bordure supérieure

Définir la largeur de la bordure inférieure

Définir la largeur de la bordure gauche

Définir la largeur de la bordure droite


Définir le style des quatre bordures

Définir le style de la bordure supérieure

Définir le style de la bordure inférieure

Définir le style de la bordure gauche

Définir le style de la bordure droite


Définissez la couleur des quatre bordures

Définissez la couleur de la bordure supérieure

Définissez la couleur de la bordure inférieure

Définissez la couleur de la bordure gauche

Définir la couleur de la bordure droite


Toutes les bordures dans une seule instruction Propriétés


Définir des bordures différentes de chaque côté

Toutes les bordures supérieures dans une seule déclaration Propriété

Le tout sous une seule déclaration Propriétés de bordure

Toutes les propriétés de bordure gauche dans une seule déclaration

Toutes les propriétés de bordure de droits dans une seule déclaration


Explication des propriétés de bordure

Aperçu CSS

Tracer une ligne autour d'un élément (contour)

Définir le style du contour

Définir la couleur du contour

Définir la largeur du contour


Explication des attributs de contour

Marges CSS

Spécifier les marges d'un élément

Attribut d'abréviation de marge

La valeur définie pour la marge supérieure du texte est en centimètres

Utiliser Définissez le bord inférieur du texte à l'aide d'une valeur en pourcentage

Définissez la marge gauche du texte en utilisant une valeur en centimètres


Explication de l'attribut Margin

Remplissage CSS

Définir le remplissage gauche de l'élément

Définir le remplissage droit partie de l'élément Padding

Définit le remplissage supérieur d'un élément

Définit le remplissage inférieur d'un élément

Toutes les propriétés de remplissage dans une seule déclaration


Explication de l'attribut padding

Regroupement et imbrication CSS

Sélecteur de groupe

Sélecteur imbriqué


Explication du regroupement et de l'imbrication

Dimensions CSS

Définissez la taille de l'image à l'aide valeurs en pixels Hauteur

Utilisez le pourcentage pour définir la hauteur de l'image

Utilisez la valeur en pixels pour définir la largeur de l'élément

Utilisez le pourcentage pour définir la largeur de l'élément

Définir la hauteur maximale de l'élément

Définir la largeur maximale de l'élément en utilisant des valeurs de pixels

Définir la largeur maximale de l'élément en utilisant des pourcentages

Définir la hauteur minimale de l'élément

Utiliser les valeurs en pixels pour définir la largeur minimale d'un élément

Utiliser des pourcentages pour définir la largeur minimale d'un élément


Explication des attributs de taille

Affichage CSS

Comment masquer un élément (visibilité:caché)

Comment ne pas afficher un élément (display:none)

Comment afficher le contenu d'un élément Comment afficher un élément bloc d'un élément

Explication des propriétés

Positionnement CSS
La position de l'élément par rapport à la fenêtre du navigateur

Positionnement relatif de l'élémentPositionnement absolu de l'élément

Éléments superposés

Définir la forme de l'élément

Comment utiliser les barres de défilement pour afficher le contenu de débordement dans l'élément

Comment configurer le débordement automatique du navigateur manipulation

Définir le haut de l'image à l'aide des valeurs de pixels

Définir le bas de l'image à l'aide des valeurs de pixels

Définir le côté gauche de l'image à l'aide des valeurs de pixels

Définissez le côté gauche de l'image à l'aide des valeurs de pixels Droite

Changer le curseur

Explication des attributs de positionnement

CSS float
Utilisez simplement l'attribut float

Ajoutez des bordures et des marges à l'image et faites-la flotter à gauche du paragraphe Faites flotter le titre et l'image vers la droite

Laissez le paragraphe faire flotter la première lettre vers la gauche

Utilisez l'attribut float pour créer une galerie d'images

Activez float - effacer l'attribut

Créer un menu horizontal

Créer une page Web sans tableaux

Explication de l'attribut Float

Éléments d'alignement CSS

Utiliser le réglage central de la marge

Position gauche/droite alignement

Utilisez la solution Crossbrowser, définissez l'alignement de position gauche/droite

Alignement gauche/droite, flotteur

Utilisez la solution Crossbrowser, définissez l'alignement de position gauche/droite, flotteur


Explication des propriétés d'alignement

Contenu généré CSS

Utiliser l'URL entre parenthèses Le contenu l'attribut est inséré après chaque lien

Les numéros de chapitre et de sous-section sont "Section 1", "1.1", "1.2", etc.

L'attribut quotes précise les guillemets

Pseudo-classe CSS

Ajouter différentes couleurs d'hyperliens

Ajouter d'autres styles aux hyperliens

Utiliser : focus

:first-child - match The premier élément p

:first-child - correspond à l'élément I dans le premier élément p

:first-child - correspond à tous les éléments I dans le premier élément p Élément

utilise : lang


Explication de la pseudo-classe

Pseudo-élément CSS

Définissez la première lettre du texte sur une lettre spéciale

Définissez la première ligne de texte sur une lettre spéciale

Définissez la première lettre de la première ligne de texte sur Spécial

utilisation : insérer du contenu avant un élément

utilisation : insérer du contenu après un élément


Explication des pseudo-éléments

Barre de navigation CSS

Style complet de la barre de navigation verticale

Style complet de la barre de navigation horizontale


Explication de la barre de navigation

Galerie d'images CSS

Galerie d'images


Galerie d'images expliquée

Opacité des images CSS

Création d'images transparentes - effet de survol

Créer une boîte transparente avec une image de fond et un texte


Opacité de l'image expliquée

Assemblage d'images CSS

Assemblage d'images

Liste de navigation pour l'assemblage d'images

Effet de survol et assemblage d'images


Explication de l'assemblage d'images

Sélecteur d'attribut CSS

Sélectionner les éléments avec l'attribut titre

Sélectionner le titre = un élément avec une valeur spécifique

Sélectionnez un titre = un élément avec une valeur spécifique (utilisez (~) pour séparer les attributs et les valeurs)

Sélectionnez un titre = un élément avec une valeur spécifique (utilisez (|) pour attributs et valeurs séparés) Valeur)

Explication du sélecteur d'attribut

Sélecteur d'attribut CSS

  • CSS chargement de la barre de progression

  • Style de pagination CSS

  • Barre de progression CSS

  • Exemple d'informations d'invite CSS

  • Effet de survol d'image de superposition de texte CSS

  • Effet de survol d'image de superposition de texte CSS - de haut en bas

  • Effet de survol d'image de superposition de texte CSS – de bas en haut

  • Effet de survol d'image de superposition de texte CSS – de droite à gauche

  • Texte CSS Effet de survol d'image de superposition – De gauche à droite

  • Effet de survol d'image de superposition de texte CSS – Fondu à transparent

  • Groupe de boutons verticaux CSS

  • Groupe de boutons CSS

  • Effet d'animation de chargement CSS

  • Effet d'animation de chargement CSS 2

  • Chargement CSS (chargement) Effet d'animation 3

  • Chargement CSS (chargement) Effet d'animation 4

  • Boîte de recherche dynamique CSS

  • Carte d'informations utilisateur CSS

  • Style de la carte CSS

  • Styles de la page précédente et de la page suivante CSS

  • CSS diverses boîtes d'informations rapides

  • CSS trois styles de liste de prix

  • Style de commutateur CSS

  • CSS pour centrer le DIV horizontalement

  • Flèches CSS à quatre directions haut, bas, gauche et droite

  • Formulaire de commentaires CSS

  • Barre de menu d'icônes de police CSS géniale

  • Exemple de style de navigation supérieure CSS

  • Effet de style de note autocollante CSS

  • Menu à défilement horizontal CSS

  • Menu vertical CSS

  • Menu à défilement vertical CSS

  • Barre de menu fixe CSS

  • Formulaire de connexion CSS réactif

  • CSS barre de menu inférieure fixe

  • Menu déroulant CSS

  • Alignement du contenu déroulant CSS

  • Menu déroulant de la barre de navigation CSS

  • Barre de navigation CSS avec champ de recherche

  • Barre de navigation CSS avec champ de recherche - Avec bouton d'envoi

  • CSS avec barre de navigation de recherche - avec mention icône de recherche

  • Barre de navigation CSS fixe à gauche

  • CSS barre de navigation fixe à gauche - hautement adaptative

  • Modèle de formulaire de contact HTML/CSS/JS (avec carte Baidu)

  • Concevez une page Web avec CSS