path: root/files/es/learn/css/building_blocks/values_and_units/index.html

---
title: Valores y unidades CSS
slug: Learn/CSS/Building_blocks/Values_and_units
translation_of: Learn/CSS/Building_blocks/Values_and_units
original_slug: Learn/CSS/Building_blocks/Valores_y_unidades_CSS
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div>

<p>Todas las propiedades que se utilizan en CSS tienen un valor o un conjunto de valores que esa propiedad admite, y echar un vistazo a cualquier página de propiedades en MDN te ayudará a comprender qué valores admite una propiedad en particular. En este artículo veremos algunos de los valores y unidades más comunes en uso.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerrequisitos:</th>
   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con el CSS</a>).</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Conocer los diferentes tipos de valores y unidades que admiten las propiedades CSS.</td>
  </tr>
 </tbody>
</table>

<h2 id="¿Qué_es_un_valor_CSS">¿Qué es un valor CSS?</h2>

<p>En las especificaciones CSS y en las páginas de propiedades de este proyecto MDN, podrás detectar los valores porque estarán escritos entre corchetes angulares, como <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> o <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>. Cuando veas que el valor <code>&lt;color&gt;</code> es válido para una propiedad en particular, significa que para esa propiedad puedes usar como valor cualquier color válido de entre los que se enumeran en la página de referencia de la propiedad <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code>.</p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: También verás valores CSS denominados <em>tipos de datos</em>. Los términos son básicamente intercambiables: cuando veas algo en CSS denominado ‘tipo de datos’, en realidad es solo una forma elegante de decir ‘valor’.</p>
</div>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Sí, hay una tendencia de denotar los valores CSS entre corchetes angulares, para diferenciarlos de las propiedades CSS (por ejemplo, la propiedad {{cssxref ("color")}} con respecto al tipo de dato <a href="/es/docs/Web/CSS/color_value">&lt;color&gt;</a>). Aunque podría generarte confusión entre los tipos de datos CSS y los elementos HTML, porque ambos usan corchetes angulares, es poco probable porque se usan en contextos muy diferentes.</p>
</div>

<p>En el ejemplo siguiente hemos establecido el color de nuestro encabezado con una palabra clave y el fondo con la función <code>rgb()</code>:</p>

<pre class="brush: css notranslate"><code>h1 {
  color: black;
  background-color: rgb(197,93,161);
} </code>
</pre>

<p>Un valor en CSS es una forma de definir una colección de subvalores admitidos. Esto significa que si ves <code>&lt;color&gt;</code> como válido, no necesitas preguntarte cuáles de los diferentes tipos de valor de color puedes usar: palabras clave, valores hexadecimales, funciones <code>rgb()</code>, etc. Puedes usar <em>cualquier</em> valor <code>&lt;color&gt;</code> disponible siempre que tu navegador lo admita. La página de MDN te dará información sobre lo que admite cada navegador para cada valor. Por ejemplo, puedes ver que en la sección de compatibilidad de navegadores de la página para <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> se enumeran diferentes tipos de valores de color y los navegadores que los admiten.</p>

<p>Echemos un vistazo a algunos de los tipos de valores y unidades con los que puedes encontrar con frecuencia, con ejemplos para que puedas probar diferentes valores posibles.</p>

<h2 id="Números_longitudes_y_porcentajes">Números, longitudes y porcentajes</h2>

<p>Al utilizar CSS te puedes encontrar con varios tipos de datos numéricos. Todos los siguientes están clasificados como tipos de datos numéricos:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Tipo de datos</th>
   <th scope="col">Descripción</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code><a href="/es/docs/Web/CSS/integer">&lt;integer&gt;</a></code></td>
   <td>Un <code>&lt;integer&gt;</code> es un número entero, como <code>1024</code> o <code>-55</code>.</td>
  </tr>
  <tr>
   <td><code><a href="/es/docs/Web/CSS/number">&lt;number&gt;</a></code></td>
   <td>Un <code>&lt;number&gt;</code> representa un número decimal; puede tener o no un punto de separación decimal con un componente fraccionario, por ejemplo: <code>0,255</code>, <code>128</code> o <code>-1,2</code>.</td>
  </tr>
  <tr>
   <td><code>&lt;dimension&gt;</code></td>
   <td>Una <code>&lt;dimension&gt;</code> es un <code>&lt;number&gt;</code> con una unidad asociada, por ejemplo: <code>45deg</code> (grados), <code>5s</code> (segundos) o <code>10px</code> (píxeles). <code>&lt;dimension&gt;</code> es una categoría general que incluye los tipos <code><a href="/es/docs/Web/CSS/length">&lt;length&gt;</a></code>, <code><a href="/es/docs/Web/CSS/angle">&lt;angle&gt;</a></code>, <code><a href="/es/docs/Web/CSS/time">&lt;time&gt;</a></code> y <code><a href="/es/docs/Web/CSS/resolución">&lt;resolution&gt;</a></code><a href="/en-US/docs/Web/CSS/resolution">.</a></td>
  </tr>
  <tr>
   <td><code><a href="/en-US/docs/Web/CSS/percentage">&lt;percentage&gt;</a></code></td>
   <td>Un <code>&lt;percentage&gt;</code> representa una fracción de algún otro valor, por ejemplo, <code>50%</code>. Los valores de porcentaje siempre son relativos a otra cantidad, por ejemplo, la longitud de un elemento es relativa a la longitud de su elemento padre.</td>
  </tr>
 </tbody>
</table>

<h3 id="Longitudes">Longitudes</h3>

<p>El tipo numérico con el que te vas a encontrar con mayor frecuencia es <code>&lt;length&gt;</code>, por ejemplo, <code>10px</code> (píxeles) o <code>30em</code>. En CSS se utilizan dos longitudes diferentes: relativa y absoluta. Es importante conocer la diferencia para entender qué dimensiones van a tener las cosas.</p>

<h4 id="Unidades_de_longitud_absoluta">Unidades de longitud absoluta</h4>

<p>Todas las unidades siguientes son unidades de longitud <strong>absoluta</strong>: no son relativas a nada más y en general se considera que siempre tienen el mismo tamaño.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Unidad</th>
   <th scope="col">Nombre</th>
   <th scope="col">Equivale a</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>cm</code></td>
   <td>Centímetros</td>
   <td>1cm = 96px/2,54</td>
  </tr>
  <tr>
   <td><code>mm</code></td>
   <td>Milímetros</td>
   <td>1mm = 1/10 de 1cm</td>
  </tr>
  <tr>
   <td><code>Q</code></td>
   <td>Cuartos de milímetros</td>
   <td>1Q = 1/40 de 1cm</td>
  </tr>
  <tr>
   <td><code>in</code></td>
   <td>Pulgadas</td>
   <td>1in = 2,54cm = 96px</td>
  </tr>
  <tr>
   <td><code>pc</code></td>
   <td>Picas</td>
   <td>1pc = 1/16 de 1in</td>
  </tr>
  <tr>
   <td><code>pt</code></td>
   <td>Puntos</td>
   <td>1pt = 1/72 de 1in</td>
  </tr>
  <tr>
   <td><code>px</code></td>
   <td>Píxeles</td>
   <td>1px = 1/96 de 1in</td>
  </tr>
 </tbody>
</table>

<p>La mayoría de estos valores son más útiles cuando se usan en una salida en formato impreso que en la salida de pantalla. Por ejemplo, normalmente no usamos <code>cm</code> (centímetros) en pantalla. El único valor que usarás de forma frecuente es <code>px</code> (píxeles).</p>

<h4 id="Unidades_de_longitud_relativa">Unidades de longitud relativa</h4>

<p>Las unidades de longitud relativa son relativas a algo más, por ejemplo, al tamaño de letra del elemento principal o al tamaño de la ventana gráfica. La ventaja de usar unidades relativas es que con una planificación cuidadosa puedes lograr que el tamaño del texto u otros elementos escalen en relación con todo lo demás en la página. En la tabla siguiente se enumeran algunas de las unidades más útiles para el desarrollo web.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Unidad</th>
   <th scope="col">Relativa a</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>em</code></td>
   <td>Tamaño de letra del elemento padre, en el caso de propiedades tipográficas como {{cssxref("font-size")}}, y tamaño de la fuente del propio elemento en el caso de otras propiedades, como {{cssxref("width")}}.</td>
  </tr>
  <tr>
   <td><code>ex</code></td>
   <td>Altura x de la fuente del elemento.</td>
  </tr>
  <tr>
   <td><code>ch</code></td>
   <td>La medida de avance (ancho) del glifo "0" de la letra del elemento.</td>
  </tr>
  <tr>
   <td><code>rem</code></td>
   <td>Tamaño de la letra del elemento raíz.</td>
  </tr>
  <tr>
   <td><code>lh</code></td>
   <td>Altura de la línea del elemento.</td>
  </tr>
  <tr>
   <td><code>vw</code></td>
   <td>1% del ancho de la ventana gráfica.</td>
  </tr>
  <tr>
   <td><code>vh</code></td>
   <td>1% de la altura de la ventana gráfica.</td>
  </tr>
  <tr>
   <td><code>vmin</code></td>
   <td>1% de la dimensión más pequeña de la ventana gráfica.</td>
  </tr>
  <tr>
   <td><code>vmax</code></td>
   <td>1% de la dimensión más grande de la ventana gráfica.</td>
  </tr>
 </tbody>
</table>

<h4 id="Un_ejemplo_de_análisis">Un ejemplo de análisis</h4>

<p>En el ejemplo siguiente puedes ver cómo se comportan algunas unidades de longitud relativa y absoluta. La primera caja tiene un ancho ({{cssxref ("width")}}) establecido en píxeles. Como unidad absoluta, este ancho será siempre el mismo aunque lo demás cambie.</p>

<p>La segunda caja tiene un ancho establecido en unidades <code>vw</code> (ancho de ventana). Este valor es relativo al ancho de la ventana gráfica, por lo que 10vw es el 10 por ciento del ancho de la ventana gráfica. Si cambiases el ancho de la ventana de tu navegador, el tamaño de la caja cambiaría. Sin embargo, esto no te va a funcionar porque este ejemplo se ha incrustado en la página usando <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>. Para verlo en acción debes <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">probar el ejemplo después de abrirlo en una pestaña independiente de tu navegador</a>.</p>

<p>La tercera caja utiliza unidades <code>em</code>. Son unidades relativas al tamaño de la letra. Hemos establecido un tamaño de fuente de <code>1em</code> en el contenido {{htmlelement ("div")}}, que tiene una clase <code>.wrapper</code>. Si cambias este valor a <code>1.5em</code>, verás que el tamaño de letra de todos los elementos aumenta, pero solo se amplía el ancho en el último elemento, porque el ancho es relativo a ese tamaño de letra.</p>

<p>Después de seguir las instrucciones anteriores, juega un poco más con los valores para ver qué obtienes.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p>

<h4 id="ems_y_rems">ems y rems</h4>

<p><code>em</code> y <code>rem</code> son las dos longitudes relativas que es probable que encuentres con mayor frecuencia al cambiar el tamaño de cualquier cosa, de cajas a texto. Vale la pena entender cómo funcionan y las diferencias entre ellos, especialmente cuando comienzas a abordar temas más complejos como <a href="/es/docs/Learn/CSS/Styling_text">aplicar estilos a texto</a> o <a href="/es/docs/Learn/CSS/CSS_layout">compaginar con CSS</a>. El ejemplo siguiente te proporciona una muestra.</p>

<p>El HTML es un conjunto de listas anidadas: hay tres listas en total y ambos ejemplos tienen el mismo HTML. La única diferencia es que el primero tiene una clase <em>ems</em> y el segundo una clase <em>rems</em>.</p>

<p>Para empezar, configuramos un tamaño de letra de 16px en el elemento <code>&lt;html&gt;</code>.</p>

<p><strong>En definitiva, la unidad <em>em</em> significa «el tamaño de letra de mi elemento padre»</strong>. Los elementos {{htmlelement ("li")}} dentro de un elemento {{htmlelement ("ul")}} con una clase de <code>ems</code> toman el tamaño con respecto a su elemento padre. Por lo tanto, en cada nivel de anidamiento sucesivo, el tamaño de letra aumenta progresivamente, porque en cada uno el tamaño de letra está establecido en <code>1.3em</code> (1,3 veces el tamaño de letra de su elemento padre).</p>

<p><strong>En definitiva, la unidad <em>rem</em> significa «el tamaño de letra del elemento raíz»</strong>. (‘rem’ viene de «root em»). Los elementos {{htmlelement ("li")}} dentro de un elemento {{htmlelement ("ul")}} con una clase de <code>rems</code> toman su tamaño del elemento raíz (<code>&lt;html&gt;</code>). Esto significa que el tamaño de letra no aumenta en cada nivel sucesivo de anidamiento.</p>

<p>Sin embargo, si cambias el atributo <code>font-size</code> de <code>&lt;html&gt;</code> en el CSS, verás que todo lo demás cambia en relación con él, tanto la letra cuyo tamaño está especificado en unidades <code>rem</code> como la que lo está en unidades <code>em</code>.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p>

<h3 id="Porcentajes">Porcentajes</h3>

<p>En muchos casos, un porcentaje es tratado de la misma manera que una longitud. Lo que sucede con los porcentajes es que siempre se establecen en relación con otro valor. Por ejemplo, si estableces el atributo <code>font-size</code> de un elemento como un porcentaje, será un porcentaje del <code>font-size</code> del elemento padre. Si usas un porcentaje para un valor <code>width</code>, será un porcentaje del atributo <code>width</code> del elemento padre.</p>

<p>En el ejemplo siguiente, las dos cajas con el tamaño especificado en unidades de porcentaje y las dos cajas con el tamaño especificado en unidades de píxel tienen los mismos nombres de clase. En ambos conjuntos de cajas, los anchos de las cajas son de 200 píxeles y de 40%, respectivamente.</p>

<p>La diferencia es que el segundo conjunto de dos cajas está dentro de un contenedor que tiene 400 píxeles de ancho. La segunda caja de 200 px de ancho tiene el mismo ancho que la primera, pero la segunda caja de 40% ahora es el 40% de 400 px, ¡mucho más estrecha que la primera!</p>

<p><strong>Cambia el ancho del contenedor o el valor de porcentaje para ver cómo funciona.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p>

<p>El ejemplo siguiente tiene tamaños de letra establecidos en porcentajes. Cada elemento <code>&lt;li&gt;</code> tiene un atributo <code>font-size</code> del 80%, por lo tanto, los elementos de la lista anidada se vuelven progresivamente más pequeños a medida que heredan su tamaño del elemento padre.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p>

<p>Observa que aunque muchos valores admiten unidades de longitud o porcentaje, algunos solo admiten unidades de longitud. Puedes ver qué valores admite cada propiedad en las páginas de referencia correspondientes del proyecto MDN. Si el valor admitido incluye <code><a href="/en-US/docs/Web/CSS/length-percentage">&lt;length-percentage&gt;</a></code>, puedes usar una unidad de longitud o un porcentaje. Si el valor admitido solo incluye <code>&lt;length&gt;</code>, no es posible utilizar un porcentaje.</p>

<h3 id="Números">Números</h3>

<p>Algunos valores aceptan números sin ninguna unidad asociada. Un ejemplo de una propiedad que acepta un número sin unidades es la propiedad <code>opacity</code>, que controla la opacidad de un elemento (cuán transparente es). Esta propiedad admite un número entre <code>0</code> (totalmente transparente) y <code>1</code> (totalmente opaco).</p>

<p><strong>En el ejemplo siguiente, asigna al valor de <code>opacity</code> diversos valores decimales entre <code>0</code> y <code>1</code> para ver cómo la caja y su contenido cambian su opacidad.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Cuando en CSS utilizas un número como valor, no debe estar entre comillas.</p>
</div>

<h2 id="Color">Color</h2>

