Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos para que se vean increíbles y puedan ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas.
El andamiaje de ciertos estilos tipográficos es más rápido utilizando las clases auxiliares de CSS de base. Estos CSS tienen varios ayudantes de tipografía, como alineación de texto, subtítulo, párrafo principal, lista sin viñetas y escala de tipos. En este artículo, aprenderemos sobre el ayudante tipográfico Typescale.
El ayudante tipográfico de Foundation CSS Typescale se utiliza para ajustar el tamaño de fuente anulando el tamaño predeterminado de un elemento. Esto puede ser útil para dimensionar un <p> o <h1> a <h6> utilizando los tamaños de encabezado existentes de Foundation. Para anular el tamaño predeterminado del elemento en Foundation CSS, usamos las clases h1/h2/h3/h4/h5/h6.
Clase auxiliar tipográfica de escala de tipos CSS de Foundation:
- h1/h2/h3/h4/h5/h6: estas clases tienen una escala de fuente diferente donde h1 es la más grande y h6 la más pequeña.
Sintaxis:
<p class="h1/h2/h3/h4/h5/h6">Content</p>
Ejemplo 1: El siguiente ejemplo demuestra la clase auxiliar tipográfica Typescale en el elemento <p>.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <strong> Foundation CSS Typescale Typographic Helper </strong> <br /><br /> <p class="h1">Paragraph element with h1 class</p> <p class="h2">Paragraph element with h2 class</p> <p class="h3">Paragraph element with h3 class</p> <p class="h4">Paragraph element with h4 class</p> <p class="h5">Paragraph element with h5 class</p> <p class="h6">Paragraph element with h6 class</p> </body> </html>
Producción:
Producción
Ejemplo 2: El siguiente ejemplo demuestra la clase auxiliar tipográfica Typescale en el elemento <h1> a <h6> y se usa para anular su tamaño predeterminado.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <strong> Foundation CSS Typescale Typographic Helper </strong> <br/><br/> <h1 class="h6">h1 element with h6 class</h1> <h2 class="h5">h2 element with h5 class</h2> <h3 class="h4">h3 element with h4 class</h3> <h4 class="h3">h4 element with h3 class</h4> <h5 class="h2">h5 element with h2 class</h5> <h6 class="h1">h6 element with h1 class</h6> </body> </html>
Producción:
Producción
Referencia: https://get.foundation/sites/docs/typography-helpers.html#typescale
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA