path: root/files/es/web/css/reference/index.html

---
title: Referencia CSS
slug: Web/CSS/Reference
tags:
  - CSS
  - Referencia CSS
  - para_revisar
translation_of: Web/CSS/Reference
original_slug: Web/CSS/Referencia_CSS
---
<div class="note">
<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Estamos trabajando sobre este documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si deseas ayudarnos a redactar o mejorar alguna de las páginas listadas a continuación, te animamos a que lo hagas.</span></span></p>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si vas a agregar o modificar una página, por favor, ajústate a la plantilla <a href="/en/CSS/CSS_Reference/Property_Template" title="en/CSS Reference/Property Template">Referencia CSS:Plantilla de propiedades </a> y modifica según sea necesario.</span></span></p>

<p><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">La plantilla básica para las páginas de ejemplo se puede encontrar aquí: </span></span> <a class="internal" href="/samples/cssref/TEMPLATE.html" title="https://developer.mozilla.org/samples/cssref/TEMPLATE.html ">samples/cssref/TEMPLATE.html</a>.</p>
<span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Siéntete libre para discutir sobre cualquier pregunta o sugerencia en la página <a href="/Talk:en/CSS_Reference" title="Talk:en/CSS Reference">Talk:CSS Reference</a>.</span></span></div>

<p><span class="seoSummary">Esta <em>Referencia CSS</em> muestra la sintáxis básica de una regla CSS; lista todas las propiedades estándares <a href="/es/docs/Web/CSS">CSS</a>, <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> y <a href="/es/docs/Web/CSS/Pseudoelementos">pseudo-elementos</a>, <a href="/es/docs/Web/CSS/At-rule">reglas-at</a>, <a href="/es/docs/Web/CSS/length">unidades</a>, y <a href="/es/docs/Web/CSS/Introducci%C3%B3n/Selectors">selectores</a>, todos juntos en <a href="#Keyword_index">orden alfabético</a>, así como los <a href="#Selectors">selectores por tipo</a>; y le permitirá acceso rápido a la información detallada de cada uno de ellos. No solo lista las propiedades de CSS 1 y CSS 2.1, sino que también es una referencia de CSS3 que enlaza cualquier propiedad y concepto de <a href="/es/docs/Web/CSS/CSS3">CSS3</a> estandarizado, o ya establecido. También incluye una breve <a href="#DOM_CSS">referencia DOM-CSS / CSSOM</a>.</span></p>

<p>Tenga en cuenta que las definiciones de reglas CSS son completamente <a href="https://www.w3.org/TR/css-syntax-3/#intro">basadas en texto</a> (ASCII), mientras que DOM-CSS / CSSOM, el sistema de gestión de reglas, está <a href="https://www.w3.org/TR/cssom/#introduction">basado en objetos</a>.</p>

<p>Vea también las <a href="/es/docs/Web/CSS/Referencia_CSS/Extensiones_CSS_Mozilla">Extensiones CSS de Mozilla</a> para propiedades específicas de Gecko, que usan el prefijo <code>-moz</code>; y las <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Reference/Webkit_Extensions">Extensiones CSS de WebKit</a> para propiedades específicas de WebKit. Vea <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS Property Overview</a> de Peter Beverloo como referencia a todas las propiedades con prefijo.</p>

<h2 id="Sintaxis_de_regla_básica">Sintaxis de regla básica</h2>

<p>Se advierte que cualquier error de sintaxis en una definición de regla invalidará la regla por completo.</p>

<h3 id="Sintaxis_de_regla_de_estilo">Sintaxis de regla de estilo</h3>

<pre class="syntaxbox"><strong><var>selectorlist</var> {
   <var>property</var>: <var>value</var>; </strong>
   <var>[more property:value; pairs] </var>
<strong>}</strong>

...where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var>

Ver <a href="#Selectors"><em>selector</em></a>, <em><a href="#pelm">pseudo-elemento</a></em>, <a href="#pcls"><em>pseudo-clase</em></a> más abajo.

</pre>

<h4 id="Ejemplos_de_reglas_de_estilo">Ejemplos de reglas de estilo</h4>

<pre class="brush: css">strong {
  color: red;
}

div.menu-bar li:hover &gt; ul {
  display: block;
}
</pre>

<p>Para una introducción de nivel principiante a la sintaxis de los selectores de CSS, consulte <a href="/es/docs/Learn/CSS/Introduction_to_CSS/Selectors">este tutorial</a>. Tenga en cuenta que cualquier error de <a href="/es/docs/Web/CSS/syntax">sintaxis CSS</a> en una definición de regla hace que la regla completa se invalide. El navegador ignora las reglas no válidas. Tenga en cuenta que las definiciones de reglas CSS son totalmente (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">basadas en texto</a>, mientras que DOM-CSS / CSSOM (el sistema de gestión de reglas) está <a href="https://www.w3.org/TR/cssom/#introduction">basado en objetos</a>.</p>

<h3 id="Sintaxis_de_las_reglas-at_(rules)">Sintaxis de las reglas-at (@rules)</h3>

<p>Debido a que éstas tienen formatos de estructura variados, revise la sección <a href="/es/docs/Web/CSS/At-rule">reglas-At</a> para ver la sintaxis de la regla deseada.</p>

<h2 id="Índice_de_palabras_clave">Índice de palabras clave</h2>

<div class="note">
<p><strong>Nota:</strong> Los nombres de propiedad en este índice <strong>no</strong> incluyen los <a href="/es/docs/Web/CSS/CSS_Properties_Reference">nombres de JavaScript</a> donde difieren de los nombres estándar de CSS.</p>
</div>

<div>{{CSS_Ref}}</div>

<h2 id="Selectores">Selectores</h2>

<h3 id="Selectores_básicos"><a href="/es/docs/Web/CSS/CSS_Selectors#Basic_selectors">Selectores básicos</a></h3>

<ul>
 <li><a href="/es/docs/Web/CSS/Type_selectors">Selectores de tipo</a> <code>elementname</code></li>
 <li><a href="/es/docs/Web/CSS/Class_selectors">Selectores de clase</a> <code>.classname</code></li>
 <li><a href="/es/docs/Web/CSS/ID_selectors">Selectores de ID</a> <code>#idname</code></li>
 <li><a href="/es/docs/Web/CSS/Universal_selectors">Selectores universales</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li>
 <li><a href="/es/docs/Web/CSS/Selectores_atributo">Selectores de atributo</a> <code>[attr=value]</code></li>
</ul>

<h3 id="Combinadores"><a href="/es/docs/Web/CSS/CSS_Selectors#Combinators">Combinadores</a></h3>

<ul>
 <li><a href="/es/docs/Web/CSS/Selectores_hermanos_adyacentes">Selectores de hermanos adyacentes</a> <code>A + B</code></li>
 <li><a href="/es/docs/Web/CSS/Selectores_hermanos_generales">Selectores de hermanos generales</a> <code>A ~ B</code></li>
 <li><a href="/es/docs/Web/CSS/Child_selectors">Selectores de hijo</a> <code>A &gt; B</code></li>
 <li><a href="/es/docs/Web/CSS/Descendant_selectors">Selectores de descendiente</a> <code>A B</code></li>
</ul>

<h3 id="Pseudo-clases"><a href="/es/docs/Web/CSS/Pseudo-classes">Pseudo-clases</a></h3>

<div class="index">
<ul>
 <li id="pcls">{{ Cssxref(":active") }}</li>
 <li>{{ Cssxref(':any')}}</li>
 <li>{{ Cssxref(':any-link')}}</li>
 <li>{{ Cssxref(":checked") }}</li>
 <li>{{ Cssxref(":default") }}</li>
 <li>{{ Cssxref(":defined") }}</li>
 <li>{{ Cssxref(":dir", ":dir()")}}</li>
 <li>{{ Cssxref(":disabled") }}</li>
 <li>{{ Cssxref(":empty") }}</li>
 <li>{{ Cssxref(":enabled") }}</li>
 <li>{{ Cssxref(":first") }}</li>
 <li>{{ Cssxref(":first-child") }}</li>
 <li>{{ Cssxref(":first-of-type") }}</li>
 <li>{{ Cssxref(":fullscreen") }}</li>
 <li>{{ Cssxref(":focus") }}</li>
 <li>{{ Cssxref(":focus-visible") }}</li>
 <li>{{ Cssxref(":host") }}</li>
 <li>{{ Cssxref(":host()") }}</li>
 <li>{{ Cssxref(":host-context()") }}</li>
 <li>{{ Cssxref(":hover") }}</li>
 <li>{{ Cssxref(":indeterminate") }}</li>
 <li>{{ Cssxref(":in-range") }}</li>
 <li>{{ Cssxref(":invalid") }}</li>
 <li>{{ Cssxref(":lang", ":lang()") }}</li>
 <li>{{ Cssxref(":last-child") }}</li>
 <li>{{ Cssxref(":last-of-type") }}</li>
 <li>{{ Cssxref(":left") }}</li>
 <li>{{ Cssxref(":link") }}</li>
 <li>{{ Cssxref(":not", ":not()") }}</li>
 <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
 <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
 <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
 <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
 <li>{{ Cssxref(":only-child") }}</li>
 <li>{{ Cssxref(":only-of-type") }}</li>
 <li>{{ Cssxref(":optional") }}</li>
 <li>{{ Cssxref(":out-of-range") }}</li>
 <li>{{ Cssxref(":read-only") }}</li>
 <li>{{ Cssxref(":read-write") }}</li>
 <li>{{ Cssxref(":required") }}</li>
 <li>{{ Cssxref(":right") }}</li>
 <li>{{ Cssxref(":root") }}</li>
 <li>{{ Cssxref(":scope") }}</li>
 <li>{{ Cssxref(":target") }}</li>
 <li>{{ Cssxref(":valid") }}</li>
 <li>{{ Cssxref(":visited") }}</li>
</ul>
</div>

<h3 id="Pseudo-elementos"><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementos</a></h3>

<div class="index">
<ul>
 <li id="pelm">{{ Cssxref("::after") }}</li>
 <li>{{ Cssxref("::backdrop") }}</li>
 <li>{{ Cssxref("::before") }}</li>
 <li>{{ Cssxref("::cue") }}</li>
 <li>{{ Cssxref("::first-letter") }}</li>
 <li>{{ Cssxref("::first-line") }}</li>
 <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
 <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
 <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
 <li>{{ Cssxref("::selection") }}</li>
 <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
</ul>
</div>

<div class="note">
<p><strong>Ver también:</strong> Una <a href="https://www.w3.org/TR/selectors/#selectors">lista completa de selectores</a> en la especificación de Nivel 3 de Selectores.</p>
</div>

<h2 id="Conceptos">Conceptos</h2>

<h3 id="Sintaxis_y_semántica">Sintaxis y semántica</h3>

<ul>
 <li><a href="/es/docs/Web/CSS/Syntax">Sintaxis CSS</a></li>
 <li><a href="/es/docs/Web/CSS/At-rule">Reglas-at</a></li>
 <li><a href="/es/docs/Web/CSS/Cascade">Cascada</a></li>
 <li><a href="/es/docs/Web/CSS/Comments">Comentarios</a></li>
 <li><a href="/es/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li>
 <li><a href="/es/docs/Web/CSS/inheritance">Herencia</a></li>
 <li><a href="/es/docs/Web/CSS/Shorthand_properties">Propiedades abreviadas</a></li>
 <li><a href="/es/docs/Web/CSS/Specificity">Especificidad</a></li>
 <li><a href="/es/docs/Web/CSS/Value_definition_syntax">Sintaxis de definición de valor</a></li>
</ul>

<h3 id="Valores">Valores</h3>

<ul>
 <li><a href="/es/docs/Web/CSS/actual_value">Valor actual</a></li>
 <li><a href="/es/docs/Web/CSS/computed_value">Valor calculado</a></li>
 <li><a href="/es/docs/Web/CSS/initial_value">Valor inicial</a></li>
 <li><a href="/es/docs/Web/CSS/resolved_value">Valor resuelto</a></li>
 <li><a href="/es/docs/Web/CSS/specified_value">Valor específico</a></li>
 <li><a href="/es/docs/Web/CSS/used_value">Valor utilizado</a></li>
</ul>

<h3 id="Diseño">Diseño</h3>

<ul>
 <li><a href="/es/docs/Web/Guide/CSS/Block_formatting_context">Contexto de formato de bloque</a></li>
 <li><a href="/es/docs/Web/CSS/box_model">Modelo de caja</a></li>
 <li><a href="/es/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li>
 <li><a href="/es/docs/Web/CSS/Layout_mode">Modo de diseño</a></li>
 <li><a href="/es/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margen colapsando</a></li>
 <li><a href="/es/docs/Web/CSS/Replaced_element">Elementos reemplazados</a></li>
 <li><a href="/es/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Contexto de apilamiento</a></li>
 <li><a href="/es/docs/Web/Guide/CSS/Visual_formatting_model">Modelo de formato visual</a></li>
</ul>

<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>

<h3 id="Tipos_de_objetos_principales">Tipos de objetos principales</h3>

<ul>
 <li>document.<a href="/es/docs/Web/API/Document/styleSheets">styleSheets</a></li>
 <li>styleSheets[i].<a href="/es/docs/Web/API/CSSRuleList">cssRules</a></li>
 <li>cssRules[i].<a href="/es/docs/Web/API/CSSRule/cssText">cssText</a> (selector y estilo)</li>
 <li>cssRules[i].<a href="/es/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
 <li>elem.<a href="/es/docs/Web/API/HTMLElement/style">style</a></li>
 <li>elem.style.<a href="/es/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (solo estilo)</li>
 <li>elem.<a href="/es/docs/Web/API/Element/className">className</a></li>
 <li>elem.<a href="/es/docs/Web/API/Element/classList">classList</a></li>
</ul>

<h3 id="Métodos_importantes">Métodos importantes</h3>

<ul>
 <li>{{domxref("CSSStyleSheet.insertRule")}}</li>
 <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
</ul>

<h2 id="Tutoriales_CSS3">Tutoriales CSS3</h2>

<p>Estas páginas describen las nuevas tecnologías que aparecieron en CSS3, o las de CSS2.1 que no tienen mucho soporte:</p>

<ul>
 <li><a href="/es/docs/CSS/Media_queries">Uso de media queries con CSS</a></li>
 <li><a href="/es/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Uso de contadores con CSS</a></li>
 <li><a href="/es/docs/CSS/Using_CSS_gradients">Uso de gradientes con CSS</a></li>
 <li><a href="/es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Uso de transformaciones con CSS</a></li>
 <li><a href="/es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS">Uso de animaciones con CSS</a></li>
 <li><a href="/es/docs/Web/CSS/Transiciones_de_CSS">Uso de transiciones con CSS</a></li>
 <li><a href="/es/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Uso de múltiples fondos con CSS</a></li>
 <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Uso de las cajas flexibles con CSS</a></li>
 <li><a href="/es/docs/Columnas_con_CSS-3">Uso de columnas con CSS</a></li>
</ul>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Extensiones CSS de Mozilla</a> (con el prefijo <code>-moz</code>)</li>
 <li><a href="/en-US/docs/Web/CSS/Webkit_Extensions">Extensiones CSS de WebKit</a> (principalmente con el prefijo <code>-webkit</code>)</li>
 <li><a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Extensiones CSS de Microsoft</a> (con el prefijo <code>-ms</code>)</li>
</ul>