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.
Los estilos básicos de Foundation CSS se utilizan para agregar algunos estilos básicos en el elemento tipográfico. Para agregar los estilos básicos en la tipografía, usaremos algunas etiquetas predefinidas. Por ejemplo: párrafo, encabezados, enlaces, etc.
Foundation CSS Base Typography Los párrafos se usan para agregar contenido dentro del elemento de párrafo y usaremos las etiquetas <strong> y <em> para representar la importancia del texto. La etiqueta <strong> crea un texto en negrita y la etiqueta <em> crea un texto en cursiva. También podemos ajustar el ancho de línea y los estilos del contenido del párrafo usando el archivo .scss.
Foundation CSS Base Tipografía Párrafo Etiqueta:
- <p> Etiqueta: Esta etiqueta se utiliza para agregar el contenido del párrafo. Si desea agregar algunos estilos en el bloque de párrafo, puede agregar algunas clases predefinidas como: éxito de llamada , etc.
Sintaxis:
<p> Content... </p>
Ejemplo 1: En este ejemplo, describiremos los usos de los párrafos tipográficos básicos de Foundation CSS.
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> <div class="text-center"> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Foundation CSS Base Typography Paragraphs </h2> <div class="callout"> <h3>Web Technology</h3> <p> Web Technology refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet. A web browser is used to access web pages. </p> </div> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, describiremos los usos de los párrafos tipográficos básicos de Foundation CSS.
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> <div class="text-center"> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Foundation CSS Base Typography Paragraphs </h2> <div class="callout success"> <h3>Web Technology</h3> <p> <strong>Web Technology</strong> refers to the various tools and <em>techniques</em> that are utilized in the process of communication between different types of <strong>devices</strong> over the <strong>internet</strong>. A <em>web browser</em> is used to access web pages. </p> </div> </div> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/typography-base.html#paragraphs
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA