JMiur [E]

Por lo general, cuando hablamos de estilos CSS nos referimos a clases y definiciones colocadas en un etiqueta <style> </style> o, en Blogger, a lo que está entre las etiquetas <b:skin> </b:skin> pero claro, esa no es la única manera de agregar estilo a algo. También es común hacerlo directamente en la etiqueta que queremos modificar:
<p style="color: white"; font-size: 20px;> ....... </p>
Esto es conocido como un método inline, es decir, usamos style no como etiqueta sino como atributo de una etiqueta. En ambos casos, el contenido (las propiedades) son las mismas.

¿Por qué hacemos esto? A veces, por simple comodidad, otras veces, para sobrescribir alguna propiedad definida con anterioridad. Por ejemplo, casi cualquier sitio posee alguna clase de definición genérica para los enlaces; algo así:
a, a:visited, a:link  {color: #BCD; text-decoration: none;}
a:hover {color: #DEF; text-decoration: none;}
Asi que si escribimos <a href="#">un enlace</a> se verá de este modo.

Eso es perfecto, nos evita escribir las definiciones una y otra vez pero, si por alguna razón queremos que un enlace específico se vea diferente, deberemos agregarle el atributo style para sobrescribir esa propiedad así que si ponemos <a style="color: red" href="#">otro enlace</a> el enlace se verá de otro modo. Incluso, dependiendo de la situación, deberrmos reforzar ese cambio agregándole la palabra !important:
<a style="color: red !important" href="#">otro enlace</a>
Resumiento, usamos el atributo style para cambiar una propiedad definida con antelación pero ¿y si queremos hacer lo contario?

Muchas veces, usamos scripts o gadgets que no podemos editar y que colocan ciertas propiedades de manera más o menos automática y por lo tanto, no tenemos acceso al código para cambiarlo. Sabemos cuál es (lo podemos ver leyendo el código fuente) pero, simplemente, estamos atados de pies y manos.

No todo está perdido.

En una entrada anterior se mostraban los llamados pseudo-elementos y atributos especiales. Entre esas cosas, estaba la posibilidad de definir propiedades en función de los atributos de una etiqueta:
a.enlaceA {color:yellow;}
a.enlaceA[title] {color:red;}

<p>
Este enlace no tiene title y es <a class="enlaceA" href="#">amarillo</a>
Como este otro enlace tiene title es <a class="enlaceA" href="#" title="El enlace rojo">rojo</a>
</p>
Lo que hacía la primera definición era poner los enlaces de color amarillo y la segunda, los ponía de color rojo si el enlace tenía un atributo title.

Este enlace no tiene title y es amarillo
Como este otro enlace tiene title es rojo


Así que, usando el mismo criterio, podríamos buscar el atributo style:
a.enlaceB {color:yellow;}
a.enlaceB[style] {color: lightblue;}

<p>
Este enlace no tiene style y es <a class="enlaceB" href="#">amarillo</a>
Como este otro enlace tiene style no será rojo <a class="enlaceB" style="color: red;" href="#">sino azul claro</a>
</p>

Este enlace no tiene style y es amarillo
Como este otro enlace tiene style no será rojo sino azul claro


¿Funcionará en todos los navegadores? No me hagan reir risaanim Lo hará en todos los "modernos" incluyendo Internet Explorer 8 pero, no lo hará en IE6 y, aunque aseguran que también lo hace en IE7, no he podido comprobarlo.

REFERENCIAS:Natalie Jost

7 comentarios:

Gem@  

Me leíste el pensamiento? precisamente ayer daba como solución añadir !important para renombrar los enlaces en los comentarios porque coincide el color del enlace con el color de fondo, siempre me ha funcionado pero aparentemente no le funciona a quien lo necesita :O

Responder
JMiur  

Gem@:

El !important suele funcionar bien pero a veces ... depende :$ ... depende de cómo están definidas las propiedades. Hay una jerarquía, un orden de prioridades y a veces es necesario hacerlo de otro modo. Por ejemplo:

<a href=#"><span style="color:red"> el texto </span> </a>

Que tambien podrías definir con CSS:

a span {color:red}

Tu solución es la correcta y es la que funcionará en en la gran mayoría de los casos.

Responder
Gem@  

Gracias J.Miur :D

Responder
JMiur  

:D

Responder
Roberto Gascón Maroto  

Buenas, excelente articulo +1, pero...
creo que tengo un gran marron entre manos, tengo que sobreescribir los estilos que me da uno de los geniales plugins para drupal, el cual escribe todos sus propios estilos con la etiqueta style dentro del elemento, con el problema añadido de que a cada propiedad le asigna !important; quedando algo asi:

style="width: 135px !important; height: 60px !important; padding-left: 5px !important; padding-right: 5px !important; box-sizing: content-box !important; background-color: rgb(255, 255, 255) !important; border: 1px solid rgb(192, 192, 192) !important; border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; border-bottom-left-radius: 10px !important; overflow: hidden !important; position: relative !important;

y el diseño que da no solo no me coincide con el que necesito, si no que ademas es espantoso; he intentado solucionarlo con lo que propones, llamando a la clase, con el selector style, sobreescribiendo lo que me interesa, y añadiendo !important al final, pero parece ser que como en linea me mete otro important el css sigue su curso; tienes alguna idea? o alguien que pase por aqui puede ayudarme?
Creo que estoy jodido XD

Aun asi gracias de antemano

JMiur  

Si es así, hay poco que puede hacerse. Lo lógico, sería editar ese plugin.

Otra alternativa es sobrescribir el estilo pero, colocando esas reglas DESPUES del plugin si es que puede identificarse dónde se carga o ver que pasa si sirve de algo agregarlas al final de la página.

Otras posibilidades requerirán usar JavaScript. Cargar una hoja de estilo luego de window.load; cambiar el nombre de las clases, eliminar el atributo style de las etiquetas de cierto contenido, etc.

No es buena práctica colocar !important en las reglas, salvo que sea muy necesario y mucho menos en las definiciones inline.

Responder
Juan Fernando Moreno  

uf! severo. Gracias!!!!!!!!!!!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR