• Save
CSS ICAP 2007
Upcoming SlideShare
Loading in...5
×
 

CSS ICAP 2007

on

  • 767 views

Manual sobre Hojas de Estilo en Cascada. Organizado por IT7 para el Instituto Canario de Administraciones Públicas. Julio 2007

Manual sobre Hojas de Estilo en Cascada. Organizado por IT7 para el Instituto Canario de Administraciones Públicas. Julio 2007

Statistics

Views

Total Views
767
Views on SlideShare
767
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS ICAP 2007 CSS ICAP 2007 Document Transcript

  • CSS © José Ramón Quevedo Santana Todos los derechos reservados. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 1 de 75
  • R.1.2.5.230707. Manual sobre Hojas de Estilo en Cascada. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 2 de 75
  • Ayúdenos a mejorar Ningún manual es perfecto, y espero que antes de acabar de leer este trabajo encuentre al menos uno o dos errores. Su labor es imprescindible para mantener actualizado este documento y poder crear nuevas revisiones más fiables y con mayor calidad. Errores, dudas, sugerencias, por favor remítalos a: info@qweos.net Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 3 de 75
  • Calidad Basado en el estándar del Sigue pautas del Conforme a los desarrollos del World Wide Web Consortium W3C Quality Assurance Web Standards Project (W3C) 10 Years with Style Curso aprobado por: Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 4 de 75
  • Convenciones Elementos usados este manual… Información de carácter general que añade o aporta contenido adicional al tema central del curso. Contenidos basados en las especificaciones y recomendaciones oficiales del W3C World Wide Web Consortium (W3C). Ejemplo práctico, normalmente se mostrará acompañado de la palabra Ejemplo. Código de muestra. Información, reglas y consejos relativos al diseño y desarrollo con estándares Web. (X)HTML Hace referencia tanto a la especificación HTML 4 como a la XHTML 1.0. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 5 de 75
  • 1 ¿Para quién? Este curso es para… … los profesionales Web, tanto diseñadores como desarrolladores, que deseen experimentar las amplias posibilidades que ofrecen las Hojas de Estilo en Cascada en los documentos (X)HTML. Este manual asume que el lector tiene experiencia con XHTML y los desarrollos con estándares Web (W3C), dado que la mayoría de ejemplos se aplican a este lenguaje de marcado. No es necesario poseer conocimientos adicionales sobre JavaScript, lenguajes de programación, etc. Este manual no pretende ser una referencia que abarca de forma prolija y pormenorizada toda la especificación CSS, para ello ya existe la propia Recomendación Oficial del Consorcio de la Web – W3C- (http://www.w3.org/Style/CSS/) y otros muchos recursos, probablemente, más cualificados que este. El objetivo es servir de guía rápida para toda aquella persona que desee comenzar a instruirse en la escritura, con buena letra, de CSS. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 6 de 75
  • 2 ¿Qué es? CSS es un lenguaje de estilo que se puede utilizar conjuntamente con (X)HTML para definir, de forma bastante precisa, la presentación visual de nuestros documentos Web. Introducción a las Hojas de estilo. El lenguaje (X)HTML siempre ha estado limitado a la hora de aplicarle forma y estilo a un documento. Esto es así porque fue concebido para unos usos restringidos, muy distintos a los actuales que son más amplios y exigentes. Antes de la aparición de las Hojas de estilo en cascada (CSS: Cascading Style Sheets), los diseñadores tenían que conformarse con sacar el máximo provecho a la presentación usando los elementos HTML, diseñados únicamente para la estructura, olvidando, en la mayoría de los casos, su función original. Se utilizaban (y, lamentablemente, aun se utilizan) técnicas tales como la utilización de tablas para la maquetación de la interfaz de usuario (GUI), imágenes (GIF) transparentes para ajustar los elementos, utilización de etiquetas que no pertenecían a la definición estándar, etc. Estos “trucos”, en muchos casos, provocaban comportamientos inesperados en los navegadores. A pesar de utilizarlos, muchos diseñadores, sobre todo los procedentes del mundo de la imprenta donde el control sobre la forma del documento es total, fracasaban en su intento de controlar la presentación de los documentos Web. Separar estructura y presentación: todo ventajas CSS presenta muchas ventajas frente a estas antiguas técnicas, la mayoría de las cuales tienen su fundamento en la separación completa entre el contenido (o estructura) y su presentación (o estilo). Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 7 de 75
  • Esto, aparte de las ventajas inherentes de obtener un código más limpio y de menos peso, supone la situación ideal que permite: • A los escritores y expertos en documentación y contenidos crear la información sin perder el tiempo en su forma visual. • A los diseñadores y desarrolladores definir cómo se va a mostrar (la apariencia y disposición) de esa información. En general, usar CSS tiene como resultados: • una mayor productividad, disminuyendo el trabajo de producción y mantenimiento. • aumenta la accesibilidad del documento, al contar con un buen código estructural separado de la presentación visual, nuestras páginas son accesibles y entendidas por una mayor audiencia. • Reducen la cantidad de código necesario, mejorando el tiempo de respuesta y la velocidad de presentación de la página. Aplicación de las CSS El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que le aplicaremos a: • Un Sitio Web entero. Con el uso de CSS, los autores pueden cambiar todo el diseño de un sitio con sólo modificar la hoja de estilos del mismo, en lugar de actualizar las etiquetas en cada uno de los documentos HTML existentes en el mismo. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 8 de 75
  • • Un documento HTML, se puede definir el estilo, a través de un pequeño trozo de código en la cabecera del documento HTML, a toda la página. • Una porción del documento, aplicando estilos en un determinado lugar de la página. • Un elemento o etiqueta, llegando incluso a poder definir varios estilos diferentes para una única etiqueta dependiendo del contexto donde se encuentre. Soporte de los navegadores Esta tecnología no es nueva, pero no todos los navegadores la soportan. Los navegadores como Netscape 4 y superiores y Microsoft Internet Explorer 3 son capaces de empezar a comprender algunos reducidos estilos CSS. Además, no todos los navegadores implementan las mismas funciones de las hojas de estilos. No obstante, los navegadores de reciente creación (año 2001 en adelante) soportan bastante bien la mayoría de características CSS. Veamos una reducida comparativa de los principales navegadores y su clasificación según el nivel de soporte de CSS: Categoría Fechas (aprox.) Soporte CSS Navegadores Ningún soporte de CSS. No se NS 3 y anteriores. Finales de 1995 / implementa ningún IE 2 y anteriores. Obsoletos Primer semestre estilo. Cualquier Opera 3.5 y 1996 definición CSS es anteriores. simplemente ignorada Soporte marginal y, a menudo, imperfecto IE 3 y 4 Segundo semestre de CSS. Muchos IE 5 (Win) Antiguos 1996 / Primer estilos no son NN 4 semestre 2000 mostrados Opera 4 correctamente. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 9 de 75
  • Soportan casi de forma completa la especificación CSS 1 IE 5 (Mac) Segundo semestre y muestran Recientes 2000 correctamente, al IE 5.5 (Win) Opera 5 menos, algunas características de CSS 2 IE 6 (Win) y Soportan toda la posteriores Segundo semestre especificación CSS 1 Modernos 2001 en adelante y la mayoría, si no NS 6 y posteriores MZ 1 y posteriores toda, de CSS 2 Opera 6 y posteriores Leyenda: • NN: Netscape Navigator • NS: Netscape • IE: Microsoft Internet Explorer • MZ: Mozilla • Win: plataforma Microsoft Windows • Mac: plataforma Apple Macintosh (MacOS) Si desea información detallada sobre el soporte CSS de los navegadores visite: http://www.w3.org/Style/CSS/ Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 10 de 75
  • 3 ¿Cuándo? Un poco de historia. CSS no apareció hasta 1996, cinco años después del nacimiento del WWW. En un principio, los lenguajes de estilo HTML eran internos, utilizados por el navegador y no disponibles para el autor del documento. Pronto resultó evidente que el control de la presentación debía estar, de alguna manera, separado de las reglas de interpretación internas del navegador y disponible para el autor Web. En 1994, Håkon Wium Lie publicó el primer borrador de Cascading HTML StyleSheets, las Hojas de estilo en cascada en HTML. Håkon imaginó que el lenguaje de estilo debía combinar, de alguna manera, las preferencias del autor y del usuario. Su propuesta se materializaba mediante una “cascada” que seguía múltiples reglas de estilo y un sistema bien definido que determinaba la importancia de cada regla si existía algún conflicto entre ellas. Hasta ese momento para poder controlar el diseño, en un medio que originariamente no estaba preparado para tal propósito, se usaban complejas tablas, cuyo mantenimiento y carga eran nefastos. CSS emergió rápidamente como un estándar para el diseño Web como respuesta ante esa situación. El World Wide Web Consortium (W3C) publicó la primera recomendación CSS (CSS 1) el 17 de diciembre de 1996. El 12 de mayo de 1998 creó la especificación CSS 2 que mejoraba, corregía y ampliaba a la primera edición, ésta también fue revisada el 25 de febrero de 2004 dando lugar a la Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 11 de 75
  • especificación CSS 2.1 (no finalizada hasta julio de 2007). En el momento de escribir estas líneas, varios módulos de CSS 3 están en desarrollo. Internet Explorer 3 fue el primer navegador que implementó CSS en agosto de 1996, antes incluso de que CSS fuera una recomendación oficial. Netscape fue el siguiente y desde entonces casi todos los navegadores, en mayor o menor medida, han dado soporte a esta tecnología. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 12 de 75
  • 4 ¿Cómo? 4.1 Herramientas necesarias Como sucede con (X)HTML, para escribir CSS bastará con nuestro editor de texto favorito, guardando el archivo resultante con la extensión .css. Para visualizar los documentos, utilizaremos un navegador. Se pueden usar otras herramientas o editores más complejos, aunque no son estrictamente necesarios para el aprendizaje. Para probar y depurar las páginas basadas en CSS, sería de gran utilidad disponer de varios navegadores en diferentes plataformas. El W3C también cuenta con un completo servicio de revisión en http://jigsaw.w3.org/css- validator/ 4.2 Reglas y su sintaxis W3C Una hoja de estilo está formada por una o varias reglas que controlan cómo deben representarse los elementos seleccionados. Cada regla tiene dos partes: 1. un selector que define el elemento, o elementos, (X)HTML al cual se le aplica la regla. 2. un bloque de declaración, definido entre llaves { y }. La declaración, además, contiene una colección de uno o más conjuntos de propiedad y valor separados por dos puntos (:). Cada declaración se termina seguida de un punto y coma (;), con la excepción del último conjunto, para el cual es opcional. En este manual siempre utilizaremos punto y coma al finalizar cada par de propiedad- valor, para evitar la confusión sobre cuándo ponerlo y cuándo no. Las propiedades1 son los aspectos del elemento (selector) al que ha elegido aplicar estilo. El valor es el estilo exacto que quiere establecer para esa propiedad. 1 Algunos libros y manuales las denominan “atributos”, hemos optado por seguir la nomenclatura del W3C para evitar confundirlas con los atributos (X)HTML. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 13 de 75
  • Sintaxis de una regla de estilo: Bloque declaración Selector Propiedad Valor h1 { color: #000; } Ejemplo: h1 { color: #000; font-size: 72%; } En nuestro ejemplo anterior, el selector aplica a todos los elementos de encabezado HTML h1 unas propiedades de color y tamaño de fuente específicos. 4.3 Propiedades y elementos afectados W3C ¿Qué propiedades pueden contener las reglas CSS? Como veremos en la sección “Propiedades CSS”, las reglas de estilo pueden incluir propiedades que afectan casi a cualquier aspecto de la presentación de un Sitio Web. La referencia completa la puede encontrar en: http://www.w3.org/TR/2004/CR-CSS21-20040225/propidx.html ¿A qué elementos se le pueden aplicar las reglas? CSS nos permite, por ejemplo, aplicar estilos a todos los párrafos, pero, además, mediante una serie de combinaciones en la forma en la que sean usados los selectores, el autor puede determinar si la regla se aplica de manera general a todos los elementos o únicamente a aquellos elementos que se encuentren en unas circunstancias (contexto) específicas. Por ejemplo, podemos asignar reglas a: • todos los elementos de un tipo específico. • todos los elementos de un tipo específico asociados a un grupo o clase. • todos los elementos de un tipo específico que contienen a otros determinados elementos. • todos los elementos de un tipo específico que contienen a otros determinados elementos y ambos están asociados a un grupo o clase. • todos los elementos de un tipo específico escritos inmediatamente después de otro elemento determinado. • un único elemento de un tipo específico al que se le asigna un identificador único (id). 4.4 Elementos a nivel de bloque y en línea Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 14 de 75
  • W3C Elementos a nivel de bloque (block element). Son aquellos elementos del documento fuente que son tratados visualmente como bloques, es decir, estos elementos siempre se muestran solos en una línea, y cualquier contenido que vaya a continuación empieza en otra línea (existe un salto de línea o retorno de carro). Algunos elementos a nivel de bloque: encabezados (<h1>, <h2>, <h3>, etc.) y párrafos (<p>). Los elementos a nivel de bloque pueden contener otros elementos de bloque, al igual que elementos en línea. Elementos en línea (inline element). Corresponden con aquellos elementos del documento fuente que no forman nuevos bloques de contenido, es decir, son colocados en líneas unos a continuación de otros y únicamente empiezan una línea nueva cuando se ha terminado la anterior. Algunos elementos en línea: texto enfatizado(<em>) y vínculos (<a>) Los elementos en línea únicamente pueden contener a otros elementos en línea. <div> y <span> Los estilos se pueden aplicar a casi cualquier elemento (X)HTML. Pero, si tenemos que aplicar estilo a una sección no definida por un elemento existente, se puede crear dicha sección utilizando las etiquetas <div> o <span>. El elemento <div> se utiliza a nivel de bloque, y <span> como elemento en línea. Si deseamos identificar sólo a ciertos elementos <div> y <span>, en lugar de a todos los presentes en el código, debemos usar los atributos id y class junto a los elementos a los que queremos aplicar las reglas de estilo. Ejemplo: <body> <div id="contenedor"> <p>El gran perro <span class="nombre">Genki</span> saltaba sobre el charco mientras llovía...</p> </div> </body> 4.5 Selectores y sus tipos Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 15 de 75
  • W3C Recordemos que un selector es la parte de la regla que establece a qué elemento se aplica el estilo. Selector universal Existe un selector universal, escrito con el carácter comodín asterisco "*", y se corresponde con cualquier tipo de elemento al que se le puede aplicar una regla de estilo. Si el selector universal no es el único componente, el asterisco puede omitirse. Por ejemplo: *.estilo y .estilo son equivalentes Selectores de tipos y agrupamiento Un selector de tipo se corresponde con el nombre de un elemento en el lenguaje estructural del documento. Habitualmente el selector es un único elemento, aunque también puede agruparse con otros elementos separados por comas, con lo que conseguimos aplicar estilos comunes a varios elementos en una única declaración. Ejemplo: h1 { color: red; } h2 { color: red; } h3 { color: red; } Puede agruparse de la siguiente forma: h1, h2, h3 { color: red; } Selectores contextuales CSS nos permite aplicar estilos a un elemento exclusivamente si éste se encuentra en un contexto determinado. Así, por ejemplo, si definimos esta regla: p em { color: #fcc; } Solo aplicará el color descrito a los elementos enfatizados (em) que se encuentran dentro de párrafos (p), ignorando la aplicación de estilos para cualquier otra situación de dicho elemento (em). Selectores hijo Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 16 de 75
  • Veamos la siguiente regla de estilo: p > em { color: #fcc; } En este caso la regla de estilo se aplica a los elementos enfatizados (em) dentro de párrafos (p), pero sólo cuando <em> es hijo de <p> y no en otro caso. Ejemplo: <p>Lorem ipsum <em>dolor</em> sit amet, consectetuer adipiscing elit. <strong><em>Nulla</em></strong> vel nibh.</p> Siguiendo con nuestro ejemplo, sólo “dolor” tendrá el estilo aplicado, puesto que es el único caso en el que el texto enfatizado es hijo del párrafo. Selectores hermanos adyacentes Supongamos: h1 + h2 { margin: 2px; } En este caso la regla de estilo es aplicada sobre <h2> sólo cuando <h1> y <h2> tienen el mismo padre (son hermanos) y, además, <h2> está inmediatamente a continuación de <h1> (adyacente). Selectores de atributo Aun podemos ser más específicos a la hora de aplicar estilos. Tanto que es posible aplicar reglas de estilo dependiendo de los atributos, o sus valores, que contenga un determinado selector. Observemos: img[alt] { border: 1px solid #ccc; } Aplicará el borde gris sólo a las imágenes que contengan un atributo alt, cualquiera que sea el valor del mismo. img[alt=”casa”] { border: 1px solid #ccc; } Aplicará el borde gris únicamente a las imágenes que contengan un atributo Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 17 de 75
  • alt cuyo valor es exactamente “casa”. img[alt~=”casa”] { border: 1px solid #ccc; } Aplicará el borde gris exclusivamente a las imágenes que contengan un atributo alt cuyo valor “casa” coincide con alguno de una lista de palabras separadas por espacios, uno de los cuales es exactamente “casa”. p[lang|=”en”] { color: #ccc; } Esta regla aplica el estilo, color gris, a cualquier elemento lang que empiece por “en” dentro de una lista separada por guiones, comenzando con “en”. Esto está pensado fundamentalmente para permitir equivalencias con el subcódigo del lenguaje. De esta forma, en nuestro ejemplo, el estilo sería aplicado a subcódigos de lenguaje como en, en-uk, en-us, etc. Selectores de clase El selector class es una forma especial de selector de atributo. Dicho atributo puede asociarse a cualquier elemento de XHTML. La forma más simple quedaría como sigue: En el código XHTML: <p class=”aviso”>¡Va a eliminar un archivo!</p> La regla de estilo asociada definida en las CSS: p.aviso { color: #f00; } En este caso, cualquier párrafo con este valor de atributo class tendrá color rojo. También es posible aplicar estilo a todos los elementos que contengan un atributo class=”aviso”, para ello nuestra regla de estilo será la siguiente: .aviso { color: #f00; } Recuerde que esta regla posee el mismo significado que si pusiéramos el selector universal antecediéndola, por esta razón es capaz de afectar a todos los elementos: *.aviso { color: #f00; } Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 18 de 75
  • Habrá observado que en la definición de la regla de estilo, el selector de clase va siempre precedido de un punto (.) El nombre del selector de clase no tiene porqué coincidir con ningún nombre de elemento XHTML, de hecho puede ser cualquier nombre que deseemos. Cuando cree un nombre de clase, hágalo de forma genérica y con sentido, de esta forma evitará que pierdan su significado si cambian los estilos. Por ejemplo, en el caso anterior podríamos haber establecido un nombre de clase como .textorojo, y mantendría su significado: .textorojo { color: #f00; } Pero imagine que, posteriormente, decide aplicar un color amarillo porque queda mejor en su diseño: .textorojo { color: #fc0; } Parece que ahora la coherencia no se mantiene, sin embargo, si mantenemos la elección inicial: .aviso, el significado se mantiene independientemente del estilo que sea aplicado. Los selectores de clase también pueden ser usados para aplicar estilos a subconjuntos de elementos. Veamos un ejemplo. Supongamos que en nuestro código (X)HTML aparecen los siguientes párrafos: <p class=”graficos vectoriales”>Texto</p> <p class=”graficos vectoriales ilustraciones”>Texto</p> <p class=”graficos vectoriales cliparts”>Texto</p> <p class=”programas vectoriales dibujos ilustraciones graficos”>Texto</p> Si declaramos el siguiente estilo: p.graficos { color: #0f0; } Todos los párrafos anteriores tendrán color verde. Si ahora definimos este estilo: p.graficos.vectoriales { color: #0f0; } También aplicaría el color a todos los párrafos de nuestro ejemplo puesto que contienen esos valores. No se aplicaría a párrafos como los que siguen: <p class=”graficos”>Texto</p> <p class=”vectoriales”>Texto</p> Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 19 de 75
  • Dado que no contienen ambos valores (graficos.vectoriales). De igual forma, si usáramos el selector: p.graficos.vectoriales.pintura tampoco aplicaría estilo a ninguno de los párrafos anteriores puesto que ninguna de sus clases incluye el valor pintura Selectores id Este tipo de selector es muy parecido al de clase (class), pero con una importante diferencia. En este caso la regla de estilo asociada a él sólo se puede aplicar una vez en el documento puesto que cada atributo id es único, por tanto reserve su uso para elementos que sólo van a aparecer una vez en su documento. En cuanto a la aplicación, se diferencian de los selectores de clase porque en las declaraciones CSS se usa el carácter almohadilla (#) en lugar de punto (.) antecediendo al nombre del selector. 4.6 Pseudo-clases y pseudo-elementos W3C Las denominadas pseudo-clases hacen referencia a las características predefinidas de los elementos. Los pseudo-elementos tienen que ver con la estructura del documento, pero no están marcados como elementos propiamente dichos. Dicho así puede que le suene como a una definición esotérica, por lo que lo mejor será ver algunos ejemplos. Pseudo-clases Pseudo-clase de primer hijo Esta pseudo-clase coincide con un elemento que es el primer hijo de un elemento padre. Si deseáramos aplicar estilo al primer dentro de un documento HTML, podríamos utilizar la pseudo-clase de primer hijo que sigue: p:first-child { color: #ddd; } Pseudo-clases de vínculo Estas pseudo-clases describen los diferentes estados de un vínculo, de tal forma que es posible aplicar estilo a cada uno por separado. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 20 de 75
  • Podemos distinguir entre las siguientes pseudo-clase de vínculo, veámoslo con un ejemplo: a:link { color: #000; text-decoration: none; } a:visited { color: #000; text-decoration: none; } a:active { color: #000; text-decoration: none; } a:hover { color: #f00; text-decoration: none; } El vínculo puede ser uno común como: <a href=”http://www.qweos.net/”>Enlace a qweos.net</a> Dado que varios de los estados del vínculo pueden darse al mismo tiempo, hay que tener en cuenta el orden en el que se expresan para decidir cuál tiene preferencia. También es posible combinar estas pseudo-clases con otros selectores, como, por ejemplo: Con selectores de clase: a.nuevo:link { color: #f00; } que se expresaría en el código (X)HTML como: <a href=”http://www.qweos.net/” class=”nuevo”>Enlace a qweos.net</a> Con selectores contextuales: a:link img { border:1px solid #ccc; } Pseudo-clases dinámicas En la definición CSS2 corresponden a: :active :hover :focus La diferencia de éstas con respecto a las pseudo-clases de vínculo se encuentra en que estas últimas están pensadas para utilizarse sólo en hipervínculos, mientras que las pseudo-clases dinámicas pueden aplicarse a cualquier elemento; :hover, por ejemplo, tiene su aplicación en ambos casos (pseudo- clase de vínculo y dinámica), digamos que a:hover es un caso específico de aplicación sobre cualquier otro elemento. Actualmente el soporte de las pseudo-clases dinámicas es aun un poco limitado Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 21 de 75
  • en los navegadores, y es probable que sean de gran utilidad en el futuro cuando mejore esta situación. Pseudo-elementos Los pseudo-elementos son similares a la pseudo-clase de primer hijo. Se consideran pseudo-elementos porque su comportamiento es tal que parece q estamos aplicando el estilo a un elemento nuevo, cuando en realidad no lo es. Pseudo-elementos de primera línea Ejemplo: p:first-line { color: blue; } En nuestro ejemplo se aplica un color de texto azul a la primera línea del párrafo. El pseudo-elemento de primera línea tiene un conjunto reducido de propiedades entre las que elegir, como referencia rápida, dichas propiedades son: background clear color font letter-spacing line-height text-decoration text-shadow text-transform vertical-align word-spacing Pseudo-elementos de primera letra Ejemplo: p:first-letter { font-size: 100%; } En este caso aplicará el estilo a la primera letra del párrafo. El pseudo-elemento de primera letra está reducido a las siguientes propiedades: background border clear color float Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 22 de 75
  • font line-height margin padding text-decoration text-shadow text-transform vertical-align 4.7 Comentarios ¡Ah!, casi se me olvidaba, por supuesto, al igual que ocurre con (X)HTML, las CSS también tienen su formato de comentario: /* Esto es un comentario de CSS. Los navegadores no mostrarán nada de lo aquí escrito. Use los comentarios con control */ Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 23 de 75
  • 5 Fundamentos W3C Definiciones Antes de comenzar vamos a definir varios conceptos que se usarán en esta parte del manual: • Hoja de estilo. Un conjunto de condiciones que definen la forma de presentación de un documento. • Hoja de estilo válida. Aquel conjunto de declaraciones de estilo conforme a las especificaciones CSS del W3C. • Autor (Author). Un autor es una persona o programa que escribe o genera documentos (X)HTML y/o CSS. Una herramienta de creación es un caso especial de autor, a saber, un programa que genera dichos documentos. • Usuario (User). Un usuario es una persona que interactúa con un agente de usuario para ver, oír, o usar de cualquier otra manera un documento representado. • Agente de usuario o aplicación de usuario (User Agent). Un agente de usuario es cualquier dispositivo o aplicación que lee y procesa documentos XHTML. Los agentes de usuario incluyen navegadores visuales (de texto o gráficos), navegadores no visuales (audio, Braille), robots de búsqueda, proxies, etc. • Un agente de usuario conforme (conforming user agent) con CSS es el que cumple las condiciones obligatorias ("debe"; requisito obligatorio) establecidas en esta especificación. • Elemento. Hace referencia a las estructuras sintácticas del lenguaje del documento. La mayoría de las reglas de estilo CSS usan el nombre de estos elementos (como <p>, <h1>, etc.) para especificar el contexto de aplicación del estilo. • Hijo. Un elemento A se denomina hijo de un elemento B si, y sólo si, B es el padre de A. • Descendiente. Un elemento A se denomina descendiente de un elemento B si se cumple que: 1. A es hijo de B o 2. A es hijo de algún elemento C que es descendiente de B. • Hermano. Un elemento A se denomina hermano de un elemento B si, y sólo si, B y A comparten el mismo elemento padre. Un elemento A es hermano precedente si aparece antes que B en la estructura del documento. Un elemento A es hermano siguiente si aparece después de B en la estructura del documento. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 24 de 75
  • W3C Fundamentos Para CSS, los conceptos fundamentales, es decir, los pilares que permiten que las cosas funcionen son: • la herencia de estilo. • la cascada de hojas de estilo. • el modelo de caja. Para poder explicar estos conceptos esenciales haremos uso de ejemplos CSS que, aun sin comprender todos los detalles, le permitirán entender su significado básico. Es bastante probable que un elemento tenga asociado más de un estilo. La herencia y la cascada describen cómo se aplican los estilos sin conflictos entre ellos. 5.1 Herencia de estilos (inheritance) La herencia funciona del mismo modo que en XHTML. Existen elementos “padres” que contienen a otros elementos “hijos” que son descendiente del primero. Un “padre” puede tener más de un “hijo”, pero ningún “hijo” tendrá más de un “padre”. Algunos valores de estilo son heredados por los hijos de un elemento en la estructura del documento. Cada propiedad define si se hereda o no. También es posible forzar la herencia a través del valor inherit. Suponga que hay un elemento h1 con un elemento enfatizado (em) dentro: Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 25 de 75
  • <h1>El título es <em>importante</em></h1> Si no se ha asignado ningún color al elemento <em>, el énfasis en "importante" heredará el color del elemento padre. Por ejemplo, si h1 tiene un color azul, el elemento <em> será también azul. Para poner una propiedad de estilo "predeterminada" en un documento, los autores pueden especificar la propiedad en la raíz de la estructura del documento. Los elementos <html> o <body> pueden servir para esta función. La herencia Aunque suene a título de novela de intriga, a menudo la característica de la herencia CSS puede representar algunos problemas: • Por una parte, los navegadores clasificados como “recientes” y anteriores (vea la página 8), es decir, los pertenecientes a la época cuando la capacidad de admitir estándares no era una prioridad, ignoran la herencia y también las reglas aplicadas al elemento <body> por lo que no nos podemos confiar en que siempre se va a cumplir la característica de herencia. • Por la otra, imagine que, dado el caso, los elementos hijos heredan los estilos del elemento padre. ¿Y si no queremos que esto ocurra? Sencillo, bastará con crear una regla más específica para el elemento hijo. body { font-family: Times, “Times New Roman”, serif; } p { font-family: Arial, Helvetica, sans-serif; } En este ejemplo la fuente determinada para todo el documento es una Times, <p> heredará este estilo. Para evitarlo creamos una regla específica para dicho elemento. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 26 de 75
  • 5.2 Cascada (cascading) Las hojas de estilo pueden tener tres orígenes diferentes: el autor, el usuario y la aplicación del usuario. • Autor: el autor especifica las hojas de estilo para un documento fuente de acuerdo a las convenciones del lenguaje del documento. Por ejemplo, en (X)HTML, las hojas de estilo pueden incluirse en el propio documento o vincularse externamente. • Usuario: el usuario puede especificar información de estilo para un documento particular. Por ejemplo, el usuario puede especificar un archivo que contenga una hoja de estilo o la aplicación del usuario puede proporcionar una interfaz que genere una hoja de estilo del usuario (o comportarse como si lo hubiese hecho). • Aplicaciones de usuario: las aplicaciones del usuario con conformidad deben aplicar una hoja de estilo predeterminada, previa a todas las hojas de estilo definidas para un documento. La hoja de estilo predeterminada debe presentar los elementos del lenguaje de documento de un modo que satisfaga las expectativas generales de presentación de dicho lenguaje. Cualquier propiedad que no sea modificada por el autor o el usuario, mantendrá el estilo por defecto de la aplicación de usuario. Por ejemplo, en los navegadores visuales, el elemento <em> en HTML es presentado usando una fuente itálica. Las hojas de estilo con estos tres orígenes se superpondrán en su acción e interactuarán de acuerdo a la cascada. La cascada CSS, asigna un “peso” (valor) determinado a cada regla de estilo. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 27 de 75
  • Cuando varias reglas se aplican, la de mayor “fuerza” toma preferencia. De forma predefinida, las reglas en las hojas de estilo del autor tienen más importancia que las reglas en las hojas de estilo del usuario. Esta preponderancia se invierte, sin embargo, con la reglas "!important". Todas las reglas que el usuario y el autor especifican tienen mayor importancia que las reglas de la hoja de estilo predeterminada por la aplicación de usuario. Las hojas de estilo importadas también forman la cascada y su “peso” depende del orden en la importación. 5.3 Modelo de caja (box model) El modelo de caja de CSS describe las cajas rectangulares que son generadas por los elementos en la estructura del documento y compuestas de acuerdo al modelo de formato visual. Aclarando, es una herramienta visual de presentación. En CSS, se puede crear una caja rectangular alrededor de cualquier contenido de un documento. Toda caja tiene una serie de propiedades que pueden ser controladas con la hoja de estilo. estas propiedades son: • el relleno (padding) • el borde (border) • el margen (margin) El siguiente diagrama ilustra las cuatro áreas de la caja genérica de CSS: contenido, padding, border y margin alrededor de un contenido. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 28 de 75
  • El perímetro de cada una de las cuatro áreas (contenido, padding, border y margin) es denominado "límite", de manera que cada caja tiene cuatro límites: • límite del contenido o límite interno. El límite del contenido rodea al contenido procesado del elemento. • límite de relleno. El límite de padding (relleno) rodea a la caja de relleno. Si el relleno tiene un ancho de 0, el límite del relleno es el mismo que el límite de contenido. • límite de borde. El límite de border (borde) rodea el borde de la caja. Si el borde tiene un ancho de 0, el límite del borde es el mismo que el Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 29 de 75
  • límite del relleno (padding). • límite de margen o límite externo. El límite de margin (margen) rodea el margen de la caja. Si el margen tiene un ancho de 0, el límite del margen es el mismo que el límite del borde (border). Cada límite puede dividirse en límite izquierdo, derecho, superior e inferior. Unos detalles importantes Siempre que las cajas se dispongan verticalmente en el flujo normal del documento, los márgenes superior e inferior se superponen (según el W3C: “entran el colisión”). Por tanto, la distancia entre los bordes no es la suma de ambos márgenes, sino sólo el tamaño del margen mayor. Los márgenes que se tocan en los lados izquierdo y derecho no entran en colisión. En este caso, tal y como era de esperar, la distancia entre bordes es la sumatoria de los márgenes adyacentes. Debemos mencionar que Internet Explorer 5 (Win) interpreta el Modelo de caja de forma incorrecta. Contrariamente a la norma estándar CSS 2, este navegador incluye el grosor del borde y del relleno en la medida del ancho de un determinado elemento. Existen varias formas de corregir esto, como el Box Model Hack (http://tantek.com/CSS/Examples/), pero quizás resultará más sencillo afrontar el problema aplicando el padding y border al elemento padre en lugar de al elemento hijo que necesita el ancho fijo. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 30 de 75
  • 6 ¿Dónde? 6.1 ¿Dónde se pueden definir los estilos CSS? Dentro del elemento HTML (inline CSS) El estilo puede ser definido dentro de la etiqueta HTML apropiada. Este tipo de definición de estilo se denomina en línea puesto que se coloca en la misma línea del código al que se quiere aplicar el estilo. Para ello se define un atributo style con una serie de valores de estilo. Este atributo puede aplicarse a casi cualquier elemento HTML. <h1 style=”color: blue; text-transform: uppercase;”>Un encabezado en mayúsculas</h1> Dentro del documento HTML (embedded CSS) El estilo puede, también, ser definido dentro del encabezado <head> del documento HTML. Este tipo de definición, aunque no el idóneo, es quizás uno de los más usados, sobre todo por los que comienzan a aprender técnicas de diseño con CSS. ... <head> <style type="text/css"> <!-- h1 { color: blue; text-transform: uppercase; } --> </style> Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 31 de 75
  • </head> ... Los comentarios HTML (<!-- -->) se colocan entre el comienzo y final de <style> para evitar que los navegadores antiguos, sin soporte de CSS, interpreten las reglas de estilo como contenido y lo muestren en pantalla. Los navegadores con capacidades CSS ignoran esos comentarios e interpretan las reglas de estilo. Observe que la sintaxis coloca a cada regla indexada en una nueva línea y se separa del selector. Esto no es, estrictamente hablando, necesario, pero es un buen método para hacer legible nuestro código, mejorando la futura edición del mismo. Estilos externos (external CSS) Finalmente, se pueden definir los estilos en un documento completamente aparte de la página Web (documento HTML). Este documento separado, con extensión .css, puede enlazarse incluyendo la etiqueta <link> dentro del encabezado <head> del documento HTML al que se le quiere aplicar los estilos. ... <head> <link href="css/estilo.css" rel="stylesheet" type="text/css" /> </head> ... Esta es la forma preferida, y más profesional, de definición por varios motivos: • Con un archivo CSS externo se puede aplicar estilos a muchas páginas de Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 32 de 75
  • nuestro sitio simplemente enlazándolas con el mismo. • Si hacemos alguna modificación en el archivo CSS, automáticamente se produce el cambio en todos los documentos HTML enlazados. • Tenemos un único punto de definición de estilos, mejorando de esta forma el mantenimiento y edición de los mismos. • Mejoramos la carga de las páginas Web al eliminar las partes de código referentes a los estilos que antes estaban dentro de los documentos HTML, logrando separar la estructura de la presentación. • Al ser un documento único y separado, el archivo CSS externo no necesita ser descargado por el navegador cada vez que se carga una nueva página HTML que enlaza con él, mejorando, de esta forma, el rendimiento. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 33 de 75
  • 7 Propiedades CSS 7.1 Propiedades del texto Las propiedades del texto definen su apariencia color Especifica el color de un texto Valores Descripción Ejemplo #rrggbb Valor hexadecimal p { color: #003399; } #rgb Hexadecimal reducido p { color: #039; } Valores decimales RGB (0- p { color: rgb(rrr%,ggg%,bbb%) 100%) rgb(10%,23%,66%); } p { color: rgb(0,51,153); rgb(rrr,ggg,bbb) Valores decimales RGB (0-255) } nombre Nombres de colores permitidos p { color: blue; } Valor inicial Aplicado a Herencia Depende de la aplicación del Todos los elementos Si usuario Porcentaje Medios Compatibilidad Visuales NS 7, IE 6, MZ 1.7, OP 7.2 direction Establece la dirección de un elemento Valores Descripción Ejemplo Dirección de izquierda a ltr p { direction: ltr; } derecha (Left-To-Right) Dirección de derecha a rtl p.hebreo { direction: rtl; } izquierda (Right-To-Left). Valor inicial Aplicado a Herencia ltr Todos los elementos* Si Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 letter-spacing Incrementa o disminuye el espacio entre caracteres Valores Descripción Ejemplo El espaciado es el normal de la normal p { letter-spacing: normal; } fuente actual Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 34 de 75
  • Espacio entre caracteres p { letter-spacing: 0.3em; } longitud además del espacio p { letter-spacing: 2px; } predeterminado p { letter-spacing: -0.4ex; } Valor inicial Aplicado a Herencia normal Todos los elementos Si Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 text-align Alinea el texto de un elemento Valores Descripción Ejemplo left Alinea el texto a la izquierda p { text-align: left; } right Alinea el texto a la derecha p { text-align: right; } center Centra el texto p { text-align: center; } Justifica el texto a ambos justify p { text-align: justify; } márgenes Valor inicial Aplicado a Herencia Depende de la aplicación del usuario y la dirección de Elementos a nivel de bloque Si escritura. Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 text-decoration Añade elementos decorativos al texto Valores Descripción Ejemplo none No añade decoración al texto p { text-decoration: none; } p { text-decoration: underline El texto es subrayado underline; } El texto tiene una línea p { text-decoration: overline; overline encima } El texto parpadea. La aplicación de usuario blink p { text-decoration: blink; } conforme no está obligada a soportarlo. El texto tiene una línea por el p { text-decoration: line- line-through medio through; } Valor inicial Aplicado a Herencia none Todos los elementos No Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 35 de 75
  • text-indent Especifica la sangría de la primera línea de texto Valores Descripción Ejemplo El sangrado tiene una medida longitud p { text-indent: -25px; } fija Es un porcentaje del ancho del p { text-indent: 3em; } % bloque de contención p { text-indent: 50%; } Valor inicial Aplicado a Herencia Los elementos a nivel de 0 Si bloque Porcentaje Medios Compatibilidad Se refieren al ancho del Visuales NS 7, IE 6, MZ 1.7, OP 7.2 bloque de contención text-shadow Texto con sombra Valores Descripción Ejemplo none No se aplica sombra p { text-shadow: none; } Cualquier valor de color color p { text-shadow: #f00; } permitido Distancias para el eje X, eje Y p { text-shadow: 0.5em -2cm 3ex; } longitud longitud longitud y el radio de desenfoque p { text-shadow: 0.5em 0.4em respectivamente 2px yellow;} Valor inicial Aplicado a Herencia none Todos los elementos No Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 text-transform Controla el cambio entre minúsculas y mayúsculas Valores Descripción Ejemplo Ningún efecto de cambio entre none p { text-transform: none; } mayúsculas y minúsculas Primer carácter de la palabra p { text-transform: capitalize en mayúscula capitalize; } Todos los caracteres de la p { text-transform: uppercase; uppercase palabra en mayúsculas } Todos los caracteres de la p { text-transform: lowercase; lowercase palabra en minúsculas } Valor inicial Aplicado a Herencia Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 36 de 75
  • none Todos los elementos Si Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 unicode-bidi Controla la dirección del texto Valores Descripción Ejemplo Previene el comienzo de un normal nuevo nivel incrustado de p { unicote-bidi: normal; } Unicode bidireccional Crea el comienzo de un nuevo p.hebreo {direction: rtl; embed nivel incrustado de Unicode unicode-bidi: embed} bidireccional Los caracteres son bidi-override estrictamente ordenados de acuerdo a la dirección Valor inicial Aplicado a Herencia normal Todos los elementos* No Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 white-space Declara cómo son tratados los espacios en blanco Valores Descripción Ejemplo Cualquier espacio en blanco normal entre elementos se considera p { white-space: normal; } como un espacio simple Se muestran múltiples espacios y retornos de carro. El ajuste de palabras se pre desactiva y las líneas sólo se p { white-space: pre; } rompen cuando hay una nueva línea de caracteres en el código fuente Cualquier secuencia de espacios en blanco se convierte en espacio simple. El nowrap ajuste de línea se desactiva. p { white-space: nowrap; } Cuando hay una nueva línea de caracteres en el código fuente es ignorada. Valor inicial Aplicado a Herencia normal Elementos a nivel de bloque Si Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 37 de 75
  • word-spacing Incrementa o disminuye el espacio entre palabras Valores Descripción Ejemplo El espacio por defecto entre normal palabras no cambia. Equivale a p { word-spacing: normal; } poner un valor de longitud a 0. p { word-spacing: 1px; } Especifica un valor entre longitud p { word-spacing: 0.4em; } palabras p { word-spacing: -0.5ex; } Valor inicial Aplicado a Herencia normal Todos los elementos Si Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 38 de 75
  • 7.2 Propiedades de las fuentes Las propiedades de las fuentes definen las características de las fuentes tipográficas font Propiedad agrupada para las propiedades de fuentes Valores Descripción Ejemplo font-size line-height p { font: bold italic small- caps 150% sans-serif; } font-family pre { font: 1em Courier, Ver propiedades individuales “Courier New”, monospace; } font-style p { font: 80% serif; } font-variant font-weight Los siguientes valores se refieren a las fuentes del sistema: La fuente usada en los títulos caption de los controles (botones, caption { font: caption; } cajas, etc.) La fuente usada para rotular icon .icono { font: icon; } los íconos menu La fuente usada en los menúes ul.menu { font: menu; } La fuente usada en las cajas message-box .dialog { font: message-box; } de diálogo La fuente usada para rotular .control { font: small- small-caption controles pequeños caption; } La fuente usada en la barra de status-bar .barra { font: status-bar; } estado de las ventanas Valor inicial Aplicado a Herencia No definido en la propiedad Todos los elementos Si agrupada Porcentaje Medios Compatibilidad Admitido en font-size y line-height. Referido al Visuales NS 7, IE 6, MZ 1.7, OP 7.2 elemento padre Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 39 de 75
  • font-family Lista de familias tipográficas o nombres de fuentes Valores Descripción Ejemplo Especifica nombre de fuentes. h1 { font-family: Helvetica, Si nombre contiene espacios Arial, Verdana; } deberá ir entrecomillado. p { font-family: “Qweos Técnicamente si el nombre no nombre de fuente Light”; } contiene espacios puede entrecomillarse pero esto Combinando: puede confundir a algunos p { font-family: Times, “Times agentes de usuario. New Roman”, serif; } Hay cinco familias definidas: serif, sans-serif, p { font-family: serif; } monospace, cursive y p { font-family: monospace; } fantasy. Nunca se familia tipográfica entrecomillan. fantasy Combinando: engloba a cualquier fuente h1 { font-family: Helvetica, que no encaja en las otras Arial, Verdana, sans-serif; } familias. Valor inicial Aplicado a Herencia Depende de la aplicación de Todos los elementos Si usuario Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 font-size Establece el tamaño de una fuente Valores Descripción Ejemplo En todos los casos el tamaño exacto no está definido por las CSS Disminuye el tamaño respecto xx-small p { font-size: xx-small; } a x-small. Disminuye el tamaño respecto x-small p { font-size: x-small; } a small. Disminuye el tamaño respecto small p { font-size: small; } a medium. Es más pequeño que large y medium p { font-size: medium; } mayor que small. Agranda el tamaño respecto a large p { font-size: large; } medium. Agranda el tamaño respecto a x-large p { font-size: x-large; } large. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 40 de 75
  • Agranda el tamaño respecto a xx-large p { font-size: xx-large; } x-large. Disminuye el tamaño del texto smaller p { font-size: smaller; } respecto al elemento padre Aumenta el tamaño del texto larger p { font-size: larger; } respecto al elemento padre Cualquier valor de longitud p { font-size: 12px; } longitud permitido p { font-size: 0.70em; } Tamaño relativo al del % p { font-size: 75%; } elemento padre Valor inicial Aplicado a Herencia medium Todos los elementos Si Porcentaje Medios Compatibilidad Referido al tamaño de fuente Visuales NS 7, IE 6, MZ 1.7, OP 7.2 del elemento padre font-size-adjust Ajusta la legibilidad entre varias fuentes Valores Descripción Ejemplo none No hace ajustes de tamaño p { font-size-adjust: none; } h1 { font-family: Verdana, número Valor de ajuste de aspecto sans-serif; font-size-adjust: 0.58; } Valor inicial Aplicado a Herencia none Todos los elementos Si Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 font-stretch Comprime o expande la fuente Valores Descripción Ejemplo Se muestran, a continuación, en orden de más comprimido a menos. CSS no especifica cómo se realiza la compresión o expansión de los caracteres. En la práctica esta propiedad es raramente usada. Los caracteres del texto están p { font-stretch: ultra- ultra-condensed extremadamente condensed; } comprimidos. Su valor es más Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 41 de 75
  • comprimido que extra- condensed Los caracteres del texto están significativamente p { font-stretch: extra- extra-condensed comprimidos. Su valor es más condensed; } comprimido que condensed Los caracteres del texto están condensed comprimidos, más que en p { font-stretch: condensed; } semi-condensed Los caracteres del texto están p { font-stretch: semi- semi-condensed ligeramente comprimidos, más condensed; } que en normal Los caracteres del testo se normal p { font-stretch: normal; } muestran en el ancho normal Los caracteres del texto están p { font-stretch: semi- semi-expanded ligeramente expandidos, más expanded; } que en normal Los caracteres del texto están expanded expandidos, más que en p { font-stretch: expanded; } semi-expanded Los caracteres del texto están significativamente expandidos. p { font-stretch: extra- extra-expanded Su valor es mayor que expanded; } expanded Los caracteres del texto están extremadamente expandidos. p { font-stretch: ultra- ultra-expanded Su valor es mayor que extra- expanded; } condensed Los caracteres estarán más wider expandidos que su elemento p { font-stretch: wider; } padre Los caracteres estarán más narrower comprimidos que su elemento p { font-stretch: narrower; } padre Valor inicial Aplicado a Herencia normal Todos los elementos Si Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 font-style Establece el estilo de una fuente Valores Descripción Ejemplo Indica un estilo de fuente blockquote em { font-style: normal clasificado como “normal” por normal; } la aplicación de usuario Especifica una fuente clasificada como ”italic” por la blockquote { font-style: italic AU o, si esa no está disponible, italic; } una definida como “oblique”. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 42 de 75
  • Las fuentes que incluyan en sus nombres las expresiones Italic, Cursive o Kursiv serán típicamente definidas como “italic”. Indica un estilo de fuente clasificado como “oblique” por la aplicación de usuario. as fuentes que incluyan en sus oblique h1 { font-style: oblique; } nombres las expresiones como Oblique, Slanted o Incline serán típicamente definidas como “oblique” por la AU Valor inicial Aplicado a Herencia normal Todos los elementos Si Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 font-variant Muestra el texto en versalitas o de forma normal. Valores Descripción Ejemplo normal Muestra una fuente normal p { font-variant: normal; } Transforma la fuente en versales o versalitas. Los signos para las letras p { font-variant: small-caps; small-caps minúsculas son iguales a las } mayúsculas, pero en un tamaño menor y con proporciones algo diferentes. Valor inicial Aplicado a Herencia normal Todos los elementos Si Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 font-weight Establece el grosor de una fuente Valores Descripción Ejemplo 100 200 Estos valores forman un 300 secuencia progresiva, donde 400 cada número indica un grosor h1 { font-weight: 900; } 500 600 que es al menos tan fuerte 700 como su predecesor 800 Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 43 de 75
  • 900 normal Equivale al valor 400 p { font-weight: normal; } bold Equivale al valor 700 p { font-weight: bold; } Aumenta el grosor respecto al bolder p { font-weight: bolder; } elemento padre Disminuye el grosor respecto lighter p { font-weight: lighter; } al elemento padre Valor inicial Aplicado a Herencia normal Todos los elementos Si Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 44 de 75
  • 7.3 Propiedades del margen Las propiedades del margen especifican el espacio alrededor de un elemento margin Propiedad agrupada para las propiedades de margen Valores Descripción Ejemplo En cualquiera de los casos: • Si hay sólo un valor, se aplica a todos los lados. • Si hay dos valores, los márgenes superior e inferior son determinados por el primer valor y los márgenes derecho e izquierdo son determinados por el segundo. • Si hay tres valores, el superior es definido por el primer valor, el izquierdo y el derecho son definidos por el segundo, y el inferior es definido por el tercero. • Si hay cuatro valores, ellos se aplican al superior, derecho, inferior e izquierdo, respectivamente. margin-top margin-bottom img { margin: 10px; } Ver propiedades individuales h1 { margin: 1.2em 0 3% 0.5em; margin-left } margin-right Valor inicial Aplicado a Herencia No definido en la propiedad Todos los elementos No agrupada Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención margin-top Establece el margen superior de un elemento Valores Descripción Ejemplo Tiene diferentes efectos según la situación. Para elementos auto flotantes, elementos a nivel h4 { margin-top: auto; } de bloque y a nivel de línea es equivalente a 0 Cualquier valor de longitud longitud table { margin-top: 12px; } admitido El ancho del margen es calculado respecto a al ancho % img { margin-top: 4%; } del bloque del elemento contenedor Valor inicial Aplicado a Herencia Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 45 de 75
  • 0 Todos los elementos No Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención margin-bottom Establece el margen inferior de un elemento Valores Descripción Ejemplo Tiene diferentes efectos según la situación. Para elementos auto flotantes, elementos a nivel h4 { margin-bottom: auto; } de bloque y a nivel de línea es equivalente a 0 Cualquier valor de longitud longitud table { margin-bottom: 12px; } admitido El ancho del margen es calculado respecto a al ancho % img { margin-bottom: 4%; } del bloque del elemento contenedor Valor inicial Aplicado a Herencia 0 Todos los elementos No Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención margin-left Establece el margen izquierdo de un elemento Valores Descripción Ejemplo Tiene diferentes efectos según la situación. Para elementos auto flotantes, elementos a nivel h4 { margin-left: auto; } de bloque y a nivel de línea es equivalente a 0 Cualquier valor de longitud longitud table { margin-left: 12px; } admitido El ancho del margen es calculado respecto a al ancho % img { margin-left: 4%; } del bloque del elemento contenedor Valor inicial Aplicado a Herencia 0 Todos los elementos No Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 46 de 75
  • de contención margin-right Establece el margen derecho de un elemento Valores Descripción Ejemplo Tiene diferentes efectos según la situación. Para elementos auto flotantes, elementos a nivel h4 { margin-right: auto; } de bloque y a nivel de línea es equivalente a 0 Cualquier valor de longitud longitud table { margin-right: 12px; } admitido El ancho del margen es calculado respecto a al ancho % img { margin-right: 4%; } del bloque del elemento contenedor Valor inicial Aplicado a Herencia 0 Todos los elementos No Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 47 de 75
  • 7.4 Propiedades del relleno (padding) Las propiedades del relleno definen el espacio entre el contenido y el borde de un elemento padding Propiedad agrupada para las propiedades de relleno Valores Descripción Ejemplo En cualquiera de los casos: • Si hay sólo un valor, se aplica a todos los lados. • Si hay dos valores, los rellenos superior e inferior son determinados por el primer valor y los rellenos derecho e izquierdo son determinados por el segundo. • Si hay tres valores, el superior es definido por el primer valor, el izquierdo y el derecho son definidos por el segundo, y el inferior es definido por el tercero. • Si hay cuatro valores, ellos se aplican al superior, derecho, inferior e izquierdo, respectivamente. • No admite valores negativos. padding-top img { padding: 10px; } padding-bottom h1 { padding: 1.2em 0 3% Ver propiedades individuales 0.5em; } padding-left p { padding: 10px 15px; } padding-right Valor inicial Aplicado a Herencia No definido en la propiedad Todos los elementos No agrupada Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención padding-top Establece el relleno superior de un elemento Valores Descripción Ejemplo Cualquier valor de longitud longitud p { padding-top: 12px; } admitido El ancho del relleno es calculado respecto a al ancho % ul { padding-top: 4%; } del bloque del elemento contenedor Valor inicial Aplicado a Herencia 0 Todos los elementos No Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 48 de 75
  • padding-bottom Establece el relleno inferior de un elemento Valores Descripción Ejemplo Cualquier valor de longitud longitud ol { padding-bottom: 12px; } admitido El ancho del relleno es calculado respecto a al ancho % img { padding-bottom: 4%; } del bloque del elemento contenedor Valor inicial Aplicado a Herencia 0 Todos los elementos No Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención padding-left Establece el relleno izquierdo de un elemento Valores Descripción Ejemplo Cualquier valor de longitud longitud p { padding-left: 12px; } admitido El ancho del relleno es calculado respecto a al ancho % li { padding-left: 15%; } del bloque del elemento contenedor Valor inicial Aplicado a Herencia 0 Todos los elementos No Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención padding-right Establece el relleno derecho de un elemento Valores Descripción Ejemplo Cualquier valor de longitud longitud p { padding-right: 12px; } admitido El ancho del relleno es calculado respecto a al ancho % h5 { padding-right: 4%; } del bloque del elemento contenedor Valor inicial Aplicado a Herencia 0 Todos los elementos No Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 49 de 75
  • Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 50 de 75
  • 7.5 Propiedades de los bordes Estas propiedades definen los bordes alrededor de un elemento border Propiedad agrupada para las propiedades de borde Valores Descripción Ejemplo En cualquiera de los casos: • Si hay sólo un valor, se aplica a todos los lados. • Si hay dos valores, los bordes superior e inferior son determinados por el primer valor y los bordes derecho e izquierdo son determinados por el segundo. • Si hay tres valores, el superior es definido por el primer valor, el izquierdo y el derecho son definidos por el segundo, y el inferior es definido por el tercero. • Si hay cuatro valores, ellos se aplican al superior, derecho, inferior e izquierdo, respectivamente. • El valor del ancho del borde no puede ser negativo. border-width img { border: 2px solid #f00; } border-style Ver propiedades individuales p { border: 0.2em double red; } border-color Valor inicial Aplicado a Herencia No definido en la propiedad Todos los elementos No agrupada Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 border-width Propiedad agrupada que establece el ancho del borde Valores Descripción Ejemplo Un borde más fino que el establecido como medium. El thin p { border-width: thin; } valor exacto no está definido por las CSS. Un borde cuyo grosor es menor que el de thick y menor que medium p { border-width: medium; } el de thin. El valor exacto no está definido por las CSS. Un borde más grueso que el establecido como medium. El thick p { border-width: thick; } valor exacto no está definido por las CSS. Cualquier valor de longitud longitud p { border-width: 12px; } permitido. No negativo. Valor inicial Aplicado a Herencia Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 51 de 75
  • No definido en la propiedad Todos los elementos No agrupada Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 border-style Propiedad agrupada que establece el estilo del borde Valores Descripción Ejemplo none No dibuja borde p { border-style: none; } Similar a none, excepto en términos de resolución de conflictos de bordes para las hidden p { border-style: hidden; } tablas donde se renderiza con el modelo collapsed- border Dibuja un borde con una serie dotted p { border-style: dotted; } de puntos El borde es una serie de dashed p { border-style: dashed; } pequeños segmentos de línea solid El borde es una línea p { border-style: solid; } double El borde es una línea doble p { border-style: double; } El borde aparece como si groove p { border-style: groove; } estuviese tallado en el lienzo Lo opuesto a groove, el ridge borde parece que estuviera p { border-style: ridge; } sobresaliendo del lienzo El borde hace que toda la caja inset parezca como si estuviera p { border-style: inset; } embutida en el lienzo Lo opuesto a inset, el borde outset hace que toda la caja parezca p { border-style: outset; } sobresalir del lienzo Valor inicial Aplicado a Herencia No definido en la propiedad Todos los elementos No agrupada Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 border-width, border-style y border-color pueden ser aplicados a cada uno de los bordes por separado, obteniendo, en cada caso: Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 52 de 75
  • Borde inferior Borde izquierdo border-bottom-width border-left-width border-bottom-style border-left-style border-bottom-color border-left-color Borde superior Borde derecho border-top-width border-right-width border-top-style border-right-style border-top-color border-right-color Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 53 de 75
  • 7.6 Propiedades del fondo Estas propiedades definen cómo se muestran los efectos del fondo de un elemento background Propiedad agrupada para las propiedades de fondo Valores Descripción Ejemplo background-color body { background: #f00; } background-image body { background: url(qweos.gif) no-repeat top; background-repeat Ver propiedades individuales } body { background: #0ff background-attachment url(qweos.gif) no-repeat fixed top; } background-position Valor inicial Aplicado a Herencia No definido en la propiedad Todos los elementos No agrupada Porcentaje Medios Compatibilidad Permitidos en background- Visuales NS 7, IE 6, MZ 1.7, OP 7.2 position background-color Establece el color de fondo de un elemento Valores Descripción Ejemplo body { background-color: color-rgb Valor RGB rgb(0,51,153); } p { background-color: #ffff00; color-hexadecimal Valor hexadecimal } body { background-color: blue; color-nombre Nombres de colores permitidos } El color de fondo es body { background-color: transparent * transparente transparent; } Valor inicial Aplicado a Herencia transparent Todos los elementos No Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 * en muchas ocasiones Netscape 4 interpreta transparent como negro. Dado que el valor transparent es el predeterminado, ya sea indicado de forma explícita o no, si deseamos Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 54 de 75
  • mantener cierta compatibilidad con usuarios de NS4 tendremos que evitar esta declaración. Aunque, en este caso, probablemente el servicio de validación del W3C le advertirá de que no ha fijado un fondo para el elemento. background-attachment Establece si el fondo se desplaza o no con la página Valores Descripción Ejemplo body { background-image: La imagen de fondo se scroll url(qweos.gif); background- desplaza junto con la página attachment: scroll; } body { background-image: La imagen de fondo url(img/qweos.png); fixed permanece fija background-attachment: fixed; } Valor inicial Aplicado a Herencia scroll Todos los elementos No Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 background-image Establece una imagen de fondo Valores Descripción Ejemplo body { background-image: url Ruta hasta la imagen url(img/qweos.png); } none No existe imagen de fondo p { background-image: none; } Valor inicial Aplicado a Herencia none Todos los elementos No Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 background-position Establece la posición de comienzo de una imagen de fondo Valores Descripción Ejemplo Para todos los casos: • Si sólo se especifica una palabra clave, el segundo valor será center. • Si solamente se da un valor de porcentaje o de medida, éste determina sólo la posición horizontal, la posición vertical será 50%. • Si se dan dos valores, la posición horizontal va primero. • La combinación de valores de medida y de porcentajes está permitida (ej., '50% 2cm'). • Las posiciones negativas están permitidas. • Las palabras clave no pueden ser combinadas con valores de porcentaje o de medida (todas las combinaciones posibles que se muestran a continuación). top left body { background-position: (left top) Igual a 0% 0% left top; } Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 55 de 75
  • top center body { background-position: (center top) Igual a 50% 0% center top; } body { background-position: top right Igual a 100% 0% top right; } center left body { background-position: (left center) Igual a 0% 50% left center; } body { background-position: center center Igual a 50% 50% center center; } center right body { background-position: (right center) Igual a 100% 50% center right; } bottom left body { background-position: (left bottom) Igual a 0% 100% bottom left; } bottom center (bottom body { background-position: center) Igual a 50% 100% bottom center; } bottom right body { background-position: (right bottom) Igual a 100% 100% bottom right; } El primer valor corresponde a la posición horizontal y el body { background-position: 0% x-% y-% segundo con el vertical. La 0%; } esquina right bottom es 100% 100% El primer valor corresponde a la posición horizontal y el segundo con el vertical. La body { background-position: x-pos y-pos esquina top left es 0 0 0px 10px; } (0px 0px o cualquier unidad permitida) Valor inicial Aplicado a Herencia Elementos reemplazados y a 0% 0% No nivel de bloque Porcentaje Medios Compatibilidad Referidos al tamaño de la Visuales NS 7, IE 6, MZ 1.7, OP 7.2 propia caja background-repeat Establece si (y cómo) se repite una imagen de fondo Valores Descripción Ejemplo La imagen de fondo se body { background-image: repetirá vertical y repeat url(qweos.gif); background- horizontalmente (teselado o repeat: repeat; } mosaico) body { background-image: La imagen de fondo se repeat-x url(qweos.gif); background- repetirá horizontalmente repeat: repeat-x; } Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 56 de 75
  • body { background-image: La imagen de fondo se repeat-y url(qweos.gif); background- repetirá verticalmente repeat: repeat-y; } body { background-image: La imagen de fondo no se no-repeat url(qweos.gif); background- repetirá repeat: no-repeat; } Valor inicial Aplicado a Herencia repeat Todos los elementos No Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 57 de 75
  • 7.7 Propiedades de las listas Las propiedades de las listas nos permiten cambiar los tipos de marcadores (viñetas) de los elementos de las listas, insertar una imagen como marca para una lista y controlar su posición list-style Propiedad agrupada para las propiedades de lista Valores Descripción Ejemplo list-style-type ul {list-style: disc outside; } list-style-position Ver propiedades individuales ol {list-style: decimal inside; } list-style-image Valor inicial Aplicado a Herencia No definido en la propiedad Elementos con Si agrupada display: list-item Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 list-style-image Establece una imagen como símbolo de de una lista Valores Descripción Ejemplo No se mostrará ninguna none ul {list-style-image: none; } imagen como marca ol {list-style-image: url Ruta hasta la imagen url(imagenes/qweos.png); } Valor inicial Aplicado a Herencia Elementos con none Si display: list-item Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 list-style-position Coloca el símbolo de cada elemento de una lista Valores Descripción Ejemplo Agrupa el símbolo (o marca) ul {list-style-position: inside de la lista y el contenido de la inside; } misma Mantiene el símbolo a la ol {list-style-position: outside izquierda del contenido del outside; } elemento de la lista Valor inicial Aplicado a Herencia Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 58 de 75
  • Elementos con outside Si display: list-item Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 list-style-type Establece el tipo de símbolo de cada elemento de una lista Valores Descripción Ejemplo En general: • el procesado exacto depende de la aplicación del usuario. • CSS 2 no especifica el mecanismo exacto de cada sistema numérico. • una aplicación del usuario que no reconoce un sistema numérico debe usar decimal none No muestra ningún símbolo ul {list-style-type: none; } disc Muestra un círculo sólido ul {list-style-type: disc; } circle Muestra un círculo ul {list-style-type: circle; } square Muestra un cuadrado ul {list-style-type: square; } Números decimales, ul {list-style-type: decimal; decimal comenzando desde 1 (1, 2, 3, } 4, etc.) Números decimales, ul {list-style-type: decimal- decimal-leading-zero comenzando desde 01 (01, 02, leading-zero; } 03, 04, etc.) Números romanos en ul {list-style-type: lower- lower-roman minúsculas (i, ii, iii, iv, v, roman; } etc.) Números romanos en ul {list-style-type: upper- upper-roman mayúsculas (I, II, III, IV, V, roman; } etc.) lower-alpha / lower- Alfabético en minúsculas (a, ul {list-style-type: lower- latin b, c, d, e, etc.) alpha; } upper-alpha / upper- Alfabético en mayúsculas (A, ul {list-style-type: upper- latin B, C, D, E, etc.) latin; } Minúsculas griegas clásicas: ul {list-style-type: lower- lower-greek alfa, beta, gamma (α, β, γ, δ, greek; } etc.) hebrew Numeración hebrea tradicional ul {list-style-type: hebrew; } Numeración georgiana ul {list-style-type: georgian; georgian tradicional (an, ban, gan, } etc.) Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 59 de 75
  • ul {list-style-type: armenian; armenian } ul {list-style-type: cjk- cjk-ideographic Números ideográficos planos ideographic; } La marca es: a, i, u, e, o, ka, ul {list-style-type: hirigana; hiragana ki, etc. } La marca es: A, I, U, E, O, KA, ul {list-style-type: katakana; katakana KI, etc. } La marca es: i, ro, ha, ni, ho, ul {list-style-type: hirigana- hiragana-iroha he, to, etc. iroha; } La marca es: I, RO, HA, NI, ul {list-style-type: katakana- katakana-iroha HO, HE, TO, etc. iroha; } Valor inicial Aplicado a Herencia Elementos con disc Si display: list-item Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 Especifica la distancia entre los límites de bordes más cercanos marker-offset de un marcador y su contenido Valores Descripción Ejemplo Distancia definida por la auto ul {marker-offset: auto; } aplicación de usuario Valor fijo de distancia. Las medidas pueden ser negativas, longitud ol { marker-offset: 3em; } pero pueden existir limitaciones Valor inicial Aplicado a Herencia Elementos con auto No display: marker Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 60 de 75
  • 7.8 Propiedades de dimensión Las propiedades de dimensión nos permiten controlar el alto y el ancho de un elemento y el interlineado entre elementos height Establece la altura de un elemento Valores Descripción Ejemplo El un documento con un flujo normal, la altura necesaria auto p { height: auto; } para cerrar el contenido del documento Cualquier valor de longitud p { height: 0.9em; } longitud permitido. No negativo p { height: 200px; } Calculado respecto a la altura % p { height: 15%; } del bloque contenedor Valor inicial Aplicado a Herencia Todos los elementos, excepto elementos en línea no auto No reemplazados, columnas de tablas y grupos de columnas Porcentaje Medios Compatibilidad Ver valores Visuales NS 7, IE 6, MZ 1.7, OP 7.2 line-height Establece la distancia entre líneas Valores Descripción Ejemplo Informa a las aplicaciones del usuario que pongan valor "razonable" en base al tamaño normal p { line-height: normal; } de la fuente del elemento. El valor tiene el mismo significado que número. El valor es este número multiplicado por el tamaño de la fuente del elemento. No número admite valores negativos. p { line-height: 1.1; } Recomendamos un valor computado para normal entre 1.0 y 1.2 La altura de la caja es puesta con cualquier valor de longitud p { line-height: 11px; } longitud permitido. No negativo La altura es este porcentaje multiplicado por el tamaño de % la fuente del elemento (no del h3 { line-height: 130%; } elemento padre). No admite valores negativos. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 61 de 75
  • Valor inicial Aplicado a Herencia normal Todos los elementos Si Porcentaje Medios Compatibilidad Referidos al tamaño de fuente Visuales NS 7, IE 6, MZ 1.7, OP 7.2 del propio elemento max-height Establece la altura máxima de un elemento Valores Descripción Ejemplo No existe límite de altura del none p { max-height: normal; } elemento Cualquier valor de longitud permitido. El elemento nunca img { max-height: 40px; } longitud debe tener una altura que p { max-height: 12em; } exceda esta distancia Limita la altura a la máxima % p { max-height: 50%; } del bloque de contención Valor inicial Aplicado a Herencia Todos los elementos, excepto none los elementos de línea no No reemplazados y tablas Porcentaje Medios Compatibilidad Referidos a la altura del Visuales NS 7, IE 6, MZ 1.7, OP 7.2 bloque de contención max-width Establece el ancho máximo de un elemento Valores Descripción Ejemplo No existe límite de ancho del none p { max-width: normal; } elemento Cualquier valor de longitud permitido. El elemento nunca img { max-width: 40px; } longitud debe tener un ancho que p { max-width: 12em; } exceda esta distancia Limita el ancho al máximo del % p { max-width: 50%; } bloque de contención Valor inicial Aplicado a Herencia Todos los elementos, excepto none los elementos de línea no No reemplazados y tablas Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 62 de 75
  • min-height Establece la altura mínima de un elemento Valores Descripción Ejemplo Cualquier valor de longitud permitido. El elemento nunca img { min-height: 40px; } longitud debe tener una altura menor p { min-height: 12em; } que esta distancia Limita la altura a la mínima % p { min-height: 50%; } del bloque de contención Valor inicial Aplicado a Herencia Todos los elementos, excepto 0 los elementos de línea no No reemplazados y tablas Porcentaje Medios Compatibilidad Referidos a la altura del Visuales NS 7, IE 6, MZ 1.7, OP 7.2 bloque de contención min-width Establece el ancho mínimo de un elemento Valores Descripción Ejemplo Cualquier valor de longitud permitido. El elemento nunca img { min-width: 40px; } longitud debe tener un ancho menor p { min-width: 12em; } que esta distancia Limita el ancho al mínimo del % p { min-width: 50%; } bloque de contención Valor inicial Aplicado a Herencia Todos los elementos, excepto Depende de la aplicación de los elementos de línea no No usuario reemplazados y tablas Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención min-width Establece el ancho mínimo de un elemento Valores Descripción Ejemplo Cualquier valor de longitud permitido. El elemento nunca img { min-width: 40px; } longitud debe tener un ancho menor p { min-width: 12em; } que esta distancia Limita el ancho al mínimo del % p { min-width: 50%; } bloque de contención Valor inicial Aplicado a Herencia Todos los elementos, excepto Depende de la aplicación de los elementos de línea no No usuario reemplazados y tablas Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 63 de 75
  • width Establece el ancho de un elemento Valores Descripción Ejemplo El un documento con un flujo normal, es tratado como el auto p { width: auto; } 100%. En elementos flotantes tiende a ser ancho 0 Cualquier valor de longitud img.foto { width: 40px; } longitud permitido. No se admiten div { width: 12em; } valores negativos. Calculado respecto al ancho % h3 { width: 50%; } del bloque de contención Valor inicial Aplicado a Herencia Todos los elementos, excepto los elementos de línea no auto No reemplazados, filas de tabla y grupos de filas Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 64 de 75
  • 7.9 Propiedades de posición Las propiedades de posición nos permiten definir la colocación de los elementos bottom Especifica el lado inferior de un elemento Valores Descripción Ejemplo Para un elemento posicionado de forma absoluta depende de la medida de la distancia auto p { bottom: auto; } vertical, para uno posicionado de forma relativa parece no tener efecto h3 { vertical-align: baseline; Una distancia fija desde el longitud position: relative; bottom: - margen inferior del contenido 0.5em; } Un porcentaje de la altura del bloque de contención. Si la altura de dicho bloque no p { position: absolute; width; % depende de la altura del 90%; bottom: 10%;} contenido, el valor es interpretado como auto Valor inicial Aplicado a Herencia auto Elementos posicionados No Porcentaje Medios Compatibilidad Referidos a la altura del Visuales NS 7, IE 6, MZ 1.7, OP 7.2 bloque de contención clip Define una zona de recorte Valores Descripción Ejemplo Sólo hay una forma posible en CSS2: rect( top right bottom left). Especifican p { clip: rect(5px, -5px, forma los desplazamientos de los 10px, 5px); } lados respectivos de la caja. Pueden admitir valores negativos La zona de recorte tiene el h3 { clip: rect( auto, auto, auto, auto); } auto mismo tamaño y ubicación que la(s) caja(s) del elemento p { clip: auto; } Valor inicial Aplicado a Herencia Elementos reemplazados y a auto No nivel de bloque Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 65 de 75
  • Ejemplo. Las dos reglas siguientes: p { clip: rect(5px, 10px, 10px, 5px); } p { clip: rect(5px, -5px, 10px, 5px); } crearán las zonas de recorte rectangulares delimitadas por las líneas cortadas en las ilustraciones siguientes: left Especifica el lado izquierdo de un elemento Valores Descripción Ejemplo Depende de cuáles de las propiedades relacionadas tienen también el valor auto (ancho y alto de los elementos auto no reemplazados y p { left: auto; } posicionados absolutamente). Para un elemento posicionado de forma relativa parece no tener efecto Una distancia fija desde el h3 { position: relative; left: longitud borde de referencia -0.5em; } Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 66 de 75
  • Un porcentaje del ancho del p { position: absolute; left: % bloque de contención 10%;} Valor inicial Aplicado a Herencia auto Elementos posicionados No Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención overflow Especifica qué ocurre si el contenido se desborda Valores Descripción Ejemplo Indica que el contenido no es visible p { overflow: visible; } recortado El contenido es recortado y no existe ningún mecanismo de desplazamiento; los usuarios no tendrán acceso al hidden td { overflow: hidden; } contenido recortado. El tamaño y forma de la zona de recorte son especificados por la propiedad clip. El contenido es recortado y existe algún mecanismo de scroll p.scroll { overflow: scroll; } desplazamiento (como barras de desplazamiento) Depende de la aplicación del usuario, pero debe provocar auto que se proporcione un p { overflow: auto; } mecanismo de desplazamiento para las cajas desbordadas Valor inicial Aplicado a Herencia Elementos reemplazados y a visible No nivel de bloque Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 position Coloca un elemento en una posición determinada Valores Descripción Ejemplo Situado de acuerdo al flujo normal. Las propiedades top, static p { position: static; } right, bottom y left no se aplican Se calcula de acuerdo al la relative posición en el flujo normal. img { position: relative; } Luego la caja se desplaza de Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 67 de 75
  • modo relativo a su posición normal La posición se especifica con las propiedades top, right, bottom y left. Estas absolute propiedades especifican los div { position: absolute; } desplazamientos con respecto al bloque de contención. No afecta a la composición de los “hermanos” siguientes La posición de la caja se calcula de acuerdo al modelo fixed absolute y, además, se fija p { position: fixed; } con respecto a alguna referencia Valor inicial Aplicado a Herencia Todos los elementos, pero no static No al contenido generado Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 right Especifica el lado derecho de un elemento Valores Descripción Ejemplo Depende de cuáles de las propiedades relacionadas tienen también el valor auto (ancho y alto de los elementos auto no reemplazados y p { right: auto; } posicionados absolutamente). Para un elemento posicionado de forma relativa parece no tener efecto Una distancia fija desde el h3 { position: relative; longitud borde de referencia right: -0.5em; } Un porcentaje del ancho del p { position: absolute; right: % bloque de contención 10%;} Valor inicial Aplicado a Herencia auto Elementos posicionados No Porcentaje Medios Compatibilidad Referidos al ancho del bloque Visuales NS 7, IE 6, MZ 1.7, OP 7.2 de contención top Especifica el lado superior de un elemento Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 68 de 75
  • Valores Descripción Ejemplo Para un elemento posicionado de forma absoluta depende de la medida de la distancia auto p { top: auto; } vertical, para uno posicionado de forma relativa parece no tener efecto h3 { vertical-align: baseline; Una distancia fija desde el longitud position: relative; top: - margen superior del contenido 0.5em; } Un porcentaje de la altura del bloque de contención. Si la altura de dicho bloque no p { position: absolute; width; % depende de la altura del 90%; top: 10%;} contenido, el valor es interpretado como auto Valor inicial Aplicado a Herencia auto Elementos posicionados No Porcentaje Medios Compatibilidad Referidos a la altura del Visuales NS 7, IE 6, MZ 1.7, OP 7.2 bloque de contención vertical-align Especifica la alineación vertical de un elemento Valores Descripción Ejemplo Ajusta la línea base de la caja p { vertical-align: baseline; baseline con la línea base de la caja } padre La línea base del elemento es bajada al punto apropiado sub p { vertical-align: sub;} para los subíndices de la caja del padre La línea base del elemento es elevada al punto apropiado p { vertical-align: text- super para los superíndices de la super;} caja del padre Alinea la parte superior de la top caja con la parte superior de p { vertical-align: top;} la caja de línea Alinea la parte superior de la text-top caja con la parte más alta de p { vertical-align: text-top;} la fuente del elemento padre Alinea a la mitad vertical de la middle p { vertical-align: middle;} caja del padre Alinea la parte inferior de la img { vertical-align: bottom; bottom caja con la parte inferior de la } caja de línea Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 69 de 75
  • Alinea la parte inferior de la p { vertical-align: text- text-bottom caja con la parte más baja de bottom;} la fuente del elemento padre Eleva (valor positivo) o baja (valor negativo) la caja en longitud este valor de distancia. El h3 { vertical-align: 3cm; } valor 0 significa lo mismo que baseline Eleva (valor positivo) o baja (valor negativo) la caja en % este porcentaje de distancia. p { vertical-align: 12%;} El valor 0% significa lo mismo que baseline Valor inicial Aplicado a Herencia elementos a nivel de línea y baseline No table-cell Porcentaje Medios Compatibilidad Referidos al valor de line- Visuales NS 7, IE 6, MZ 1.7, OP 7.2 height del propio elemento z-index Establece el orden de capa de un elemento Valores Descripción Ejemplo El orden de la capa es igual auto p { z-index: auto; } que la de su padre Entero que establece el orden número div { z-index: -1; } de la cada del elemento Valor inicial Aplicado a Herencia auto Elementos posicionados No Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 70 de 75
  • 7.10 Propiedades de composición Las propiedades, aquí denominadas como, de composición visual nos permiten, entre otras cosas, controlar cómo se muestra un elemento, su posición respecto a otros elementos y su visibilidad clear Establece el control del flujo del elemento Valores Descripción Ejemplo No se permiten elementos left h2 { clear: left; } flotantes en el lado izquierdo No se permiten elementos right p { clear: right; } flotantes en el lado derecho No se permiten elementos both flotantes a ambos lados address { clear: both; } (izquierdo y derecho) Los elementos flotantes a none ambos lados (izquierdo y div { clear: none; } derecho) están permitidos Valor inicial Aplicado a Herencia none Elementos a nivel de bloque No Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 cursor Cambia la apariencia del cursor (puntero del ratón) Valores Descripción Ejemplo Especifica una ruta a un cursor personalizado. Si la aplicación del usuario no puede manejar el primero de una lista de p { cursor : cursores, debe intentar url("micursor.cur"), url manejar el segundo, etc. Si la url("segundo.csr"), aplicación del usuario no pointer; } puede manejar ningún cursor, debe usar el cursor genérico al final de la lista. La aplicación de usuario auto determina el cursor mostrado h2 { cursor: auto; } según el contexto El cursor es mostrado como crosshair h2 { cursor: crosshair; } una cruz El cursor predeterminado, default depende de la plataforma. A p { cursor: default; } menudo es una flecha Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 71 de 75
  • El cursor se muestra como un pointer puntero (una mano) que indica p { cursor: pointer; } enlace move Indica que algo será movido p { cursor: move; } El cursor indica que el lado de e-resize la caja va a moverse a la p { cursor: e-resize; } derecha (east) El cursor indica que el lado de la caja va a moverse hacia ne-resize p { cursor: ne-resize; } arriba y a la derecha (north- east) El cursor indica que el lado de la caja va a moverse hacia nw-resize p { cursor: nw-resize; } arriba y a la izquierda (north- west) El cursor indica que el lado de n-resize la caja va a moverse hacia p { cursor: n-resize; } (north) El cursor indica que el lado de la caja va a moverse hacia se-resize p { cursor: se-resize; } abajo y a la derecha (souht- east) El cursor indica que el lado de la caja va a moverse hacia sw-resize p { cursor: sw-resize; } abajo y a la izquierda (souht- west) El cursor indica que el lado de s-resize la caja va a moverse hacia p { cursor: s-resize; } (souht) El cursor indica que el lado de w-resize la caja va a moverse hacia la p { cursor: w-resize; } izquierda (west) text El cursor indica texto p { cursor: text; } El cursor indica espera, a wait menudo como un reloj (de p { cursor: wait; } arena o de pulsera) El cursor indica ayuda, a help menudo como el símbolo de p { cursor: help; } cierre de interrogación Valor inicial Aplicado a Herencia auto Todos los elementos Si Porcentaje Medios Compatibilidad No admitido Visuales, interactivos NS 7, IE 6, MZ 1.7, OP 7.2 display Establece si (y cómo) se muestra un elemento Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 72 de 75
  • Valores Descripción Ejemplo none El elemento no será mostrado p { display: none; } Será mostrado como un elemento a nivel de bloque, block li { display: block; } con un salto de línea antes y después del elemento Será mostrado como un elemento en línea, sin saltos inline h2 { display: inline; } de línea antes y después del elemento El elemento será mostrado list-item p { dispaly: list-item; } como una lista Será mostrado como un run-in elemento a nivel de bloque o p { display: run-in; } en línea según el contexto Será mostrado como un compact elemento a nivel de bloque o p { display: compact; } en línea según el contexto El elemento será un marcador. Este valor sólo debe usarse con los pseudo-elementos marker p { display: marker; } :before y :after. En otros casos, el valor es interpretado como inline. El elemento será mostrado como una tabla a nivel de table bloque (como <table>), con .elemento { display: table; } saltos de línea antes y después de la tabla El elemento será mostrado como una tabla en línea (como .elemento { display: inline- inline-table <table>), sin saltos de línea table; } antes y después de la tabla El elemento será mostrado .elemento { display: table- table-row-group como un conjunto de una o row-group; } más filas (como <tbody>) El elemento será mostrado .elemento { display: table- table-header-group como un conjunto de una o header-group; } más filas (como <thead>) El elemento será mostrado .elemento { display: table- table-footer-group como un conjunto de una o footer-group; } más filas (como <tfoot>) El elemento será mostrado .elemento { display: table- table-row como una fila de tabla (como row; } <tr>) El elemento será mostrado como un conjunto de una o .elemento { display: table- table-column-group más columnas (como colunm-group; } <colgroup>) Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 73 de 75
  • El elemento será mostrado .elemento { display: table- table-column como una columna de celdas colunm; } (como <col>) El elemento será mostrado .elemento { display: table- table-cell como una celda de tabla cell; } (como <td> y <th>) El elemento será mostrado .elemento { display: table- table-caption como un título de tabla (como caption; } <caption>) Valor inicial Aplicado a Herencia inline Todos los elementos No Porcentaje Medios Compatibilidad No admitido Todos NS 7, IE 6, MZ 1.7, OP 7.2 float Define el posicionamiento de un elemento flotante Valores Descripción Ejemplo El elemento se mueve a la left img { float: left; } izquierda del elemento padre El elemento se mueve a la right #der { float: right; derecha del elemento padre none La caja no es flotante p { float: none; Valor inicial Aplicado a Herencia Todos menos los elementos none posicionados y el contenido No generado Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 visibility Indica la visibilidad de un elemento Valores Descripción Ejemplo visible El elemento es visible p { visibility: visible; } hidden El elemento es invisible p { visibility: hidden; } Cuando se usa en elementos de tablas, oculta una fila o columna completa, y el espacio queda disponible para collapse tr { visibility: collapse; } otro contenido. Si se usa en otros elementos que no sean filas o columnas, se muestra igual que hidden. Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 74 de 75
  • Valor inicial Aplicado a Herencia Heredado Todos los elementos No Porcentaje Medios Compatibilidad No admitido Visuales NS 7, IE 6, MZ 1.7, OP 7.2 Instituto Canario de Telecomunicaciones | © José Ramón Quevedo Santana Encuéntrenos en Venegas, 9 - Entresuelo | 35003 – Las Palmas de G.C. | (+34) 928 431 189 | FAX (+34) 928 431 338 | www.it7.info 75 de 75