Tomando un revolcón con css

¿Qué significa el término cascada

significar para las hojas de estilo? Significa que una regla CSS cae abajo a través del código, y, a veces tropieza con una regla en conflicto.

La cascada es sobre lo que llaman los programadores precedencia: ¿Quién gana cuando hay un conflicto? Más de un estilo puede aplicarse a una etiqueta determinada. Por ejemplo, siempre hay el estilo definido por el navegador por defecto, como el negro como color de texto predeterminado. Si especifica algún otro color en una regla CSS, la cascada le permite a su gobierno para dominar, tener prioridad sobre el estilo incorporado.

Pero, ¿cómo decidir el navegador qué estilo gana si el conflicto de dos reglas CSS con los demás? Si se combinan los estilos en conflicto? ¿Qué pasa si los estilos son completamente incompatibles - como un estilo especificando cursiva y el otro no cursiva?

Especificidad Visualización

Varios factores determinan qué estilo gana cuando estilos chocan: la herencia, el árbol estructural en un documento, y la especificidad (o cercanía) de un estilo. Probablemente la regla de colisión más fácil de entender implica dónde se definió el estilo. Sus estilos CSS se pueden definir en cuatro lugares principales:

• Estilos por defecto del navegador.

• Una hoja de estilo externa (un archivo .css que contiene definiciones de estilo que se hace referencia desde el documento HTML con un elemento de enlace).

• Una hoja de estilo incrustada (estilos define dentro del documento HTML, en el interior de su etiqueta. Este tipo de estilo también a veces se llama interna).

• Un estilo en línea (un estilo definido como un atributo dentro de un elemento HTML en sí, y cuyo efecto se limita a ese elemento solamente). Por ejemplo, este es un típico estilo en línea:

Esta lista también muestra el orden en el que estilos contrapuestos "ganar" en cualquier conflicto. Piense en el orden que el estilo más cercano a las victorias de elementos. Por ejemplo, el estilo en línea - ubicado justo en el interior del elemento en sí - es el más cercano. Así que si se especifica más de un estilo de ese elemento, un estilo en línea es el estilo utilizado. Este closenessof el estilo al elemento que coincide con que es conocido más formalmente como especificidad.

La ubicación estilo con la segunda más alta prioridad es la hoja de estilo interna ubicada en la cabecera del documento HTML. La tercera prioridad más alta va a la hoja de estilos externa - el archivo separado. Y la prioridad más débil, el que todos los demás de triunfo, es el estilo por defecto. Después de todo, el valor predeterminado es la mirada que una hoja de estilo se supone alterar.

He aquí un ejemplo que ilustra cómo IE decide entre los colores azul y rojo:

supongo que soy azul.

Para probar este documento, escriba el código HTML en el Bloc de notas y, a continuación, guárdelo con el EmTest.htm nombre de archivo. Cargar esta página Web haciendo doble clic en su nombre de archivo en el Explorador de Windows. Verá la sentencia Supongo que soy azul aparecerá en azul. los

elemento que aquí se define de dos maneras contradictorias. En el estilo incrustado, se define como el rojo, pero esa definición es anulado por la definición en línea del color azul.

Prueba a eliminar el estilo en línea para ver qué pasa. Cambie la línea

Supongo que soy azul.

Vuelva a probar por volver a guardar el archivo de Bloc de notas que acaba de modificar.

No hay necesidad de hacer doble clic de nuevo en este nombre de archivo en el Explorador de Windows para cargar la nueva versión en el IE. Después de que haya cargado un documento, es la dirección por defecto en IE - en este caso, una dirección de un archivo .htm en su disco duro. Si modifica el archivo que usted acaba de hacer en este ejemplo, todo lo que tienes que hacer para ver la modificación es presionar F5. Ese "refresca" IE.

Algunas personas prefieren usar una función de vista del origen del navegador como una forma rápida de modificar y volver a probar el código CSS. Seleccione Ver -> Fuente. Usted puede hacer cambios en el código, y luego guardarlo. Tanto Netscape y Firefox resaltar la sintaxis, que algunos programadores encuentran útil.

Después de cargar la nueva versión de este documento en IE, la línea Supongo que soy azul ahora se muestra en rojo. El conflicto entre las definiciones de estilo incrustadas y en línea se ha resuelto porque ha eliminado el estilo en línea.

Puede anular las reglas normales de prioridad mediante el comando! Es importante especificar que este estilo se debe utilizar, no importa qué. An! Importante declaración anula todas las demás definiciones de estilo. Agrega el comando de la siguiente manera:

p {color: blue importante-}

En CSS1, estilos declararon importante por el autor de la página Web de anulación incluso cualquier estilo que el lector ha declarado importante. Sin embargo, en CSS2, estilos lector importantes ganan sobre estilos de autor importantes, y de hecho más de alguna estilos de autor, ya sea importante o no marcados.

Especificidad CSS Entendimiento

El termino especificidad también se utiliza para describir una segunda forma en que un navegador calcula qué estilo gana cuando el conflicto estilos. En primer lugar, el navegador busca la cercanía - pero lo que si la proximidad es idéntico? Fue entonces cuando se aplica esta segunda técnica.

Imagina, por ejemplo, que dos hojas de estilos diferentes se hace referencia en el documento mismo HTML (sí, puede adjuntar más en el archivo CSS para el código HTML de una página web determinada). Pero, en una de estas hojas, H1 es de estilo audaz, y en otra hoja es de estilo cursiva. ¿Cuál es la mala navegador para hacer en este caso? Qué especificación victorias?

A diferencia de los ejemplos de la colisión estilo anterior de este capítulo, donde cercanía podría ser utilizado para declarar un ganador, aquí tienes dos estilos situados en el mismo grado de cercanía (la misma especificidad). Ambas definiciones de estilo se encuentran en las hojas de estilo externas.

En este caso, el navegador lo hace un poco extraño matemáticas para tomar la decisión sobre qué estilo de usar. Como antes, el estilo más "específico" gana. Pero lo que cuenta como especificidad en este concurso? No es lo mismo que el factor "cercanía". El navegador tiene que hacer un poco de cálculo extraño, pero realmente no se puede llamar thismath. Es sólo una especie rara de acumulación de valores, donde algunos estilos tienen órdenes de magnitud más peso que otros. No se moleste en su bonita cabeza de estas cosas si no encuentras cálculos peculiares interesante.

¿Qué hace el navegador para calcular la especificidad de dos estilos competir si su factor de "cercanía" es idéntico? Tres cosas:

• Mira a un estilo y cuenta el número de atributos ID tiene, en su caso

• Cuenta el número de atributos de clase, en su caso

• Cuenta el número de selectores (puedes selectores de grupo en un estilo como este: h1, h2, h3)

El navegador no es así entonces añadir estos números en conjunto- simplemente concatena el dígitos. Tal vez esto es una especie de la aritmética utilizada por los extranjeros en su galaxia, pero he seguro de que nunca oyó hablar de él. Imagínese si usted tiene el número 130 por el siguiente proceso de concatenación:

1 manzana, 3 naranjas, plátanos 0 = 130

Este proceso da manzanas diez veces el "peso" de las naranjas, y 100 veces el peso de los plátanos. Aquí hay un par de ejemplos que muestran cómo funciona cuando se utiliza para determinar la especificidad en un CSS. Sólo fingir que estás de vuelta en clase de matemáticas de tercer grado.

Atención, clase! ¿Cuál es el número de especificidad para este selector?

ul h1 li.red {color: amarillo-}

Cualquier persona obtener la respuesta 13?

La respuesta correcta es 13. Usted tiene

0 identificaciones, atributo 1 clase (rojo), y 3 selectores (li h1 ul)

Ese "suma", por así decirlo, a 013. Ahora, kiddies, que pueden explicar cómo se obtiene una especificidad de 1 para la siguiente definición de selección?

H1 {color: azul-}

Después de la especificidad se ha determinado, el número más alto gana. Supongamos que dos estilos están en conflicto, ya que ambos definen el color de H1, pero definen de manera diferente. Pero debido a una definición tiene un valor especificidad del 13 y el otro tiene sólo el 1, el titular H1 es amarillo, no azul.

¿Qué pasa si dos reglas resultan tener la misma especificidad? En ese caso (suponiendo que ambos están en una hoja de estilo, o de otra manera son los mismos "cercanía" a la etiqueta HTML), la regla que se especificó últimas victorias.