<p>En CSS hay muchas formas de especificar el color, algunas de las cuales se implementaron más recientemente que otras. En todas partes en CSS se pueden usar los mismos valores de color, tanto para especificar el color del texto como el color de fondo, o de cualquier otra cosa.</p>

<p>El sistema de colores estándar disponible en los ordenadores modernos es de 24 bits, lo que permite visualizar aproximadamente 16,7 millones de colores distintos a partir de una combinación de diferentes canales de rojo, verde y azul con 256 valores diferentes por canal (256 x 256 x 256 = 16.777.216). Echemos un vistazo a algunas de las formas en que podemos especificar colores en CSS.</p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: En este artículo vamos a ver los métodos comunes para especificar colores que admiten los navegadores; hay otros métodos no tan comunes que no admiten todos los navegadores.</p>
</div>

<h3 id="Palabras_clave_para_los_colores">Palabras clave para los colores</h3>

<p>Muy a menudo, en los ejemplos de este artículo o en cualquier otra página de MDN, verás que se utilizan las palabras clave para los colores, ya que son una forma simple y comprensible de especificar colores. Hay una multitud de estas palabras clave, ¡algunas de las cuales tienen nombres de lo más curiosos! Puedes ver una lista completa en la página para el valor <code><a href="/es/docs/Web/CSS/color_value">&lt;color&gt;</a></code>.</p>

<p><strong>Juega con diferentes valores de color en los ejemplos en vivo que encontrarás a continuación, para adquirir una idea más clara de cómo funcionan.</strong></p>

<h3 id="Los_valores_hexadecimales_RGB">Los valores hexadecimales RGB</h3>

<p>El siguiente tipo de valores de color que es probable que encuentres son los códigos hexadecimales. Cada valor hexadecimal consiste en un símbolo de hashtag/almohadilla (#) seguido de seis cifras hexadecimales, cada una de las cuales puede tomar uno de los 16 valores entre el 0 y la f (que representa el 15), por ejemplo: <code>0123456789abcdef</code>. Cada par de cifras representa uno de los canales (rojo, verde y azul) y nos permite especificar cualesquiera de los 256 valores disponibles para cada uno (16 x 16 = 256).</p>

<p>Estos valores son un poco más complejos y menos fáciles de entender, pero son mucho más versátiles que las palabras clave: puedes usar valores hexadecimales para representar cualquier color que desees usar en tu combinación de colores.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p>

<p><strong>Una vez más, cambia los valores para ver cómo varían los colores.</strong></p>

<h3 id="Valores_RGB_y_RGBA">Valores RGB y RGBA</h3>

<p>El tercer esquema del que hablaremos aquí es RGB. Un valor RGB es una función <code>rgb()</code> que recibe tres parámetros que representan los valores de los canales rojo, verde y azul del color, de modo muy similar a los valores hexadecimales. La diferencia con RGB es que cada canal está representado no por dos dígitos hexadecimales, sino por un número decimal entre el 0 y el 255, lo que de algún modo resulta algo más fácil de entender.</p>

<p>Vamos a reescribir nuestro último ejemplo para utilizar colores RGB:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p>

<p>También puedes usar colores RGBA: estos funcionan exactamente de la misma manera que los colores RGB, por lo que puedes usar cualquier valor RGB; sin embargo, hay un cuarto valor que representa el canal alfa del color, que controla la opacidad. Si estableces este valor en <code>0</code>, el color será completamente transparente, mientras que en <code>1</code> será completamente opaco. Los valores intermedios le confieren diferentes niveles de transparencia.</p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Establecer un canal alfa en un color representa una diferencia clave para usar la propiedad {{cssxref ("opacity")}} que vimos anteriormente. Cuando usas la opacidad, el elemento y todo lo que contiene es opaco, mientras que cuando usas colores RGBA, solo son opacos los que especificas.</p>
</div>

<p>En el ejemplo siguiente hemos añadido una imagen de fondo al bloque que contiene nuestras cajas de color. También hemos configurado las cajas para que tengan diferentes valores de opacidad: observa que el fondo se muestra más cuanto menor es el valor del canal alfa.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p>

<p><strong>En este ejemplo, cambia los valores del canal alfa y observa cómo afecta a la salida de color. </strong></p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: En algún momento, los navegadores modernos se actualizaron para que <code>rgba()</code> y <code>rgb()</code>, y <code>hsl()</code> y <code>hsla()</code> (ver más abajo) se convirtieran en alias puros el uno del otro y comenzaran a comportarse exactamente igual. Así, por ejemplo, tanto <code>rgba()</code> como <code>rgb()</code> admiten colores con y sin valores de canal alfa. Cambia el <code>rgba()</code> del ejemplo anterior por <code>rgb()</code> y observa si los colores aún funcionan. El estilo que uses depende de ti, pero separar las definiciones de los colores transparentes y las de los no transparentes con el uso de funciones diferentes mejora la ejecución de los navegadores y puede actuar como un indicador visual de dónde se definen colores transparentes en tu código.</p>
</div>

<h3 id="Los_valores_HSL_y_HSLA">Los valores HSL y HSLA</h3>

<p>Un poco menos compatible que RGB es el modelo de color HSL (no compatible con las antiguas versiones de Internet Explorer), que se implementó después de mucha insistencia por parte de los diseñadores. En lugar de los valores rojo, verde y azul, la función <code>hsl()</code> admite valores de matiz, saturación y luminosidad, que se utilizan para distinguir entre los 16,7 millones de colores, pero de una manera diferente:</p>

<ul>
 <li><strong>Matiz</strong>: El tono base del color. Toma un valor entre 0 y 360, que representa un ángulo en torno a una rueda de colores.</li>
 <li><strong>Saturación</strong>: ¿Qué nivel de saturación presenta el color? Esta propiedad toma un valor entre 0 y 100%, en que 0 no es un color (aparece como un tono de gris) y 100% es el nivel de saturación total del color.</li>
 <li><strong>Luminosidad</strong>: ¿Qué claridad o brillo presenta el color? Este atributo toma un valor entre 0 y 100%, en que 0 es no claro (aparece completamente negro) y 100% es completamente claro (aparece completamente blanco).</li>
</ul>

<p>Podemos adaptar el ejemplo con colores RGB para usar colores HSL, así:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p>

<p>Al igual que RGB tiene un equivalente RGBA, HSL tiene un equivalente HSLA, que le proporciona la misma capacidad para especificar el canal alfa. Demostramos esto a continuación cambiando nuestro ejemplo RGBA para usar colores HSLA.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p>

<p>Puedes usar cualquiera de estos valores de color en tus proyectos. Es probable que para la mayoría de los proyectos te decidas por una paleta de colores y luego uses esos colores (y tu método elegido para especificar el color) en todo el proyecto. También puedes mezclar y combinar diversos modelos de color, sin embargo, por coherencia, en general es mejor si todo el proyecto usa el mismo.</p>

<h2 id="Imágenes">Imágenes</h2>

<p>El tipo de datos <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> se usa cuando una imagen es un valor válido. Puede ser un archivo de imagen real al que apunta una función <code>url()</code>, o un degradado.</p>

<p>En el ejemplo siguiente mostramos una imagen y un gradiente en uso como un valor para la propiedad CSS <code>background-image</code>.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: hay otros valores posibles para <code>&lt;image&gt;</code>, pero son más nuevos y aún hay pocos navegadores que los admiten. Consulta la página de MDN para el tipo de dato <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> si deseas saber más sobre ellos.</p>
</div>

<h2 id="Posición">Posición</h2>

<p>El tipo de dato <code><a href="/en-US/docs/Web/CSS/position_value">&lt;position&gt;</a></code> representa un conjunto de coordenadas 2D que se utiliza para colocar un elemento, por ejemplo una imagen de fondo (con el atributo <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code>). Puede tomar palabras clave como <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code> y <code>center</code> para alinear los elementos con los límites específicos de una caja de dos dimensiones, y también longitudes, que representan desplazamientos desde los bordes superior e izquierdo de la caja.</p>

<p>Un valor de posición típico consta de dos valores: el primero establece la posición horizontal, y el segundo la vertical. Si solo especificas valores para un eje, el otro usará <code>center</code> por defecto.</p>

<p>En el ejemplo siguiente hemos colocado una imagen de fondo a 40px de la parte superior, y a la derecha del contenedor con una palabra clave.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p>

<p><strong>Juega un poco con estos valores y observa cómo cambia la posición de la imagen.</strong></p>

<h2 id="Cadenas_e_identificadores">Cadenas e identificadores</h2>

<p>En los ejemplos anteriores hemos visto casos en que se usan palabras clave como valores (por ejemplo, palabras clave para <code>&lt;color&gt;</code>, como <code>red</code>, <code>black</code>, <code>rebeccapurple</code> y <code>goldenrod</code>). Estas palabras clave normalmente se describen como <em>identificadores</em>, un valor especial que el CSS entiende. Como tales, no se escriben entre comillas (es decir, no se tratan como cadenas).</p>

<p>Hay casos en el CSS en que debes usar cadenas, por ejemplo, <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos#Generar_contenido_con_before_y_after">al especificar el contenido que generas</a>. En este caso, el valor se escribe entre comillas para mostrar que se trata de una cadena de caracteres. En el ejemplo siguiente hemos usado palabras clave para el color, sin entrecomillar, y también una cadena caracteres, de contenido generado, entrecomillada.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p>

<h2 id="Funciones">Funciones</h2>

<p>El último tipo de valor que vamos a analizar es el grupo de valores conocidos como funciones. En programación, una función es un bloque de código reutilizable que es posible ejecutar varias veces para completar una tarea repetitiva con el mínimo esfuerzo tanto por parte del desarrollador como del ordenador. Las funciones suelen asociarse a lenguajes como JavaScript, Python o C++, pero también hay funciones en CSS, como valores de código propietario. Ya hemos visto funciones en acción en la sección sobre los colores: <code>rgb()</code>, <code>hsl()</code>, etc. El valor que se utiliza para devolver una imagen de un archivo, en este caso <code>url()</code>, también es una función.</p>

<p>Un valor que se comporta más como algo que puedes encontrar en un lenguaje de programación tradicional es la función <code>calc()</code>. Esta función te proporciona la capacidad de hacer cálculos simples en tu CSS. Es particularmente útil si deseas calcular valores que no puedes definir al escribir el CSS para tu proyecto y necesitas que el navegador lo haga durante la ejecución.</p>

<p>Por ejemplo, a continuación usamos <code>calc()</code> para hacer que la caja tenga <code>20% + 100px</code> de ancho. El 20% se calcula a partir del ancho del contenedor principal <code>.wrapper</code> y, por lo tanto, cambiará si ese ancho cambia. No podemos hacer este cálculo de antemano porque no sabemos cuál será el 20% del elemento padre, por lo que usamos <code>calc()</code> para decirle al navegador que lo haga por nosotros.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p>

<h2 id="Pon_a_prueba_tus_conocimientos">Pon a prueba tus conocimientos</h2>

<p>Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para comprobar que retienes esa información antes de seguir en <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_tasks">Test your skills: Values and units</a>.</p>

<h2 id="Resumen">Resumen</h2>

<p>Esta ha sido una revisión rápida de los tipos de valores y unidades más comunes que te puedes encontrar. Puedes echar un vistazo a todos los diferentes tipos en la página de referencia de <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">valores y unidades CSS</a>; encontrarás muchos de estos mientras trabajas en estos artículos.</p>

<p>Lo que debes recordar es que cada propiedad tiene una lista definida de valores admisibles, y cada valor incluye una definición que explica cuáles son sus subvalores. A continuación puedes buscar los detalles aquí, en MDN.</p>

<p>Por ejemplo, comprender que <code><a href="/es/docs/Web/CSS/image">&lt;image&gt;</a></code> también te permite crear un degradado de color es útil, ¡pero quizás no sea un conocimiento obvio!</p>

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p>

<h2 id="En_este_módulo">En este módulo</h2>

<ol>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
  <ul>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
  </ul>
 </li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
</ol>