Introducción a CSS y selectores

CSS del inglés Cascading Style Sheets (Hojas de Estilo en Cascada) es un lenguaje de estilos usado para describir la presentación de documentos XML y HTML.

CSS indica cómo hay que renderizar los elementos en pantalla.

Conceptos Básicos de CSS

CSS no es realmente un lenguaje de programación, sino un lenguaje de hojas de estilo.

Por ejemplo para seleccionar todos los elementos de párrafo (<p>) en una web HTML y devolver su texto en color rojo, tendríamos este CSS:

y tendríamos este HTML:

Anatomía de una regla CSS

Si analizamos el código anterior en el fichero style.css:

Selector CSS:

El elemento HTML en el que comienza la regla. Esta selecciona el (los) elemento(s) a dar estilo (en este caso, los elementos <p>. Para dar estilo a un elemento diferente solo hay que cambiar este selector. Después veremos más tipos de selectores.

Declaración CSS:

Podemos tener más de una y son reglas del tipo color : red, especificamos cuales son los valores de las propiedades del elemento al que queremos dar estilo.

Tipos de Selectores CSS:

Selectores CSS de elementos/etiqueta/tipo

Cómo los que hemos visto anteriormente, podríamos incluso seleccionar varios elementos y aplicar una sola regla a todos ellos. Incluiría varios selectores separados por comas (,).

Seleccionaría los elementos en el HTML del tipo:

Selectores CSS de identificador (ID)

Selecciona el elemento en la página con el ID especificado (en una página HTML dada, sólo se permite un único elemento por ID).

Seleccionaría el elemento en el HTML:

Selectores CSS de clase

Selecciona los elementos en la página con al clase especificada (una clase puede aparecer varias veces en una página).

Seleccionaría los elementos en el HTML:

Selectores CSS de atributo

Selecciona los elementos en una página con el atributo especificado.

Seleccionaría los elementos en el HTML:

Pero NO seleccionaría:

Selector de pseudoclase

Selecciona los elementos especificados, pero solo cuando esté en el estado especificado.

Seleccionaría <a>, pero sólo cuando el puntero del mouse se encuentre sobre el enlace:

Con esto tenemos los selectores más básicos, pero hay muchísimos más.

Para ampliar vuestros conocimientos de selectores, podéis visitar los siguientes enlaces:

Guía de selectores CSS

Los 30 selectores CSS que debes memorizar

También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

WP Twitter Auto Publish Powered By : XYZScripts.com