Bulma es un marco CSS gratuito y de código abierto que se puede utilizar como alternativa a Bootstrap.
En este artículo, discutiremos el título de Bulma. El título de Bulma es proporcionar el encabezado principal de nuestra aplicación. También podemos cambiar el tamaño y el color del título. Puede consultar los tamaños de título de Bulma para saber cómo usar los tamaños de título de Bulma en sus aplicaciones web.
Clases utilizadas:
- título: esta clase se utiliza para agregar el encabezado como título principal en su aplicación web.
Sintaxis:
<h1 class="title">....</h1>
Variables:
| Nombre | Descripción | Escribe | Valor | Valor calculado | Tipo calculado |
|---|---|---|---|---|---|
| $título-color | Se utiliza para colorear el título. | variable | $texto fuerte | hsl(0, 0%, 21%) | color |
| $título-familia | Es una variable booleana que se utiliza para las fuentes. | booleano | falso | ||
| $título-tamaño | Se utiliza para definir el tamaño del título. | variable | $talla-3 | 2 rem | Talla |
| $título-peso | Se utiliza para definir el peso del título. | variable | $peso-seminegrita | 600 | peso de fuente |
| $título-línea-altura | Se utiliza para definir la altura de la línea. | sin unidad | 1.125 | ||
| $título-color-fuerte | Se utiliza para poner el título en negrita. | cuerda | heredar | ||
| $título-peso-fuerte | Se utiliza para definir la audacia y el peso del título. | cuerda | heredar | ||
| $título-sub-tamaño | Se utiliza para definir el subtamaño del título. | Talla | 0.75em | ||
| $title-sup-size | Se utiliza para definir el tamaño sup del título. | Talla | 0.75em | ||
| $subtitulo-color | Se utiliza para proporcionar el color del subtítulo. | variable | $texto | hsl(0, 0%, 29%) | color |
| $subtitle-familia | Se utiliza para definir la familia de fuentes del subtítulo. | booleano | falso | ||
| $subtítulo-tamaño | Se utiliza para definir el tamaño del subtítulo. | variable | $talla-5 | 1,25 rem | Talla |
| $subtítulo-peso | Se utiliza para definir el peso del subtítulo. | variable | $peso-normal | 400 | peso de fuente |
| $subtitle-line-height | Se utiliza para definir la altura de línea del subtítulo. | sin unidad | 1.25 | ||
| $subtítulo-color-fuerte | Se utiliza para dar color y resaltar el subtítulo. | variable | $texto fuerte | hsl(0, 0%, 21%) | color |
| $subtítulo-peso-fuerte | Se utiliza para dar peso y resaltar el subtítulo. | variable | $peso-seminegrita | 600 | peso de fuente |
| $subtítulo-margen-negativo | se utiliza para definir el margen negativo del subtítulo. | Talla | -1,25 rem |
Ejemplo 1: en el siguiente código, utilizaremos la variable anterior para demostrar el uso de las variables de título.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width,initial-scale=1"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <link rel="stylesheet" href="style.css"> <title>Bulma Variable</title> </head> <body> <center> <h1 class="title" style="font-size:40px;"> GeeksforGeeks </h1> <h3 class="subtitle"> A computer science portal for geeks </h3> </center> </body> </html>
Código SCSS:
$title-color: green;
.title{
color:$title-color;
}
Código CSS compilado:
.title {
color: green;
}
Producción:
Ejemplo 2: en el siguiente código, utilizaremos la variable anterior para demostrar el uso de las variables de título .
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width,initial-scale=1"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <link rel="stylesheet" href="style.css"> <title>Bulma Variable</title> </head> <body> <center> <h1 class="title"> GeeksforGeeks </h1> <h3 class="subtitle"> A computer science portal for geeks </h3> </center> </body> </html>
Código SCSS:
$title-size: 60px;
$title-color:green;
.title{
font-size:$title-size;
color:$title-color;
}
Código CSS compilado:
.title {
font-size: 60px;
color: green;
}
Producción:
Referencia: https://bulma.io/documentation/elements/title/
Publicación traducida automáticamente
Artículo escrito por bhaluram18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA