domingo, noviembre 21, 2004

Introducción al CSS

CSS (Cascading Style Sheets - Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar el contenido de la presentación en una página web.

Ventajas del CSS:
- Evitamos hacer a los archivos demasiado pesados.
- Definimos el estilo de un sitio entero sin necesidad de hacerlo etiqueta por etiqueta. Cualquier cambio hecho a un estilo CSS, se reflejará en todos los elementos que sean referidos a éste, automáticamente.

Con CSS podemos reemplazar las tablas enteramente, pero no es recomendable aún, hasta que los estándares se acepten totalmente en todos los navegadores. Se recomienda utilizar tablas, moderadamente, para la organización del "layout", y CSS para el resto.

Opciones de estilos CSS:
- Redefiniciones de etiquetas HTML: Se aplican de manera automática a un tipo de elementos.
- Estilos personales, o clases (class): Requieren de un atributo class que identifique al elemento. Si definimos una clase llamada ".especial", y la queremos aplicar a un elemento específico:

<span class="especial">Contenido aquí</span>

Formas de implementar estilos CSS:

- Incrustar las definiciones de estilo dentro del <head>, por medio de la etiqueta <style type="text/css">:

- Vincular el documento HTML a la hoja de estilos, por medio del siguiente código dentro del <head>:

<link rel=stylesheet type="text/css" href="url" title="titulo">

- Importarla con el siguiente código:

<style type="text/css">
<!--
@import url(url/nombre_de_documento.css);
-->
</style>



El cuerpo del documento CSS consiste entonces en los nombres de los estilos y sus reglas. La sintaxis es así:

SELECTOR { REGLA1: VALOR; REGLA2: VALOR; }

Los nombres de las clases deben ir precedidos de un punto (.), y las redefiniciones de HTML no.

body {
(...)
}

.comCuerpoCentr {
(...)
}


Reglas sintácticas de los estilos CSS:

- La sintaxis empieza con el nombre del estilo: (selector).
- El selector va seguido de un corchete de apertura "{".
- Después va la regla, seguida de dos puntos ":".
- Los valores van precedidos de un espacio en blanco, y seguidos de un punto y coma ";".
- Cuando hay varias reglas van separadas por puntos y comas y un espacio en blanco.
- La hilera de reglas acaban en un corchete de cierre "}".
- Se introduce un salto de línea para especificar el estilo siguiente.
- Se recomienda utilizar minúsculas para todo el texto.
- Se recomienda que todos los elementos vayan delimitados por un espacio en blanco.

Ejemplos de redefiniciones:

En <body> ponemos las reglas que herederarán todos los demás estilos, si no se especifica lo contrario para alguno de ellos.

body {
font-family: arial, helvetica, sans-serif; font-size: 12px; margin: 0px;
}

La serie "a" especifica los estilos de los enlaces.
a:link; los enlaces en general.
a:visited; los visitados
a:active; los activos (cuando le haces click)
a:hover; cuando pasamos el ratón sobre él

a:link {
color: #0000cc; font-weight: bold; text-decoration: none;
}
a:visited {
color: #990099; font-weight: bold; text-decoration: none;
}
a:active {
color: #ff9900; font-weight: bold; text-decoration: none;
}
a:hover {
color: #3333ff; text-decoration: underline;
}

Por defecto, los navegadores suelen mostrar los enlaces siempre subrayados. Al especificar text-decoration: none; los links se mostrarán sin subrayado, y con text-decoration: underline; con subrayado.

También podemos definir el estilo de cada enlace en la propia etiqueta <a>, con el atributo style, para hacer que determinados enlaces se vean distintos.

<a href="#" style="color:#ff0000">Mi enlace</a>

Enlaces
Especificaciones CSS nivel 1
Especificación CSS nivel 2

Ref:
Maestros del web
Who Links Here