Foundation Texto

Configuración predeterminada de Foundation

Foundation usa el tamaño de fuente predeterminado del navegador (font-size:100%). Para la mayoría de los navegadores de escritorio, la fuente predeterminada es 16px. Para la mayoría de los navegadores móviles, la fuente predeterminada es 12px. La fuente predeterminada es"Helvetica Neue", el line-height predeterminado es1.5。

La configuración predeterminada anterior es para<body>el elemento.

Diseño tipográfico de Foundation

En este capítulo hablaremos sobre el diseño tipográfico de Foundation.

Para ver el estilo real de los siguientes ejemplos, haga clic en el botón "Pruébalo".

<h1> - <h6>

Los títulos HTML renderizados por Foundation (<h1>llegar<h6>) se muestran a continuación:

Ejemplo

<h1>Título h1</h1> <h2>Título h2</h2> <h3>Título h3</h3> <h4>Título h4</h4> <h5>Título h5</h5> <h6>Título h6</h6>

Pruébalo »

Consejo:Si necesitas crear un título de color claro, puedes agregar al elemento la.subheaderclase:

Ejemplo

<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>

Pruébalo »

<small>

En Foundation, el elemento HTML<small>se usa para crear un subtítulo de color claro:

Ejemplo

<h1>h1 heading <small>secondary text</small></h1> <h2>h2 heading <small>secondary text</small></h2> <h3>h3 heading <small>secondary text</small></h3> <h4>h4 heading <small>secondary text</small></h4> <h5>h5 heading <small>secondary text</small></h5> <h6>h6 heading <small>secondary text</small></h6>

Pruébalo »

<a>

Foundation <a>El estilo del elemento se muestra a continuación:

Ejemplo

<p>Este es un<a class="a" href="#">enlace</a>。</p>

Pruébalo »

<abbr>

Foundation <abbr>El estilo del elemento se muestra a continuación:

Ejemplo

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

Pruébalo »

<blockquote>

Foundation <blockquote>El estilo del elemento se muestra a continuación:

Ejemplo

<blockquote> <p>No solo se aprende tecnología, sino también sueños!</p> <cite>Ejemplo</cite> </blockquote>

Pruébalo »

<dl>

Foundation <dl>El estilo del elemento se muestra a continuación:

Ejemplo

<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>

Pruébalo »

<code>

Foundation <code>El estilo del elemento se muestra a continuación:

Ejemplo

<p>Los siguientes elementos HTML:<code>span</code>, <code>section</code>, y<code>div</code>son parte del documento.</p>

Pruébalo »

<kbd>

Foundation <kbd>El estilo del elemento se muestra a continuación:

Ejemplo

<p>Presiona<kbd>ctrl + p</kbd>la tecla para abrir la ventana de impresión.</p>

Pruébalo »

<hr>

Foundation <hr>El estilo del elemento se muestra a continuación:

Ejemplo

<hr>

Pruébalo »
Otras extensiones