Primer CSS Markdown – Barcelona Geeks

Primer CSS es un marco CSS gratuito de código abierto creado con el sistema de diseño GitHub para admitir el amplio espectro de sitios web de Github. Crea la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático asegura que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. Es un modelo altamente reutilizable.

Markdown es un lenguaje de marcado ligero para crear texto formateado. En este artículo, aprenderemos sobre el descuento con Primer CSS.

Lista de elementos con su sintaxis:

Párrafo: Este elemento se utiliza para definir un párrafo.

<p> This is a paragraph </p>

Negrita: esta etiqueta se utiliza para aplicar estilo a cualquier palabra u oración con la propiedad de negrita. En palabras simples, todo lo que esté presente en esta etiqueta se pondrá en negrita.

<b>...</b>

etiqueta tachada: esta etiqueta se utiliza para aplicar estilo a cualquier palabra u oración en el estilo tachado. En palabras simples, todo lo que esté presente en esta etiqueta tendrá una flecha horizontal en el medio de la palabra. Parece que alguien ha cortado esa palabra.

<s>...</s>

Etiqueta en cursiva: esta etiqueta se utiliza para poner la fuente en cursiva.

<i>...</i>

Etiqueta de enlace: esta etiqueta se utiliza para agregar cualquier tipo de enlace a su página web.

<a href="#">... </a>

etiqueta blockquote: esta etiqueta se utiliza para indicar la cita de una gran sección de texto de otra fuente.

 <blockquote>... </blockquote>

Etiqueta de encabezado: esta etiqueta se utiliza para definir el encabezado de una página o una sección.

  <h1> Header 1 </h1>
  <h2> Header 2 </h2>
  <h3> Header 3 </h3>
  <h4> Header 4 </h4>
  <h5> Header 5 </h5>
  <h6> Header 6 </h6>

lista desordenada: esta etiqueta se utiliza para definir la lista en un estilo desordenado.

  <ul>
   <li>...</li>
   <li>...</li>   
 </ul>

lista ordenada: Esta etiqueta se utiliza para definir la lista en un estilo ordenado.

  <ol>
   <li>...</li>
   <li>...</li>  
 </ol>

Tabla: esta etiqueta se utiliza para agregar una tabla a la página web.

 <table>
       <thead>
         <tr>
           <th>heard 1</th>
           <th>header 2</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>table cell 1</td>
           <td>table cell 1</td>
         </tr>
         <tr>
           <td>table cell 2</td>
           <td>table cell 2</td>
         </tr>
         <tr>
           <td>table cell 3</td>
           <td>table cell 3</td>
         </tr>
       </tbody>
 </table>

Nota:

<tr> es la fila de la tabla
<th> es el encabezado de la tabla
<td> es la celda de la tabla
Entrada: esta etiqueta se utiliza para agregar un campo de entrada a la página web.

<input type="checkbox" checked>

texto preformateado: esta etiqueta se utiliza para hacer que cualquier oración tenga formato previo. En palabras simples, se usa para resaltar cualquier frase.

<pre>...</pre>

Subproceso: esta etiqueta se utiliza para agrupar el contenido del encabezado en una tabla HTML .

<thread>... </thread>

Imagen: esta etiqueta se utiliza para agregar una imagen a la página web.

<img src="#">

Sección: esta etiqueta se usa para agregar una sección que dividirá la página web en secciones.

<section>...</section>

Ejemplo 1: En el siguiente ejemplo, hemos utilizado elementos de párrafo y encabezado .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS | Markdown </title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
    rel="stylesheet" />    
</head>
  
<body>
    <div class="markdown-body">
        <center>
            <h1 class="color-fg-success"> GeeksforGeeks </h1>
            <h3> Primer CSS | Markdown </h3><br>
            <p>This is a paragraph</p>
   
        </center>
    </div>
</body>
</html>

Producción:

Primer CSS Markdown

Ejemplo 2: En el siguiente ejemplo, hemos utilizado el elemento de lista.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> Primer CSS Markdown </title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
    rel="stylesheet" />    
</head>
<style>
    h1{
        color:green;
    }
</style>
  
<body>
     <div class="markdown-body">
        <center>
            <h1 class="color-fg-success"> GeeksforGeeks </h1>
            <h3> Primer CSS | Markdown </h3><br>
        </center>
        <h4>Unordered list</h4>
        <ul>
            <li>DBMS</li>
            <li>OS</li>
            <li>CN</li>
        </ul>    
    </div>
</body>
</html>

Producción:

Primer CSS Markdown

Enlace de referencia: https://primer.style/css/components/markdown

Publicación traducida automáticamente

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

HTML

HTML

Deja una respuesta Cancelar la respuesta