Derniers tutoriels de développement web
 

W3.CSS Manuel de référence

❮ Précédent Suivant Chapitre ❯

Les Classes de conteneur

Classe définit
w3 récipient Conteneur pour le contenu HTML (ajoute 16px padding gauche et à droite) Essayez - le
Utilisé avec les classes de couleurs Essayez - le
Utilisé comme en-tête Essayez - le
Utilisé comme footer Essayez - le
Utilisé avec w3-leftbar Essayez - le
Utilisé avec w3-bottombar Essayez - le
w3 section Conteneur pour le contenu HTML (ajoute top 16px de marge et en bas) Essayez - le
w3 badge Insigne circulaire 8 Essayez - le
w3-tag Tag rectangulaire Plus tard! Essayez - le
w3-ul Liste non ordonnée Essayez - le
w3-display-conteneur Conteneur pour les classes w3-Display- (positionner un élément en haut à gauche, en haut à droite, en bas à gauche ou le coin inférieur droit, ou au milieu du récipient) Essayez - le
w3 image Obsolète. Utilisez w3-display-conteneur à la place. Essayez - le
w3-blockquote Supprimé dans 2.0 (utilisation w3-leftbar place) Essayez - le
w3 code Récipient de code Essayez - le
w3-progress-conteneur Barre de progression conteneur Essayez - le

Tableau Classes

Classe définit
w3 table Container pour une table HTML Essayez - le
w3 rayé Table Striped Essayez - le
w3-frontière Table bordé Essayez - le
w3 bordée bordé lignes Essayez - le
w3 centrée Table Centré Essayez - le
w3 hoverable Table Hoverable Essayez - le
w3-table-tout Toutes les propriétés définies Essayez - le
Avec w3-rayé, w3-frontière et w3 bordée Essayez - le
Avec la tête de couleur Essayez - le
Avec w3-responsable Essayez - le
Avec w3-tiny Essayez - le
Avec w3-petit Essayez - le
Avec w3-large Essayez - le
Avec w3-xlarge Essayez - le
Avec w3-XXLarge Essayez - le
Avec w3-XXXLarge Essayez - le
Avec la couleur Essayez - le
Avec w3-jumbo Essayez - le

Classes de cartes

Classe définit
w3-card Conteneur pour tout contenu HTML (avec la frontière) Essayez - le
w3-card-2 Conteneur pour tout contenu HTML (shadow bordered 2px) Essayez - le
w3-card-4 Conteneur pour tout contenu HTML (shadow bordered 4px) Essayez - le
w3-card-8 Conteneur pour tout contenu HTML (shadow bordered 8px) Essayez - le
w3-card-12 Conteneur pour tout contenu HTML (12px bordée ombre) Essayez - le
w3-card-16 Conteneur pour tout contenu HTML (16px bordée ombre) Essayez - le
w3-card-24 Conteneur pour tout contenu HTML (24px bordée ombre) Essayez - le

Classes Responsive

Classe définit
w3 rangée Conteneur pour une ligne de contenu en réponse fluide Essayez - le
w3-row-padding Row où toutes les colonnes ont un remplissage par défaut Essayez - le
w3-contenu Conteneurs taille centrée contenu fixe Essayez - le
w3 demi- Demi-conteneur de colonne (1/2) de l'écran Essayez - le
w3 tiers Troisième conteneur de colonne (1/3) de l'écran Essayez - le
w3 twothird Deux troisième conteneur de colonne (2/3) de l'écran Essayez - le
w3 trimestre Quarter conteneur de colonne (1/4) de l'écran Essayez - le
w3-threequarter Les trois quarts conteneur de colonne (3/4) de l'écran Essayez - le
w3-col conteneur de colonne pour tout contenu HTML Essayez - le
l1 - l12 tailles réactives pour les grands écrans Essayez - le
m1 - m12 tailles réactives pour les écrans de taille Essayez - le
s1 - s12 tailles Responsive pour les petits écrans Essayez - le
w3-hide-petit Masquer le contenu sur les petits écrans (moins de 601px) Essayez - le
w3-hide-moyen Cacher le contenu sur les écrans moyennes Essayez - le
w3-hide-grande Masquer le contenu sur de grands écrans (plus de 992px) Essayez - le

Classes de navigation

Classe définit
w3-navbar Barre de navigation Essayez - le
barre de navigation Pliable Essayez - le
w3-topnav Barre de navigation Essayez - le
w3-sidenav barre de navigation latérale Essayez - le
Side barre de navigation superposant contenu principal Essayez - le
Side barre de navigation superposant tout le contenu principal Essayez - le
Side barre de navigation décalant contenu principal vers la droite Essayez - le
barre de navigation latérale avec un arrière-plan de recouvrement Essayez - le
w3-collapse Navigation entièrement automatique côté réactif Essayez - le
w3 dropnav navigation dropdown Essayez - le
w3-dropdown-clic élément déroulant cliquable Essayez - le
w3-dropdown-hover élément de menu déroulant Hoverable Essayez - le
élément de menu déroulant Hoverable (utilisé dans w3-navbar) Essayez - le
élément de menu déroulant Hoverable (utilisé dans w3-sidenav) Essayez - le
élément de menu déroulant Hoverable (utilisé dans w3-topnav) Essayez - le
w3-accordéon Masquer et afficher le contenu pliable Essayez - le
accordéon cliquable et déroulant utilisé dans w3-sidenav Essayez - le
w3-pagination liens Pagination Essayez - le

Classes de boutons

Classe définit
w3-btn bouton HTML rectangulaire Essayez - le
bouton HTML rectangulaire avec effet d'entraînement Essayez - le
w3-btn flottant bouton circulaire flottante Essayez - le
bouton flottant circulaire avec effet d'entraînement Essayez - le
w3-btn-groupe boutons groupé Essayez - le
w3-btn-block boutons pleine largeur (100%) Essayez - le

Classes d'entrée

Classe définit
w3-forme Même que le rembourrage w3 Essayez - le
sous forme d'entrée comme une carte Essayez - le
w3 entrée éléments d'entrée Essayez - le
éléments d'entrée (top étiquettes) Essayez - le
éléments d'entrée (étiquettes bas) Essayez - le
w3 groupe Groupe d'éléments HTML Essayez - le
w3-label Étiquette d'entrée Essayez - le
w3-validate Valide entrée (couleur change lorsque l'entrée non valide) Essayez - le
w3-check type d'entrée Checkbox Essayez - le
w3-radio Type d'entrée radio Essayez - le
w3-select Entrée élément select Essayez - le
w3-animé-entrée Anime la largeur d'une entrée à 100% Essayez - le

Classes modales

Classe définit
w3 modal récipient Modal Essayez - le
w3-modal contenu élément de pop-up Modal Essayez - le
w3-tooltip élément tooltip Essayez - le
w3 texte texte tooltip Essayez - le
inline tooltip Essayez - le

Animations Classes

Classe définit
w3-animate-top Anime un élément de la -300px supérieure à 0px Essayez - le
w3-animé gauche Anime un élément de -300px gauche à 0px Essayez - le
w3-animé fond Anime un élément du bas vers -300px 0px Essayez - le
w3-animé droit Anime un élément de -300px droit à 0px Essayez - le
w3-animé-opacité Anime l'opacité d'un élément 0-1 Essayez - le
w3-animé-zoom Anime un élément 0-100% de la taille Essayez - le
w3-animé-fading Anime l'opacité d'un élément de 0 à 1 et 1 à 0 (fondus dans et hors) Essayez - le
w3-spin Spin une icône 360 ​​degrés Essayez - le
Spin tout élément 360 degrés Essayez - le
w3-animé-entrée Anime la largeur d'une zone d'entrée à 100% Essayez - le

Classes utilitaires

Classe définit
w3-tiny Indique une taille de police de 10 pixels Essayez - le
w3-petit Indique une taille de police de 12 pixels Essayez - le
w3-large Indique une taille de police de 20 pixels Essayez - le
w3-xlarge Indique une taille de police de 24 pixels Essayez - le
w3-XXLarge Indique une taille de police de 32 pixels Essayez - le
w3-XXXLarge Indique une taille de police de 48 pixels Essayez - le
w3-jumbo Indique une taille de police de 64 pixels Essayez - le
w3-slim Indique un texte plus mince Essayez - le
w3 large Indique un texte plus large Essayez - le
w3-vertical Indique le texte vertical Essayez - le
w3-top Contenu fixe sur le dessus de la page Essayez - le
w3-centre Centré contenu Essayez - le
w3-cercle contenu Cerclé Essayez - le
w3-hide contenu caché (display: none) Essayez - le
w3-show Afficher le contenu (display: block) Essayez - le
w3-show-bloc Alias ​​de w3-show (display: block) Essayez - le
w3-show-inline-block Afficher le contenu en tant inline-block (display: inline-block) Essayez - le
w3-hide-petit Masquer le contenu sur les petits écrans (moins de 601px) Essayez - le
w3-hide-moyen Cacher le contenu sur les écrans moyennes Essayez - le
w3-hide-grande Masquer le contenu sur de grands écrans (plus de 992px) Essayez - le
w3 gauche contenu ajusté Gauche Essayez - le
w3 droite contenu ajusté Droit Essayez - le
w3-gauche-align texte aligné à gauche Essayez - le
w3-right-align texte aligné droit Essayez - le
w3-justify Droit et texte aligné à gauche Essayez - le
w3-display-conteneur Conteneur pour les classes w3-Display- (position: relative) Essayez - le
w3-display-topleft le contenu de la position dans le coin en haut à gauche Essayez - le
w3-display-topright le contenu de la position dans le coin en haut à droite Essayez - le
w3-display-bottomleft le contenu de la position dans le coin inférieur gauche Essayez - le
w3-display-bottomright contenu de position dans le coin inférieur droit Essayez - le
-Middle-affichage w3 contenu de position dans le milieu (horizontalement et verticalement) Essayez - le
w3-display-topmiddle contenu de position dans le milieu au sommet de l'élément Essayez - le
w3-display-bottommiddle contenu de position au milieu en bas de l'élément Essayez - le
w3-serif Change la police à empattement Essayez - le
w3-opacité Ajoute l'opacité au texte Essayez - le
Ajoute l'opacité à tout élément Essayez - le
w3 superposition Crée un effet de superposition Essayez - le
w3-text-shadow Ajoute des ombres au texte Essayez - le

Classes de couleur

Classe définit
w3-rouge Fond rouge Essayez - le
w3-rose Fond couleur rose Essayez - le
w3-violet La couleur de fond violet Essayez - le
w3-deep-violet La couleur de fond violet foncé Essayez - le
w3-indigo Contexte couleur indigo Essayez - le
w3-bleu Fond bleu couleur Essayez - le
w3-bleu clair Fond bleu clair de couleur Essayez - le
w3 cyan cyan de couleur d'arrière-plan Essayez - le
w3-marine Couleur de fond d'aqua Essayez - le
w3-sarcelle Fond couleur sarcelle Essayez - le
w3-vert Fond couleur verte Essayez - le
w3-vert clair Fond vert clair de couleur Essayez - le
w3 chaux Couleur de fond de la chaux Essayez - le
w3-sable Contexte couleur sable Essayez - le
w3-khaki Fond de couleur kaki Essayez - le
w3 jaune La couleur de fond jaune Essayez - le
w3-ambre Fond couleur ambre Essayez - le
w3-orangé Fond orange Essayez - le
w3-deep orange La couleur de fond profonde orange Essayez - le
w3-bleu-gris La couleur de fond gris bleu Essayez - le
w3 brun Fond couleur brune Essayez - le
w3-gris clair Fond couleur gris clair Essayez - le
w3 gris Fond gris Essayez - le
w3-gris foncé La couleur de fond gris foncé Essayez - le
w3-noir Fond noir Essayez - le
w3-rouge pâle La couleur de fond de rouge pâle Essayez - le
w3-jaune pâle La couleur de fond jaune pâle Essayez - le
w3-vert pâle La couleur de fond de vert pâle Essayez - le
w3-bleu pâle La couleur de fond de bleu pâle Essayez - le
w3 transparent background-color Transparent

Classes Hover

Toutes les couleurs ci-dessus peuvent également être utilisés en tant que classes de vol stationnaire:

Classe définit
w3-hover-blanc Hover couleur blanche Essayez - le
w3-hover-noir Hover couleur noire Essayez - le
w3-hover-rouge Hover couleur rouge Essayez - le
w3-hover-bleu Hover couleur bleue Essayez - le
w3-hover-vert Hover couleur verte Essayez - le
w3-hover-marine Hover couleur d'aqua Essayez - le
w3-hover orange Hover orange Essayez - le
w3-hover-gris Hover couleur grise Essayez - le
w3-hover-vert pâle La couleur de survol de vert pâle Essayez - le
w3-hover-text-rouge Bougez texte couleur rouge Essayez - le
w3-hover-text-rouge Bougez texte couleur bleu Essayez - le
w3-hover-text-vert Bougez texte couleur verte Essayez - le
w3-hover-text-violet Hover couleur du texte violet Essayez - le
w3-hover-border- couleur Hover couleur de la bordure Essayez - le
w3-hover-opacité Ajoute la transparence à un élément sur le vol stationnaire (60% d'opacité) Essayez - le
w3-hover-shadow Ajoute l'ombre d'un élément sur le vol stationnaire Essayez - le
w3-hover-pas Supprime les effets de survol à partir d'un élément Essayez - le

Classes rondes

Classe définit
w3-ronde Élément arrondi (border-radius) 4px Essayez - le
w3-ronde petite Élément arrondi (border-radius) 2px Essayez - le
w3-ronde moyen Élément arrondi (border-radius) 4px Essayez - le
w3-round-large Élément arrondi (border-radius) 8px Essayez - le
w3-round-xlarge Élément arrondi (border-radius) 16px Essayez - le
w3-round-XXLarge Élément arrondi (border-radius) 32px Essayez - le
w3-round-jumbo Élément arrondi (border-radius) 64px Essayez - le

Classes de Rembourrage

Classe définit
w3-padding-0 Supprime tout le rembourrage d'un élément Essayez - le
w3-padding Rembourrage 8px haut et en bas, et 16px gauche et à droite. Essayez - le
w3-padding-tiny Rembourrage 2px haut et en bas, et 4px gauche et à droite. Essayez - le
w3-padding-petit Rembourrage 4px haut et en bas, et 8px gauche et à droite. Essayez - le
w3-padding-moyen Rembourrage 8px haut et en bas, et 16px gauche et à droite. Essayez - le
w3-padding-grande Rembourrage 12px haut et en bas, et 24px gauche et à droite. Essayez - le
w3-padding-xlarge Rembourrage 16px haut et en bas, et 32px gauche et à droite. Essayez - le
w3-padding-XXLarge Rembourrage 24px haut et en bas, et 48px gauche et à droite. Essayez - le
w3-padding-jumbo Rembourrage 32px haut et en bas, et 64px gauche et à droite. Essayez - le
w3-padding-top Rembourrage top 8px Essayez - le
w3-padding-right Rembourrage 16px droit Essayez - le
w3-padding-bottom Rembourrage fond 8px Essayez - le
w3-padding-left Rembourrage 16px gauche Essayez - le
w3-padding-hor-4 Rembourrage 4px haut et en bas Essayez - le
w3-padding-hor-8 Rembourrage 8px haut et en bas Essayez - le
w3-padding-hor-12 Rembourrage 12px haut et en bas Essayez - le
w3-padding-hor-16 Rembourrage 16px haut et en bas Essayez - le
w3-padding-hor-24 Rembourrage 24px haut et en bas Essayez - le
w3-padding-hor-32 Rembourrage 32px haut et en bas Essayez - le
w3-padding-hor-48 Rembourrage 48px haut et en bas Essayez - le
w3-padding-hor-64 Rembourrage 64px haut et en bas Essayez - le
w3-padding-hor-128 Rembourrage 128px haut et en bas Essayez - le
w3-padding-ver-4 Rembourrage 4px gauche et à droite. Essayez - le
w3-padding-ver-8 Rembourrage 8px gauche et à droite. Essayez - le
w3-padding-ver-16 Rembourrage 16px gauche et à droite. Essayez - le
w3-padding-ver-24 Rembourrage 24px gauche et à droite. Essayez - le
w3-padding-ver-32 Rembourrage 32px gauche et à droite. Essayez - le
w3-padding-ver-48 Rembourrage 48px gauche et à droite. Essayez - le
w3-padding-ver-64 Rembourrage 64px gauche et à droite. Essayez - le

Classes de marge

Classe définit
w3-margin-0 Supprime toutes les marges d'un élément Essayez - le
w3 marge Marge 16px Essayez - le
w3-margin-top Marge supérieure 16px Essayez - le
w3-margin-right Marge droite 16px Essayez - le
w3-margin-bottom en bas de la marge 16px Essayez - le
w3-margin-left Marge 16px gauche Essayez - le

Classes frontalières

Classe définit
w3-frontière Borders (en haut, à droite, en bas, à gauche) Essayez - le
w3-border-top top Border Essayez - le
w3-border-right droit à la frontière Essayez - le
w3-border-bottom fond de la frontière Essayez - le
w3-border-left Border gauche Essayez - le
w3-border-0 Supprime toutes les frontières Essayez - le
couleur w3-border- Affiche toutes les frontières définies dans une couleur spécifiée (comme le rouge, etc.) Essayez - le
w3 bottombar Ajoute une bordure inférieure épaisse (bar) à un élément Essayez - le
w3-leftbar Ajoute une bordure épaisse gauche (bar) à un élément Essayez - le
w3-bibliographies Ajoute une bordure droite épaisse (bar) à un élément Essayez - le
w3-topbar Ajoute une bordure supérieure épaisse (bar) à un élément Essayez - le
w3-hover-border- couleur couleur de la bordure Hoverable Essayez - le

❮ Précédent Suivant Chapitre ❯