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.
Foundation CSS Base Typography se usa para agregar los estilos predeterminados para hacer que los elementos sean más atractivos. La tipografía base facilita la vida al proporcionar elementos y clases simples y atractivos para construir una página web atractiva.
Foundation CSS Base Typography Header se usa para agregar estilos de encabezado en todos los elementos del encabezado. El elemento de encabezado contiene seis elementos de encabezado diferentes (<h1>, <h2>, <h3>, <h4>, <h5> y <h6>) que se utilizan para representar diferentes tamaños. Aquí, el elemento <h1> representa texto de gran tamaño y <h6> representa contenido de texto de tamaño pequeño.
Elementos de encabezado de tipografía básica CSS de Foundation:
- <h1>, <h2>, <h3>, <h4>, <h5> y <h6> : Estos elementos se utilizan para representar el encabezado y subtítulo de los contenidos.
Sintaxis:
<h1> Content... <h1>
Ejemplo 1: En este ejemplo, describiremos el uso del encabezado de tipografía base CSS de Foundation.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Foundation CSS Base Typography Header </title> <!-- 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> <div class="text-center"> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Foundation CSS Base Typography Header </h2> <div class="callout success"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </div> </div> </body> </html>
Producción:
Encabezado de tipografía base de CSS básico
Ejemplo 2: En este ejemplo, describiremos el uso del encabezado tipográfico básico de Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Foundation CSS Base Typography Header </title> <!-- 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> <h2> Foundation CSS Base Typography Header </h2> <div class="callout success"> <h1>GeeksforGeeks</h1> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles... </p> <h3>HTML</h3> <p> HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. </p> <h5>JavaScript</h5> <p> JavaScript is the world most popular lightweight, interpreted compiled programming language. It is also known as scripting language for web pages. </p> </div> </body> </html>
Producción:
Encabezado de tipografía base de CSS básico
Referencia: https://get.foundation/sites/docs/typography-base.html#header
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA