Unidad 9. Hojas de estilo CSS. Sintaxis. Selectores (I)



9.1. Introducción.

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 momentos, 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.

En este vídeo puedes ver una introducción a las hojas de estilo:Videotutorial

9.2. 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.

Esquena regla CSS. Selector, atributo, valor

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 .

A continuación vamos a explicar con detalle los tipos de selectores, cómo se pueden combinar y dónde declarar los estilos.


Enero-2019 (V 2.2)
Pág. 9.1
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.