Unidades CSS | Explicado
Los resultados de este blog son:
- ¿Qué son las unidades CSS??
- ¿Cuáles son las unidades de longitud absoluta en CSS??
- Cómo usar unidades de longitud absoluta en CSS?
- ¿Cuáles son las unidades de longitud relativa en CSS??
- Cómo usar unidades de longitud relativa en CSS?
¿Qué son las unidades CSS??
Hay varias unidades en CSS que se utilizan para indicar una longitud o para la medición de la propiedad CSS. Por ejemplo, en un archivo CSS, el "tamaño de fuenteA la propiedad se le asigna un valor de "25px", Que representa el número con la unidad"píxel"(PX). Además, no debe haber ningún espacio en blanco entre el número y la unidad de medición relevante. Sin embargo, si el valor de longitud es 0, las unidades pueden excluirse.
Las unidades de longitud CSS son de dos tipos: relativo y absoluto.
¿Cuáles son las unidades de longitud absoluta en CSS??
Las unidades de longitud absoluta dependen de una unidad física real. Normalmente tienen el mismo tamaño en diferentes dispositivos. No se recomiendan estas unidades para la utilización en las pantallas porque el tamaño de la pantalla varía. Sin embargo, las unidades de longitud absoluta se utilizan donde se conoce el tamaño de la pantalla. Estos tipos de unidades también son útiles en las tareas donde la capacidad de respuesta no importa.
Cómo usar unidades de longitud absoluta en CSS?
Hay varias unidades absolutas utilizadas en CSS. Algunos de ellos se muestran a continuación:
| Unidad | Descripción |
| PT | Especifica la medición en puntos. 1pt = 1/72 de 1 pulgada. |
| en | Especifica la medición en pulgadas. 1in = 96px = 2.54 cm |
| px | Especifica la medición en píxeles. 1px = 1/96 de pulgada. |
| cm | Especifica la medición en centímetros. |
Pasemos por el ejemplo en el que se usan las unidades de longitud absoluta.
Ejemplo: Uso de unidades de longitud absoluta en CSS
En HTML, primero agregue un DIV con estilo CSS en línea, usando "margen" y "relleno" propiedades. Entonces el
La etiqueta se coloca para agregar un rumbo a la página. Varios
Las etiquetas se agregan con lo relevante "tamaño de fuente"En números que tienen diferentes unidades:
La propiedad de "tamaño de fuente"
tamaño de fuente: 20px
tamaño de fuente: 20pt
tamaño de fuente: 20 pulgadas
tamaño de fuente: 20 cm
tamaño de fuente: 20 mm
Se puede observar que el texto con valores que tienen diferentes longitudes de CSS se han mostrado en la página web:
¿Cuáles son las unidades de longitud relativa en CSS??
En CSS, las unidades de longitud relativa especifican la longitud en relación con la propiedad de longitud correspondiente. En comparación con las longitudes absolutas, las unidades de longitud relativa son mucho mejores, ya que proporcionan una escala entre varios medios de representación.
Cómo usar unidades de longitud relativa en CSS?
Aquí, hemos alistado algunas de las unidades de longitud relativa principalmente utilizadas en CSS:
| Unidad | Descripción |
| VH | Altura de la vista: en relación con el 1% de la altura de la ventana gráfica |
| VW | Vista de ancho: en relación con el 1% del ancho de la visión |
| De % | Porcentaje: es el tamaño en porcentaje en relación con el tamaño de los padres. |
| vmin | Viewport Mínimo: 1% de las dimensiones más pequeñas de la ventana gráfica. |
| vmax | Máximo de la ventana gráfica: 1% de las dimensiones más grandes de la ventana gráfica. |
Ejemplo: Uso de unidades de longitud relativa en CSS
Usando el mismo código HTML, ahora solo cambiaremos el valor del "tamaño de fuente"Propiedad con las unidades de longitud relativa relevantes:
La propiedad de "tamaño de fuente"
tamaño de fuente: 3VH
tamaño de fuente: 3ch
tamaño de fuente: 3%
tamaño de fuente: 3rem
tamaño de fuente: 3VW
Producción
Así es como puede utilizar diferentes unidades CSS en nuestros archivos HTML.
Conclusión
Hay dos tipos de unidades de longitud utilizadas en CSS: unidades de longitud absoluta y unidades de longitud relativa. Las longitudes absolutas no son relativas a otra cosa. Siempre son iguales en cada tamaño de ventana, pero las unidades de longitud relativa siempre son relativas a algo, como el elemento principal, la fuente o el tamaño. Este artículo proporciona una guía completa sobre las unidades CSS, el tipo de unidades de longitud CSS y cómo se pueden utilizar.