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.
En este artículo, aprenderemos sobre los estilos de altura de línea tipográfica de Primer CSS. Estilos de altura de línea establece la altura de un cuadro de línea. Se usa comúnmente para establecer la distancia entre líneas de texto.
Primer CSS Tipografía Clases de altura de línea:
- lh-default: esta clase se usa para establecer la distancia entre líneas en 1.5
- lh-condensed: esta clase se utiliza para establecer la distancia entre líneas en 1,25.
- lh-condensed-ultra: esta clase se usa para establecer la distancia entre líneas en 1.
Clases de variantes receptivas:
- lh-sm-condensed: esta clase se utiliza para establecer la distancia entre líneas en 1,25 en pantallas pequeñas.
- lh-md-condensed: esta clase se utiliza para establecer la distancia entre líneas en 1,25 en pantallas medianas.
- lh-lg-condensed: esta clase se utiliza para establecer la distancia entre líneas en 1,25 en pantallas grandes.
- lh-xl-condensed: esta clase se utiliza para establecer la distancia entre líneas en 1,25 en pantallas extragrandes.
Sintaxis:
<p class="Typography-Line-Height-Class">
...
</p>
De manera similar, todas las clases tienen sus variantes receptivas según el tamaño de la pantalla.
Nota: Podemos establecer la altura de línea en 0, usando la clase lh-0.
Ejemplo 1: en este ejemplo, aprenderemos sobre las diferentes clases de altura de línea, a saber , lh-default , lh-condensed y lh-condensed-ultra .
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
rel="stylesheet" />
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Typography Line Height</h3>
<h2>lh-default</h2>
<p class="lh-default">
GeeksforGeeks is a computer science portal.
It provides trainings in wide variety of
courses like C++, Java, CSS, HTML, Bootstrap.
It also facilitates training in Blockchain,
Full Stack Development, and other courses
that are currently required to by the
student to build their concepts. GeeksforGeeks
also helps students to secure a job. They
conduct various technical sessions of Data
structures and other modules like operating
system.
</p>
<h2>lh-condensed</h2>
<p class="lh-condensed">
GeeksforGeeks is a computer science portal.
It provides trainings in wide variety of
courses like C++, Java, CSS, HTML, Bootstrap.
It also facilitates training in Blockchain,
Full Stack Development, and other courses
that are currently required to by the
student to build their concepts. GeeksforGeeks
also helps students to secure a job. They
conduct various technical sessions of Data
structures and other modules like operating
system.
</p>
<h2>lh-condensed-ultra</h2>
<p class="lh-condensed-ultra">
GeeksforGeeks is a computer science portal.
It provides trainings in wide variety of
courses like C++, Java, CSS, HTML, Bootstrap.
It also facilitates training in Blockchain,
Full Stack Development, and other courses
that are currently required to by the
student to build their concepts. GeeksforGeeks
also helps students to secure a job. They
conduct various technical sessions of Data
structures and other modules like operating
system.
</p>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, estableceremos la altura de línea en 0 usando la clase lh-0 .
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
rel="stylesheet" />
<style>
body{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3> Typography Line Height</h3>
<h2>lh-0</h2>
<p class="lh-0">
GeeksforGeeks is a computer science portal.
It provides trainings in wide variety of
courses like C++, Java, CSS, HTML, Bootstrap.
It also facilitates training in Blockchain,
Full Stack Development, and other courses
that are currently required to by the
student to build their concepts. GeeksforGeeks
also helps students to secure a job. They
conduct various technical sessions of Data
structures and other modules like operating
system
</p>
</body>
</html>
Producción:
Referencia: https://primer.style/css/utilities/typography#line-height-styles
Publicación traducida automáticamente
Artículo escrito por nikitamehrotra99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA