Preguntas frecuentes sobre CSS
==============================

#### Mi CSS es válida, pero no se representa correctamente

Los navegadores utilizan la declaración `DOCTYPE` para elegir entre mostrar el documento usando un modo que sea más compatible con los estándares de la Web o mostrarlo con los fallos de los navegadores antiguos. El uso de una declaración `DOCTYPE` correcta y moderna al inicio del código HTML mejorará el cumplimiento de los estándares del navegador.

Los navegadores modernos tienen fundamentalmente dos modos de renderizado:

* *Quirks mode* (Modo no estándar): también se llama el modo de compatibilidad con versiones anteriores y permite que las páginas web heredadas se representen como sus autores habían previsto, siguiendo las normas de representación o renderizado no estándares que usan los navegadores antiguos. Los documentos con una declaración `DOCTYPE` incompleta, incorrecta o faltante o con una declaración `DOCTYPE` conocida que se usara habitualmente antes de 2001 se representarán en el Modo no estándar.
* *Standards Mode* (Modo estándar): el navegador intenta seguir estrictamente los estándares del W3C. Se supone que las nuevas páginas HTML se diseñarán para navegadores compatibles con los estándares, y como resultado, las páginas con una declaración `DOCTYPE` moderna será renderizada con el Modo estándar.

Los navegadores basados en Gecko tienen un tercer *Modo casi estándar* que tiene solo una peculiaridades menores.

Esta es una lista de las declaraciones `DOCTYPE` más utilizadas que activarán el Modo estándar o el Modo casi estándar:


```html
<!DOCTYPE html PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```


#### Diferencia entre `id` y `class`

Los elementos HTML pueden tener un atributo `id` y / o un atributo `class`. El atributo `id` asigna un nombre a un elemento determinado y debe haber un solo elemento con ese nombre. El atributo `class` asigna un elemento a una determinada clase y en general no puede haber más de un elemento con el mismo atributo `class`. CSS te permite aplicar estilos a un atributo `id` y / o `class` concreto.

Utiliza un estilo específico de `id` cuando desees restringir las reglas de estilo a un bloque o elemento concreto. Este estilo lo usará **un solo** elemento con ese `id` concreto.

Usa un estilo específico de `class` cuando desees aplicar las reglas de estilo a una determinada clase de bloques y elementos.

Consulta Selectores CSS

#### Restaurar el valor de la propiedad predeterminado

Debido a que CSS no proporciona una palabra clave "predeterminada", la única manera de restaurar el valor predeterminado de una propiedad es volver a declarar explícitamente dicha propiedad.

Por lo tanto, debes tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, los selectores por nombre de etiqueta, como `p` ) que tal vez desees reemplazar con reglas más específicas (como las que usan id o selectores de clase), porque el valor predeterminado original no puede restablecerse automáticamente.

Debido a la naturaleza *en cascada* de CSS, es una buena práctica definir reglas de estilo de una manera lo más concreta posible para evitar aplicar estilo a elementos a los que no se tenía previsto aplicar.

#### Estilos derivados

CSS no permite que se defina un estilo según los términos de otro. (Consulta la nota de Eric Meyer acerca de la postura del Grupo de trabajo). Sin embargo, la asignación de múltiples clases a un solo elemento puede proporcionar el mismo efecto.

#### Asignación de múltiples clases

A los elementos HTML se les pueden asignar varias clases listándolas en el atributo `class`, con un espacio en blanco para separarlas.


```html
<style type="text/css">
 .news {
 background: black;
 color: white;
 }
 .today {
 font-weight: bold;
 }
</style>

<div class="news today">... contenido de las noticias de hoy ...</div>
```


Si la misma propiedad se declara en ambas reglas, el conflicto se resuelve primero a través de la especificidad, a continuación, según el orden de las declaraciones CSS. El orden de las clases en el atributo `class` no es relevante.

#### Normas de estilo que no funcionan

Las reglas de estilo que son sintácticamente correctas pueden no aplicarse en determinadas situaciones. Puedes utilizar las *Reglas de estilo de CSS* del Inspector DOM para depurar los problemas de este tipo, pero los casos más frecuentes en los que se ignoran las reglas de estilo se enumeran a continuación.

##### Jerarquía de los elementos HTML

La forma en que se aplican los estilos CSS a los elementos HTML depende también de la jerarquía de los elementos. Es importante recordar que una regla que se aplica a un descendiente reemplaza el estilo del padre, a pesar de la especificidad o la prioridad de las reglas CSS.
```

.news { color: black; }
. corpName {font-weight: bold; color: red;}

<!-- el texto de la noticia es negro, pero el nombre de la empresa va en rojo y negrita -->
<div class="news">
   (Reuters) <span class="corpName"> General Electric </span> (GE.NYS) anunció el jueves ...
</div>
```


En el caso de jerarquías HTML complejas, si parece que se ignora una regla, comprueba si el elemento está dentro de otro elemento con un estilo diferente.

##### Regla de estilo explícitamente redefinida

En las hojas de estilo CSS el orden **es** importante. Si defines una regla y luego vuelves a definirla, se usará la última definición.
```

#stockTicker { font-weight: bold; }
.stockSymbol { color: red; }
/*  otras reglas             */
/*  otras reglas             */
/*  otras reglas             */
.stockSymbol { font-weight: normal; }

<!-- la mayor parte del texto va en negrita, con excepción de "GE", que va en rojo y no en negrita -->
<div id="stockTicker">
   NYS: <span class="stockSymbol">GE</span> +1.0 ...
</div>
```


Para evitar este tipo de errores, intenta definir las reglas solo una vez para un selector determinado y agrupa todas las reglas que pertenecen a ese selector.

##### Uso de una propiedad abreviada

Está bien usar las propiedades abreviadas para la definición de reglas de estilo, ya que utiliza una sintaxis muy compacta. Usar la abreviatura con sólo algunos atributos es posible y correcto, pero hay que recordar que los atributos no declarados se restablecen a los valores predeterminados automáticamente. Esto significa que una norma anterior para un solo atributo podría ser reemplazada implícitamente.
```

#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
.stockSymbol { font: 14px Arial; color: red; }

<div id="stockTicker">
   NYS: <span class="stockSymbol">GE</span> +1.0 ...
</div>
```


En el ejemplo anterior el problema se produjo en las reglas que pertencían a distintos elementos, pero puede ocurrir también para el mismo elemento, porque el orden de las reglas **es** importante.


```css
#stockTicker {
   font-weight: bold;
   font: 12px Verdana; / * font-weight es ahora normal * /
}
```


##### Uso del selector `*`

El selector `*` se refiere a cualquier elemento y tiene que utilizarse con especial cuidado.
```

body * { font-weight: normal; }
#stockTicker { font: 12px Verdana; }
.corpName { font-weight: bold; }
.stockUp { color: red; }

<div id="section">
   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
</div>
```


En este ejemplo, el selector `body *` aplica la regla a todos los elementos dentro del cuerpo (*body*), en cualquier nivel de jerarquía, incluyendo *redtext.* Así `font-weight: bold;` aplicada a la clase *boldtext* se reemplaza por `font-weight: normal;` aplicada a *redtext.*

##### Especificidad en CSS

Cuando se aplican múltiples reglas a un determinado elemento, la norma escogida depende de su especificidad de estilo. El estilo en línea (en los atributos HTML `style`) es lo primero, seguido por los selectores id, a continuación, los selectores class y, finalmente, los selectores element-name.
```

div { color: black; }
#orange { color: orange; }
.green { color: green; }

<div id="orange" class="green" style="color: red;">This is red</div>
```


Las reglas son más complicadas cuando el selector tiene varias partes. Se puede encontrar más información detallada acerca de cómo se calcula la especificidad del selector en el capítulo 6.4.3 de la Especificación CSS 2.1

#### ¿Qué hacen las propiedades -moz-\*?

Por favor, consulta la página Extensiones CSS de Mozilla.