Texte 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 la plupart des navigateurs 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。

Les paramètres par défaut ci-dessus s'appliquent tous à<body>Élément.

Conception typographique Foundation

Dans ce chapitre, nous aborderons la conception typographique de Foundation.

Pour voir le style réel des exemples suivants, veuillez cliquer sur le bouton "Essayez-le".

<h1> - <h6>

Titres HTML rendus par Foundation<h1>à<h6>) comme indiqué ci-dessous :

Exemple

<h1>Titre h1</h1> <h2>Titre h2</h2> <h3>Titre h3</h3> <h4>Titre h4</h4> <h5>h5 Titre</h5> <h6>h6 Titre</h6>

Essayez-le vous-même »

Astuce :Si vous avez besoin de créer un titre de couleur claire, vous pouvez ajouter à l'élément.subheaderClasse :

Exemple

<h1 class="subheader">h1.subheader</h1> <h2 class="subheader">h2.subheader</h2> <h3 class="subheader">h3.subheader</h3> <h4 class="subheader">h4.subheader</h4> <h5 class="subheader">h5.subheader</h5> <h6 class="subheader">h6.subheader</h6>

Essayez-le vous-même »

<small>

Dans Foundation, HTML<small>l'élément est utilisé pour créer un sous-titre de couleur claire :

Exemple

<h1>h1 titre <small>texte secondaire</small></h1> <h2>h2 titre <small>texte secondaire</small></h2> <h3>titre h3 <small>texte secondaire</small></h3> <h4>titre h4 <small>texte secondaire</small></h4> <h5>titre h5 <small>texte secondaire</small></h5> <h6>titre h6 <small>texte secondaire</small></h6>

Essayez-le vous-même »

<a>

Foundation <a>Le style de l'élément est le suivant :

Exemple

<p>Ceci est un<a class="a" href="#">Liens</a>。</p>

Essayez-le vous-même »

<abbr>

Foundation <abbr>Le style de l'élément est le suivant :

Exemple

<p>L' <abbr title="Organisation mondiale de la Santé">OMS</abbr> a été fondée en 1948.</p>

Essayez-le vous-même »

<blockquote>

Foundation <blockquote>Le style de l'élément est le suivant :

Exemple

<blockquote> <p>Ce que vous apprenez n'est pas seulement de la technologie, mais aussi des rêves !</p> <cite>Exemple</cite> </blockquote>

Essayez-le vous-même »

<dl>

Foundation <dl>Le style de l'élément est le suivant :

Exemple

<dl> <dt>Café</dt> <dd>- boisson chaude noire</dd> <dt>Lait</dt> <dd>- boisson froide blanche</dd> </dl>

Essayez-le vous-même »

<code>

Foundation <code>Le style de l'élément est le suivant :

Exemple

<p>Les éléments HTML suivants :<code>span</code>, <code>section</code>, et<code>div</code>font partie du document.</p>

Essayez-le vous-même »

<kbd>

Foundation <kbd>Le style de l'élément est le suivant :

Exemple

<p>Appuyez sur la touche<kbd>ctrl + p</kbd>pour ouvrir la fenêtre d'impression.</p>

Essayez-le vous-même »

<hr>

Foundation <hr>Le style de l'élément est le suivant :

Exemple

<hr>

Essayez-le vous-même »
autres extensions