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 sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen increíbles y pueden ser accesibles para cualquier dispositivo. En este artículo, discutiremos las clases auxiliares de texto de las utilidades de creación de prototipos en Foundation CSS.
En Foundation CSS, los asistentes de texto de Prototyping Utilities se utilizan para jugar con el texto y cambiar la transformación del texto, la decoración del texto y el comportamiento de reemplazo de imágenes.
Clases de ayudantes de texto de utilidades de creación de prototipos CSS de Foundation:
- text-hide: esta clase se puede usar para ocultar el texto del elemento dentro del contexto de la imagen dada.
- text-uppercase: Esta clase se puede utilizar para transformar el texto a mayúsculas.
- text-lowercase: Esta clase se puede utilizar para transformar el texto a minúsculas.
- text-capitalize: esta clase se puede usar para transformar el primer carácter del texto de cada palabra en mayúsculas y dejar las otras letras sin afectar.
- texto-subrayado: esta clase se puede usar para decorar el texto para que tenga un subrayado en todas partes.
- text-overline: esta clase se puede usar para decorar el texto para que tenga un overline en todas partes.
- text-line-through: esta clase se puede usar para decorar el texto para que tenga líneas a lo largo del texto.
Sintaxis:
<div class="text-helper-class">
........
</div>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de ayudantes de texto utilizando la clase .text-hide .
HTML
<!DOCTYPE html> <html> <head> <title>Prototyping Utilities Text Helpers classes</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" crossorigin="anonymous"> </head> <body style="margin: 10rem;"> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3>Foundation CSS Text Helpers</h3> <a target="_blank" href="https://www.geeksforgeeks.org" class="text-hide"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220228120243/gfglogo-200x107.png" alt="gfg logo">Some SEO text here </a> </center> </body> </html>
Producción:
Foundation CSS Prototyping Utilities Asistentes de texto
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de los ayudantes de texto mediante las clases de texto en mayúsculas, texto en minúsculas y texto en mayúsculas .
HTML
<!DOCTYPE html> <html> <head> <title>Prototyping Utilities Text Helpers classes</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"/> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"> </script> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"/> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"/> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" crossorigin="anonymous"/> </head> <body style="margin: 10rem"> <center> <h2 style="color: green">GeeksforGeeks</h2> <h3>Foundation CSS Text Helpers</h3> <p class="text-uppercase">GeeksforGeeks</p> <p class="text-lowercase">GEEKSFORGEEKS</p> <p class="text-capitalize">geeksforgeeks</p> </center> </body> </html>
Producción:
Foundation CSS Prototyping Utilities Asistentes de texto
Ejemplo 3: a continuación se muestra el ejemplo que ilustra el uso de los ayudantes de texto mediante las clases .text-underline, .text-overline y .text-line-through .
HTML
<!DOCTYPE html> <html> <head> <title>Prototyping Utilities Text Helpers classes</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"/> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"> </script> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"/> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"/> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" crossorigin="anonymous"/> </head> <body style="margin: 10rem"> <center> <h2 style="color: green">GeeksforGeeks</h2> <h3>Foundation CSS Text Helpers</h3> <p class="text-underline">GeeksforGeeks</p> <p class="text-overline">GeeksforGeeks</p> <p class="text-line-through">GeeksforGeeks</p> </center> </body> </html>
Producción:
Foundation CSS Prototyping Utilities Asistentes de texto
Enlace de referencia: https://get.foundation/sites/docs/prototyping-utilities.html#text-helpers
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA