HTML: CSS

INTRODUCCION A CSS

El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fue concebido para otros usos (científicos sobre todo), distinto a los actuales, mucho más amplios. Para solucionar estos problemas los diseñadores han utilizado técnicas tales como la utilización de tablas imágenes transparentes para ajustarlas, utilización de etiquetas que no son estándares del HTML y otras.

Estas "trampas" han causado a menudo problemas en las páginas a la hora de su visualización en distintas plataformas. Además, los diseñadores se han visto frustrados por la dificultad con la que, aun utilizando estos trucos, se encontraban a la hora de maquetar las páginas, ya que muchos de ellos venían maquetando páginas sobre el papel, donde el control sobre la forma del documento es absoluto.

Finalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnología consiste en que las páginas web tienen mezclado en su código HTML el contenido del documento con las etiquetas necesarias para darle forma.

Esto tiene sus inconvenientes ya que la lectura del código HTML se hace pesada y difícil a la hora de buscar errores o depurar las páginas. Aunque, desde el punto de vista de la riqueza de la información y la utilidad de las páginas a la hora de almacenar su contenido, es un gran problema que estos textos está en mezclados con etiquetas incrustadas para dar forma a estos: se degrada su utilidad.

En estas páginas de CSS pretendemos dar a conocer la tecnología con un enfoque práctico para que en pocos capítulos podáis usar las CSS de una manera depurada, reflejando toda nuestra experiencia en su uso. No pretenden demos explorar todos los aspectos de la tecnología ya que para realizar esto necesitaríamos un la extensión de un libro entero.

Características y ventajas de las CSS

El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que le aplicaremos a:

Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.
Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la cabecera, a toda la página.
Una porción del documento, aplicando estilos visibles en un trozo de la página.
Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul, con márgenes, sin ellos...

La potencia de la tecnología salta a la vista. Pero no solo se queda aquí, ya que además esta sintaxis CSS permite aplicar al documento formato de modo mucho más exacto. Si antes el HTML se nos quedaba corto para maquetar las páginas y teníamos que utilizar trucos para conseguir nuestros efectos, ahora tenemos muchas más herramientas que nos permiten definir esta forma:

Podemos definir la distancia entre líneas del documento.
Se puede aplicar identado a las primeras líneas del párrafo.
Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.
Y mucho más, como definir la visibilidad de los elementos, márgenes, subrayados, tachados...

Y seguimos mostrando ventajas, ya que si con el HTML tan sólo podíamos definir atributos en las páginas con pixeles y porcentajes, ahora podemos definir utilizando muchas más unidades como:

Pixels (px) y porcentaje (%), como antes.
Pulgadas (in)
Puntos (pt)
Centímetros (cm)

Soporte de CSS en los navegadores

El trabajo del diseñador web siempre está limitado por las posibilidades de los navegadores que utilizan los usuarios para acceder a sus páginas. Por este motivo es imprescindible conocer el soporte de CSS en cada uno de los navegadores más utilizados del mercado.

Internamente los navegadores están divididos en varios componentes. La parte del navegador que se encarga de interpretar el código HTML y CSS para mostrar las páginas se denomina motor. Desde el punto de vista del diseñador CSS, la versión de un motor es mucho más importante que la versión del propio navegador.

Los navegadores Safari y Opera son los más avanzados en el soporte de CSS, ya que incluyen muchos elementos de la futura versión CSS 3 y un soporte casi perfecto de la actual version 2.1. El navegador Firefox no tiene un soporte tan avanzado de CSS 3 pero las últimas versiones están alcanzando rápidamente a Safari y Opera.

Por su parte, el navegador Internet Explorer sólo puede considerarse adecuado desde el punto de vista de CSS a partir de su versión 7. De hecho, la versión Internet Explorer 6 que aún utilizan muchos usuarios sufre carencias muy importantes y contiene decenas de errores en su soporte de CSS. Afortunadamente, Internet Explorer 8 asegura que su soporte de CSS 2.1 será tan completo como el del resto de navegadores.

La información de la tabla anterior ha sido elaborada a partir de la información que se puede encontrar en la página Comparison of layout engines (http://en.wikipedia.org/wiki/ Comparison_of_layout_engines_(Cascading_Style_Sheets)) de la Wikipedia, donde se muestra una comparación exhaustiva sobre el soporte de todas las características de CSS por parte de cada navegador.

Como incluir CSS en un documento XHTML

Una de las principales características de CSS es su flexibilidad y las diferentes opciones que ofrece para realizar una misma tarea. De hecho, existen tres opciones para incluir CSS en un documento HTML.

CSS en el mismo documento HTML

Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta

sección <head>).

Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.

El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar.

CSS en un archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta . Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite.

En el siguiente ejemplo, se crea un archivo de texto, se cambia su nombre a estilos.css y se incluye el siguiente contenido:

p { color: black; font-family: Verdana; }

Etiqueta <link>

Normalmente, la etiqueta incluye cuatro atributos cuando se enlaza un archivo CSS:

rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.
type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.
href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explican en detalle los medios CSS y su funcionamiento.

De todas las formas de incluir CSS en las páginas HTML, esta es la más utilizada con mucha

diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de

páginas HTML, por lo que se garantiza la aplicación homogénea de los mismos estilos a todas las

páginas que forman un sitio web.

Con este método, el mantenimiento del sitio web se simplifica al máximo, ya que un solo cambio

en un solo archivo CSS permite variar de forma instantánea los estilos de todas las páginas

HTML que enlazan ese archivo.

Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS externos,

también se puede utilizar la etiqueta <style>. La forma alternativa de incluir un archivo CSS externo se muestra a continuación:

TIPOS DE SELECTORES EN CSS:

Selectores de Elementos: Seleccionan todos los elementos HTML de un tipo específico. Por ejemplo, p selecciona todos los párrafos.

Selectores de Clase: Seleccionan elementos HTML que tienen un atributo class específico. Por ejemplo, .clase selecciona todos los elementos con la clase clase.

Selectores de ID: Seleccionan un único elemento HTML que tiene un atributo id específico. Por ejemplo, #id selecciona el elemento con el ID id.

Selectores de Atributo: Seleccionan elementos HTML que tienen un atributo específico. Por ejemplo, [type="text"] selecciona todos los elementos con el atributo type establecido en "text".

Selectores de Pseudo-clase: Seleccionan elementos que están en un estado específico. Por ejemplo, :hover selecciona un elemento cuando el cursor del mouse se coloca sobre él.

PROPIEDADES MAS COMUNES DE CSS

Color: Define el color del texto.

Background-color: Define el color de fondo de un elemento.

Font-family: Especifica la fuente o familia de fuentes que se utilizará para el texto.

Font-size: Define el tamaño del texto.

Font-weight: Establece el grosor del texto (por ejemplo, normal, bold).

Margin: Establece el margen exterior de un elemento.

Padding: Establece el espacio entre el borde de un elemento y su contenido.

Border: Define el borde de un elemento.

Width y Height: Establecen el ancho y la altura de un elemento, respectivamente.

CONCLUSIONES

CSS es una herramienta poderosa y flexible que permite a los desarrolladores web controlar la apariencia y el diseño de sus páginas HTML. Con una amplia variedad de selectores, propiedades y valores, CSS proporciona un alto grado de control sobre la presentación de contenido web, lo que permite crear sitios web atractivos y accesibles para los usuarios. Entender la estructura y el funcionamiento de CSS es fundamental para el desarrollo web moderno.

Para mas información, visita los siguientes enlaces y videos: