Primer CSS Body Content Utilidades

Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.

Primer CSS Body Content Utilities se utiliza para cambiar el tamaño de fuente y el peso de fuente del cuerpo del elemento en las páginas de marketing. Podemos usar clases de f0-mktg – f6-mktg . En este artículo, discutiremos las utilidades de contenido del cuerpo de CSS de Primer.

Primer CSS Body Content Utilities Classes:

f*-mktg: Las clases varían de f0 a f6 para cambiar el tamaño y el peso de la fuente.

Sintaxis:

<p class="f*-mktg">
       ...
</p>

Ejemplo 1: El siguiente ejemplo demuestra las utilidades de contenido corporal de Primer CSS utilizando las clases f0-mktg, f1-mktg y f2-mktg .

HTML

<!DOCTYPE html>
<html>
      
<head>
    <title> Primer CSS Body Content Utilities </title>
    <link rel="stylesheet" 
          href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
</head>
  
<body>
    <div class="text-center">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS Body Content Utilities </h3> <br>
          
        <p class="f0-mktg mb-3">
            A Computer Science portal for geeks. 
        </p>
  
        <p class="f1-mktg mb-3">
            It contains well written, well thought
            and well explained computer science and
            programming articles.
        </p>
  
        <p class="f2-mktg">
            A Computer Science portal for geeks.
        </p>
    </div>
</body>
  
</html>

Producción:

Primer CSS Body Content Utilidades

Ejemplo 2: El siguiente ejemplo demuestra las utilidades de contenido corporal de Primer CSS utilizando las clases f3-mktg, f4-mktg, f5-mktg y f6-mktg .

HTML

<!DOCTYPE html>
<html>
      
<head>
    <title> Primer CSS Body Content Utilities </title>
    <link rel="stylesheet" 
          href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
</head>
  
<body>
    <div class="text-center">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS Body Content Utilities </h3> <br>
          
        <p class="f3-mktg mb-3">
            A Computer Science portal for geeks. 
        </p>
  
        <p class="f4-mktg mb-3">
            It contains well written, well thought
            and well explained computer science and
            programming articles.
        </p>
  
        <p class="f5-mktg">
            A Computer Science portal for geeks.
        </p>
  
        <p class="f6-mktg">
            It contains well written, well thought
            and well explained computer science and
            programming articles.
        </p>
    </div>
</body>
  
</html>

Producción:

Primer CSS Body Content Utilidades

Referencia: https://primer.style/css/utilities/marketing-type#body-content-utilities

Publicación traducida automáticamente

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

HTML

HTML

Deja una respuesta Cancelar la respuesta