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. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Las clases auxiliares de Foundation CSS nos permiten crear andamios en ciertos estilos tipográficos más rápido. Foundation CSS tiene varios ayudantes de tipografía, como Alineación de texto, Subtítulo, Párrafo principal, Lista sin viñetas y Escala tipográfica. En este artículo, aprenderemos sobre el ayudante tipográfico de subencabezado .
El ayudante tipográfico del subtítulo de Foundation CSS aclara el contenido del encabezado al aumentar la transparencia del texto. Para convertir un bloque de texto en un subtítulo en Foundation CSS, usamos la clase de subtítulo. Esta clase se puede aplicar a cualquier etiqueta con un contenido de bloque de texto, es decir , etiquetas <div> , <span> o <h1> .
Clase auxiliar tipográfica de subtítulo de CSS básico:
- subtítulo: esta clase aclara el contenido textual aumentando la transparencia.
Sintaxis:
<div class="subheader">Content</div>
Ejemplo:
El siguiente ejemplo muestra la clase auxiliar tipográfica del subtítulo en las etiquetas <div>, <span>, <p> y <h1> a <h6>.
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 style="padding: 30px;"> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Foundation CSS Subheader Typographic Helper</strong> <br /><br /> <div class="subheader"> div with subheader helper class </div> <span class="subheader"> span with subheader helper class </span> <p class="subheader"> p with subheader helper class </p> <h1 class="subheader"> h1 with subheader helper class </h1> <h2 class="subheader"> h2 with subheader helper class </h2> <h3 class="subheader"> h3 with subheader helper class </h3> <h4 class="subheader"> h4 with subheader helper class </h4> <h5 class="subheader"> h5 with subheader helper class </h5> <h6 class="subheader"> h6 with subheader helper class </h6> </body> </html>
Producción:
Subtítulo de Ayudantes de Tipografía de CSS de la Fundación
Referencia: https://get.foundation/sites/docs/typography-helpers.html#subheader
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA