CSS - created from Mind Map

Página 1

INTRODUCCIÒN

(CSS, acrónimo de Cascading Style Sheets)

CARACTERÍSTICAS Y VENTAJAS DE LAS CSS

NAVEGADORES QUE LO SOPORTAN

Separar contenido y presentación

Cómo se implementa la separación del contenido y presentación

EL CSS NOS EVITA USAR TRUCOS ANTIGUOS "DE DISEÑADORES“

Usos de las CSS

El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fué concebido para otros usos (científicos sobretodo), distinto a los actuales, mucho más amplios.

CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con HTML o de los documentos XML. CSS se creó para separar el contenido de la forma, a la vez que permite a los diseñadores mantener un control mucho más preciso sobre la apariencia de las páginas.

Ayudará a crear páginas más atractivas y precisas, mantenibles y optimizadas.

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 una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para 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.

Se puede aplicar identado (sangrado) a las primeras líneas del párrafo. Colocar elementos en la página con mayor precisión, y sin lugar a errores. Definir la visibilidad de los elementos, margenes, subrayados, tachados. Con el HTML tan sólo se podía definir atributos en las páginas con pixeles y porcentajes, ahora se puede definir, utilizando muchas más unidades como: Pixels (px) y porcentaje (%), como antes. Pulgadas (in), Puntos (pt), Centímetros (cm)

Como CSS ha sido presentado por etapas y en distintas versiones, hay características avanzadas de la última versión del lenguaje que puede que no se vean en todos los navegadores anticuados, nos referimos principalmente a Internet Explorer 8 y anteriores. Hoy por suerte todos los navegadores se actualizan por ellos mismos, lo que mejora el soporte a los estándares como CSS y permite que los desarrolladores lo usemos con mayor confianza.

El contenido es lo que se escribe con el HTML. Es aquella información que se presenta en una página, tanto textos como imágenes, banners, interfaces de usuario, formularios, barras de navegación, así como cualquier otro elemento que encontramos dentro de una web.

La presentación es cómo se desea que ese contenido se muestre en la página. Los colores, distancias de márgenes, tipografías, colocación de los elementos en el layout, fondos, etc. forman parte de la presentación.

Pero no solo eso, si mañana decidías que en tu layout de dos columnas ibas a agregar una tercera para colocar algunos de los contenidos existentes, te obligabas a cambiar el código HTML, recolocar elementos de un lugar para otro… en cada uno de los archivos de tu sitio. Un cambio que aparentemente no era tan aparatoso, tendría como resultado decenas o cientos de horas editando código en diversos archivos.

Con la llegada de las CSS se animó a los desarrolladores a colocar en el HTML únicamente el código necesario para definir el contenido de la página. Es decir, párrafos con textos, imágenes, formularios. Pero no colocar una sola etiqueta o atributo para definir los estilos. Un archivo HTML queda entonces limitado a lo que sería un texto en color negro sobre un fondo blanco, así como imágenes y otros elementos, pero sin ajustarse a ningún layout.

En todas y cada una de las páginas que componen el sitio web se enlaza con la hoja de estilos, de modo que todas comparten un mismo aspecto. De este modo, cuando deseamos cambiar cualquier cosa relacionada con el aspecto de la página, solo necesitamos tocar la hoja de estilo, una única vez, en un único archivo y con ello se alterará la presentación de todas las páginas del sitio.

Los diseñadores siempre quieren llegar un poco más allá y ello ha provocado que a veces se pierda la perspectiva. En su afán de hacer un buen trabajo, los creativos conciben diseños que tratan de ser innovadores, distinguidos, atractivos, modernos y en esa búsqueda acababan siempre en la necesidad de usar diversos trucos "de diseñadores", saltándose algunas de las normas básicas de la separación del qué y el cómo.

Esto lo podemos ver con varios ejemplos que nos faciliten entender el tipo de situaciones que se producían en el pasado y que ahora en menor medida también ocurren, ya sea por desconocimiento de CSS o porque realmente el lenguaje de definición de estilos no sea capaz de solventar alguna necesidad.

Describimos las distintas aplicaciones de las Hojas de Estilo en cascada

CSS sirve para definir el aspecto de las páginas web, eso ya debe haber quedado claro. No obstante, hay diferentes niveles a los que podemos aplicar los estilos.

Se ha denominado a este apartado los diferentes usos de las CSS y relata justamente eso, los distintos niveles a los que podemos usar las Hojas de Estilo, que van desde definir los estilos de manera específica, para un pequeño fragmento de una página, hasta los estilos para todo un sitio web completo. Todo esto pasando por diversos otros niveles que resultarán de mucha utilidad también en nuestro día a día como diseñadores.