Introducción al lenguaje CSS

Imprimir

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web. El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los navegadores.

La idea es separar el contenido de un documento .html de su aspecto.

Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.

Cuando creamos una página web, primero utilizamos el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: los títulos y subtítulos, los párrafos, texto destacado, lista de elementos, tablas, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento colocado: tamaño, color y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.

La forma más usual de dar estilo a un documento es utilizar una hoja de estilo externa vinculada a un documento .html a través de la etiqueta <link> situada en la sección <head>. Si por ejemplo, nuestra hoja de estilos se llama mis_estilos.css, la línea que debemos poner en la cabecera de la página web, si el archivo .css está en una carpeta posterior a la que tenemos la página web, es:

<link rel="stylesheet" type="text/css" href="mis_estilos.css" />

Es decir, tenemos 2 archivos: uno con extensión .html donde colocamos el contenido y otro .css donde escribimos las reglas de estilo que afectarán al primer documento.

reglas_pUn documento .CSS es un conjunto de Reglas de Estilo .CSS con las siguientes características:
  • Cada regla debe escribirse entre llaves {  }
  • Cada declaración termina en punto y coma ;
  • Y cada propiedad se separa de su valor por dos puntos :
Básicamente hay 3 tipos de selectores (exceptuando el selector universal que es el asterisco *):
  • Selectores de Tipo (corresponden a las etiquetas en código HTML) y su nombre es el mismo que las etiquetas HTML.
  • Selectores de Identificador (corresponden al atributo ID de las etiquetas <div> y deben ser únicos en el archivo HTML) además deben comenzar con el símbolo de almoadilla #
  • Selectores de Clase (corresponden al atributo CLASS de las etiquetas <div> y puede haber varios dentro de un archivo HTML) además deben comenzar con un punto . simple
Utilizando reglas de estilo .CSS podemos actuar sobre:
  • Los Tipos, tamaños y colores, alineación, espaciado,... de texto
  • La Visibilidad y posicionamiento de elementos.
  • Las propiedades de las listas, tablas, ...
  • Las propiedades de cualquier etiqueta .HTML
  • Los Márgenes, fondo y colores de zonas del documento,...
  • Y sobre las propiedades de Caja o cualquier tipo de contenedor. etc...
aula_virtual_3con14

Utilidades

imprescindibles FireFox Google Chrome Opera Safari Acrobat Reader 7zip Flash Player Java FileHippo

Visitas...

TOTAL173676