DISEÑO WEB

HOJAS DE ESTILO CSS

Hojas de estilo CSS. Sintaxis. Selectores 

Las hojas de estilo sirven para dar formato a una página web
manteniendo separado el contenido del formato. Con HTML damos contenido
y con CSS formato.
A lo largo de este curso ya hemos ido utilizando las hojas de estilo en
determinados momento, y en la unidad 2 vimos una pequeña introducción a las
hojas de estilo, en esta unidad vamos a ver la sintaxis de las hojas de estilo, los
tipos de selectores y como se pueden combinar. En las dos siguientes
unidades veremos cómo definir los colores, márgenes, fondos, bordes y
fuentes. Más adelante seguiremos con hojas de estilo aplicadas a diversos
temas como la estructura de la página y la maquetación.
Para situar históricamente las hojas de estilo en cascada conocidas como CSS
(Cascading Style Sheets) diremos que en Diciembre de 1995 aparecieron las
hojas de estilo CCS 1, el creador fue Håkon Wium Lie, desde entonces han ido
apareciendo distintos niveles de CSS, actualmente en Enero de 2019 estamos
en CSS 3. Al contrario que el lenguaje HTML que se nombra con versiones, las
hojas de estilo se nombran con niveles, aunque el concepto es el mismo.
Antes de las hojas de estilo el formato estaba escrito en las propias etiquetas
de HTML, todavía podemos encontrar muchas páginas web con esta forma de
trabajar. Por ejemplo <td width="95%">. Es algo que sigue funcionando
pero que no está recomendado salvo en casos muy concretos.
El lenguaje CSS está desarrollado por W3C, igual que el lenguaje HTML, y
tiene más de 200 atributos que van creciendo en cada nuevo nivel.
En esta unidad veremos la sintaxis de CSS, los tipos de selectores, cómo se
pueden combinar, pseudoclases, pseudoelementos, dónde declarar las reglas
CSS y el orden en el que se aplican cuando hay conflictos.
Sintaxis CSS
Las hojas de estilo están formadas por reglas, y las reglas están formadas por
el selector y entre llaves las declaraciones separadas por punto y coma. Una
declaración es un atributo (propiedad) seguido por dos puntos y a continuación
el valor de la propiedad.
Se pueden escribir varias declaraciones en una línea, separadas por punto y
coma, pero resulta más claro escribir una por línea. Se puede omitir el punto y
coma final, justo antes de cerrar la llave.
Los comentarios se inician con los dos caracteres /*, y se cierran con los dos
caracteres */, pueden abarcar varias líneas. Por ejemplo /* esto es un
comentario */
Existen otro tipo de reglas llamadas reglas de arroba que empiezan por el
carácter arroba @, como @import, y también las reglas @media. En este
tema avanzado puedes ver las reglas de arroba y Media Queries  .

Tipos de selectores
El selector es el sujeto de la declaración, es decir, sobre quien se aplica la
declaración. La declaración es la definición de la característica que se
aplica sobre el selector. Por ejemplo, h1 { text-align: center } nos dice que
sobre las etiquetas h1 se aplica el texto alineado al centro.

Existen varias formas de definir el selector, vamos a verlas a continuación.

1.- Definir selector con etiquetas.
Podemos indicar los nombres de las etiquetas separados por comas. La
declaración se aplicará a todas las etiquetas que indiquemos. Por ejemplo, si
queremos aplicar el color rojo a todas las etiquetas h2 y p, declaramos el estilo
h2, p { color: red }
Para este fragmento de página:
<h2>Cabecera h2</h2>
<h3>Cabecera h3</h3>
<h4>Cabecera h4</h4>
<p>Párrafo uno</p>
<p>Párrafo dos</p>
Produce este resultado:
 
Definir selector con identificadores "id".
Al definir un selector con un identificador mediante #identificador, la
declaración del estilo se aplicará a la etiqueta que contenga el identificador,
declarado como id="identificador". Sólo debe haber una etiqueta con ese
identificador en la página. Por ejemplo
#iden { color: blue }
Para este fragmento de página:
<h2>Cabecera h2</h2>
<h3 id="iden">Cabecera h3</h3>
<h4>Cabecera h4</h4>
<p>Párrafo uno</p>
<p>Párrafo dos</p>
Produce este resultado:
Definir selector con clases.
Al definir un selector con una clase, la declaración del estilo se aplicará a todas
las etiquetas afectadas por la clase. Se define el selector colocando un punto
delante del nombre de la clase. Al contrario que con el caso anterior, varias
etiquetas pueden tener la misma clase. Podemos aplicar la clase a una etiqueta
concreta escribiendo p.clase, con lo cual se aplicará el estilo a las
etiqueta p que contengan la clase especificada. Un ejemplo :

.clase1 { color: blue }

p.clase1 { font-style: italic }
Para este fragmento de página:
<h2>Cabecera h2</h2>
<h3 class="clase1">Cabecera h3</h3>
<h4>Cabecera h4</h4>
<p class="clase1">Párrafo uno</p>
<p>Párrafo dos</p>
Produce este resultado:
Como vemos, "Cabecera h3" es azul porque se le ha aplicado el estilo
para .clase1, mientras que "Párrafo uno" es azul porque se le ha aplicado el
estilo para .clase1 y está en itálica porque también se le ha aplicado el
estilo p.clase1. Como vemos se pueden aplicar dos o más estilos a la vez, si
hay un conflicto sobre alguna propiedad existen unas reglas para resolverlo
que veremos más adelante en el punto "Orden de aplicación. Conflictos".
Definir selector con pseudoclases.
El formato de un selector con pseudoclase es el siguiente:
selector:pseudoclase { propiedad:valor; }
Al definir un selector con una pseudoclase la declaración del estilo se aplicará
a la etiqueta indicada cuando se cumpla la pseudoclase.
a:active { color: red }
h2:hover { color: blue }
div:hover { background-color: yellow }
Para este fragmento de página:
<h2>Cabecera h2</h2>
<h3>Cabecera h3</h3>
<div>
<h4>Cabecera h4</h4>
<p>Párrafo uno</p>
</div>
<p><a href="https://www.aulaclic.es"> Visita aulaClic </a></p>
Produce el siguiente resultado donde la pseudoclase hover en la
etiqueta h2 hace que al colocar el cursor encima cambie a color azul. La
pseudoclase activeen la etiqueta a hace que al momento de pulsar en el
enlace cambie a color rojo. Y la pseudoclase hover sobre la etiqueta div hace
que el color de fondo pase a amarillo al colocar el cursor.

Existen bastantes pseudoclases, entre las más usadas, como vimos en la

unidad 3 están las que se aplican a los hiperenlaces,
1.- link, es el estado inicial del enlace al cargar la página, no se ha hecho clic
sobre él, es decir, no visitado.
2.- visited, visitado, es decir, ya se ha hecho clic anteriormente sobre él.
3.- hover, el cursor está situado encima del enlace o elemento.
4.- active, mientras se mantiene pulsado el botón al hacer clic sobre el enlace.
Hover y active se pueden aplicar a otras etiquetas, así como focus que indica
que se ha colocado el cursor, por ejemplo, en un campo de un formulario. En
este tema avanzado puedes ver más pseudoclases 
Combinaciones de selectores
1- Selector descendente.
Podemos definir un selector con la condición de que una etiqueta "esté dentro
de otra" o lo que es lo mismo, "que descienda" de otra. Una etiqueta
desciende de otra si la primera está dentro de las etiquetas de inicio y de cierre
de la segunda, independientemente de si hay más etiquetas dentro. Un selector
descendente se escribe separando las etiquetas con un espacio en blanco. En
el siguiente ejemplo la regla se aplicará a las etiquetas span que estén dentro
de una etiqueta div:

div span { color: red }

Para este fragmento de página:
<h2>Cabecera <span>nivel h2</span> </h2>
<div>Primera <span>división</span> </div>
<div>
<p>Párrafo <span>uno</span></p>
</div>
<p>Párrafo <span>dos</span></p>
Produce el siguiente resultado:

Para explicar de forma más clara este resultado nos vamos a ayudar del
siguiente esquema de árbol donde los nodos representan las etiquetas y los
rectángulos punteados la relación entre los nodos. (hernamos, padre-hijo y
descendientes).
Como vemos que la primera etiqueta span que dice "nivel h2" está dentro de la
etiqueta h2, no se ve en color rojo porque no está dentro de una etiqueta div.
En cambio las dos siguientes etiquetas span sí se ven en color rojo, ya que
están dentro de una etiqueta div; no importa a qué nivel de profundidad estén,
en el caso de "división" está a primer nivel, (padre-hijo) y en el caso de "uno"
está a segundo nivel de profundidad (descendiente).
Un selector descenciente, incluye todos los niveles de profundidad. Si
queremos tener en cuenta sólo un nivel de profundidad deberemos usar el
selector de hijos que vemos a continuación.
También podemos combinarlo con un selector de clase, por ejemplo, el
siguiente selector se aplicará a las etiquetas span que estén dentro de una
etiqueta p,que a su vez esté dentro de una etiqueta div con la clase clase3.

div.clase3 p span {color: red}

Selector de hijos.
Podemos definir un selector con la condición de que una etiqueta "esté dentro
de otra a primer nivel de profundidad o anidamiento" o lo que es lo
mismo,"que sea un hijo directo" de otra. Una etiqueta está dentro de otra a
primer nivel si la primera está dentro de las etiquetas de inicio y de cierre de la
segunda, y no está dentro de otra etiqueta. Un selector hijo se escribe
separando las etiquetas con un carácter > (mayor que). En el siguiente ejemplo
la regla se aplicará a las etiquetas span que estén dentro de una
etiqueta div con un sólo nivel de profundidad.
div > span { color: red }
Para este fragmento de página:
<h2>Cabecera <span>nivel h2</span> </h2>
<div>Primera <span>división</span> </div>
<div>
<p>Párrafo <span>uno</span></p>
</div>
<p>Párrafo <span>dos</span></p>
Produce el siguiente resultado,

Igual que en el caso anterior, para explicar de forma más clara este resultado
nos vamos a ayudar del mismo esquema de árbol anterior.
Como vemos la segunda etiqueta span que dice "división" se ve en color rojo
porque está dentro de la etiqueta div a primer nivel de profundidad, es decir es
un hijo. Sin embargo, la tercera etiqueta span que dice "uno" no se ve en color
rojo porque está a segundo nivel de profundidad, puesto que está dentro de
una etiqueta p que a su vez está dentro de una etiqueta div, es decir, un
descendiente pero no un hijo.