Your SlideShare is downloading. ×
CSS
© José Ramón Quevedo Santana
  Todos los derechos reservados.




                    Instituto Canario de Telecomunic...
R.1.2.5.230707. Manual sobre Hojas de Estilo en Cascada.


                    Instituto Canario de Telecomunicaciones | ©...
Ayúdenos a mejorar

Ningún manual es perfecto, y espero que antes de acabar de leer este trabajo encuentre al menos
uno o ...
Calidad




   Basado en el estándar del                         Sigue pautas del                       Conforme a los des...
Convenciones
                 Elementos usados este manual…

                 Información de carácter general que añade o ...
1           ¿Para quién?
              Este curso es para…


              … los profesionales Web, tanto diseñadores como...
2           ¿Qué es?
              CSS es un lenguaje de estilo que se puede utilizar conjuntamente con (X)HTML
          ...
Esto, aparte de las ventajas inherentes de obtener un código más limpio y de
              menos peso, supone la situación...
•    Un documento HTML, se puede definir el estilo, a través de un pequeño
                        trozo de código en la c...
Soportan casi de
                                                                          forma completa la
             ...
3           ¿Cuándo?
              Un poco de historia.


              CSS no apareció hasta 1996, cinco años después del...
especificación CSS 2.1 (no finalizada hasta julio de 2007). En el momento de
              escribir estas líneas, varios m...
4           ¿Cómo?
  4.1         Herramientas necesarias

              Como sucede con (X)HTML, para escribir CSS bastará...
Sintaxis de una regla de estilo:

                                        Bloque declaración
                Selector
    ...
W3C          Elementos a nivel de bloque (block element). Son aquellos elementos del
              documento fuente que so...
W3C          Recordemos que un selector es la parte de la regla que establece a qué
              elemento se aplica el es...
Veamos la siguiente regla de estilo:


              p > em { color: #fcc; }


              En este caso la regla de esti...
alt cuyo valor es exactamente “casa”.


              img[alt~=”casa”] { border: 1px solid #ccc; }


              Aplicar...
Habrá observado que en la definición de la regla de estilo, el selector de clase
              va siempre precedido de un ...
Dado que no contienen ambos valores (graficos.vectoriales). De igual
              forma, si usáramos el selector:

      ...
Podemos distinguir entre las siguientes pseudo-clase de vínculo, veámoslo con
              un ejemplo:

              a:l...
en los navegadores, y es probable que sean de gran utilidad en el futuro cuando
              mejore esta situación.

    ...
font
              line-height
              margin
              padding
              text-decoration
              text...
5           Fundamentos
 W3C          Definiciones
              Antes de comenzar vamos a definir varios conceptos que se...
W3C          Fundamentos

              Para CSS, los conceptos fundamentales, es decir, los pilares que permiten que
    ...
<h1>El título es <em>importante</em></h1>


              Si no se ha asignado ningún color al elemento <em>, el énfasis e...
5.2         Cascada (cascading)

              Las hojas de estilo pueden tener tres orígenes diferentes: el autor, el usu...
Cuando varias reglas se aplican, la de mayor “fuerza” toma preferencia.

              De forma predefinida, las reglas en...
El perímetro de cada una de las cuatro áreas (contenido, padding, border y
              margin) es denominado "límite", d...
límite del relleno (padding).


                   •    límite de margen o límite externo. El límite de margin (margen) ro...
6           ¿Dónde?
  6.1         ¿Dónde se pueden definir los estilos CSS?

              Dentro del elemento HTML (inlin...
</head>
              ...

              Los comentarios HTML (<!-- -->) se colocan entre el comienzo y final de
         ...
nuestro sitio simplemente enlazándolas con el mismo.


                   •    Si hacemos alguna modificación en el archiv...
7            Propiedades CSS
  7.1          Propiedades del texto

               Las propiedades del texto definen su apa...
Espacio entre caracteres                    p { letter-spacing: 0.3em; }
longitud                                     adem...
text-indent                        Especifica la sangría de la primera línea de texto
             Valores                ...
none                               Todos los elementos                                      Si

             Porcentaje   ...
word-spacing                        Incrementa o disminuye el espacio entre palabras
            Valores                  ...
7.2          Propiedades de las fuentes

               Las propiedades de las fuentes definen las características de las ...
font-family                        Lista de familias tipográficas o nombres de fuentes
             Valores               ...
Agranda el tamaño respecto a
xx-large                                                                                 p { ...
comprimido que extra-
                                             condensed
                                             ...
Las fuentes que incluyan en
                                             sus nombres las expresiones
                     ...
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
CSS ICAP 2007
Upcoming SlideShare
Loading in...5
×

CSS ICAP 2007

479

Published on

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

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
479
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "CSS ICAP 2007"

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. • 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. <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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. </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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. 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

×