Tomando una caída con css

¿Qué significa el término cascada significar para las hojas de estilo? Esto significa que una regla CSS cae abajo a través del código, ya veces se tropieza con una regla en conflicto.

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

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

especificidad visualizar

Varios factores determinan qué estilo gana cuando chocan estilos: la herencia, el árbol estructural en un documento, y el 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:

Video: Custom Mouse Cursor Tutorial Canvas CSS HTML

• estilos por defecto del navegador.

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

• Una hoja de estilos incrustada (estilos define dentro del documento HTML, dentro de su etiqueta. Este tipo de estilo también se le llama interno).

• 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 sólo se). Por ejemplo, este es un típico estilo en línea:

Esta lista también ilustra el orden en el que estilos en conflicto “ganar” en cualquier conflicto. Piense en el orden que el estilo más cercano a las victorias de los 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 prioridad más alta es la hoja de estilo interna ubicada en el encabezado 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 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:

yo supongo que la azul.

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

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

Prueba a eliminar el estilo en línea para ver lo que sucede. Cambie la línea

Creo que soy azul.

Video: CSS Skewed Background Tutorial - 2 - pure css tutorials - Plz SUBSCRIBE Us For Daily Videos

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, que 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 tiene que hacer para ver la modificación es presionar F5. Que “refresca” IE.

Video: CSS Transition (CSS Animations Series Part 1)

Algunas personas prefieren utilizar vista de origen incorporado en el navegador como una forma rápida de modificar y volver a probar el código CSS. Seleccione Ver -gt; Fuente. Puede realizar 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 el IE, la línea Creo que soy azul Ahora se muestra en rojo. El conflicto entre las definiciones de estilo incrustadas en línea y se ha resuelto debido a que eliminó el estilo en línea.

Puede anular las reglas normales de la prioridad con el comando! Importante precisar que este estilo debe ser utilizado, no importa qué. Una declaración! Importante anula todas las demás definiciones de estilo. Se agrega el comando como el siguiente:

p {color: blue} importante-

En CSS1, estilos declararon importante por el autor de la página Web de anulación incluso cualquiera de los estilos que el lector ha declarado importante. Sin embargo, en CSS2, estilos importantes lector de ganar a lo largo importantes estilos de autor, y de hecho más de alguna estilos de autor, ya sea importante o no marcados.

Comprensión especificidad CSS

El termino especificidad También se utiliza para describir una segunda forma en que un navegador calcula que el estilo gana cuando estilos conflicto. 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.

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

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 los dos estilos situados en el mismo grado de cercanía (la misma especificidad). Ambas de estas definiciones de estilo se encuentran en las hojas de estilo externas.

En este caso, el navegador lo hace un poco de matemáticas extraña a 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 “proximidad”. El navegador tiene que hacer un poco de cálculo extraño, pero realmente no se puede llamar thismath. Es sólo una especie extraña de la acumulación de valores en algunos estilos tienen órdenes de magnitud más peso que otros. No se moleste en la cabeza bastante de estas cosas si no encuentra cálculos peculiares interesante.

¿Qué hace el navegador para calcular la especificidad de los dos estilos competir si su factor de “proximidad” es idéntico? Tres cosas:

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

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

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

El navegador no lo hace entonces añadir estos números en conjunto- simplemente concatena el dígitos. Tal vez esto es una especie de aritmética utilizada por los extranjeros en su galaxia, pero he Seguro nunca más se supo de él. Imagínese si usted tiene el número 130 por el siguiente proceso de concatenación:

1 manzana, 3 naranjas, 0 bananas = 130

Este proceso da manzanas diez veces el “peso” de 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 de un CSS. Sólo pretendo que está de vuelta en la clase de matemáticas de tercer grado.

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

ul h1 li.red {color: amarillo-}

Cualquier persona obtener la respuesta 13?

La respuesta correcta es 13. Usted tiene

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

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

H1 {color: azul-}

Una vez determinada la especificidad, el número más alto gana. Supongamos que los dos estilos están en conflicto, ya que ambos definen el color de H1, pero lo 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 de color amarillo, no azul.

¿Qué pasa si dos reglas resultan tener la misma especificidad? En ese caso (suponiendo que ambos se encuentran en una hoja de estilo, o de lo contrario son los mismos “proximidad” a la etiqueta HTML), la regla que se especificó últimos triunfos.