You are on page 1of 4

Hojas de estilo en cascada

Hojas de estilo en cascada


CSS

Diseado por: World Wide Web Consortium Desarrollador: World Wide Web Consortium Web:
http:/ / www. w3. org

Las hojas de estilo en cascada (en ingls Cascading Style Sheets), CSS es un lenguaje usado para definir la presentacin de un documento estructurado escrito en HTML o XML (y por extensin en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificacin de las hojas de estilo que servirn de estndar para los agentes de usuario o navegadores. La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un documento de su presentacin. Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es ms importante que un bloque etiquetado como <H2>. Versiones ms antiguas de HTML permitan atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamao de fuente). No obstante, cada etiqueta <H1> deba disponer de la informacin si se deseaba un diseo consistente para una pgina y, adems, una persona que lea esa pgina con un navegador pierde totalmente el control sobre la visualizacin del texto. Cuando se utiliza CSS, la etiqueta <H1> no debera proporcionar informacin sobre como va a ser visualizado, solamente marca la estructura del documento. La informacin de estilo separada en una hoja de estilo, especifica cmo se ha de mostrar <H1>: color, fuente, alineacin del texto, tamao y otras caractersticas no visuales como definir el volumen de un sintetizador de voz (vase Sintetizacin del habla), por ejemplo. La informacin de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. En este ltimo caso podran definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style".

Los tres tipos de estilos


CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una pgina Web: 1. Una hoja de estilo externa, que es una hoja de estilo que est almacenada en un archivo diferente al archivo donde se almacena el cdigo HTML de la pgina Web. Esta es la manera de programar ms potente, porque separa completamente las reglas de formateo para la pgina HTML de la estructura bsica de la pgina. 2. Una hoja de estilo interna, que es una hoja de estilo que est incrustada dentro de un documento HTML. (Va a la derecha dentro del elemento <head>). De esta manera se obtiene el beneficio de separar la informacin del estilo, del cdigo HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una pgina a otra, (esta posibilidad es difcil de ejecutar si se desea para guardar las copias sincronizadas). En general, la nica vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna caracterstica a una

Hojas de estilo en cascada pgina Web en un simple fichero, por ejemplo, si se est enviando algo a la pgina web. 3. Un estilo en lnea, que es un mtodo para insertar el lenguaje de estilo de pgina, directamente, dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripcin del formateo dentro del documento de la pgina Web, a nivel de cdigo se convierte en una tarea larga, tediosa y poco elegante de resolver el problema de la programacin de la pgina. Este modo de trabajo se podra usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro, o estructurado, que debera ser, pero funciona.

Ventajas de usar las hojas de estilo


Las ventajas de utilizar CSS (u otro lenguaje de estilo) son: Control centralizado de la presentacin de un sitio web completo con lo que se agiliza de forma considerable la actualizacin del mismo. Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local que ser aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamao del texto o remarcar ms los enlaces. Una pgina puede disponer de diferentes hojas de estilo segn el dispositivo que la muestre o incluso a eleccin del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo mvil, o ser "leda" por un sintetizador de voz. El documento HTML en s mismo es ms claro de entender y se consigue reducir considerablemente su tamao (siempre y cuando no se utilice estilo en lnea).

Diagramado de pgina en CSS


Antes de que estuviera disponible CSS, la nica forma de componer espacialmente una pgina era el uso de tablas. Aunque es una tcnica cmoda y verstil, se est usando un elemento con una semntica particular, que es la de expresar informacin tabular, solamente por su efecto en la presentacin. La introduccin de CSS ha permitido en muchos casos reemplazar el uso de tablas. Sin embargo CSS todava no permite la versatilidad que ofrecan las tablas, lograr un diagramado de una pgina compleja suele ser una tarea difcil en CSS y las diferencias entre navegadores dificultan an ms la tarea. Se espera que futuros desarrollos en CSS3 resuelvan esta deficiencia y hagan de CSS un lenguaje ms apto para describir la estructura espacial de una pgina.

Recomendaciones del W3C


Cascading Style Sheets, nivel 1 (CSS1) [1], Diciembre de 1996 Propiedades de fuentes Propiedades de color y fondo Propiedades de texto espaciado de palabras alineacin Propiedades de caja Margen Borde Relleno Propiedades de clasificacin visualizacin

Hojas de estilo en cascada listas Ilustracin de propiedades de caja:


Margen (Margen) Borde (Border) Relleno (Padding) Contenido (Content) Relleno (Padding) Borde (Border) Margen (Margin)

Si se define una caja con el atributo width (ancho), se interpreta por el modelo de caja del W3C como la anchura del contenido. La anchura del relleno y del borde se aaden a la anchura total del elemento. En el modelo no puede especificarse el margen, el relleno o el borde, en la misma etiqueta, que el ancho del contenido. Otra posibilidad es usar un hack (vase la seccin de enlaces). CSS] Comparacin de la presentacin CSS en diferentes motores (Wikipedia en ingls) Una demostracin de lo que se puede lograr visualmente usando CSS [2]

Referencias
[1] http:/ / www. w3. org/ TR/ REC-CSS1 [2] http:/ / www. csszengarden. com/ tr/ espanol/

Fuentes y contribuyentes del artculo

Fuentes y contribuyentes del artculo


Hojas de estilo en cascada Fuente: http://es.wikipedia.org/w/index.php?oldid=33239461 Contribuyentes: Ascnder, Biasoli, BioXD, Blackdevil.dx, Cabseiya, Caos, Carutsu, Ciencia Al Poder, Comae, Damifb, Daniel G., Diegusjaimes, Dodo, Ensada, Fanattiq, FedericoMP, FrancoGG, Frutoseco, GermanX, Humberto, Icvav, Jess Mercado, Jiacontrerasp, JoaquinFerrero, Joseaperez, JosebaAbaitua, Kaprak, Kausario, Lasneyx, Laura Fiorucci, Listener, Locovich, LordT, Mac, Marceartist, Matdrodes, Mdiagom, Monibeata, MorPhaGo, Moriel, Niqueco, Pacoraya, Paintman, Pasmargo, Pilaf, PoLuX124, Pybalo, Rammm, Retama, Rufous, Sabbut, Sabo, Sakhal, Sergiolm, Siabef, Sonia Rod, SpeedyGonzalez, Subienkov, SultanICQ, Superzerocool, Taichi, Tano4595, Tirithel, Tomatejc, Triku, Valyag, Wilfredor, 166 ediciones annimas

Fuentes de imagen, Licencias y contribuyentes


Archivo:CSS.svg Fuente: http://es.wikipedia.org/w/index.php?title=Archivo:CSS.svg Licencia: Creative Commons Attribution-Sharealike 2.5 Contribuyentes: w:User:DreftymacDreftymac

Licencia
Creative Commons Attribution-Share Alike 3.0 Unported http:/ / creativecommons. org/ licenses/ by-sa/ 3. 0/

You might also like