Hola todavía no me conocéis. Me presento soy Daniel Calvo y os voy a guiar por los senderos del diseño web avanzado con Pure CSS Optimizado, para mi opinión la mejor manera hoy en día de diseñar y que optimiza la carga a su más alto grado, aparte de tener toda clase de elementos para hacer todos los efectos que queramos.
Poco a poco voy a enseñarte trucos y herramientas para que puedas lidiar con los problemillas que tenemos siempre con una web: “es que este botón no le puedo meter el margen”, “joder esto no sube ¿por qué?”. Y también a hacer transiciones de imágenes y animaciones que queden PRO en tú portal.
[toc]Bueno vamos a empezar a aprender algo básico y que nos va a sacar de muchos muchos apuros sobre todo a aquellos que trabajéis WordPress: Los selectores. ¿Y por qué para WordPress? Porque hay muchas reglas que se anteponen a la nuestra y tenemos que saber como vencer a esas reglas para que si por ejemplo queremos poner un borde personalizado a nuestra manera sea nuestro borde el que se imprima por pantalla y no el del template. Aquí teneis un ejemplo:
¿Qué son los selectores y para qué sirven?
Que gran pregunta y además esta es fácil, luego lo vamos a complicarlo un poco. Los selectores es el término por el cual nombramos una etiqueta para posteriormente darle los estilos que queramos. Tenemos varias clases de selectores:
- – ID: dentro del HTML tenemos el atributo id=”identificador”. En CSS lo nombraríamos a través de # y lo nombraríamos así #identificador{}.
- – Clase: dentro del HTML lo nombramos a través del atributo class=”clase”. En CSS lo nombraríamos a través de . y lo nombraríamos así .clase{}.
- – Etiqueta: simplemente nombraríamos la clase de etiqueta en CSS por ejemplo si lo que queremos es nombrar todos los <div></div> pondremos en CSS div{}.
- – Estilos en línea: quiero que sepáis que aunque esto es otra forma y además la más simple, no es la correcta aumentan el tiempo de ejecución y no tenemos el código ordenado y de esto no hay que tirar a no ser que no nos quede otra alternativa. La gente que trabaja con javascript hace uso de estos elementos y no los utiliza de manera adecuada y en internet casi todas las paginas hacen uso de este recurso sobre todo los CMS, pero no por ello nosotros lo vamos a hacer simplente que lo tengamos presente para decir este código es bueno o no lo es. Para nombrarlo es simple en el HTML se nombra desde la etiqueta los estilos que necesitemos con el atributo style=”” y se hace así <div style=”></div>.Os pongo un ejemplo de CSS:
Ya hemos visto todas las clases y ahora vamos a ver la relevancia de cada uno y sus reglas.
¿Cómo se utilizan los selectores?
Para nombrar un selector es importante saber las reglas que van a permitir darle relevancia ¡Vamos con ello!
- La primera y más fácil es que si nosotros ponemos una misma regla la que esta más abajo es la que triunfa.
- La segunda regla son los valores que adquieren los selectores ¡Aquí poner toda la atención que podáis porque es complicado y necesita de toda vuestra atención!Lo que se hace al selector es darle una puntuación os lo voy a explicar con dos ejemplos prácticos y con una tabla. Antes os voy a dejar la tabla de relevancia de cada selector.
¡Esta tabla grabarla en la memoria! Tenéis esos valores para cada elemento. Los estilos en línea son los que más valen 1000 puntos, los Id son los segundos 100 puntos, las clases son 10 puntos y los que menos valen las etiquetas 1 punto. De esta manera si os lo aprendéis solo es sumar. ¡Vamos con los casos prácticos!
Tenemos estas etiquetas y queremos nombrar la que está dentro nombrada con identificador ”id-elemento-2” para después crear nuestras reglas.
HTML
<div id=”id-elemento-1” class=” elemento-1-class-1 elemento-1-class-2”>
<div id=” id-elemento-2” class=”elemento-2-class-1 elemento-2-class-2”> </div>
</div>
Algo que explicar que me encuentro muchos fallos. El identificador solo se utiliza para un elemento. Las clases se pueden utilizar todas las veces que se quiera, ten en cuenta este concepto a demás tu puedes poner varias clases a una misma etiqueta pero identificadores solo puedes poner uno.
Seguimos después de este paréntesis. Con el ejemplo que hemos hecho antes vamos a poner dos o tres casos.
1 Caso
CSS
#id-elemento-1 .elemento-2-class-1{reglas-1}
.elemento-2-class-1{reglas-2}
Puntuación
1 elemento = tiene un id(#) y tiene una clase(.) = 100 + 10 = 110 puntos
2 elemento = tiene solo una clase = 10 puntos
Conclusión: las reglas-1 ganan por puntos.
2 Caso
CSS
.elemento-2-class-2{reglas-1}
.elemento-2-class-1{reglas-2}
Puntuación
1 elemento = tiene una clase(.) = 10 puntos
2 elemento = tiene una clase(.) = 10 puntos
Conclusión: en este caso aplicaremos la primera regla que es el que está más abajo el que gana porque tiene la misma puntuación. Las reglas-2 ganan.
3 Caso
CSS
#id-elemento-1 #id-elemento-2 .elemento-2-class-2{reglas-1}
#id-elemento-1 #id-elemento-2 .elemento-2-class-1.elemento-2-class-2{reglas-2}
Puntuación
1 elemento = tiene dos id(#) y dos clase(.) = 100 + 100 + 10 + 10 = 220 puntos
2 elemento = tiene dos id(#) y una clase(.) = 100 + 10 = 210 puntos
Conclusión: las reglas-1 ganan por puntos.
4 Caso
CSS
#id-elemento-1 .elemento-2-class-2{reglas-1}
#id-elemento-1 .elemento-2-class-1.elemento-2-class-2{reglas-2}
Puntuación
1 elemento = tiene un id(#) y una clase(.) = 100 + 10 = 110 puntos
2 elemento = tiene un id(#) y dos clase(.) = 100 + 10 + 10 = 120 puntos
Conclusión: las reglas-2 ganan por puntos. Las clases si forman parte de la misma etiqueta se pueden nombrar sin que haya espacio entre ellas.
¿Y esto a que nos ayuda?
Nos ayuda a que si hay un selector por ejemplo .post-single-content que está dentro del template y que tiene ciertas reglas por ejemplo border:2px solid #000000 y le queremos poner un borde tipo: border:1px solid #CCC podamos sobrescribir las reglas con otro selector que puntúe más ¿Cómo lo haríais sin mirar? Si tenéis el siguiente código, que es el que he puesto arriba como ejemplo de código HTML pero que en esta parte lo he minimizado para poder verlo claro:
<div class=”single_post”>
<div class=”post-single-content”> </div>
</div>
Yo lo haría así:
. single_post . post-single-content{ border:1px solid #CCC }
¡20 puntos colegas! Para los que sois fan de Chicho Terremoto jajaja.
Bromas aparte, el caso es que tenemos 20 puntos frente a 10. Le hemos ganado en puntos al selector del template y nuestro borde se verá gris y no negro como querría el template.
Bueno espero que os haya gustado y que podamos seguir con más cositas. Sobre todo también que practiquéis, poco a poco lo iréis cogiendo si no lo habéis cogido ya.
Un saludo a todos.
