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.
Los enlaces se utilizan para que el usuario navegue a otras páginas web haciendo clic en ellos. Se colocan únicamente en páginas web relacionadas con el contenido. Hay diferentes tipos de enlaces de marketing disponibles en Primer CSS.
- Tamaños de enlace : los enlaces de marketing se pueden diseñar en tamaños pequeños y grandes utilizando las clases f4-mktg y f3-mktg .
- Enlace con énfasis : los enlaces se pueden diseñar para dar un subrayado usando laclase link-emphasis-mktg
- Colores de enlace : los enlaces se pueden diseñar con diferentes colores utilizando lasclases de color de Primer .
Agregue la clase link-mktg con estas clases de modificadores para implementar los enlaces de marketing mencionados anteriormente.
Sintaxis:
<a href="#" class="link-mktg "> Text to be shown... </a>
Ejemplo 1: este ejemplo demuestra los diferentes tipos de enlaces de marketing de Primer CSS utilizando la clase link-mktg .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Marketing Links</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success">GeeksforGeeks </h1> <h5>Primer CSS Marketing Links</h5><br /> </div> <div class="text-center"> Click <a href= "https://practice.geeksforgeeks.org/" class="link-mktg link-emphasis-mktg color-fg-success f3-mktg mr-1"> Geeks for Geeks</a> to learn how to code. </div> </body> </html>
Producción:
Enlace a la práctica de GFG
Ejemplo 2: Este ejemplo demuestra los diferentes tipos de enlaces de marketing de Primer CSS utilizando la clase link-mktg .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Marketing Links</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success">GeeksforGeeks </h1> <h5>Primer CSS Marketing Links</h5><br /> </div> <div class="text-center"> <h5>Link - Sizes :</h5><br /> <a href="#" class="link-mktg f3-mktg mr-4">Large link</a> <a href="#" class="link-mktg f4-mktg">Small link</a> <br /><br /><h5>Link with Emphasis :</h5><br /> <a href="#" class="link-mktg link-emphasis-mktg f3-mktg"> Underlined link </a> <br /><br /><h5>Link - Colors :</h5><br /> <a href="#" class="link-mktg f3-mktg color-fg-success mr-4 ">Link 1</a> <a href="#" class="link-mktg f3-mktg color-fg-accent mr-4">Link 2</a> <a href="#" class="link-mktg f3-mktg color-fg-severe mr-4">Link 3</a> <a href="#" class="link-mktg f3-mktg color-fg-done mr-4">Link 4</a> <a href="#" class="link-mktg f3-mktg color-fg-sponsors mr-4">Link 5</a> </div> </body> </html>
Producción:
Enlaces de comercialización
Referencia: https://primer.style/css/components/marketing-links
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA