Quiero aplicar un estilo de CSS existente a todas las etiquetas de una página. ¿Cómo?

Nota, esto es diferente a la pregunta anterior How can I apply CSS on all buttons which are present in that page? porque este es un estilo ya existente. Por lo tanto, dado que un estilo, que llamaremos "standard_label_style" ya existe en un archivo CSS se incluye, ¿qué puedo hacer yo para decir que todas las etiquetas de esta página deben tener ese estilo corto de sumar:Quiero aplicar un estilo de CSS existente a todas las etiquetas de una página. ¿Cómo?

class="standard_label_style"

a todos y cada uno? Y sí, sé que podría aplicar los estilos ex-post-facto con un fragmento de código jQuery o JavaScript. Solo estoy tratando de aprender cómo se supone que debo hacerlo con CSS.

Seguimiento

he conseguido varios comentarios que dicen sólo tiene que utilizar una sintaxis como esta .standard_label_style, etiqueta ... Por desgracia, eso no hace nada parecido a lo que yo quiero. Eso me permitiría aplicar reglas adicionales a la clase standard_label_style, así como las reglas a las etiquetas dentro de esta página, pero no me permitiría aplicar ese estilo a todas las etiquetas en esta página. Para ver un ejemplo de esto, aquí hay una hoja de estilo y html para demostrar. La etiqueta sin una clase todavía no aparecerá en rojo, pero eso es lo que espero que suceda. Quiero aplicar una clase existente a todas esas etiquetas en la página, no solo a la de la clase y sin agregar un nuevo estilo en esta página, el estilo existente debe ser el único estilo.

included.css:

.standard_label_style { color: red; }

test.html:

<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="included.css"> 
    <style> 
     .standard_label_style, label { } 
    </style> 
    </head> 
    <body> 
    <label class="standard_label_style">Test Label</label><br/> 
    <label>Unclassed Test Label</label> 
    </body> 
</html>

Fuente

2011-05-27 John Munsch

CSS realmente no funciona así.

Puede aplicar un estilo a todas las etiquetas directamente:

label { 
    color: Lime; 
}

o aplicar una clase a todas las etiquetas

.labelClass { 
    color: Lime; 
} 

<label class="labelClass"></label>

Puede también tener varios selectores, por lo que podría enmendar su estilo actual ser

.labelClass, label { 
    color: Lime; 
}

Lo que no puedes hacer en CSS estándar es algo así como

label { 
    .labelClass; 
}

La buena noticia es que hay un montón de bibliotecas del lado del servidor que hacen CSS chupar menos y le permiten hacer exactamente este tipo de cosas, véase por ejemplo dotLess si está utilizando .NET que proporciona reglas anidadas y un modelo básico de inheratancia

Fuente

2011-05-27 14:56:19 fearofawhackplanet

En su archivo css, no puedes poner

.standard_label_style, label 
{ 
//styles 
}

Fuente

2011-05-27 14:51:11 AllisonC

Desafortunadamente no, vea el ejemplo en la pregunta revisada. –

.standard_label_style, label { 
    /* stuff */ 
}

Fuente

2011-05-27 14:51:41

No. Eso me permitiría revisar qué es standard_label_style, pero no hace que se aplique a todas las etiquetas. –

No. En realidad, "dice" que todos los elementos de la etiqueta y/o cualquier elemento con la clase standard_label_style aplicada a ella, usa las propiedades de estilo definidas. –

Gracias por su corrección. Adivina qué, todavía no hizo tu respuesta correcta ... –

Para aplicar una estilo a cada etiqueta en la página, use este CSS:

label { 
/* styles... */ 
}

Si tiene un estilo existente (p. "Standard_label_style") en el CSS ya, se puede aplicar eso a cada etiqueta:

.standard_label_style, label { 
/* styles... */ 
}

Esto afectará a todas las etiquetas a través del sitio, a fin de utilizar con precaución!

Fuente

2011-05-27 14:51:45 whostolemyhat

Esa sintaxis no se aplica a todas las etiquetas, esa sintaxis me permite seleccionar tanto el standard_label_style AND any label tags para agregar o cambiar estilos asociados con ambos. No hace nada para que las características de estilo de standard_label_style se apliquen a las etiquetas dentro del HTML. –

no estoy seguro de que puede ... Una solución posible (se siente un poco hacker sin embargo) es para unir el estilo a su cuerpo de la etiqueta, a continuación, cambiar el css a ser la siguiente:

body.standard_label_style label{ 
    //Your styles here 
}

Fuente

2011-05-27 14:53:15

Estoy de acuerdo en que el uso de selectores de CSS es su mejor opción. – Wex

Uno de los trucos de CSS menos utilizados de todos los tiempos: ¡Dale a tu cuerpo una identificación o clase!

HTML:

<body id="standard_label_style"> 
    <label>Hey!</label> 
</body>

CSS:

#standard_label_style label{ 
    the styles 
}

se lleve a los estilos, mientras que

HTML:

<body id="custom_label_style"> 
    <label>Custom!</label> 
</body>

no lo hará.

Fuente

2011-05-27 14:56:34

Aquí se trata de una prioridad de CSS. Las declaraciones que son "más vagas" (etiqueta de cuerpo, clases) se aplican antes de las declaraciones que son "menos vagas" (elementos específicos, CSS en línea).

Por lo tanto, su respuesta depende de cómo la hoja de estilos está definiendo label estilos. Si por ejemplo se dice label {...}, entonces eso es bastante específico, y la mejor opción es utilizar un estilo más específica CSS, consulte:

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (buen tutorial?)
CSS precedence

El El nivel de "especificidad" que necesita anular, como dije, depende de qué tan específica sea su otra hoja de estilo. De acuerdo con el enlace, "CSS incrustado en el html siempre viene después de las hojas de estilo externas, independientemente del orden en el html".

También existe la posibilidad de que si usted mismo defina label {your custom css} que debería funcionar, si luego importa su hoja de estilo. Es lo que trataría primero de ver si funciona. ¿Has probado esto? ¿Cuál fue el resultado?

Tenga en cuenta que si desea anular completamente la otra hoja de estilo, también deberá restablecer cualquier CSS que no esté utilizando configurando sus valores en inherit o según corresponda.

Fuente

2011-05-27 15:00:29 ninjagecko

Quiero aplicar un estilo de CSS existente a todas las etiquetas de una página. ¿Cómo?

Respuesta

Cuestiones relacionadas