Citas en bloque de tipografía base de CSS de la fundación

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 la página web atractiva.

Foundation CSS Base Typography Blockquote se usa para mostrar las citas largas (una sección que se cita de otra fuente). Cambia la alineación para que sea único de los demás.

Fundación CSS Base Tipografía Blockquote Etiqueta:

  • Etiqueta <blockquote>: esta etiqueta se utiliza para mostrar las citas largas que cambian la alineación para que sea único de los demás.

Sintaxis:

<blockquote> Content... </blockquote>

Ejemplo 1: En este ejemplo, describiremos el uso de Foundation CSS Base Typography Blockquote.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Foundation CSS Base Typography Blockquotes
    </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 Blockquotes
    </h2>
      
    <blockquote>
        A Computer Science portal for geeks. It 
        contains well written, well thought and 
        well explained computer science and 
        programming articles...
    </blockquote>
  
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

Ejemplo 2: En este ejemplo, describiremos el uso de Foundation CSS Base Typography Blockquote.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Foundation CSS Base Typography Blockquotes
    </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 Blockquotes
    </h2>
      
    <blockquote>
        A Computer Science portal for geeks. It 
        contains well written, well thought and 
        well explained computer science and 
        programming articles...
        <cite>GeeksforGeeks</cite>
    </blockquote>
  
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

Referencia: https://get.foundation/sites/docs/typography-base.html#blockquotes

Publicación traducida automáticamente

Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *