Introducción a las Hojas de Estilo (CSS) WEB-TOOLS

Transcripción

1 Introducción a las Hojas de Estilo (CSS) JUAN CARLOS CONDE RAMÍREZ WEB-TOOLS

2 Objetivos Identificar los beneficios y el potencial de las Hojas de Estilo en Cascada (CSS) Verificar cómo el marcado HTML crea una estructura de documento. Comprender cómo se escriben las reglas de estilo CSS Conocer el proceso de vinculación de estilos con documentos HTML. Entender los conceptos CSS de herencia, cascada, especificidad, orden de regla, y modelo de caja. FCC-BUAP 2

3 Introducción, I Las Hojas de Estilo en Cascada o CSS (Cascading Style Sheets) son el estándar de la W3C para definir la presentación de documentos escritos en HTML, y en cualquier lenguaje XML. El término presentación involucra los siguientes casos de entrega y visualización al usuario: Pantalla de una computadora Pantalla de un Smartphone Impresión en papel Volumen y voz de una pantalla lectora FCC-BUAP 3

4 Introducción, II Por lo tanto, mientras las hojas de estilo manejan la presentación, HTML maneja la definición de la estructura del documento y su significado. CSS es un lenguaje independiente con su propia sintaxis. A partir de ahora aprenderás cómo cambiar estilos de texto y fuentes, agregar color y fondos, e incluso crear plantillas básicas (layout) de páginas Web. FCC-BUAP 4

5 Beneficios de CSS, I 1. Controles precisos de tipo y diseño. Puedes lograr imprimir con precisión usando CSS. Existen un conjunto de propiedades dirigidas específicamente a páginas impresas (lo cual no corresponde a este curso). 2. Menos trabajo. Puedes cambiar la apariencia de un sitio completo a través de la edición de una sola hoja de estilo. 3. Sitios más accesibles. Cuando todos los aspectos de estilo son manejados con CSS, es posible realizar un marcado de contenido con mayor significado, haciéndolo más accesible para dispositivos móviles o no visuales. FCC-BUAP 5

6 Beneficios de CSS, II 4. Soporte confiable del navegador. Cualquier navegador actual admite CSS Nivel 2 y muchas partes interesantes de CSS Nivel 3. Es posible que realmente no haya ninguna desventaja en el uso de hojas de estilo. Existen algunas molestias comunes relacionadas con inconsistencias del navegador, pero pueden ser esquivadas si sabes dónde hallarlas. FCC-BUAP 6

7 Breve Historia de CSS, I La primera versión de CSS, la Recomendación CSS de Nivel 1 alias CSS1, fue liberada oficialmente en Incluye propiedades para agregar fuentes, color e instrucciones de espaciado a elementos de la página. Desafortunadamente, la falta de soporte de navegador fiable impidió la adopción generalizada de CSS durante varios años. FCC-BUAP 7

8 Breve Historia de CSS, II CSS de Nivel 2 (CSS2) fue liberado en Se añadieron propiedades de posicionamiento que permitió a CSS ser utilizado en el diseño de plantillas para páginas Web. También introdujo estilos para otros tipos de medios (como dispositivos de impresión, portátiles y auditivos) y métodos más sofisticados para seleccionar elementos de estilo. CSS de Nivel 2, Revisión 1 (CSS2.1) hizo algunos ajustes menores a CSS2 y se convirtió en una Recomendación completa en el FCC-BUAP 8

9 Breve Historia de CSS, III CSS de Nivel 3 (CSS3) es diferente a las versiones anteriores porque se dividió en varios módulos individuales, cada uno de los cuales cumple una función específica como animación, diseños de columnas múltiples y bordes. Mientras algunos módulos están siendo estandarizados, otros permanecen en fase experimental. En este sentido, los desarrolladores de navegadores pueden comenzar a implementar (y nosotros comenzar a utilizar) una característica de CSS a la vez en lugar de esperar a que una especificación completa esté lista. FCC-BUAP 9

10 Breve Historia de CSS, IV De hecho, muchos desarrolladores usan funciones mejoradas de CSS3 aunque no son universalmente compatibles, siempre y cuando la alternativa sea usable y no se pierda contenido. CSS puede usarse como el decorado" en un diseño Web estable (o como una mejora). Para mantenerse al día con el trabajo en las diversas características de CSS, consulta la página de trabajo actual de CSS del W3C en: FCC-BUAP 10

11 El Potencial de CSS, I CSS es una herramienta robusta y poderosa. Puedes apreciar las posibilidades de usar CSS para el diseño con la variedad y la riqueza de los diseños en CSS de Zen Garden: David Shea, propietario del sitio CSS Zen Garden, publicó un documento HTML e invitó a los diseñadores a aportar sus propias hojas de estilo que dieran al documento un diseño visual. A continuación se muestran sólo algunas de las mejores hojas de estilo creadas para el mismo contenido HTML. FCC-BUAP 11

12 El Potencial de CSS, II Estas tres páginas de CSS Zen Garden usan el mismo documento fuente XHTML, pero el diseño se cambia usando exclusivamente CSS FCC-BUAP 12

13 El Potencial de CSS, III Los ejemplos anteriores no utilizan un simple elemento img (de hecho todas las imágenes son fondos), pero puedes apreciar lo diferente y sofisticada que luce cada versión de la página. Todo esto realizado sólo con hojas de estilo. Esto es prueba del potencial de mantener separadas la presentación de la estructura, es decir, CSS de HTML. El sitio CSS Zen Garden ya no ha sido actualizado y ahora es considerado sólo un documento histórico del punto de inflexión en la adopción de estándares en la Web. FCC-BUAP 13

14 Cómo funcionan las Hojas de Estilo, I Es tan sencillo como el 1-2-3! 1. Comienza con un documento que ha sido marcado con HTML. 2. Escribe reglas de estilo de cómo te gustaría que se vieran ciertos elementos. 3. Incluir las reglas de estilo al documento. Cuando el navegador muestre el documento, este seguirá tus reglas para desplegar elementos (a menos que el usuario haya aplicado algunos estilos obligatorios, pero llegaremos a esa parte después). FCC-BUAP 14

15 Cómo funcionan las Hojas de Estilo, II 1. Marcado del documento. Sabes que es importante elegir los elementos que describan de forma precisa el significado del contenido. Sabes que el marcado crea la estructura del documento, algunas veces nombrada capa estructural, sobre la cual se puede aplicar la capa de presentación. Comprender la estructura de tu documento y las relaciones entre elementos es fundamental para tu trabajo como autor de una hoja de estilo. FCC-BUAP 15

16 Cómo funcionan las Hojas de Estilo, III 2. Escritura de reglas. Una hoja de estilos se forma de una o más instrucciones de estilo (llamadas reglas o conjunto de reglas) que describen como un elemento o grupo de elementos deben desplegarse. El primer paso para aprender CSS es familiarizarse con las partes de una regla. Como verás más adelante, son bastante intuitivas. Cada regla selecciona un elemento y declara como se debe ver. El siguiente ejemplo contiene dos reglas: h1 { color: green; } p { font-size: small; font-family: sans-serif; } FCC-BUAP 16

17 Cómo funcionan las Hojas de Estilo, IV La primera regla hace que todos los elementos h1 del documento sean verdes; la segunda regla especifica que los párrafos tengan letra pequeña y que usen la fuente sans-serif. En terminología CSS, las dos secciones principales de una regla son: el selector que identifica el elemento o elementos afectados, y la declaración que proporciona las instrucciones de despliegue. La declaración a su vez está formada por una propiedad (tal como color) y su valor (green), separadas por dos puntos (:) y un espacio. Una o más declaraciones son puestas dentro de un par de llaves, usando punto y coma (;) como fin de cada declaración. FCC-BUAP 17

18 Cómo funcionan las Hojas de Estilo, V Las partes principales de una regla. Técnicamente no es necesario el punto y coma al final de cada bloque, pero se espera que adquieras el hábito de escribir las declaraciones con un punto y coma siempre. Esto hará que la adición de declaraciones a la regla sea mucho más fácil más adelante. FCC-BUAP 18

19 Cómo funcionan las Hojas de Estilo, VI Selectores En el ejemplo anterior los elementos h1 y p son usados como selectores. Se le conoce como selector de tipo de elemento, y es el tipo de selector más básico. Las propiedades definidas para cada regla serán aplicadas a cada elemento h1 y p del documento. Mas adelante se mostrarán selectores más sofisticados que puede utilizarse para hacer referencia a elementos, incluso formas para seleccionar grupos de elementos o elementos que aparezcan en un contexto en particular. Dominar los selectores es decir, seleccionar el mejor tipo de selector y usarlo estratégicamente es un paso importante para convertirse en un Maestro Jedi del CSS. FCC-BUAP 19

20 Cómo funcionan las Hojas de Estilo, VII Declaraciones La declaración está hecha de un par propiedad/valor. Pueden haber más de una declaración en una misma regla; p.e. la regla para el elemento p del ejemplo anterior tiene dos propiedades font-size y font-family. Cada declaración debe terminar con un punto y coma (;) para mantenerla separada de las siguientes declaraciones. Si se omite el punto y coma, la declaración y la siguiente serán ignoradas. A las llaves y las declaraciones que contienen se les conoce comúnmente como bloque de declaración. FCC-BUAP 20

21 Cómo funcionan las Hojas de Estilo, VIII Especificación de Valores de Medida: Cuando se proporcionan valores de medida, las unidades deben ir inmediatamente después del número, como sigue: margin: 2em; Agregar un espacio antes de la unidad puede provocar que la propiedad no funcione: INCORRECTO margin: 2 em; Sin embargo es posible omitir la unidad de medida para valores iguales a cero: margin: 0; Debido a que CSS ignora los espacios en blanco y saltos de línea dentro de la declaración del bloque, los autores suelen escribir cada declaración del bloque en su propia línea. FCC-BUAP 21

22 Cómo funcionan las Hojas de Estilo, IX Agregar saltos de línea para especificar cada declaración hace más fácil encontrar la propiedad aplicada a un selector y detectar donde termina la regla de estilo: p { } font-size: small; font-family: sans-serif; El corazón de las hojas de estilo recae en la colección de propiedades estándar que pueden aplicarse a los elementos seleccionados. La especificación completa de CSS define docenas de propiedades para todo, desde guiones de texto hasta cómo debe leerse en voz alta los encabezados en las tablas. FCC-BUAP 22

23 Cómo funcionan las Hojas de Estilo, X Los posibles valores a usar dependen directamente de la propiedad. Algunas propiedades usan medidas de longitud, algunas valores de color y otras tienen su propia lista predefinida de palabras clave. Cuando se usa una propiedad, es importante saber que valores acepta; sin embargo, en muchos casos, con el uso del sentido común es suficiente. FCC-BUAP 23

24 Cómo funcionan las Hojas de Estilo, XI 3. Inclusión de estilos en el documento. En practicas anteriores, se ha incrustado la hoja de estilos justo en el documento usando el elemento style. La cual es sólo una de las tres formas de aplicar información de estilo a un documento HTML. Por lo tanto, es provechoso tener una visión general de los métodos y terminología por adelantado: 1) Hojas de estilo externas 2) Hojas de estilo incrustadas 3) Estilos en línea (inline) FCC-BUAP 24

25 Inclusión de CSS al documento, I Hojas de estilo externas Una hoja de estilo externa es un documento de texto separado que contiene sólo reglas de estilo. Puede ser guardado con la extensión.css El documento.css es vinculado a o importado en uno o más documentos HTML. De esta forma, todos los archivos en un sitio Web pueden compartir la misma hoja de estilos. Este es el método más poderoso y preferido para incluir hojas de estilo al contenido de un documento HTML. FCC-BUAP 25

26 Inclusión de CSS al documento, II Hojas de estilo incrustadas El estilo es colocado en un documento usando el elemento style, y sus reglas se aplican únicamente al documento que las contiene. El elemento style debe ser colocado dentro del elemento head del documento. El siguiente ejemplo incluye un comentario. <head> <title>required document title here</title> <style> /* style rules go here */ </style> </head> FCC-BUAP 26

27 Inclusión de CSS al documento, III En HTML 4.01 y XHTML 1.0/1.1, el elemento style debía contener un atributo type que identificaba el contenido del elemento style: <style type="text/css"> En HTML5, el atributo type ya no se requiere. No obstante, elemento style puede incluir el atributo media que se usa para apuntar a medios específicos como pantallas, impresoras, o dispositivos de mano. FCC-BUAP 27

28 Inclusión de CSS al documento, IV Estilos en línea (inline) Puedes aplicar propiedades y valores a un solo elemento usando el atributo style dentro del mismo elemento, tal como se muestra a continuación: <h1 style="color: red">introduction</h1> Para agregar múltiples propiedades, solamente sepáralas con punto y coma, como sigue: <h1 style="color: red; margin-top: 2em">Introduction</h1> Los estilos en línea se aplican sólo al elemento específico donde estos aparecen. Sin embargo debe evitarse su uso a menos que sea completamente necesario sobre escribir una hoja de estilo incrustada o externa. FCC-BUAP 28

29 Inclusión de CSS al documento, V Los estilos en línea son problemáticos dado que mezclan información de la presentación con el marcado estructural. Además dificultan las modificaciones debido a que para cada cambio debe ser localizado un atributo style en el código fuente. FCC-BUAP 29

30 Comentarios en CSS, I A veces es de ayuda dejar a ti mismo o a tus colaboradores comentarios en una hoja de estilos. CSS tiene su propia sintaxis de comentarios: /* comment goes here */ El contenido entre /* y */ será ignorado cuando la hoja de estilos se analice, lo que significa que puedes dejar comentarios en cualquier lugar de una hoja de estilos, incluso dentro de la declaración de una regla. body { font-size: small; /* font-size:large; */ } FCC-BUAP 30

31 Comentarios en CSS, II Un uso común para los comentarios es etiquetar las secciones de las hojas de estilo para hacerlas más fáciles de encontrar posteriormente, por ejemplo: /* Layout styles */ o: /* FOOTER STYLES */ Los comentarios en CSS también son útiles para ocultar temporalmente declaraciones durante el proceso de diseño; esto es mucho más rápido que reescribir de nuevo las reglas. FCC-BUAP 31