Usar varias hojas de estilo css en la misma página html

Question

Cómo usar varias hojas de estilo CSS en la misma página HTML donde ambas hojas de estilo tienen una clase de pancarta, por ejemplo. ¿Cómo se especifica a qué clase se refiere?

Answer 1

No puede controlar a qué hace referencia, dado el mismo nivel de specificity en la regla (por ejemplo, ambos son simplemente .banner) la última hoja de estilo incluida será la que gane.

Es por propiedad, por lo que si hay una combinación en curso (por ejemplo, uno tiene background, el otro tiene color) entonces obtendrá la combinación ... si se define una propiedad en ambos, cualquiera que sea el La última vez que aparece en el orden de la hoja de estilo gana.

Answer 2

Las hojas de estilo se concatenan efectivamente en una sola hoja de estilo en el orden en que aparecen en la fuente HTML.

El normal rules for applying rulesets luego aplicar (es decir, por specificity con el último conjunto de reglas que define una propiedad dada ganar en caso de empate y !important lanzando un palo en las ruedas)

Answer 3

Nunca se refieren a una hoja de estilo específica. Todas las reglas de CSS en un documento se fusionan internamente en una.

En el caso de las reglas en ambas hojas de estilo que se aplican al mismo elemento con la misma especificidad, la hoja de estilo incrustada posteriormente anulará la anterior.

Puede usar un inspector de elementos como Firebug para ver qué reglas se aplican y cuáles son reemplazadas por otras.

Answer 4

El que incluya último será el que se utilice. Sin embargo, tenga en cuenta que si alguna de las reglas es importante en la primera hoja de estilo, tendrá prioridad.

Answer 5

Piense en ello como su (s) hoja (s) de estilo refiriéndose a ("seleccionar") elementos en su página HTML, y no al revés.

Answer 6

No puede y no quiere.

Se aplicarán todas las reglas de CSS en la página (el HTML "no sabe" nada sobre este proceso), y las reglas individuales con la mayor especificidad se "pegarán". La especificidad está determinada por el selector y por el orden en que aparecen en el documento. Con todo, el punto es que esto es parte del en cascada. Debería consultar uno de los muchos tutoriales de CSS en la red.

Answer 7

Sí, puede incluir varias hojas de estilo, pero debe etiquetarlas como hojas de estilo alternativas y dar al usuario alguna forma de activarlas mediante JavaScript, tal vez haciendo clic en un enlace.

Para crear una hoja de estilo alternativo:

<link type="text/css" href="nameOfAlterateStyleSheet.css" rel="alternate stylesheet" title="Blue" /> 

A continuación, cree un método en el archivo JavaScript que: 1. Cargar todas las hojas de estilo en una matriz 2. Ejemplo:

function getCSSArray() 
{ 
var links = document.getElementsByTagName("link"); 
var link; 
for(var i = 0; i < links.length; i++) 
{ 
    link = links[i]; 
    if(/stylesheet/.test(link.rel)) 
    { 
     sheets.push(link); 
    } 
} 

    return sheets; 
} 

Luego revise la matriz usando algún tipo de ciclo if/else que deshabilite las hojas de estilo que no desea y habilita la hoja de estilos que desee. (Puede escribir un método diferente o insertar el ciclo en el método anterior. Me gusta usar el comando onload para cargar el conjunto de CSS con la página, luego llamar al método printView.)

function printView() 
{ 
var sheet; 
var title1 = "printVersion"; 
for(i = 0; i < sheets.length; i++) 
{ 
    sheet = sheets[i]; 
      if(sheet.title == title1) 
    { 
     sheet.disabled = false; 
    } 
    else 
    { 
     sheet.disabled = true; 
    } 

Por último, crear código en su documento HTML que el usuario activará el método de Javascript tales como:

<a href="#" onClick ="methodName();">Link Name</a> 

Answer 8

No se puede. La última hoja de estilo que especifique será la que usará una página html. Piénselo como un gran documento .css.