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 que se ven increíbles y pueden 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.
La decoración de texto de Prototyping Utilities ayuda a subrayar, sobrerayar o pasar líneas por un texto.
Clases de decoración de texto de la utilidad de creación de prototipos CSS de Foundation:
- text-underline: para crear una línea de subrayado, es decir, una línea horizontal debajo del texto
- text-overline: para crear una línea superior, es decir, una línea horizontal sobre el texto
- text-line-through: para crear un line-through, es decir, una línea horizontal que atraviesa el texto
Habilitación de la transformación de texto:
@include foundation-prototype-text-decoration;
Sintaxis:
<p class="text-decoration-class"> Content </p>
Ejemplo 1: En este ejemplo, mostraremos texto para demostrar el uso de text-subrayado
HTML
<html> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "https://get.foundation/sites/docs/assets/css/docs.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Foundation CSS Prototyping Utilities Text-Decoration</h3> <br> <h2 style="color:red"> text-underline</h2> <p class="text-underline">Geeks for geeks is a computer science portal.It helps many tech aspirants to upskill their coding skills. It also gives opportunites to secure a job via various coding events like Job-a-thon. It provides a wide range of courses that facilitates the students to enhance their skills.</p> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, mostraremos texto para demostrar el uso de texto sobrelineado
HTML
<html> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "https://get.foundation/sites/docs/assets/css/docs.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Foundation CSS Prototyping Utilities Text-Decoration</h3> <br> <h2 style="color:red"> text-overline</h2> <p class="text-overline">Geeks for geeks is a computer science portal.It helps many tech aspirants to upskill their coding skills. It also gives opportunites to secure a job via various coding events like Job-a-thon. It provides a wide range of courses that facilitates the students to enhance their skills.</p> </body> </html>
Producción:
Ejemplo 3: En este ejemplo, mostraremos texto para demostrar el uso de la línea de texto
HTML
<html> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "https://get.foundation/sites/docs/assets/css/docs.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Foundation CSS Prototyping Utilities Text-Decoration</h3> <br> <h2 style="color:red"> text-line-through</h2> <p class="text-line-through">Geeks for geeks is a computer science portal.It helps many tech aspirants to upskill their coding skills. It also gives opportunites to secure a job via various coding events like Job-a-thon. It provides a wide range of courses that facilitates the students to enhance their skills.</p> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nikitamehrotra99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA