Tachyons es un conjunto de herramientas de CSS que se utiliza para crear un sitio web receptivo. En este artículo, aprenderemos cómo incluir el tamaño de las cajas usando Tachyons.
El tamaño de la caja en Tachyons se usa para crear los diferentes tamaños de la caja en la página web. Cada elemento que estamos usando en la página web tiene cajas de diferentes tamaños. Los ejemplos son HTML, cuerpo, div, artículo y muchos más.
Clases de tamaño de cuadro de diseño de taquiones:
No hay clases predefinidas que los taquiones proporcionen para esto, necesitamos usar clases de ancho para fijar el ancho de la caja.
Los elementos con diferentes tamaños se enumeran a continuación:
- HTML: Este elemento se utiliza para definir la página HTML.
- cuerpo: Este elemento se utiliza para definir el cuerpo o contenido de la página.
- div: Este elemento se utiliza para definir la división de la página web.
- artículo: Este elemento se utiliza para incluir artículos en la página web.
- sección: Este elemento se utiliza para definir la sección en la página web.
- main: Este elemento se usa para definir el main en la página web.
- pie de página: Este elemento se utiliza para definir el pie de página en la página web.
- header: Este elemento se utiliza para definir el encabezado del contenido.
- form: Este elemento se utiliza para definir el formulario en la página web.
- fieldset: Este elemento se utiliza para definir el fieldset en la página web.
- leyenda: Este elemento se utiliza para definir la leyenda en la página web.
- pre: Este elemento se utiliza para resaltar el elemento.
- código: Este elemento se utiliza para incluir el código en la página web.
- a: Este elemento se utiliza para incluir el enlace en la página web.
- h1,h2,h3,h4,h5,h6: estos elementos se utilizan para definir el encabezado del contenido.
- p: Este elemento se utiliza para definir el párrafo en la página web.
- ul: Este elemento se utiliza para definir la lista desordenada.
- ol: Este elemento se utiliza para definir la lista ordenada.
- li: Este elemento se utiliza para definir la lista en la página web.
- dl: Este elemento se utiliza para definir la lista de descripción.
- dt: Este elemento se utiliza para definir el término/nombre en una lista de descripción.
- dd: este elemento se utiliza para describir un término/nombre en una lista de descripción
- textarea: este elemento se utiliza para un control de entrada de texto de varias líneas.
- tabla: Este elemento se utiliza para definir la tabla en la página web
- td: este elemento se utiliza para el elemento Celda de datos.
- th: Este elemento se utiliza para crear el encabezado de la tabla.
- tr: este elemento se utiliza para el elemento fila de la tabla.
- input[type=”email”]: este elemento se utiliza para definir el tipo de entrada de correo electrónico.
- entrada[tipo=”número”]: Este elemento se utiliza para definir el tipo de entrada de número.
- input[type=”password”]: este elemento se utiliza para definir el tipo de entrada de la contraseña.
- input[type=”tel”]: Este elemento se utiliza para definir el tipo de entrada de teléfono.
- input[type=”text”]: Este elemento se utiliza para definir el tipo de entrada de texto.
- input[type=”URL”]: este elemento se utiliza para definir el tipo de entrada de URL.
Ejemplo 1: El siguiente ejemplo demuestra el tamaño del cuadro de diseño de taquiones.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
body{
background-color:green;
margin:50px;
border:2px solid black;
}
html{
background-color:lightgreen;
border:5px solid red;
}
h1{
text-align:center;
margin: 50px;
border:5px solid blue;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Producción:
Explicación: En el código anterior, hemos utilizado dos elementos diferentes, el elemento <HTML> y el elemento <body> , y podemos ver claramente que los dos cuadros son de diferentes tamaños. Podemos cambiar el tamaño de cada elemento definiendo el tamaño de ese elemento usando ancho y alto o margen y relleno .
Ejemplo 2: En el siguiente ejemplo veremos los diferentes tamaños de la caja.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
html{
background-color:lightgreen;
margin:20px;
border:5px solid black;
}
h1{
text-align:center;
margin:20px;
border:5px solid orange;
}
h2{
background-color:red;
margin:20px;
border:5px solid blue;
}
h3{
background-color:yellow;
margin:20px;
border:5px solid pink;
}
h4{
background-color:grey;
margin:20px;
border:5px solid lightgrey;
}
h5{
background-color:violet;
margin:20px;
border:5px solid brown;
}
h6{
background-color:pink;
margin:20px;
border:5px solid red;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1><br>
<h2>GeeksforGeeks</h2>
<h3>GeeskforGeeks</h3>
<h4>GeeksforGeeks</h4>
<h5>GeeksforGeeks</h5>
<h6>GeeksforGeeks</h6>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/layout/box-sizing/
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