Manuel de référence CSS Foundation
Paramètres par défaut de Foundation
Foundation utilise la taille de police par défaut du navigateur (font-size:100%). Pour la plupart des navigateurs de bureau, la taille de police par défaut est de 16px. Pour les navigateurs d'appareils mobiles, la taille de police par défaut est de 12px. La police par défaut est"Helvetica Neue", line-height a pour valeur par défaut1.5。
Ces paramètres s'appliquent à<body>Élément à l'intérieur d'un élément.
De plus,<p>La marge inférieure (margin-bottom) des éléments est de 1.25rem, et line-height est de 1.6.
Texte
Les éléments HTML suivants sont rendus avec des styles indépendants définis par Foundation au lieu des styles par défaut du navigateur. Cliquez sur « Essayez-le » pour voir des exemples en ligne.
| élément | Description | Exemples en ligne |
|---|---|---|
| <h1> - <h6> | Titres h1 - h6 | Essayez-le vous-même |
| <a> | Liens bleu clair ; survoler un lien affiche un soulignement | Essayez-le vous-même |
| <small> | Texte de sous-titre gris clair | Essayez-le vous-même |
| <blockquote> | Module de contenu de citation | Essayez-le vous-même |
| <strong> | Texte en gras | Essayez-le vous-même |
| <em> | Italique | Essayez-le vous-même |
| <abbr> | Spécifie les abréviations des mots. Le texte utilisant cet élément apparaît avec un soulignement en pointillés, et une infobulle apparaît au survol | Essayez-le vous-même |
| <kbd> | Reçoit des commandes de saisie au clavier :CTRL + P | Essayez-le vous-même |
| <hr> | Ligne horizontale | Essayez-le vous-même |
| <code> | Extrait de code | Essayez-le vous-même |
| <ul> | Liste non ordonnée | Essayez-le vous-même |
| <ol> | Liste ordonnée | Essayez-le vous-même |
| <dl> | Liste de descriptions | Essayez-le vous-même |
Alignement du texte
Utilisez des classes CSS pour modifier l'alignement du texte :
| Classe | Description | Exemple |
|---|---|---|
| .text-left | Texte aligné à gauche | Essayez-le vous-même |
| .text-right | Texte aligné à droite | Essayez-le vous-même |
| .text-center | Center | Essayez-le vous-même |
| .text-justify | Justify | Essayez-le vous-même |
Alignement selon différentes tailles d'écran
Utilisez des classes CSS pour modifier l'alignement du texte selon différentes tailles d'écran :
| Classe | Description | Exemple |
|---|---|---|
| Aligner à gauche | ||
| .small-text-left | Aligné à gauche sur toutes les tailles d'écran | Essayez-le vous-même |
| .small-only-text-left | Aligné à gauche sur les petits écrans (largeur inférieure à 40em) | Essayez-le vous-même |
| .medium-text-left | Aligné à gauche sur les écrans plus larges que 40.0625em | Essayez-le vous-même |
| .medium-only-text-left | Aligné à gauche sur les écrans dont la largeur est comprise entre 40.0625em et 64em | Essayez-le vous-même |
| .large-text-left | Aligné à gauche sur les écrans plus larges que 64.0625em | Essayez-le vous-même |
| .large-only-text-left | Aligné à gauche sur les écrans dont la largeur est comprise entre 64.0625em et 90em | Essayez-le vous-même |
| .xlarge-text-left | Aligné à gauche sur les écrans plus larges que 90.0625em | Essayez-le vous-même |
| .xlarge-only-text-left | Aligné à gauche sur les écrans dont la largeur est comprise entre 90.0625em et 120em | Essayez-le vous-même |
| .xxlarge-text-left | Aligné à gauche sur les écrans plus larges que 120em | Essayez-le vous-même |
| Aligner à droite | ||
| .small-text-right | Aligné à droite sur toutes les tailles d'écran | Essayez-le vous-même |
| .small-only-text-right | Aligné à droite sur les petits écrans (largeur inférieure à 40em) | Essayez-le vous-même |
| .medium-text-right | Aligné à droite sur les écrans plus larges que 40.0625em | Essayez-le vous-même |
| .medium-only-text-right | Aligné à droite sur les écrans d'une largeur comprise entre 40.0625em et 64em | Essayez-le vous-même |
| .large-text-right | Aligné à droite sur les écrans plus larges que 64.0625em | Essayez-le vous-même |
| .large-only-text-right | Aligné à droite sur les écrans dont la largeur est comprise entre 64.0625em et 90em | Essayez-le vous-même |
| .xlarge-text-right | Aligné à droite sur les écrans plus larges que 90.0625em | Essayez-le vous-même |
| .xlarge-only-text-right | Aligné à droite sur les écrans dont la largeur est comprise entre 90.0625em et 120em | Essayez-le vous-même |
| .xxlarge-text-right | Aligné à droite sur les écrans plus larges que 120em | Essayez-le vous-même |
| Alignement centré | ||
| .small-text-center | Aligné au centre sur toutes les tailles d'écran | Essayez-le vous-même |
| .small-only-text-center | Aligné au centre sur les petits écrans (largeur inférieure à 40em) | Essayez-le vous-même |
| .medium-text-center | Aligné au centre sur les écrans plus larges que 40.0625em | Essayez-le vous-même |
| .medium-only-text-center | Aligné au centre sur les écrans dont la largeur est comprise entre 40.0625em et 64em | Essayez-le vous-même |
| .large-text-center | Aligné au centre sur les écrans plus larges que 64.0625em | Essayez-le vous-même |
| .large-only-text-center | Aligné au centre sur les écrans dont la largeur est comprise entre 64.0625em et 90em | Essayez-le vous-même |
| .xlarge-text-center | Aligné au centre sur les écrans plus larges que 90.0625em | Essayez-le vous-même |
| .xlarge-only-text-center | Aligné au centre sur les écrans dont la largeur est comprise entre 90.0625em et 120em | Essayez-le vous-même |
| .xxlarge-text-center | Centré sur les écrans plus larges que 120em | Essayez-le vous-même |
| Justify | ||
| .small-text-justify | Justifié sur toutes les tailles d'écran | Essayez-le vous-même |
| .small-only-text-justify | Justifié sur les petits écrans (largeur inférieure à 40em) | Essayez-le vous-même |
| .medium-text-justify | Justifié sur les écrans plus larges que 40.0625em | Essayez-le vous-même |
| .medium-only-text-justify | Justifié sur les écrans dont la largeur est comprise entre 40.0625em et 64em | Essayez-le vous-même |
| .large-text-justify | Justifié sur les écrans plus larges que 64.0625em | Essayez-le vous-même |
| .large-only-text-justify | Justifié sur les écrans dont la largeur est comprise entre 64.0625em et 90em | Essayez-le vous-même |
| .xlarge-text-justify | Justifié sur les écrans d'une largeur supérieure à 90.0625em | Essayez-le vous-même |
| .xlarge-only-text-justify | Justifié sur les écrans dont la largeur est comprise entre 90.0625em et 120em | Essayez-le vous-même |
| .xxlarge-text-justify | Justifié sur les écrans d'une largeur supérieure à 120em | Essayez-le vous-même |
Autre
| Classe | Description | Exemple |
|---|---|---|
| .left | L'élément flotte à gauche | Essayez-le vous-même |
| .right | L'élément flotte à droite | Essayez-le vous-même |
| .clearfix | Dégager les flottants - doit être ajouté à l'élément parent des éléments flottants | |
| .hide | Éléments masqués (CSSdisplay: none) |
Essayez-le vous-même |
| .list-inline | Placer tous les éléments sur la même ligne | Essayez-le vous-même |
| .lead | Rendre l'élément <p> plus proéminent | Essayez-le vous-même |
| .subheader | Définir des éléments <h1> - <h6> de couleur claire | Essayez-le vous-même |