Introducción a CSS (Parte I)
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.
INCLUIR CSS EN EL MISMO DOCUMENTO HTML
Ahora veremos un ejemplo donde insertamos CSS en el mismo HTML.
Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML, que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.
El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar.
DEFINIR CSS EN UN ARCHIVO EXTERNO
En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es “.css”. Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite.
Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben seguir los siguientes pasos:
- Se crea un archivo de texto y se le añade solamente el siguiente contenido:
2) Se guarda el archivo de texto con el nombre style.css . Se debe poner especial atención a que el archivo tenga extensión “.css” .
3) En la página HTML se enlaza el archivo CSS externo mediante la etiqueta <link>:
El siguiente esquema muestra las partes que forman un estilo CSS muy básico:
Selectores
Es una forma de permitirnos elegir un elemento (o varios) entre todos los que tenemos en nuestro documento HTML. ¿Para qué? Para luego poder aplicar sobre los elementos seleccionados diversas funciones.
Por ejemplo con jQuery para aplicar la clase “text-center” a todos los “p”, haríamos esto:
$(‘selector’)
No importa qué tipo de selector usemos en jQuery: siempre comenzaremos con $(). Prácticamente todo lo que se pueda usar en CSS se puede también incluir entre esos paréntesis de esta forma $(“selectores”). De tal manera que por ejemplo podríamos hacer:
Selectores CSS
jQuery soporta prácticamente todos los selectores de CSS, con la ventaja de que podemos utilizar selectores de CSS3 que funcionen con Internet Explorer 6 gracias a jQuery. Lo vemos mejor con estos ejemplos:
Selectores Posicionales
Estos selectores están basados en las relaciones posicionales entre elementos (como veíamos antes en ejemplo de la estructura del DOM). Como antes, los vamos a ver a través de ejemplos:
Es importante saber que a la hora de trabajar con el DOM no sólo estamos en la discusión de ir con los amigazos getElementById y getElementsByTagName o con bibliotecas como la que acabamos de ver que es jQuery.
Con js plano, puro, vanilla, o como usted quiera llamarle, también podemos obtener elementos del DOM a partir de selectores basados en CSS.
Así que les compartiré que querySelector()y querySelectorAll() existen.
querySelector es una función que a partir de un selector, devuelve el primer elemento que matchea con ese selector.
querySelectorAll devuelve un NodeList de elementos con los que el selector matchea. En caso de que esto no ocurra con ningún elemento, el resultado va a ser un NodeList vacío.
Por ejemplo, si tenemos este código de HTML y queremos seleccionar el o los elementos clase “example” para pintar el fondo de rojo:
Con querySelector haríamos esto:
Con querySelectorAll haríamos esto:
Y con jQuery haríamos esto:
No te asustes si aún no entiendes muy bien jQuery, porque lo veremos más adelante y te enamorarás de lo bonito que es.
