Unidades de medida en CSS

CSS | Unidades de medida : En este tutorial, vamos a aprender acerca de los diferentes unidades de medida en CSS (Cascading Style Sheet).

CSS | Unidades de medida

La medición de la distancia en CSS es un número seguido inmediatamente por una unidad de longitud. CSS soporta varias unidades de medición de longitud. Son,

  1. longitud absoluta
  2. longitud relativa

1) longitud absoluta

Las unidades de longitud absolutos son fijos y no pueden ser cambiados.

No es preferible usar uso class longitud absoluta en la pantalla como la pantalla puede variar dependiendo del dispositivo utilizado for esa página. Se recomienda su uso cuando se conozca el medio de salida.

unidades de longitud absoluta,

1) cm (centímetro)

Se utiliza para definir la longitud en términos de cm.

Sintaxis:

Element {
font-size: 15cm;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 2cm;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 4

En el ejemplo anterior, se utiliza cm unidad de longitud.

2) mm (milímetro)

Se utiliza para definir la longitud en términos de mm.

Sintaxis:

Element {
font-size: 10mm;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 6mm;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 5

En el ejemplo anterior, se utiliza mm unidad de longitud.

3) en (pulgadas)

Se utiliza para definir el tamaño del elemento en términos de pulgadas.

Nota : 1in = 96px = 2.54cm

Sintaxis:

Element {
font-size: 3in;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 0.5in;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 6

En el ejemplo anterior, en unidad de longitud se utiliza.

4) px (píxeles)

Se utiliza para definir la longitud en términos de píxeles.

Nota: 1px = 1 / 96a de 1in

Sintaxis:

Element {
font-size: 10px;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 44px;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 7

En el ejemplo anterior, se utiliza px unidad de longitud.

5) pt (puntos)

Se utiliza para definir la longitud en términos de puntos.

Nota: 1pt = 1/72 de 1in

Sintaxis:

Element {
font-size: 10pt;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 66pt;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 8

En el ejemplo anterior, se utiliza pt unidad de longitud.

6) pc (picas)

Se utiliza para definir la longitud en términos de picas.

Nota: 1pc = 12 pt

Sintaxis:

Element {
font-size: 3pc;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 4pc;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 9

En el ejemplo anterior, pc se utiliza unidad de longitud.

2) longitud relativa

unidad de longitud relativa es un buen uso for en pantalla como si tamaño de la pantalla varía dependiendo del dispositivo a continuación, estas unidades de longitud relativas también cambian con los diferentes medios de representación.

unidad relativa longitudes,

1) em

Es en relación con el tamaño de la fuente de ese elemento. ( n em significa n veces el tamaño de la fuente actual)

Sintaxis:

Element {
font-size: 2em;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 6em;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 10

En el por encima de ejemplo, em se utiliza unidad de longitud.

2)% (porcentaje)

Es en relación con el elemento primario.

Sintaxis:

Element {
font-size: 40%;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 300%;
}
p {
font-size: 150%;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 11

En el ejemplo anterior, se utiliza % unidad de longitud.

3) vmax

Es con respecto a 1% de la dimensión más grande de la ventana gráfica.

Sintaxis:

Element {
font-size: 20vmax;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 10vmax;
}
p {
font-size: 3vmax;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 12

En el ejemplo anterior, se utiliza vmax unidad de longitud.

4) Vmin

Es con respecto a 1% de la dimensión más pequeña de la ventana gráfica.

Sintaxis:

Element {
font-size: 10vmin;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 10vmin;
}
p {
font-size: 3vmin;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 13

En el ejemplo anterior, se utiliza Vmin unidad de longitud.

5) vh

Es con respecto a 1% de la altura de la ventana gráfica.

Sintaxis:

Element {
font-size: 10vh;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 10vh;
}
p {
font-size: 3vh;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 14

En el ejemplo anterior, se utiliza vh unidad de longitud.

6) vw

Es con respecto a 1% de la anchura de la ventana gráfica.

Sintaxis:

Element {
font-size: 10vw;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 10vw;
}
p {
font-size: 3vw;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 15

En el ejemplo anterior, se utiliza vw unidad de longitud.

7) rem

Es respecto a la base navegador tamaño de fuente.

Sintaxis:

Element {
font-size: 10rem;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 10rem;
}
p {
font-size: 3rem;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 16

En el ejemplo anterior, se utiliza rem unidad de longitud.

8) ex

Es relación al eje X (eje) -altura de la fuente actual.

Sintaxis:

Element {
font-size: 6ex;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 10ex;
}
p {
font-size: 3ex;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 17

En el ejemplo anterior, se utiliza ex unidad de longitud.

9) ch

Es con respecto a la anchura de la 0.

Sintaxis:

Element {
font-size: 2ch;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 10ch;
}
p {
font-size: 3ch;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph</p>
</body>
</html>

salida

Measurement Units in CSS - 18

En el ejemplo anterior, se utiliza ch unidad de longitud.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *