Diseño web Valencia

Tomando un Tumble con CSS

Etiquetas: , , ,
¿Qué significa el término para las hojas de estilo en cascada? 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 acerca de lo que los programadores llaman precedencia: ¿Quién gana cuando hay un conflicto? Más de un estilo se puede aplicar a una etiqueta determinada. Por ejemplo, siempre hay el estilo definido por el navegador por defecto, como por ejemplo 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, para tener prioridad sobre el estilo integrado.

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

Varios factores determinan qué estilo gana cuando chocan estilos: 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 comprensión implica donde se definió el estilo. Sus estilos CSS se pueden definir en cuatro lugares principales:

     Estilos por defecto del navegador.

     Una hoja de estilos 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 estilo incrustada (estilos definidos en el documento HTML, dentro de su etiqueta <head>. Este tipo de estilo es también llamado a veces interno).

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

<p style = "border-bottom: azul">

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 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 para ese elemento, un estilo en línea es el estilo utilizado. Este closenessof el estilo al elemento que coincide es conocido más formalmente como la especificidad.

La ubicación de estilo con la segunda prioridad más alta 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:

<html>
<head>
<style type="text/css">
p {color:red;}
</style>
</head>
<body>
<p style="color: blue;">i guess i'm blue. </p>
</body>
</html>

Para probar este documento, escriba el código HTML en el Bloc de notas y, a continuación, guárdelo utilizando 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ás la frase Supongo que soy azul aparecerá en azul. El elemento <p> aquí se define de dos maneras contradictorias. En el estilo incrustado, se define como rojo, pero esa definición es anulado por la definición en línea del color azul.

Trate de no incluir el estilo en línea para ver qué pasa. Cambie la línea a

<p> Creo que soy azul. </ p>

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. Una vez 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 como usted acaba de hacer en este ejemplo, todo lo que tienes que hacer para ver la modificación es presionar F5. Ese "refresca" el 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 destacan 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 yo 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! Importante para especificar que este estilo se debe utilizar, no importa qué. Un! Importante declaración anula todas las demás definiciones de estilo. Agrega el comando como este:

p {color: blue! important;}

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 de lectores importantes ganan a lo largo de estilos de autor importantes, y de hecho sobre los estilos de autor, ya sea importante o no marcada.
Especificidad CSS Entendimiento

La especificidad término 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 ¿qué pasa 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 mismo documento HTML (sí, puede adjuntar más de 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 de victorias?

A diferencia de los ejemplos de colisión estilo al principio de este capítulo, donde la cercanía podría utilizarse para declarar un ganador, aquí tienes dos estilos ubicados 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 hace un poco extraño matemáticas para tomar la decisión sobre qué estilo de usar. Al igual que antes, el estilo más "específica" 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 un tipo extraño de la acumulación de valores, donde algunos estilos tienen órdenes de magnitud más peso que otros. No se moleste en su cabeza bastante de estas cosas si no encuentras cálculos peculiares interesante.

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

     Mira a un estilo y cuenta el número de ID de los atributos que 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 luego agregar estos números juntos; simplemente concatena los dígitos. Tal vez esto es una especie de 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 finge que está de vuelta en la 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 IDs, atributo 1 clase (rojo), y 3 selectores (li ul h1)

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 selector?

H1 {color: blue;}

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 lo definen de manera diferente. Pero debido a una definición tiene un valor de especificidad de 13 y el otro tiene sólo 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 lo contrario son los mismos "cercanía" a la etiqueta HTML), la regla que se ha especificado últimos triunfos