Référence W3.CSS
Classes W3.CSS
| Classer |
Définit |
|
| conteneur w3 |
Conteneur HTML avec rembourrage gauche et droit de 16px |
|
| |
Utilisé comme en-tête |
|
| |
Utilisé comme pied de page |
|
| panneau w3 |
Conteneur HTML avec un rembourrage gauche et droit de 16 px et une marge supérieure et inférieure de 16 px |
|
| |
Utilisé pour afficher une note |
|
| |
Utilisé pour afficher un devis |
|
| badge w3 |
Insigne circulaire |
|
| w3 jour |
Balise rectangulaire |
|
| w3-ul |
Liste non ordonnée |
|
| conteneur d'affichage w3 |
Conteneur pour w3-display- classes (permet le positionnement des éléments à l'intérieur du conteneur) |
|
| bloc w3 |
Classe qui peut être utilisée pour définir une pleine largeur pour n'importe quel élément |
|
| code w3 |
Conteneur de code |
|
| w3-codespan |
Conteneur de code en ligne (pour les extraits de code) |
|
| contenu w3 |
Conteneur pour contenu centré de taille fixe |
|
| voiture w3 |
Conteneur pour contenu réactif centré sur la taille |
|
| w3-étirement |
Classe qui supprime les marges droite et gauche (particulièrement utile pour étirer les lignes rembourrées (w3-row-padding)) |
|
| Classer |
Définit |
|
| table w3 |
Conteneur pour un tableau HTML |
|
| w3-rayé |
Tableau rayé |
|
| bordure w3 |
Tableau bordé |
|
| w3-bordé |
Lignes bordées |
|
| centré sur w3 |
Tableau centré |
|
| w3-survolable |
Table flottante |
|
| w3-table-all |
Toutes les propriétés définies |
|
| |
Avec rayures w3, bordures w3 et bordures w3 |
|
| |
Avec tête colorée |
|
| |
Avec w3-responsive |
|
| |
Avec w3-tiny |
|
| |
Avec w3-petit |
|
| |
Avec w3-large |
|
| |
Avec w3-xlarge |
|
| |
Avec w3-xxlarge |
|
| |
Avec w3-xxxlarge |
|
| |
Avec la couleur |
|
| |
Avec w3-jumbo |
|
| w3-réactif |
Crée un tableau réactif |
|
| Classer |
Définit |
|
| carte w3 |
Identique à w3-card-2 |
|
| w3-carte-2 |
Conteneur pour tout contenu HTML (ombre bordée de 2px) |
|
| w3-carte-4 |
Conteneur pour tout contenu HTML (ombre bordée de 4px) |
|
| Classer |
Définit |
|
| w3 rangées |
Conteneur pour une ligne de contenu réactif fluide |
|
| rembourrage w3-row |
Ligne où toutes les colonnes ont un rembourrage par défaut |
|
| voiture w3 |
Conteneur pour contenu réactif centré sur la taille |
|
| w3-étirement |
Classe qui supprime les marges droite et gauche |
|
| w3-moitié |
Demi (1/2) conteneur de colonne de tamis |
|
| w3-troisième |
Troisième (1/3) conteneur de colonne d'écran |
|
| w3-deuxtiers |
Deux tiers (2/3) conteneur de colonne de tamis |
|
| w3-trimestre |
Quart (1/4) conteneur de colonne d'écran |
|
| w3-trois quart |
Conteneur de colonne de tamis aux trois quarts (3/4) |
|
| w3-col |
Conteneur de colonnes pour tout contenu HTML |
|
| w3-rest |
Occupe le reste de la largeur de la colonne |
|
| |
|
|
| l1 - l12 |
Tailles réactives pour les grands écrans |
|
| m1 - m12 |
Tailles réactives pour écrans moyens |
|
| s1 - s12 |
Tailles réactives pour les petits écrans |
|
| |
|
|
| w3-cacher-petit |
Masquer le contenu sur les petits écrans (moins de 601px) |
|
| w3-hide-medium |
Masquer le contenu sur les écrans moyens |
|
| w3-masquer-large |
Masquer le contenu sur les grands écrans (plus de 992px) |
|
| |
|
|
| w3-image |
Image réactive |
|
| |
|
|
| w3-mobile |
Ajoute une réactivité mobile d'abord à n'importe quel élément.
Affiche les éléments sous forme d'éléments de bloc sur les appareils mobiles. |
|
| Classer |
Définit |
|
| w3-cell-row |
Conteneur pour les colonnes de disposition (cellules). |
|
| cellule w3 |
Colonne de mise en page (cellule). |
|
| w3-cell-top |
Aligne le contenu en haut d'une colonne (cellule). |
|
| w3-cell-milieu |
Aligne le contenu au milieu vertical d'une colonne (cellule). |
|
| w3-cell-bottom |
Aligne le contenu au bas d'une colonne (cellule). |
|
| Classer |
Définit |
|
| w3-bar |
Barre horizontale |
|
| w3-bar-block |
Barre verticale |
|
| w3-bar-item |
Fournit un style commun pour les articles de bar |
|
| barre latérale w3 |
Barre latérale |
|
| |
Une barre latérale peut contenir tous les types de contenu |
|
| |
Une barre latérale recouvrant le contenu principal |
|
| |
Une barre latérale recouvrant tout le contenu principal |
|
| |
Une barre latérale déplaçant le contenu principal vers la droite |
|
| |
Une barre latérale avec un arrière-plan superposé |
|
| |
Une barre latérale sur le côté droit |
|
| w3-effondrement |
Utilisé avec w3-sidebar pour créer une navigation latérale réactive entièrement automatique. Pour que cette classe fonctionne, le contenu de la page doit être dans une classe "w3-main" |
|
| w3-principal |
Conteneur pour le contenu de la page lors de l'utilisation de la classe w3-collapse pour les navigations latérales réactives |
|
| |
Navigation latérale réactive entièrement automatique sur le côté droit |
|
| w3-liste déroulante-clic |
Élément déroulant cliquable |
|
| w3-liste déroulante-survol |
Élément déroulant survolable |
|
| |
Élément déroulant survolable (utilisé dans w3-bar) |
|
| |
Élément déroulant survolable (utilisé dans w3-bar-block) |
|
| |
Élément déroulant survolable (utilisé dans w3-sidebar) |
|
| Classer |
Définit |
|
| bouton w3 |
Bouton rectangulaire avec une couleur de fond grise au survol |
|
| w3-btn |
Bouton rectangulaire avec ombres au survol |
|
| w3-cercle |
Peut être utilisé pour créer un bouton circulaire |
|
| w3-ondulation |
Bouton rectangulaire avec effet d'ondulation |
|
| |
Bouton flottant circulaire avec effet d'entraînement |
|
| w3-bar |
Peut être utilisé pour regrouper des éléments (comme des boutons) dans une barre horizontale |
|
| bloc w3 |
Classe qui peut être utilisée pour définir un bouton w3 pleine largeur |
|
| |
Pleine largeur w3-btn |
|
| |
Bouton circulaire pleine largeur |
|
| Classer |
Définit |
|
| entrée w3 |
Éléments d'entrée |
|
| |
Formulaire de saisie sous forme de carte |
|
| |
Éléments d'entrée (étiquettes supérieures) |
|
| |
Éléments d'entrée (étiquettes inférieures) |
|
| w3-vérifier |
Type d'entrée de la case à cocher |
|
| radio w3 |
Type d'entrée radio |
|
| w3-sélectionner |
Élément de sélection d'entrée |
|
| w3-animation-entrée |
Anime la largeur d'une entrée à 100 % |
|
| Classer |
Définit |
|
| w3-modal |
Conteneur modal |
|
| w3-modal-contenu |
Élément contextuel modal |
|
| info-bulle w3 |
Élément d'info-bulle |
|
| w3-texte |
Texte d'info-bulle |
|
| Classer |
Définit |
|
| w3-animate-top |
Anime un élément du haut -300px à 0px |
|
| w3-animer-gauche |
Anime un élément de gauche -300px à 0px |
|
| w3-animer-bas |
Anime un élément du bas -300px à 0px |
|
| w3-animate-right |
Anime un élément de droite -300px à 0px |
|
| w3-animation-opacité |
Anime l'opacité d'un élément de 0 à 1 |
|
| w3-animation-zoom |
Anime un élément de 0 à 100% en taille |
|
| w3-animate-fading |
Anime l'opacité d'un élément de 0 à 1 et de 1 à 0 (fondu entrant ET sortant) |
|
| w3-tour |
Faire pivoter une icône à 360 degrés |
|
| |
Faites pivoter n'importe quel élément à 360 degrés |
|
| w3-animation-entrée |
Anime la largeur d'un champ de saisie à 100 % |
|
| Classer |
Définit |
|
| w3-minuscule |
Spécifie une taille de police de 10 pixels |
|
| w3-petit |
Spécifie une taille de police de 12 pixels |
|
| w3-grand |
Spécifie une taille de police de 18 pixels |
|
| w3-xlarge |
Spécifie une taille de police de 24 pixels |
|
| w3-xxlarge |
Spécifie une taille de police de 32 pixels |
|
| w3-xxxlarge |
Spécifie une taille de police de 48 pixels |
|
| w3-jumbo |
Spécifie une taille de police de 64 pixels |
|
| w3-wide |
Spécifie un texte plus large |
|
| w3-empattement |
Change la police en serif |
|
| w3-sans-empattement |
Change la police en sans-serif |
|
| w3-cursive |
Change la police en cursive |
|
| w3-monospace |
Change la police en monospace |
|
| Classer |
Définit |
|
| w3-centre |
Contenu centré |
|
| w3-gauche |
Fait flotter un élément vers la gauche (float : gauche) |
|
| w3-droite |
Fait flotter un élément vers la droite (float : droite) |
|
| w3-alignement à gauche |
Texte aligné à gauche |
|
| w3-alignement à droite |
Texte aligné à droite |
|
| w3-justifier |
Texte aligné à droite et à gauche |
|
| bloc w3 |
Classe qui peut être utilisée pour définir une pleine largeur pour n'importe quel élément |
|
| w3-cercle |
Contenu encerclé |
|
| w3-masquer |
Contenu masqué (affichage : aucun) |
|
| w3-show |
Afficher le contenu (affichage : bloc) |
|
| w3-show-block |
Alias de w3-show (display:block) |
|
| w3-show-inline-block |
Afficher le contenu en tant que bloc en ligne (display:inline-block) |
|
| w3-top |
Contenu fixe en haut d'une page |
|
| w3-bas |
Contenu fixe en bas de page |
|
| conteneur d'affichage w3 |
Conteneur pour w3-display- classes (position : relative) |
|
| w3-display-topleft |
Affiche le contenu dans le coin supérieur gauche du w3-display-container |
|
| écran w3 en haut à droite |
Affiche le contenu dans le coin supérieur droit du w3-display-container |
|
| w3-affichage-basgauche |
Affiche le contenu dans le coin inférieur gauche du w3-display-container |
|
| écran w3 en bas à droite |
Affiche le contenu dans le coin inférieur droit du w3-display-container |
|
| w3-affichage-gauche |
Affiche le contenu à gauche (au milieu à gauche) du w3-display-container |
|
| w3-affichage-droit |
Affiche le contenu à droite (au milieu à droite) du w3-display-container |
|
| w3-affichage-milieu |
Affiche le contenu au milieu (centre) du w3-display-container |
|
| w3-display-topmiddle |
Affiche le contenu en haut au milieu du w3-display-container |
|
| w3-affichage-en bas au milieu |
Affiche le contenu en bas au milieu du w3-display-container |
|
| position d'affichage w3 |
Affiche le contenu à une position spécifiée dans le w3-display-container |
|
| w3-display-hover |
Affiche le contenu au survol à l'intérieur du w3-display-container |
|
| Classer |
Définit |
|
| w3-opacité |
Ajoute de l'opacité/transparence à un élément (opacité : 0,6) |
|
| |
Ajouter de l'opacité/transparence au texte |
|
| w3-opacité-off |
Désactive l'opacité/transparence (opacité : 1) |
|
| w3-opacité-min |
Ajoute de l'opacité/transparence à un élément (opacité : 0,75) |
|
| w3-opacité-max |
Ajoute de l'opacité/transparence à un élément (opacité : 0,25) |
|
| w3-niveaux de gris-min |
Ajoute un effet de niveaux de gris à un élément (niveaux de gris : 50 %) |
|
| w3-niveaux de gris |
Ajoute un effet de niveaux de gris à un élément (niveaux de gris : 75 %) |
|
| w3-niveaux de gris-max |
Ajoute un effet de niveaux de gris à un élément (niveaux de gris : 100 %) |
|
| w3-sépia-min |
Ajoute un effet sépia à un élément (sépia : 50 %) |
|
| w3-sépia |
Ajoute un effet sépia à un élément (sépia : 75 %) |
|
| w3-sépia-max |
Ajoute un effet sépia à un élément (sépia : 100 %) |
|
| superposition w3 |
Crée un effet de superposition |
|
| Classer |
Définit |
|
| w3-rouge |
Couleur de fond rouge |
|
| w3-rose |
Couleur de fond rose |
|
| w3-violet |
Couleur de fond violet |
|
| w3-violet profond |
Couleur de fond violet foncé |
|
| w3-indigo |
Couleur de fond indigo |
|
| w3-bleu |
Couleur de fond bleu |
|
| w3-bleu clair |
Couleur de fond bleu clair |
|
| w3-cyan |
Couleur de fond cyan |
|
| w3-aqua |
Couleur de fond aqua |
|
| w3-bleu sarcelle |
Couleur de fond bleu sarcelle |
|
| w3-vert |
Couleur de fond vert |
|
| w3-vert clair |
Couleur de fond vert clair |
|
| w3-chaux |
Couleur de fond citron vert |
|
| w3-sable |
Couleur de fond sable |
|
| w3-kaki |
Couleur de fond kaki |
|
| w3-jaune |
Couleur de fond jaune |
|
| w3-ambre |
Couleur de fond ambre |
|
| w3-orange |
Couleur de fond orange |
|
| w3-orange profond |
Couleur de fond orange foncé |
|
| w3-bleu-gris |
Couleur de fond bleu gris |
|
| w3-marron |
Couleur de fond marron |
|
| w3-gris clair |
Couleur de fond gris clair |
|
| w3-gris |
Couleur de fond gris |
|
| w3-gris-foncé |
Couleur de fond gris foncé |
|
| w3-noir |
Couleur de fond noir |
|
| w3-rouge pâle |
Couleur de fond rouge pâle |
|
| w3-jaune pâle |
Couleur de fond jaune pâle |
|
| w3-vert pâle |
Couleur de fond vert pâle |
|
| w3-bleu pâle |
Couleur de fond bleu pâle |
|
| w3-transparent |
Couleur de fond transparente |
|
Survolez les classes de couleurs
Les couleurs ci-dessus peuvent également être utilisées comme classes de survol :
| Classer |
Définit |
|
| w3-survoler-blanc |
Survolez la couleur blanche |
|
| w3-hover-noir |
Survolez la couleur noire |
|
| w3-survoler-rouge |
Survolez la couleur rouge |
|
| w3-survoler-bleu |
Survolez la couleur bleue |
|
| w3-survoler-vert |
Survolez la couleur verte |
|
| w3-survoler-aqua |
Survolez la couleur aqua |
|
| w3-survoler-orange |
Survolez la couleur orange |
|
| w3-hover-gris |
Survolez la couleur grise |
|
| w3-survoler-vert pâle |
Survolez la couleur vert pâle |
|
| Classer |
Définit |
|
| w3-texte-rouge |
Couleur du texte rouge |
|
| w3-texte-vert |
Couleur du texte vert |
|
| w3-texte-bleu |
Couleur du texte bleu |
|
| w3-texte-jaune |
Couleur du texte jaune |
|
| w3-texte-gris-clair |
Text color light-grey |
|
| w3-text-grey |
Text color grey |
|
| w3-text-dark-grey |
Text color dark grey |
|
| w3-text-black |
Text color black |
|
| w3-text-white |
Text color white |
|
| w3-text-pink |
Text color pink |
|
| w3-text-purple |
Text color purple |
|
| w3-text-teal |
Text color teal |
|
| w3-text-light-green |
Text color light green |
|
| w3-text-lime |
Text color lime |
|
| w3-text-deep-purple |
Text color deep purple |
|
| w3-text-indigo |
Text color indigo |
|
| w3-text-light-blue |
Text color light blue |
|
| w3-text-blue-grey |
Text color blue grey |
|
| w3-text-cyan |
Text color cyan |
|
| w3-text-aqua |
Text color aqua |
|
| w3-text-amber |
Text color amber |
|
| w3-text-orange |
Text color orange |
|
| w3-text-deep-orange |
Text color deep orange |
|
| w3-text-sand |
Text color sand |
|
| w3-text-khaki |
Text color khaki |
|
| w3-text-brown |
Text color brown |
|
The text classes above can also be used as hover classes:
| Class |
Defines |
|
| w3-hover-text-red |
Hover text color red |
|
| w3-hover-text-green |
Hover text color green |
|
| w3-hover-text-blue |
Hover text color blue |
|
| w3-hover-text-yellow |
Hover text color yellow |
|
| Class |
Defines |
|
| w3-hover-border-color |
Hover border color |
|
| w3-hover-opacity |
Adds transparency to an element on hover (opacity: 0.6) |
|
| w3-hover-opacity-off |
Removes transparency from an element on hover (100% opacity) |
|
| w3-hover-shadow |
Adds shadow to an element on hover |
|
| w3-hover-grayscale |
Adds a black and white (100% grayscale) effect to an element |
|
| w3-hover-sepia |
Adds a sepia effect to an element on hover |
|
| w3-hover-none |
Removes hover effects from an element |
|
| Class |
Defines |
|
| w3-round |
Element rounded (border-radius) 4px |
|
| w3-round-small |
Element rounded (border-radius) 2px |
|
| w3-round-medium |
Element rounded (border-radius) 4px |
|
| w3-round-large |
Element rounded (border-radius) 8px |
|
| w3-round-xlarge |
Element rounded (border-radius) 16px |
|
| w3-round-xxlarge |
Element rounded (border-radius) 32px |
|
| Class |
Defines |
|
| w3-padding-small |
Padding 4px top and bottom, and 8px left and right. |
|
| w3-padding |
Padding 8px top and bottom, and 16px left and right. |
|
| w3-padding-large |
Padding 12px top and bottom, and 24px left and right. |
|
| w3-padding-16 |
Padding 16px top and bottom |
|
| w3-padding-24 |
Padding 24px top and bottom |
|
| w3-padding-32 |
Padding 32px top and bottom |
|
| w3-padding-48 |
Padding 48px top and bottom |
|
| w3-padding-64 |
Padding 64px top and bottom |
|
| w3-padding-top-64 |
Padding 64px on top |
|
| w3-padding-top-48 |
Padding 48px on top |
|
| w3-padding-top-32 |
Padding 32px on top |
|
| w3-padding-top-24 |
Padding 24px on top |
|
| Class |
Defines |
|
| w3-margin |
Adds an 16px margin to an element |
|
| w3-margin-top |
Adds an 16px top margin to an element |
|
| w3-margin-right |
Adds an 16px right margin to an element |
|
| w3-margin-bottom |
Adds an 16px bottom margin to an element |
|
| w3-margin-left |
Adds an 16px left margin to an element |
|
| w3-section |
Adds an 16px top and bottom margin to an element |
|
| Class |
Defines |
|
| w3-border |
Borders (top, right, bottom, left) |
|
| w3-border-top |
Border top |
|
| w3-border-right |
Border right |
|
| w3-border-bottom |
Border bottom |
|
| w3-border-left |
Border left |
|
| w3-border-0 |
Removes all borders |
|
| w3-border-color |
Displays any defined borders in a specified color (like red, etc) |
|
| w3-bottombar |
Adds a thick bottom border (bar) to an element |
|
| w3-leftbar |
Adds a thick left border (bar) to an element |
|
| w3-rightbar |
Adds a thick right border (bar) to an element |
|
| w3-topbar |
Adds a thick top border (bar) to an element |
|
| w3-hover-border-color |
Hoverable border color |
|
