JMiur [E]

Interensante artículo de CSS Tricks donde se muestran las diferencias que suelen confundirnos cuando creamos reglas de estilo; algo que no sólo ocurre con los principiantes sino con todos nosotros.

Un pequeño resumen de ese artículo.

¿Cuál es la diferencia entre estas dos reglas?
.demo { color: red; }
p.demo { color: red; }
La primera, hará que el texto de cualquier etiqueta que tenga como atributo la clase demo, se vea de color rojo:
<div class="demo"> el texto es rojo </div>
<span class="demo"> el texto es rojo </span>
La segunda, sólo funcionará en las etiquetas P que tengan ese atributo, cualquier otra, no será afectada.
<div class="demo"> el texto será de cualquier color </div>
<p class="demo"> el texto es rojo </p>

¿Y cuál es la diferencia entre estas dos reglas?
.demo p { color: red; }
p.demo { color: green; }
La primera, hará que los textos de las etiquetas P que estén dentro de algún contenedor que tenga como atributo la clase demo, se vea de color rojo:
<div class="demo">
  <p> el texto es rojo </p>
  <span> el texto será de cualquier color </span>
</div>
La segunda, hará que se vean rojos los textos de cualquier etiqueta P que tenga definida esa clase, tal como en el caso anterior.

¿Cuál es la diferencia entre un ID y una clase?
¿Da lo mismo usar uno que otro? Definitivamente no (más información). Los IDs deben ser únicos, sólo una etiqueta en toda la página debe tener ese nombre y se los entiende como "más importantes"; si se usan IDs y clases en al misma etiqueta, las reglas definidas para el ID tienen preponderancia sobre las de la clase porque las propiedades poseen un orden de prioridades:
#demoID { color: red; }
.demoCLASE { color: green; }

<div id="demoID" class=demoCLASE""> el texto será rojo </div>

¿Puede usarse hover para modificar una etiqueta interna?
<div class="demo">
  <p> Sed vitae tortor turpis. <span>Nullam blandit</span> ornare urna vitae rhoncus. </p>
  <p> Nam lacinia lacinia risus, sed <span>elementum libero</span> imperdiet non. </p>
</div>
Con estas reglas, cuando ponemos el cursor sobre ese rectángulo, el texto será amarillo:
.demo { color: red; }
.demo:hover { color: yellow; }

Sed vitae tortor turpis. Nullam blandit ornare urna vitae rhoncus.

Nam lacinia lacinia risus, sed elementum libero imperdiet non.


Con esta otra, lo que cambiará es el color de las etiquetas SPAN que estén dentro del DIV:
.demo { color: red; }
.demo:hover span { color: yellow; }

Sed vitae tortor turpis. Nullam blandit ornare urna vitae rhoncus.

Nam lacinia lacinia risus, sed elementum libero imperdiet non.


¿Los espacios y los puntos y comas son obligatorios?
Los espacios son obligatorios cuando separan palabras claves. Estas dos cosas son lo mismo:
.demo{color:red;}
.demo {      
      color :       red;
}
Estas dos no son lo mismo:
.demo{background:trasnparent url() no-repeat left top;}
.demo{background:trasnparent url()no-repeat left top;}
La primera, funcionará correctamente en cualquier navegador, la segunda, no se aplicará en IE porque falta el espacio entre el cierre del paréntesis y la palabra no-repeat

El punto y coma es obligatorio siempre, excepto en la última propiedad:

Esto es correcto
.demo {
  color: red;
  font-size: 12px
}
Esto es incorrecto:
.demo {
  color: red
  font-size: 12px
}
Es mejor tener la costumbre de agregarlo siempre:
.demo {
  color: red;
  font-size: 12px;
}

¿Qué propiedad se aplica cuando se definen varias veces?
.demo {
  color: red;
  font-size: 18px;
  color: green;
}
La última; siempre la última; en este caso, el color a usar será el verde.

24 comentarios:

Graciela  

Muy explicativo Jmiur, a veces son pequeñas cositas como punto y coma, una llave...buen lunes :D

Responder
oloman  

Buena recopilación. Intuitivamente algunas de las combinaciones las utilizaba, pero nunca me había puesto a compararlas directamente. Gracias ;)

Responder
Marco  

Hola Jmiur, por favor tienes alguna idea, tutorial o pagina para hacer algo parecido a esto en facebook:

http://www.facebook.com/pages/create.php

gracias por tu aporte =)

Responder
Rodrigo  

Hola amigo tengo una consulta quiero modificar esta sigla leer mas en mi blog y me dijeron que tengo ke hacer buscando esto
.leermas

.leermas {
color: #990000;
text-align:right;
margin-top:10px;
}
le agregue esos codigos pero no cambian nada de nada.

En .leermas solo andan estos codigos (el font-size y background-color: red con este condigo cambio el color al fondo de las letras) pero el color de las letras no se cambia con nada alguna idea??

Responder
JMiur  

Graciela:
Esas pequeñas cosas son las que nos enloquecen. Se necesita una lupa :-)

oloman
La idea de CSS Tricks es buena. Eso de poner las variaciones una al lado de la otra ayuda a visualizar las cosas.

Marco
No. No hay ninguno al respecto. Acá hay una idea de cómo se configura una aplicación para crear una landing page con las variantes del caso ya que Facebook cambia ciertas cosas con asiduidad.

Rodrigo:
Para cambair el color, debes agregarle la palabra !important:

.leermas {
color: #990000 !important;
}

margin-top y text-align no tendrán ningún efecto ya que es un elemento inline; si quieres alinearlo a l adeecha, debes transformarlo en un elemento de bloque; por ejemplo:

.leermas {
display:block;
color: #990000 !important;
text-align:right;
margin-top:10px;
}

En ese caso, deja de tener el tamaño que tiene para ocupar toda la línea y abarcar el ancho del post.

Responder
Marco  

yo me referia al efecto q se muestra cuando das click en las alternativas de las imagenes y se despliega un cuadro con contenido, y si le das clic a otra, esta despliega tambien un cuadro de contenido y ademas cierra el anterior abierto... gracias por tu respuesta =)

Responder
JMiur  

Algo que funcione como ese tipo de efecto, deberás buscarlos en la web. No recuerdo ninguno en especial.

Responder
Marco  

claro!!, pero con q nombre lo busco??, gracias

Responder
JMiur  

No tiene un nombre específico.

Responder
Rodrigo  

Hola amigo gracias por tus respeustas me ayudaste muchisimo uan rpegunta mas te queria hacer como hago para que cuando pase el mouse las frase leer mas se agrande?? creo que se llama efecto hover verdad eso me gustaria que me ayudes a realizar

Responder
JMiur  

Agregando la regla y estableciendo en ella el valor del tamaño de la fuente. Algo así:

.leermas:hover {
font-size:VALORpx;
}

Responder
Rodrigo  

a ver eso tengo que agregar aparte??

o iria dentro de esto
.leermas {
display:block;
color: #990000 !important;
text-align:right;
margin-top:10px;
}



.leermas:hover {display:block;
color: #990000 !important;
text-align:right;
margin-top:10px;
font-size:VALORpx;
}

no se si tengo que agregar esa linea aparte o va dentro de .leer mas

Responder
JMiur  

Tal como lo escribí, es una regla nueva:

.leermas:hover {
font-size:VALORpx;
}

donde VALOR es un dato que debes decidir y que es el tamaño de la fuente.

Responder
Rodrigo  

sos un maestro te la sabes todas jejej con tu ayuda casi termino mi blog solo me falta ponerle un buen menu

Responder
Rodrigo  

http://oloblogger.blogspot.com/2009/11/entradas-relacionadas-con-miniaturas.html

hola amigo quice poner entradas relacionadas en mi blog y puse los codigos de esa pagina, pero lo maximo ke puedo poner son 5 como puedo hacer para poner 8??

var maxresults=5; << aqui tendria que reemplazar segun dice el texto pero no puedo poner mas de 5 pero si pongo por ejemplo 1 o 2 si anda

Responder
JMiur  

No sólo debes cambiar ese valor sino el que idica el enlace del script:

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>

en lugar de max-results=6 poner un número mayor

Responder
Rodrigo  

ya cambie en los 2 valores y puse 8 pero solo me aparecen 7.
Osea 6 arriba y 1 avajo yo quiciera que me salgan 4 arriba y 4 avajo

Responder
JMiur  

Hubiera sido más fácil preguntar en la entrada de referencia pero, me imagino que en el script se debe poner una cantidad superior a la que se va a mostrar para que no tenga en cuenta como entrada relacionada, la misma que se está mostrando así que bastaría poner 8 en la variable y 9 en el script.

Responder
Rodrigo  

hola amigo si te escribo a ti es por ke el ke hizo la entrada no supo como ayudarme, por favor me podrias decir como poner 4 y 4 , te prometo que no sabras de mi por un buen tiempo saludoss

Responder
JMiur  

Haz lo que te respondió Olomán en esa entrada; allí te dió la solución.

Responder
Rodrigo  

hola amigo puse los sumarios

http://oloblogger.blogspot.com/2009/06/post-en-forma-de-sumarios-leer-mas-en.html

y puse la imagen a la izquierda y quisiera que el texto me quede mas separado como consigo esto??

http://seducevip.blogspot.com/

este es mi blog por las dudas , para que veas que el texto esta muy junto a la imagen

Responder
JMiur  

Estableciendo el margen correspondiente:
.post-thumbnail {
float: left;
margin: 0 0 10px 10px;
}
Ahí le has puesto margen hacia abajo y hacia la izquierda y debería tener margen a la derecha para separarse del texto.

Responder
motorock5  

lo que pasa que cree un menu desplegable hacia el lado derecho y en el centro tengo un slide show y mi menu queda siempre debajo del slide show

JMiur  

Deberias mostrar tu ejemplo para poder responder.

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