Universidad Tecnolgica Del Sur de Sonora

INVETIGACIN SOBRE CSS

MATERIA: OPTATIVA PROFESOR: RAL BRQUEZ MARTINEZ PRESENTAN: JESS ABRAHAM MORALES ALCARAZ Grupo: ITI 1A

CD. OBREGON A 30 DE SEPTIEMBRE DEL 2011

Introduccin
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentacin de los documentos electrnicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentacin y es imprescindible para crear pginas web complejas. Separar la definicin de los contenidos y la definicin de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (tambin llamados "documentos semnticos"). Adems, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes. Al crear una pgina web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la funcin de cada elemento dentro de la pgina: prrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamao y tipo de letra del texto, separacin horizontal y vertical entre elementos, posicin de cada elemento dentro de la pgina, etc.

Desarrollo
Selectores Para crear diseos web profesionales, es imprescindible conocer y dominar los selectores de CSS. Una regla de CSS est formada por una parte llamada "selector" y otra parte llamada "declaracin". La declaracin indica "qu hay que hacer" y el selector indica "a quin hay que hacrselo". Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una pgina. A un mismo elemento HTML se le pueden asignar infinitas reglas CSS y cada regla CSS puede aplicarse a un nmero infinito de elementos. En otras palabras, una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas. El estndar de CSS 2.1 incluye una docena de tipos diferentes de selectores, que permiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de una pgina web. No obstante, la mayora de pginas de los sitios web se pueden disear utilizando solamente los cinco selectores bsicos. Unidades de medida y colores Muchas de las propiedades de CSS que se ven en los prximos captulos permiten indicar medidas y colores en sus valores. Adems, CSS es tan flexible que permite indicar las medidas y colores de muchas formas diferentes. Por este motivo, se presentan a continuacin todas las alternativas disponibles en CSS para indicar las medidas y los colores. En los siguientes captulos, cuando una propiedad pueda tomar como valor una medida o un color, no se volvern a explicar todas estas alternativas.

Posicionamiento y visualizacin
Cuando los navegadores descargan el contenido HTML y CSS de las pginas web, aplican un procesamiento muy complejo antes de mostrar las pginas en la pantalla del usuario. Para cumplir con el modelo de cajas presentado en el captulo anterior, los navegadores crean una caja para representar a cada elemento de la pgina HTML. Los factores que se tienen en cuenta para generar cada caja son:

Las propiedades width y height de la caja (si estn establecidas). El tipo de cada elemento HTML (elemento de bloque o elemento en lnea). Posicionamiento de la caja (normal, relativo, absoluto, fijo o flotante). Las relaciones entre elementos (dnde se encuentra cada elemento, elementos descendientes, etc.) Otro tipo de informacin, como por ejemplo el tamao de las imgenes y el tamao de la ventana del navegador.

Imgenes
Estilos bsicos
Utilizando las propiedades width y height, es posible mostrar las imgenes con cualquier altura/anchura, independientemente de su altura/anchura real:
#destacada { width: 120px; height: 250px; } <img id="destacada" src="imagen.png" />

Ventajas

No modifica el cdigo original de la pgina Permite observar en simultneo la representacin grfica de la pgina y el cdigo pertinente Brinda informacin acerca de la cantidad de elementos presentes til como herramienta de aprendizaje y adiestramiento Permite retomar las revisiones, posibilitando el trabajo grupal
Se obtiene un mayor control de la presentacin del sitio al poder tener todo el cdigo CSS reunido en uno, lo que facilita su modificacin. Al poder elegir el archivo CSS que deseamos mostrar, puede aumentar la accesibilidad ya que podemos asignarle un cdigo CSS concreto a personas con deficiencias visuales, por ejemplo. Esto lo detecta el navegador web. Conseguimos hacer mucho ms legible el cdigo HTML al tener el cdigo CSS aparte (Siempre que no usemos estilos en lnea, claro est). Pueden mostrarse distintas hojas de estilo segn el dispositivo que estemos utilizando (versin impresa, versin mvil, leda por un sintetizador de voz) o dejar que el usuario elija. Gracias a la tcnica CSS Sprites podemos aligerar la carga de nuestro sitio al juntar todas las imgenes en una. Las novedades de CSS3 nos permiten ahorrarnos tiempo y trabajo al poder seguir varias tcnicas (bordes redondeados, sombra en el texto, sombra en las cajas, etc) sin necesidad de usar un editor grfico.

Desventajas
Pobre soporte de los navegadores a CSS2 Hoy, slo Opera permite aprovechar las ventajas de las CSS Tiempo mnimo de revisin muy elevado.
Existen limitaciones que CSS 2.x todava no permite, por ejemplo, la alineacin vertical de capas, las sombras, los bordes redondeados

- El uso de las tablas nos permita crear diseos complejos de forma mucho ms sencilla que utilizando CSS, aunque CSS3 est intentando facilitar dicho trabajo. - A veces, dependiendo del navegador (Acid tests), la pgina que ha sido maquetada con CSS puede verse distinta (Aunque, si hemos seguido los estndares web de forma correcta, el problema es del navegador).

Sintaxis para implementarlo en html

Por ejemplo, la siguiente hoja de estilo CSS (almacenada en el fichero "especial.css") hace que el color del texto de un prrafo sea verde ("green") y lo rodea de un borde rojo ("red") continuo ("solid"):
P.especial { color : green; border: solid red; }

Los autores pueden vincular esta hoja de estilo a su documento fuente HTML con el elemento LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Un documento con una hoja de estilo externa<TITLE> <LINK href="especial.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <P class="especial">Este prrafo debera tener texto especial verde. </BODY> </HTML>

Conclusin
CSS, es una tecnologa que nos permite crear pginas web de una manera ms exacta , separar la estructura de la presentacin y llevar un mejor orden de cdigo. Gracias a las CSS somos mucho ms dueos de los resultados finales de la pgina, pudiendo hacer muchas cosas que no se poda hacer utilizando solamente HTML, como incluir mrgenes, tipos de letra, fondos, colores, etc.

Referencias
www.librosweb.es http://www.maestrosdelweb.com/editorial/introcss/