CSS. Cascading Style Sheets (Hojas de estilo en cascada)

Transcripción

1 1 CSS Cascading Style Sheets (Hojas de estilo en cascada)

2 INTRODUCCIÓN Las Hojas de estilo son un conjunto de reglas de estilo definidas por el programador sobre elementos HTML, que definen la apariencia final de esos elementos en la ventana del navegador. Beneficios de las hojas de estilo: Potencian y dan mayor flexibilidad a la hora de definir el formato de elementos HTML. Se pueden fijar fuentes de letra, tamaños, imágenes de fondo, etc. Permiten separar la apariencia del contenido del documento Hace el código más legible. Permite compartir estilos entre múltiples documentos. Se puede crear una clase para un estilo, definida como un nuevo elemento HTML. Las reglas de precedencia se aplican de forma jerárquica. 2

3 VERSIONES CSS1 (1996). Estándar universalmente aceptado. Soportado por los navegadores actuales. CSS2 (1998). Especifican cómo debe ser presentado un documento en diferentes medios: en la pantalla, en papel, con un sintetizador de voz, con un dispositivo braille, etc. Ciertas propiedades CSS son diseñadas sólo para ciertos medios CSS3 (en desarrollo). Focalizado a la modularización de las especificaciones CSS. 3

4 XSL VS CSS (I) La "Style Activity" del W3C también está desarrollando XSL (The Extensible Stylesheet Language Family), que consiste en una combinación de XSLT y Objetos de Formato (XSL-FO). XSL: Lenguaje Extensible de Hojas de Estilo, cuyo objetivo principal es mostrar cómo debería estar estructurado el contenido, cómo debería ser diseñado el contenido de origen y cómo debería ser paginado en un medio de presentación como puede ser una ventana de un navegador Web o un dispositivo móvil, o un conjunto de páginas de un catálogo, informe o libro. XSL funciona como un lenguaje avanzado para crear hojas de estilos. Es capaz de transformar, ordenar y filtrar datos XML, y darles formato basándolo en sus valores. 4

5 XSL VS CSS (II) CSS XSL Puede utilizarse con HTML? si no Puede utilizarse con XML? si si Es un lenguaje de transformación? no si Sintaxis CSS XML Los rasgos distintivos son que CSS sirve para añadir estilo a documentos HTML y XML. XSL, por otra parte, es capaz de realizar transformaciones de los documentos. 5

6 SINTAXIS DE LAS REGLAS DE ESTILO Las reglas siguen la siguiente sintaxis: Forma general: selector.clase { propiedad1: valor1;... propiedadn: valorn } Ejemplo regla CSS: h1 { text-align: center; font-style: italic; } h1.rojo {color: red;} Ejemplo uso HTML: <h1>... </h1> <h1 class= rojo >... </h1> 6

7 DONDE COLOCAR LAS REGLAS (I) En línea Se utiliza el atributo style para cambiar directamente el estilo de cada elemento HTML. <p style= font-size:18px; font-style: italic; color:red > Esto es un párrafo</p> En la cabecera..<head> <title>el título</title> <style type="text/css">  </style> </head> <body>.. Los símbolos de comentario se usan para ocultar la hoja de estilo de los navegadores que no soportan hojas de estilo. 7

8 DONDE COLOCAR LAS REGLAS (II) Estilo importado En la cabecera del fichero HTML se incluye un enlace al fichero de estilo: <link rel= stylesheet type= text/css href= miestilo.css > En el fichero de estilo (miestilo.css) se incluyen las reglas. p { font-size:18px; font-style: italic; color:red; } 8

9 COMO COLOCAR LAS REGLAS (Si las reglas están en la cabecera o en un fichero de estilo) En los elementos html p { color:red; } En una clase de estilo p.blue { color: blue }.una_clase{ color:green } (clase de estilo global) En un identificador único p#yellow{ color:yellow } #un_id{ color:yellow } <p>texto rojo</p> <p class= blue >texto azul</p> <p class= una_clase >texto verde</p> <h1 class= una_clase >título verde</h1> <p id= yellow >texto amarillo</p> <h1 id= un_id >texto amarillo</p> 9

10 ENLACES El estándar CSS1 permite definir propiedades para cada uno de los tipos de enlaces: A:link o :link - enlaces no visitados. A:visited o :visited - enlaces visitados. A:active o :active - enlaces activados. A:hover o :hover - ratón sobre el enlace. A:visited { color: red }.enlace_activo:active { font-size: 300% } A:link img { border: solid green } 10

11 APLICACIÓN DE LAS REGLAS DE ESTILO (I) Las reglas se heredan, considerando el documento HTML como una estructura jerárquica, es decir, las reglas se aplican en Cascada. No todas las propiedades son heredables y para cada propiedad se puede definir si ésta se hereda o no. Para forzar a que un elemento herede alguna propiedad que de otro modo no heredaría se utiliza la instrucción inherit que se puede aplicar a cualquier propiedad de cualquier elemento, pero teniendo claro que la herencia será siempre desde el padre inmediato. Los enlaces de los encabezados h2 heredan la propiedad color. h2 { color: black; text-align: center; } h2 a { color: inherit; } 11

12 APLICACIÓN DE LAS REGLAS DE ESTILO (II) Elemento HTML BODY { color:green } cuerpo de la página verde Agrupación P, B { color:red } el cuerpo de la página hereda el verde pero los elementos P y B serán rojos Contextual P B { color:red } el cuerpo de la página hereda el verde y solo los B contenidos en un P serán rojos 12

13 PROPIEDADES (I) Tipos de propiedades Fuentes: tipos letra, tamaño, negrita, cursiva,... Texto: justificación, espacio entre letras y/o palabras Color: de texto, de fondo, imagen de fondo,... Caja: bordes a los 4 lados Otras. URLs: background:url( se.gif) Colores: yellow, #ff0000, rgb(255,0,0) 13

14 PROPIEDADES (II) Unidades de medida Palabras clave: small, italic, Arial, etc. Unidades relativas: dependen de la resolución de pantalla del cliente o del tipo de letra base que utilice la página. em, toma como referencia la anchura y altura de la letra M mayúscula de la fuente más relevante de la línea. ex, toma como referencia la altura de la letra x minúscula, que es la mitad de la anterior M. %, respecto al tamaño por defecto. Unidades absolutas: no dependen de los factores externos que afectan a las unidades relativas. pt(puntos), cm(centímetro), mm(milímetro), in pulgadas), px(pixeles), pt(puntos tipográficos) y pc(picas). 14

15 PROPIEDADES DE LAS FUENTES font-weight: Anchura relativa de la fuente. nomal lighter bold bolder h1 { font-weight: 200 }, h2 { font-weight: bold } font-style: Apariencia de la fuente. normal italic oblique p { font-style: normal }, th { font-style: italic } font-size: Tamaño (relativo o absoluto) de la fuente pt, in, cm, mm em, ex, px, % xx-large x-large large medium small x-small xx-small smaller larger strong {font-size: 150%}, p {font-size: 14pt} font-family: fuente de letra. h1 { font-family: Book antique, Tahoma, Arial } 15

16 PROPIEDADES DEL TEXTO text-decoration: añadidos al texto de un elemento. none underline overline line-through p { text-decoration: underline } vertical-align: alineación vertical del texto. top bottom baseline middle sub super text-align: alineación horizontal. left right center justify text-indent: identación de la primera línea del texto. +/- pt, in, cm, mm +/- em, ex, px, % p{ text-ident: -25px } line-height: distancia entre líneas del mismo párrafo. normal number pt, in, cm, mm em, ex, px, % 16

17 PROPIEDADES COLORES Y FONDOS (I) color: color del texto. nombre #RRGGBB rgb( rrr, ggg, bbb ) p { color: blue }, h1 { color: #00AABB }, h3{ color:rgb(255,0,0) } background-color: color del fondo de la región. nombre #RRGGBB rgb( rrr, ggg, bbb ) background-image: imagen de fondo de la región. none url(nombre_fichero) h2 { background-image: url(bluedrop.gif} } background-repeat: modo de repetición de la imagen repeat repeat-x repeat-y no-repeat body { background-image: url(fondo.jpg); background-repeat: repeat-x } 17

18 PROPIEDADES COLORES Y FONDOS (II) background-attachment: determina si imagen se desplazará con el contenido o será fija con respecto al lienzo scroll fixed background: combina las propiedades en una entrada. background-color background-image background-repeat background-attachment background-position p { background: #ffffff url(fondo.jpg) no-repeat top right } 18

19 PROPIEDADES DE LA CAJA (I) CSS asume que todos los elementos están delimitados por una o más regiones rectangulares (bounding-box o caja). Los estilos pueden especificar márgenes, bordes y relleno de la caja. Contenido (Content) Relleno (Padding) Borde (Border) 19 Margen (Margin)

20 PROPIEDADES DE LA CAJA (II) Margen, los márgenes del bloque son el espacio comprendido entre el bloque y el borde de la ventana activa del navegador. Se controla con el atributo margin. Borde, los bordes del bloque sin aplicar estilos, no son visibles, y es como un cuadro imaginario que envuelve todo el contenido del bloque. Su atributo de control es border. Relleno, el espaciado interno del bloque es la distancia entre el borde del bloque y su contenido. Es el atributo padding. 20

21 PROPIEDADES DE LA CAJA (III) padding-left, padding-right, padding-top, padding-bottom pt, in, cm, mm em, ex, px, % padding: aúna las anteriores propiedades en una entrada. p.padding { padding: 1.5cm } p.padding2 { padding: 0.5cm 2.5cm } border-left-width, border-right-width, border-top-width, border-bottom-width none thin medium thick pt, in, cm, mm em, ex, px border-width: Fija el tamaño de los bordes en una entrada border-width: 5px border-width: 5px 10px border-width: 5px 10px 1px border-width: 5px 10px 1px medium 21

22 PROPIEDADES DE LA CAJA (IV) border-color: Fija el color del borde nombre-color #RRGGBB rgb(rrr, ggg, bbb) border-style: Estilo del borde. none dotted dashed solid double groove ridge inset outset border-left, border-right, border-top, border-bottom: Ancho, estilo y color en una entrada. border: Ancho, estilo y color de los 4 márgenes en una entrada. p { border: medium double rgb(250,0,255) } 22

23 PROPIEDADES DE LA CAJA (V) margin-left, margin-right, margin-top, marginbottom. auto pt, in, cm, mm em, ex, px, % margin: aúna todos los márgenes en una entrada. p.margin { margin: 2cm 4cm 3cm 4cm } 23

24 IMÁGENES Y ELEMENTOS FLOTANTES width, height: tamaño del elemento (normalmente una imagen). auto pt, in, cm, mm em, ex, px img.logo { width: 100px; height: 50px } float: indica como se sitúa el elemento flotante respecto al texto circundante. none left right img { float: left } 24

25 EJERCICIOS Dotar de estilo con CSS a la web construida en HTML. Dotar de estilo, utilizando la guía de estilo de la AVS. Dotar de estilo, utilizando la guía de estilo para aplicaciones Web del NISS Dotar de estilo, utilizando la guía de estilo de la AVS. 25

26 ENLACES El W3C ofrece un servicio de validación en: Guía de Referencia CSS 2.1: Guía breve: Otras guías:

27 ENLACES Webkit ( ha implementado con transformaciones CSS, un experimento que calca el efecto pared que podemos ver en Cooliris ( ) ( ), con la peculiaridad de que solo utiliza HTML, CSS y Javascript. Coke Meninas Generador online de estilo para un texto 27