Unidades CSS

 

 

 

Unidades css 1

Aprenda a trabajar con unidades en CSS

 

Una de las cosas que usarás a diario en CSS son las unidades . Se utilizan para establecer longitudes, rellenos, márgenes, alinear elementos, etc.

Cosas como px, em, remo porcentajes.

Están por todas partes. También hay algunos relativamente desconocidos.

Píxeles

La unidad de medida más utilizada. Un píxel no se correlaciona con un píxel físico en la pantalla, ya que esto varía mucho según el dispositivo (piense en dispositivos con alta resolución de PPP y dispositivos sin pantalla retina).

Existe una convención que hace que esta unidad funcione de manera consistente en todos los dispositivos.

Porcentajes

Otra medida muy útil, los porcentajes le permiten especificar valores en porcentajes de la propiedad correspondiente de ese elemento padre.

Ejemplo:

.parent { width: 400px;}.child { width: 50%; /* = 200px */}

Unidades de medida del mundo real

Contamos con unidades de medida que se traducen del mundo exterior. En su mayoría son inútiles en la pantalla, pero pueden resultar útiles para hojas de estilo impresas. Son:

  • cmun centímetro (se asigna a 37,8 píxeles)
  • mmun milímetro (0,1 cm)
  • qun cuarto de milímetro
  • inuna pulgada (se asigna a 96 píxeles)
  • ptun punto (1 pulgada = 72 puntos)
  • pcuna pica (1 pica = 12 puntos)

Unidades relativas

  • emes el valor asignado a ese elemento font-size, por lo tanto su valor exacto cambia entre elementos. No cambia dependiendo de la fuente utilizada, solo del tamaño de la fuente. En tipografía mide el ancho de la mletra.
  • remes similar a em, pero en lugar de variar el tamaño de fuente del elemento actual, utiliza el htmltamaño de fuente del elemento raíz ( ). Establece ese tamaño de fuente una vez y remserá una medida consistente en toda la página.
  • exes como em, pero insertado de medir el ancho de m, mide la altura de la xletra. Puede cambiar dependiendo de la fuente utilizada y del tamaño de la fuente.
  • ches como expero en lugar de medir la altura xmide el ancho de 0(cero).

Unidades de ventana gráfica

  • vwLa unidad de ancho de la ventana gráfica representa un porcentaje del ancho de la ventana gráfica. 50vwsignifica el 50% del ancho de la ventana gráfica.
  • vhLa unidad de altura de la ventana gráfica representa un porcentaje de la altura de la ventana gráfica. 50vhsignifica el 50% de la altura de la ventana gráfica.
  • vminLa unidad mínima de la ventana gráfica representa el mínimo entre la altura o el ancho en términos de porcentaje. 30vmines el 30% del ancho o la altura actual, dependiendo de cuál sea menor.
  • vmaxLa unidad máxima de la ventana gráfica representa el máximo entre la altura o el ancho en términos de porcentaje. 30vmaxes el 30% del ancho o la altura actual, dependiendo de cuál sea mayor.

Unidades de fracciones

frSon unidades de fracción y se utilizan en CSS Grid para dividir el espacio en fracciones. Guias y Trucos tecnologicos

Tips de CSS




Tal vez te puede interesar:

  1. Manejo de errores CSS
  2. Importar un archivo CSS usando @import
  3. Bordes CSS
  4. La propiedad flotante CSS y su limpieza

Unidades CSS

PíxelesPorcentajesUnidades de medida del mundo realUnidades relativasUnidades de ventana gráficaUnidades de fracciones

programar

es

https://aprendeprogramando.es/static/images/programar-unidades-css-2012-0.jpg

2024-10-31

 

Unidades css 1
Unidades css 1

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences