Unidades CSS – Part 1

Posted on by Rudeus Greyrat

CSS tiene varias unidades diferentes para expresar la longitud y la medida. Se necesitan unidades CSS para especificar la medida en la hoja de estilo como padding:”5px” . Principalmente hay dos tipos de unidades en CSS.  

  • Longitud absoluta
  • Longitud relativa

Longitud absoluta: no es bueno para usar en pantalla, ya que el tamaño de la pantalla varía tanto según el dispositivo utilizado para esa página que se recomienda usar para el diseño de impresión y donde se conoce el medio de salida. 

Unidades de longitud absoluta:

cm: centímetro

Sintaxis:

   font-size: 0.5cm;
   line-height: 0.1cm;

Ejemplo: Este ejemplo ilustra las unidades CSS especificando la unidad de longitud en cm.

HTML

<html>
 
<head>
    <title>CSS units</title>
    <style>
    .gfg {
        font-size: 1.2cm;
        font-weight: bold;
    }
     
    .geeks {
        font-size: 0.5cm;
        line-height: 0.1cm;
    }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>

Producción:

css units

mm: milímetro

Sintaxis:

   font-size: 5mm;
   line-height: 1mm;

Ejemplo: Este ejemplo ilustra las unidades CSS especificando la unidad de longitud en mm.

HTML

<html>
 
<head>
    <title>CSS units</title>
    <style>
    .gfg {
        font-size: 12mm;
        font-weight: bold;
    }
     
    .geeks {
        font-size: 5mm;
        line-height: 1mm;
    }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>

Producción:

css units

en pulgadas

Nota: pulgadas (1in = 96px = 2,54 cm) 

Sintaxis:

    font-size: 0.2in;
    line-height: 0.1in;

Ejemplo: Este ejemplo ilustra las unidades CSS especificando la unidad de longitud en pulgadas.

HTML

<html>
 
<head>
    <title>CSS units</title>
    <style>
    .gfg {
        font-size: .5in;
        font-weight: bold;
    }
     
    .geeks {
        font-size: .2in;
        line-height: .1in;
    }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>

Producción:

css units

px: píxeles

Nota: píxeles (1 px = 1/96 de 1 pulgada) 

Sintaxis:

   font-size: 20px;
   line-height: 10px;

Ejemplo: este ejemplo ilustra las unidades de CSS especificando la unidad de longitud en píxeles.

HTML

<html>
 
<head>
    <title>CSS units</title>
    <style>
    .gfg {
        font-size: 40px;
        font-weight: bold;
    }
     
    .geeks {
        font-size: 17px;
        line-height: 5px;
    }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>

Producción:

css units

punto : puntos

Nota: puntos (1pt = 1/72 de 1in) 

Sintaxis:

    font-size: 16pt;
    line-height: 8pt;

Ejemplo: Este ejemplo ilustra las unidades CSS especificando la unidad de longitud en puntos.

HTML

<html>
 
<head>
    <title>CSS units</title>
    <style>
    .gfg {
        font-size: 35pt;
        font-weight: bold;
    }
     
    .geeks {
        font-size: 15pt;
        line-height: 5pt;
    }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>

Producción:

css units

pc: picas

Nota: picas (1pc = 12 pt) 

Sintaxis:

      font-size: 1pc;
      line-height: 0.5pc;

Ejemplo: este ejemplo ilustra las unidades de CSS especificando la unidad de longitud en pc .

HTML

<html>
 
<head>
    <title>CSS units</title>
    <style>
    .gfg {
        font-size: 3pc;
        font-weight: bold;
    }
     
    .geeks {
        font-size: 1.3pc;
        line-height: .2pc;
    }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>

Producción:

css units

Longitud relativa: es bueno para usar en pantalla, si el tamaño de la pantalla varía tanto según el dispositivo, estas unidades de longitud relativa son perfectas porque cambian con los diferentes medios de representación.

Unidades de longitud relativa:  

em: Relativo al tamaño de fuente de ese elemento.

Nota: Aquí 2em significa 2 veces el tamaño de la fuente actual. 

Sintaxis:

    font-size: 10px;
    line-height: 2em;

Ejemplo: este ejemplo ilustra las unidades de CSS especificando la unidad de longitud en em .

HTML

<html>
 
<head>
    <title>relative unit</title>
    <style>
    p {
        font-size: 15px;
        line-height: 2em;
    }
    </style>
</head>
 
<body>
     
<p>GeeksforGeeks Line height: 2x10px = 20px</p>
 
     
<p>GeeksforGeeks Line height: 2x10px = 20px</p>
 
     
<p>GeeksforGeeks Line height: 2x10px = 20px</p>
 
</body>
 
</html>

Producción:

em unit

ej: relativo a la altura del eje X de la fuente actual.

Sintaxis:

font-size: 1ex;

Ejemplo: este ejemplo ilustra las unidades de CSS especificando la unidad de longitud en ex .

HTML

<html>
 
<head>
    <title>relative unit</title>
    <style>
    p {
        font-size: 40px;
    }
     
    span {
        font-size: 1ex;
    }
    </style>
</head>
 
<body>
     
<p>GeeksforGeeks:<span>A computer science
        portal for geeks</span></p>
 
</body>
 
</html>

Producción:

ex unit image

ch: Relativo al ancho del 0 .

Sintaxis:

font-size: 2ch;

Ejemplo: este ejemplo ilustra las unidades de CSS especificando la unidad de longitud en ch .

HTML

<html>
 
<head>
    <title>ch unit in CSS</title>
    <style>
    body {
        font-size: 50px;
    }
     
    div {
        font-size: 1ch;
    }
    </style>
</head>
 
<body>
     
<p>GeeksforGeeks</p>
 
    <div>A computer science portal for geeks</div>
</body>
 
</html>

Producción:

ch unit

rem: Relativo al tamaño de fuente base del navegador.

Sintaxis:

font-size: 3rem;

Ejemplo: Este ejemplo ilustra las unidades CSS especificando la unidad de longitud en rem .

HTML

<html>
 
<head>
    <title>ch unit in CSS</title>
    <style>
    body {
        font-size: 4rem;
    }
     
    div {
        font-size: 1.6rem;
    }
    </style>
</head>
 
<body>
     
<p>GeeksforGeeks</p>
 
    <div>A computer science portal for geeks</div>
</body>
 
</html>

Producción:

ch unit

vw: Relativo al 1% del ancho de la ventana gráfica.

Sintaxis:

font-size: 10vw;

Ejemplo: este ejemplo ilustra las unidades de CSS especificando la unidad de longitud en vw .

HTML

<html>
 
<head>
    <title>vw unit</title>
    <style>
    h1 {
        font-size: 4vw;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
<p>A computer science portal for geeks</p>
 
</body>
 
</html>

Producción:

unit image

vh: Relativo al 1% de la altura de la ventana gráfica.

Sintaxis:

font-size: 10vh;

Ejemplo: este ejemplo ilustra las unidades de CSS especificando la unidad de longitud en vh .

HTML

<html>
 
<head>
    <style>
    h1 {
        font-size: 6vh;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
<p>A computer science portal for geeks</p>
 
</body>
 
</html>

Producción:

unit image

vmin: Relativo al 1% de la dimensión más pequeña de la ventana gráfica.

Sintaxis:

font-size: 10vmin;

Ejemplo: este ejemplo ilustra las unidades de CSS especificando la unidad de longitud en vmin .

HTML

<html>
 
<head>
    <title>vmin unit</title>
    <style>
    h1 {
        font-size: 8vmin;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
<p>A computer science portal for geeks</p>
 
     
<p>1vmin = 1vw or 1vh whichever is smaller.</p>
 
</body>
 
</html>

Producción:

vmin unit

vmax: Relativo al 1% de la dimensión más grande de la ventana gráfica.

Sintaxis:

font-size: 20vmax;

Ejemplo: este ejemplo ilustra las unidades de CSS especificando la unidad de longitud en vmax .

HTML

<html>
 
<head>
    <title>vmax unit</title>
    <style>
    h1 {
        font-size: 5vmax;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
<p>A computer science portal for geeks</p>
 
     
<p>1vmax = 1vw or 1vh whichever larger.</p>
 
</body>
 
</html>

Producción:

vmax

%: % unidad establece el tamaño de fuente relativo al tamaño de fuente actual.

Sintaxis:

font-size: 250%;

Ejemplo: Este ejemplo ilustra las unidades CSS especificando la unidad de longitud en porcentaje.

HTML

<html>
 
<head>
    <title>CSS unit</title>
    <style>
    body {
        font-size: 250%;
    }
     
    div {
        font-size: 17px;
    }
    </style>
</head>
 
<body>
     
<p>GeeksforGeeks</p>
 
    <div>A computer science portal for geeks</div>
</body>
 
</html>

Producción:

percentage unit

Navegador compatible:

  • Google Chrome
  • explorador de Internet
  • Borde de Microsoft
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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