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:
|
1 2 3 4 5 |
/*fichero: style.css */ p { color: red; } |
y tendríamos este HTML:
|
1 2 3 |
<!-- fichero: index.html --> <link href="styles/style.css" rel="stylesheet" type="text/css"> |
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 (,).
|
1 2 3 |
p,li,h1 { color: red; } |
Seleccionaría los elementos en el HTML del tipo:
|
1 |
<p> <li> <h1> |
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).
|
1 2 3 |
#mi_id { color: red; } |
Seleccionaría el elemento en el HTML:
|
1 |
<p id="mi_id"> |
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).
|
1 2 3 |
.mi_clase { color: red; } |
Seleccionaría los elementos en el HTML:
|
1 2 |
<p class="mi_clase"> <a class="mi_clase"> |
Selectores CSS de atributo
Selecciona los elementos en una página con el atributo especificado.
|
1 2 3 |
img[src] { color: red; } |
Seleccionaría los elementos en el HTML:
|
1 |
<img src = "miimagen.png"> |
Pero NO seleccionaría:
|
1 |
<img> |
Selector de pseudoclase
Selecciona los elementos especificados, pero solo cuando esté en el estado especificado.
|
1 2 3 |
a:hover { color : red } |
Seleccionaría <a>, pero sólo cuando el puntero del mouse se encuentre sobre el enlace:
|
1 |
<a> |
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:
