Pequeños errores al iniciarse en CSS

Desde CSS-Tricks nos presentan algunos de los errores más frecuentes que como regla general todo el que inicia en CSS comete, o por lo menos da lugar a dudas. Haya sido o no nuestro caso, vale la pena retomarlos y aclarar el tema.

Tag qualifying

.class {}

p.class {}

¿Cuál es la diferencia entre ambos?

El primero seleccionará todos los elementos que contengan el nombre de esa clase. El segundo seleccionará únicamente los elementos de esa clase que estén dentro de un elemento párrafo.

 El orden de los selectores importa

.class div { color:red }

div.class { color:green }

¿Por qué son diferentes?

En el primer ejemplo tenemos un espacio en blanco entre .class y div, indicando que estamos seleccionando «Cualquier div que sea descendiente de cualquier elemento cuya clase sea class». En el segundo caso se seleccionan los divs que sean de la clase class.

 La verdad detrás del uso de IDs

Al CSS no le importa mucho si utilizas clases o IDs, siempre y cuando les apliques algún estilo. En teoría con los IDs es más rápido, pero en la práctica no notarías la diferencia.

Si trabajas con Javascript, debes asegurarte que no haya IDs repetidos. Aparte  Javascript sí trabaja más rápido con IDs.

Los IDs tienen un mayor valor para CSS, si aplicas un estilo a un elemento que tiene una clase y un ID, lo que se tomará en cuenta será lo especificado por el ID.

Hovers

div:hover div { color:green; }

:hover es un selector que se aplica sólo cuando el mouse pasa por encima de un elemento en particular. Lo extraño es que no necesariamente se debe dar estilo al elemento que está activando el hover. En el ejemplo superior se está dando estilo a los divs descendientes del elemento div que está siendo cubierto por el mouse, pero no a él mismo.

Los espacios en blanco no importan

Esto:

div{color:red}

Es lo mismo que:

div      {

color        :          red;

}

Para lo único que se ocupan espacios es para especificar la descendencia de los selectores, por ejemplo

ulli { } no es lo mismo que ul li { } . Y claro, también se necesitan en caso de que quieras darle cierto orden a tu código CSS.

Sobre la escritura de clases

div { font-size:18px; font-weight:bold;font-size:22px;}

En caso de haber repetido alguna propiedad CSS aplicará como estilo la última listada, en el ejemplo el texto del div sería de 22px.

El orden en CSS importa

Si tienes dos selectores con las mismas especificaciones, como los siguientes:

.red { color:red; }

.green { color:green; }

Y después son aplicados al mismo elemento, el último selector será el que se aplique. El nombre de las clases dentro del llamado que se hizo en HTML no importa.

<div class=»red green»> Será VERDE</div>

<div class=»green red»> Será VERDE</div>

 

Visto en: css-tricks

Prueba diferentes Resets CSS

Esta entrada será de utilidad para aquellos que se dedican o que van comenzando con el diseño web. Así como a uno que otro programador cuya tarea sea realizar el maquetado en algún proyecto . Como sabrán, para el aspecto visual de los sitios web se utiliza un lenguaje llamado CSS, el cual a muy grandes rasgos, le dice a cada elemento de HTML, XML, SVG, etc. donde colocarse, y las propiedades visuales que debe adquirir.

css reset

Leer más

Cacoo – Para crear diagramas en equipo

Seguramente alguna vez se han visto en la necesidad de crear algún tipo de diagrama. Ya sea para la escuela, para el trabajo, o quizá para alguna presentación de negocios. Bien, pues entre la gran cantidad de sitios que nos ofrecen el poder realizar diagramas, uno que últimamente llamó mi atención es Cacoo.

Las opciones que nos brinda van desde los clásicos UML, Diagramas de Red, bosquejos de sitios web, entre otros. Pero acá eso no es lo interesante, ya que el plus de esta herramienta es la colaboración en equipo en tiempo real. Así es, como se lee, Cacoo permite crear los diagramas entre varios usuarios, y todo al instante.

Aparte de lo anterior, sobra decir que utilizar Cacoo es muy sencillo, basta con tomar los elementos que queramos insertar y arrastrarlos. Todo muy intuitivo. Pero no les digo más, mejor les dejo el video con el que promocionan a Cacoo sus creadores, que ahí sobran las palabras, y quizá así los convenza de que le den una checada. Ah, y además es gratis!

Cacoo – Real-time Collaborative Diagramming & Design from Nulab Inc. on Vimeo.

Web: Cacoo
Visto en: wwwhatsnew

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con tus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad