Acá les vá un pequeño descubrimiento, pero inmenso en utilidad: Se pueden usar varias clases para el atributo class de un elemento, separadas por un espacio. Por ejemplo: <p class="clase1 clase2">. Por lejos, el mejor tip de todo el año.
La verdad que no lo sabía. Puede ser muy útil para ahorrarse un par de kb en la hoja de estilos y no tener un atributo diferente para cada div.
Tip-aso! funciona en todos los browsers?
TitoFer — Por ejemplo, si tenés una clase .centered, podés usarla como clase general para centrar elementos. Entonces, si tenés una clase .box (digamos, una caja con estilo, que se usaría en varias secciones del sitio), podrías combinar class="box centered", para renderizar la clase y además, centrarla. Si querés cajas sin centrado, usarías class="box" solamente. Podés combinar con varias cosas, por ejemplo, podrías tener una clase .float-left que las flote a la izquierda, etc. etc. Las posibilidades son infinitas.
Ojo que el ejemplo también se puede hacer con IDs, pero con clases podés tener un nivel de jerarquía extra bastante interesante (clase subclase subsubclase) y lógico.
Horacio — Totalmente. Un tipo boludo que me hubiera gustado saberlo hace meses :/
Juan — Sí. Fijate en la especificación de HTML sobre class e id: “Multiple class names must be separated by white space characters.”
Podrías utilizar una clase para definir letras, tamaños, y otra para definir colores.
class=”titular principal”
class=”titular seccion1″
Etc. Sirve para no tener que escribir una regla nueva con más selectores.
Visto!! :D Gracias
No quiero sonar ortiva, pero es una de las formas de usar estilos, pensé que era básico… :S
Se puede definir en el css cuando usas de esa forma, por ejemplo:
.estilo1.estilo2 {color: #fff;}
Eso estilizaría esto:
Hola
Aunque de todas formas, basado en la experiencia, el IE6 muchas veces se hace lío con esta forma de definir estilos.
En el comentario anterior se tendría que haber visto esto:
Hola
eh.. la tercera es la vencida! (maldito wordpress)
class=”estilo1 estilo2″
No quiero sonar ortiva, pero es una de las formas de usar estilos, pensé que era básico… :S
Vos porque sos groso man, nosotros los recién iniciados nos maravillamos con estas cosas :P
¿Como has podido vivir sin saberlo hasta hoy? Personalmente creo que eso es lo mejor de CSS despues de las propiedades en cascada, sobre todo si haces scripting. Las posibilidades se abren!
Sosa — Eso me pregunté exactamente cuando lo descubrí. Igual que cuando descubrí la programación orientada a objetos, los “lomos” de Stregga (una pizzería) y muchas cosas más.
No es tan obvio, posta, he chequeado código de grosos en serio (por ejemplo, ahora estoy extendiendo un sitio que hizo Firewheel Design) y no lo usan. Mejor dicho, hay otras formas de emular esto.
Jaja! Pero hombre que eso es básico en el mundo del css! (aunque no todos los saben y ahi ocurre el problema!).
No solo puedes usar diferentes clases en un atributo, también puedes definir estilos a elementos con varias clases. Por ejemplo:
a.link.link2.red { }
Eso eligiria el enlace con 3 las clases, link, link2 y red.
Esto no suele ser usado mucho, pero puede servir, además también puedes coger ids y clases al mismo tiempo.
#mylink.link2 { }
Saludos
Imagina que este es el elemento, wp no me dejó escribir la etiqueta html.
[ a id="mylink" class="link link2 red" ]
neojp, para escribir los signos “mayor que” y “menor que” tenés que usar las entidades correspondientes.
This is the site of Rodrigo Galindez, Interaction Designer and Typomaniac. A collection of thoughts about design, typography, technology and life, served fresh from Córdoba, Argentina.
Dig in the archives.
My daily activity in social networks.
TitoFer
Y exactamente… ¿para que sirve?
asi… no caigo en ninguno…