5. CSS: formatear un documento HTML
Las hojas de estilos CSS permiten formatear los elementos HTML y/o cambiar el lugar en que estos se visualizan por defecto en el navegador.
Al igual que HTML, CSS es un lenguaje que interpreta el navegador.
El código CSS tiene este aspecto:
El siguiente enlace se visualizará de color rojo y tamaño de letra 8 píxeles.
<a href="..." style="color: red; font-size: 8px">
En este caso, las reglas CSS se escriben así:
Podemos definir cuantas etiquetas <style> queramos pero se suele definir solamente una.
Las etiquetas <style> funcionan igualmente si se escriben fuera del <head> pero no conviene.
El código CSS será exactamente el mismo que si usasemos el métod anterior.
El resultado de usar este método, serían los siguientes archivos:
Como se puede ver en la imagen "mi_web.html", las etiquetas <style></style> no se han incluido dentro del <head>, y en su lugar, hemos escrito la siguiente linea:
Pero es posible seleccionar elementos en concreto, gracias a los selectores descendentes. Imaginemos que queremos seleccionar solo aquellos enlaces (<a>) que estén dentro de tablas. El selector sería el siguiente:
Otro ejemplo: el siguiente selector selecciona los enlaces que estén dentro de los párrafos y que a su vez estén dentro de tablas:
Y queremos que los dos primeros aparezcan en color verde. ¿Cómo seleccionaríamos sólo esos dos primeros? Será necesario identificar de algún modo esos dos primeros párrafos. Lo haremos a través de un atributo llamado "class".
Como se puede ver en esta última imagen, hemos añadido el atributo "class" a los dos primeros párrafos, asignándoles un valor cualquiera ("verdecillo").
A continuación escribiremos el selector CSS:
De esta manera estamos diciendo "selecciona solo aquellos parrafos con class="verdecillo"".
También es posible construir el selector sin añadir el nombre de la etiqueta. Es decir:
Este tipo de selector donde no aparece el nombre de la etiqueta, nos permite seleccionar etiquetas de distinto tipo pero con un mismo atributo "class". Por ejemplo, si añadimos un encabezado al principio de los párrafos y queremos que aparezca también en verde, tan sólo tendremos que añadir la clase "verdecillo" al encabezado.
Otro atributo de marca que nos permite seleccionar elementos en concreto es el atributo "id". Imaginemos que queremos que el último parrafo aparezca en color azul. Del mismo modo que con el atributo "class", identificaremos el último parrafo de los cuatro a través del atributo id="azulillo":
Y continuación escribiremos el selector:
Como se puede ver, en el selector aparece una coma. En este caso, el selector selecciona los enlaces que estén dentro de tablas Y las listas no ordenadas. A estos selectores se les llama "múltiples".
Otros ejemplo:
CASO 1: es posible que por error repitamos una propiedad dentro en un atributo style="", o de una regla de la etiqueta <style> o un archivo .css.
Ejemplo:
<p style="color: red; color: blue">Lorem ipsum....</p>
En este caso la declaración que prevalece es la última ("blue").
CASO 2: la misma propiedad aparece en la etiqueta <style> o un archivo .css Y además en el atributo style="".
Ejemplo:
Prevalece lo escrito en el atributo style="".
CASO 3: escribimos la misma propiedad en la etiqueta <style> y un archivo .css.
Prevalece el valor que aparece más abajo en el código HTML ("blue").
CASO 4: si dentro de la etiqueta <style> o en un archivo .css, escribimos la misma propiedad a través de selectores distintos.
Ejemplo:
Mi intuición me dice que el <h1> será de color "red" porque aparece como último valor, pero no ocurre así... En realidad, el valor del selector del atributo "class" (titular) prevalece sobre el del nombre de la etiqueta (h1).
Ejemplo:
En este caso, el valor del selector del atributo "id" (primero) prevalece sobre el del selector de la etiqueta "class" (titular).
POR ÚLTIMO: Si añadimos la palabra clave "!important" a continuación del valor, este prevalecerá sobre todos los demás, ¡¡¡incluso sobre un posible valor en el atributo "style" en la etiqueta!!!
RESUMEN ORDEN DE PREVALENCIA:
Al igual que HTML, CSS es un lenguaje que interpreta el navegador.
El código CSS tiene este aspecto:
Añadir CSS en un documento HTML
Existen 3 métodos, para incluir hojas de estilos CSS a un documento HTML:- Mediante el atributo style="...".
- Mediante la etiqueta <style></style>
- Mediante archivos con extensión ".css" externos (RECOMENDADO).
Añadir CSS mediante el atributo style="..."
Este método consiste en escribir las reglas CSS directamente en la etiqueta HTML a través del atributo style="...".El siguiente enlace se visualizará de color rojo y tamaño de letra 8 píxeles.
<a href="..." style="color: red; font-size: 8px">
Añadir CSS mediante la etiqueta <style></style>
Otra manera consiste en añadir la etiqueta <style></style> dentro de la etiqueta <head></head>. En el siguiente ejemplo el encebezado h1 de la página aparecerá con color de fondo gris (background-color: gray), texto de color azul (color: blue), y situado en el centro del página (text-align: center).
En este caso, las reglas CSS se escriben así:
Podemos definir cuantas etiquetas <style> queramos pero se suele definir solamente una.
Las etiquetas <style> funcionan igualmente si se escriben fuera del <head> pero no conviene.
Añadir CSS mediante un archivo externo ".css"
En este caso, las reglas no se escriben en el interior del documento HTML, sino en archivos aparte con extensión .css.El código CSS será exactamente el mismo que si usasemos el métod anterior.
El resultado de usar este método, serían los siguientes archivos:
Como se puede ver en la imagen "mi_web.html", las etiquetas <style></style> no se han incluido dentro del <head>, y en su lugar, hemos escrito la siguiente linea:
<link rel="stylesheet" href="mis_estilos.css">
donde href=".." tiene como valor el nombre del archivo .css a incluir o su ruta.
Es posible incluir multiplos archivos .css en un documento HTML d esta manera:
<link rel="stylesheet" href="mis_estilos.css">
<link rel="stylesheet" href="mis_otros_estilos.css">
<link rel="stylesheet" href="mis_estilos.css">
<link rel="stylesheet" href="mis_otros_estilos.css">
Es conveniente guardar todos los archivos .css en un directorio que se llame "css", del mismo modo que guardamos las imágenes la carpeta "images".
Selección de elementos por nombre de etiqueta
La siguiente regla utiliza el nombre de una tipo de etiqueta, para poner de color rojo TODOS los encabezados <h1> que existan en una página web:Pero es posible seleccionar elementos en concreto, gracias a los selectores descendentes. Imaginemos que queremos seleccionar solo aquellos enlaces (<a>) que estén dentro de tablas. El selector sería el siguiente:
Otro ejemplo: el siguiente selector selecciona los enlaces que estén dentro de los párrafos y que a su vez estén dentro de tablas:
Selección a través de los atributos "class"
La selección por nombre de etiqueta realiza selecciones de manera general. En muchos casos será necesario seleccionar un grupo de elementos especificos. Por ejemplo, imaginemos que tenemos 4 parrafos en un página web.
Y queremos que los dos primeros aparezcan en color verde. ¿Cómo seleccionaríamos sólo esos dos primeros? Será necesario identificar de algún modo esos dos primeros párrafos. Lo haremos a través de un atributo llamado "class".
Como se puede ver en esta última imagen, hemos añadido el atributo "class" a los dos primeros párrafos, asignándoles un valor cualquiera ("verdecillo").
A continuación escribiremos el selector CSS:
De esta manera estamos diciendo "selecciona solo aquellos parrafos con class="verdecillo"".
También es posible construir el selector sin añadir el nombre de la etiqueta. Es decir:
Este tipo de selector donde no aparece el nombre de la etiqueta, nos permite seleccionar etiquetas de distinto tipo pero con un mismo atributo "class". Por ejemplo, si añadimos un encabezado al principio de los párrafos y queremos que aparezca también en verde, tan sólo tendremos que añadir la clase "verdecillo" al encabezado.
Selección a través de los atributos "id"
Otro atributo de marca que nos permite seleccionar elementos en concreto es el atributo "id". Imaginemos que queremos que el último parrafo aparezca en color azul. Del mismo modo que con el atributo "class", identificaremos el último parrafo de los cuatro a través del atributo id="azulillo":
Y continuación escribiremos el selector:
Como se puede ver esta vez hemos usado el caracter almohadilla, ya que en este caso estamos usando el atributo "id" para realizar la selección.
Entonces, ¿cuando usaremos "id" y cuando "class" como selector? Usaremos el atributo "class" cuando queramos seleccionar un GRUPO DE ELEMENTOS, y el atributo "id" cuando queramos seleccionar UN SÓLO ELEMENTO.
Selección múltiple de elementos
Es posible crear selectores de este estilo:Otros ejemplo:
Prevalencia de las reglas CSS: especificidad
CASO 1: es posible que por error repitamos una propiedad dentro en un atributo style="", o de una regla de la etiqueta <style> o un archivo .css.
Ejemplo:
<p style="color: red; color: blue">Lorem ipsum....</p>
En este caso la declaración que prevalece es la última ("blue").
CASO 2: la misma propiedad aparece en la etiqueta <style> o un archivo .css Y además en el atributo style="".
Ejemplo:
Prevalece lo escrito en el atributo style="".
CASO 3: escribimos la misma propiedad en la etiqueta <style> y un archivo .css.
CASO 4: si dentro de la etiqueta <style> o en un archivo .css, escribimos la misma propiedad a través de selectores distintos.
Ejemplo:
Mi intuición me dice que el <h1> será de color "red" porque aparece como último valor, pero no ocurre así... En realidad, el valor del selector del atributo "class" (titular) prevalece sobre el del nombre de la etiqueta (h1).
Ejemplo:
En este caso, el valor del selector del atributo "id" (primero) prevalece sobre el del selector de la etiqueta "class" (titular).
POR ÚLTIMO: Si añadimos la palabra clave "!important" a continuación del valor, este prevalecerá sobre todos los demás, ¡¡¡incluso sobre un posible valor en el atributo "style" en la etiqueta!!!
RESUMEN ORDEN DE PREVALENCIA:
- Atributo "style" en el elemento.
- Selector con valor de atributo "id" del elemento.
- Selector con valor del atributo "class" del elemento.
- Selector con nombre del elemento.
Comentarios
Publicar un comentario