como se trabaja con CSS3

¿Que significa CSS3?

CSS3 es una tecnologia que ha tenido una evolucion en el tiempo, que actualmente se encuentra en su version 3, como su propio nombre indica.

Sus siglas corresponden a "Cascading Style Sheets", que tiene el siguiente significado

Cascading: que significa que los estilos que aplicamos a los elementos de una pagina web se propagan a los elementos que contiene, se propagan en cascada.

Style: porque mediantes CSS lo que hacemos es aplicar estilos visuales a los distintos elementos de nuestra pagina web

Sheets: que significa hojas porque los estilos de una pagina web se añaden en ficheros aparte, en ficheros con la extension .css de manera general.

CSS es un lenguaje de diseño grafico que permite definir y crear la presentacion de un documento estructurado escirto en un lenguaje marcado. Es muy usado para establecer el diseño visual de los documentos web e interfaces de usuario escritas en HTML.

En la propia definicion de CSS vemos que esta muy ligado desde su naciemiento a HTML. Desde que nacio, el objetivo de CSS fue poner un poco de orden a la hora de aplicar los estilos a las paginas web.

Principales Características De CSS3

Módulo Del Color Css3:
CSS3 soporta más color y una gama más amplia de las definiciones del color. Los nuevos colores que proporciona CSS3 son HSL, CMYK, HSLA y RGBA.

Bordes Con Degradados:
Puedes obtener bordes con degradados usando: -moz-border-radius / -webkit-border property.

Bordes Con Imagen:
Las propiedades generalmente de los bordes en CSS no son suficientes. Si quieres utilizar las imágenes para los bordes, CSS3 soporta imagen en los bordes a través de las propiedades border-image y border-corner-image.

Esquinas O Bordes Redondeados:
A continuación, se demuestra cómo crear fácilmente las esquinas redondeadas para cualquier caja usando border-radius y background position.

Cajas Con Sombras:
Este módulo de CSS3 permite colocar los textos en varias columnas de forma mucho más simple usando las propiedades: -moz-column-count and -moz-column-width. Si tienes un texto en tu página Web demasiado de largo, esta propiedad de CSS3 podría serte realmente útil.

Sombra Para Texto:
¿Necesitas usar Photoshop o Fireworks para crear sombras para el texto? La propiedad text-shadow de CSS3 permite agregar una sombra a cada letra del texto. Esta propiedad no es nueva en CSS3, fue propuesto originalmente en CSS2, pero quitado en CSS 2.1.

¿Como trabaja CSS3?

Cuando un navegador muestra un documento, debe combinar el contenido del documento con la información de su estilo. Se procesa el documento en dos etapas:

El navegador convierte el lenguaje de marcado (markup) y el CSS en el DOM (Document Object Model). El DOM representa el documento en la memoria del ordenador. Combina el contenido del documento con su estilo.

El navegador muestra el contenido de la DOM.

Un lenguaje de marcado utiliza elementos para definir la estructura del documento. Usted marca un elemento utilizando etiquetas, que son cadenas que comienzan con '<' y termina con '>'. La mayoría de los elementos tienen un par de etiquetas, una etiqueta de inicio y una etiqueta de cierre. Para la etiqueta de inicio, coloque el nombre del elemento entre '<' y '>'. Para la etiqueta final, coloque un '/' después de '<' y antes del nombre del elemento.

Dependiendo del lenguaje de marcado, algunos elementos tienen sólo una etiqueta de inicio, o una sola etiqueta donde el '/' viene después del nombre del elemento. Un elemento también puede ser un contenedor e incluir otros elementos entre su etiqueta de inicio y la etiqueta de cierre. Sólo recuerda cerrar siempre las etiquetas dentro del contenedor.

Un DOM tiene una estructura en forma de árbol. Cada elemento, atributo y extensión de texto en el lenguaje de marcado se convierte en un nodo de la estructura de árbol. Los nodos se definen por su relación con otros nodos DOM. Algunos elementos son los padres de los nodos secundarios, y los nodos secundarios tienen hermanos.

Comprender el DOM le ayuda a diseñar, depurar y mantener su CSS, porque el DOM es donde su CSS y el contenido del documento se reúnen.