TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades TEMA 2. Hojas de Estilo Índice 1. Introducción 2. Definición de estilos 3. Sintaxis 4. Unidades de medida 5. Propiedades 6. Definición de estilos 7. Capas 8. Ejemplos completos

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades ¿Qué son las hojas de estilo? Es una forma de separar el estilo lógico de un documento (estructura) del físico (aspecto). Permiten definir la apariencia y estilo de los elementos de una página. 1. Introducción

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades CSS son las siglas de Cascading Style Sheet (hojas de estilo en cascada) que es la especificación de las hojas de estilo CSS1 aparece en 1996 CSS2 aparece en 1998 Podemos encontrar la especificación completa en la página: 1. Introducción

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Quien debe interpretar la especificación correctamente es el navegador. Cada navegador puede hacerlo mejor o peor. Podemos encontrar cosas que no funcionen en todos los navegadores 1. Introducción

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Ejemplo: En HTML Texto en negrita y en color rojo Con hojas de estilo B{color:red;} Texto en negrita y en color rojo En la cabecera del documento 1. Introducción

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Además de simplificar el código permiten hacer cosas que con HTML no se pueden como por ejemplo: Situar los elementos en cualquier sitio del documento Controlar más opciones sobre el sonido del documento … 1. Introducción

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades A pesar de todo esto la última palabra la tiene el usuario final. Algunos navegadores permiten elegir si se usan las hojas de estilo de la página que estamos visitando o bien una propia almacenada en algún sitio de nuestro equipo. Ejercicio: Buscar en nuestro navegador cómo podemos hacer esto. 1. Introducción

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Solución: Herramientas -> Opciones de Internet -> Pestaña General -> Accesibilidad -> Elegir una hoja de estilos creada por nosotros 1. Introducción

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Ejercicio: Entra en la siguiente página, que contiene todas las propiedades de CSS, para hacernos una idea de las posibilidades que nos ofrece: 1. Introducción

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Ventajas de las hojas de estilo: Se puede modificar la presentación de los elementos sin tocar el código estructural Disponemos de comandos y atributos más potentes Lenguaje sencillo e intuitivo, similar a un procesador de textos en inglés Podemos crear ficheros externos con los estilos, con lo que se aisla el código principal y se puede reutilizar con mayor facilidad 1. Introducción

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Desventajas de las hojas de estilo: Cada navegador puede llegar a implementar la especificación mejor o peor. Es recomendable probar el resultado en distintos navegadores para no encontrar fallos inesperados 1. Introducción

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades ¿Cómo vamos a integrar el código CSS en HTML? CSS es una especificación que nos define cómo tenemos que describir las propiedades. El primer paso será como podemos incluir esas definiciones de estilos dentro de una página HTML 2. Integración en HTML

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Existen tres formas de integración: En un elemento concreto En la cabecera del documento En un archivo externo 2. Integración en HTML

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades En un elemento concreto Se trata de añadir un nuevo atributo a las etiquetas que ya usábamos en HTML. Esto nos permitirá utilizar nuevas características para los elementos ya conocidos Este nuevo atributo será style y será común para todas las etiquetas HTML 2. Integración en HTML

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades En un elemento concreto Ejemplo: Texto en negrita y en color rojo Esta forma se suele usar menos que las otras dos ya que no se aprovechan todas las ventajas de las hojas de estilo, sino que simplemente ampliamos las propiedades de los elementos HTML 2. Integración en HTML

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades En la cabecera del documento Definiremos los estilos que queramos entre las etiquetas y Para ello definiremos los estilos utilizando la etiqueta “style”. Una vez definidos, se podrán utilizar cuantas veces queramos, con lo que ahorraremos código y ganaremos en claridad 2. Integración en HTML

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades En la cabecera del documento Ejemplo: B{color:red;} I{color:blue;} Con esto indicamos que cuando se utilice la etiqueta el texto aparecerá en color rojo y cada vez que usemos, el texto será de color azul. Compruébalo. 2. Integración en HTML

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades En un fichero externo En este caso todas las definiciones se crearán en un fichero externo, cuya extensión será.css En el documento HTML se indicará el nombre del fichero que contiene los estilos mediante una etiqueta especial. 2. Integración en HTML

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades En un fichero externo Este método tiene dos grandes ventajas: Por un lado podemos crear un fichero de estilos y utilizarlo en varias páginas. Por otro lado si tenemos que cambiar el aspecto físico de algún elemento, no tendremos que tocar el archivo que contiene la estructura del documento, por lo que no podremos dañarlo por error. 2. Integración en HTML

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades En un fichero externo Ejemplo: El contenido del fichero será de la siguiente forma: TABLE{font-size:10pt;background- color:yellow} B{font-size:20pt;color:red;} Y en el código HTML, dentro de la etiqueta, incluiremos la etiqueta : 2. Integración en HTML

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades ¿Cómo describiremos cada estilo? La sintaxis básica es la siguiente: Selector{Propiedad:Valor} Donde: Selector es el elemento HTML al que afectará la definición del estilo. Por ejemplo: B, TABLE, P,… 3. Sintaxis

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades ¿Cómo describiremos cada estilo? La sintaxis básica es la siguiente: Selector{Propiedad:Valor} Donde: Propiedad es la característica que queremos modificar de nuestro elemento HTML. Por ejemplo: color, font-size, background- color,… 3. Sintaxis

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades ¿Cómo describiremos cada estilo? La sintaxis básica es la siguiente: Selector{Propiedad:Valor} Donde: Valor es el valor que queremos asignar a la propiedad. Según el tipo de propiedad, los valores aplicables serán unos u otros. Por ejemplo: para color podrán ser red, green,… para font-size un valor que indicará el tamaño de la fuente en pt, cm,… 3. Sintaxis

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Al conjunto de propiedad-valor se le llama declaración. Podemos añadir tantas declaraciones para un mismo selector como queramos, basta con separarlas con ; Ejemplos: B{color:red;font-size:10pt} P{color:green;text-align:justify} 3. Sintaxis

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Podemos aplicar una misma definición a más de una etiqueta simultáneamente. Para ello ponemos todos los selectores que queramos antes de la primera llave separados por comas. Ejemplo: B,P{color:green;text-align:justify} 3. Sintaxis

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Si queremos que y tengan la definición anterior pero además cuando utilicemos queremos que el fondo sea amarillo, podemos definir una nueva regla para sin que se pierdan las propiedades que le hemos asignado anteriormente. Ejemplo: B,P{color:green;text-align:justify} B{background-color:yellow} 3. Sintaxis

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Ejercicio: Crear una página que use CSS en la cabecera del documento con las siguientes definiciones: El fondo tendrá el color: #33FF66 El cursor tendrá la forma hand Las cabeceras (H1) tendrán color # y el fondo #FFCC00 Los enlaces tendrán el color # y estilo itálica Incluir en el body el uso de estas etiquetas 3. Sintaxis

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Solución: Dentro de la cabecera del documento debemos incluir la siguiente definición: BODY{background-color:#33FF66; cursor:hand;} H1{color:#205596;background- color:#FFCC00;} A{color:#303030;font-style:italic} 3. Sintaxis

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades También podemos crear una definición para una etiqueta que funcione bajo ciertas condiciones, por ejemplo, queremos definir un estilo para la etiqueta pero solo cuando figure dentro de una celda de una tabla: TD B{background-color:black;font- style:italic} 3. Sintaxis

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Ejercicio: Indica en los 4 ejemplos siguientes de qué color aparecerá el texto que figura dentro de la directiva Suponemos que hay un fichero llamado mihoja.css que contiene lo siguiente: B{color:blue} 3. Sintaxis

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Ejemplo 1: b{color:red} ¿De qué color soy? Ejemplo 2: b{color:red} ¿De qué color soy? 3. Sintaxis

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Ejemplo 1: b{color:red} ¿De qué color soy? Ejemplo 2: b{color:red} ¿De qué color soy? 3. Sintaxis

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Las medidas en CSS se forman con un signo + ó -, seguido de un número y a continuación dos letras que serán una abreviatura de la unidad de medida. Abreviaturas de unidades de medida relativas: em: 1em es igual al tamaño de la fuente actual ex: es la x-altura de un juego de caracteres. En la realidad suele ser la mitad de un em px:píxeles 4. Unidades de medida

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Abreviaturas de unidades de medida absolutas: in: pulgadas cm: centímetros mm: milímetros pt: puntos (1pt=1/72 pulgadas) pc: picas (1pc=12pt) 4. Unidades de medida

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Colores Para definir colores podemos usar las palabras clave o una especificación RGB numérica 4. Unidades de medida

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Palabras clave: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. 4. Unidades de medida

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Especificación RGB numérica: Se pueden formar de distintas formas: #rrggbb #11CC45 rgb(n,n,n) rgb(56,04,255) rgb(a%,b%,c%) rgb(10%,50%,10%) 4. Unidades de medida

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Ejercicio: Buscar en Internet un listado de Propiedades lo más amplio posible que usaremos como manual de referencia 5. Propiedades

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Definición de estilos mediante clases Nos van a permitir: A)Crear estilos distintos para una misma etiqueta y aplicar uno u otro según interese B) Crear estilos tipo sin asociarlos en principio a ningún elemento HTML para poder aplicarlo posteriormente a la etiqueta que más nos interese 6. Definición de estilos

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Definición de estilos mediante clases A) Para crear estilos distintos para una misma etiqueta utilizamos la siguiente sintaxis: elemento.nombreclase{propiedad:valor} Ejemplo: B.titulo{color:red} B.normal{color:black} B.numeros{color:blue} 6. Definición de estilos

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Definición de estilos mediante clases Una vez definidos los estilos podremos aplicar en el código HTML el que más nos interese para la etiqueta B Ejemplo: Clasificación 1º Carmona Ramirez, Jose Antonio 2º Camacho Ramos, Jorge 6. Definición de estilos

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Definición de estilos mediante clases B) Para crear estilos sin asociarlos a ninguna etiqueta usaremos la siguiente sintaxis:.nombreclase{propiedad:valor} La única diferencia con la anterior es que omitimos el nombre de elemento. Con lo que podremos añadírselo a cualquiera. 6. Definición de estilos

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Definición de estilos mediante clases Ejemplo:.rojo{color:red}.verde{color:green}.amarillo{color:yellow} Para aplicar este estilo a algún elemento se utiliza el atributo class de la misma forma que antes en los elementos HTML: Texto en rojo Texto en amarillo 6. Definición de estilos

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Definición de estilos mediante clases Ejercicio: Crear una página usando estilos mediante clases genéricas únicamente. Características de la página: Título Color de fondo:FFFFCC Color CC0033, centrado, negrita, tamaño 12pt, Comic Sans MS Texto izq. Texto Dcha. Arial, Izq., Tamaño 8 pt, Color lime Arial, Dcha., Tamaño 8 pt, Color purple 6. Definición de estilos

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Definición de estilos mediante ID Funciona de forma muy parecida a las clases, solo que solo puede ir asociada a un elemento. La sintaxis es la siguiente: #nombreid{propiedad:valor} Ejemplo: #parrafoespecial{font-weight:bold} … 6. Definición de estilos

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades PseudoClases Hay ocasiones en las que HTML da a algunas etiquetas un estilo propio: por ejemplo, los enlaces aparecen por defecto de otro color y subrayados. Estos elementos son las pseudoclases. Sintaxis: Etiqueta:pseudoclase{propiedad:valor} 6. Definición de estilos

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades PseudoClases Algunos ejemplos de pseudoclases son: link. Nos dice el estilo de un enlace que no ha sido visitado. visited. Nos dice el estilo de un enlace que ha sido visitado. active. Nos dice el estilo de un enlace que está siendo pulsado. hover. Nos dice el estilo de un enlace sobre el que está pasando el ratón. 6. Definición de estilos

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades PseudoClases Ejemplo: Para que los enlaces aparezcan sin subrayar: A:link,A:visited,A:active {text- decoration:none} 6. Definición de estilos

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Capas Las capas se pueden definir como páginas que se pueden incrustar dentro de otras. Los atributos de una capa (posición, visibilidad, etc.), como los de cualquier otro elemento HTML, pueden definirse dentro de una hoja de estilo. 7. Capas

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Capas La definición de una capa sigue la misma estructura que la que usábamos para decidir las características de una etiqueta con el parámetro ID: #micapa {position:absolute; top:100px; left:400px;background: url(zen-bg.jpg) } 7. Capas

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Capas Esto colocaría a la capa que hemos denominado micapa a 20 pixels de la izquierda de la página y a 100 del comienzo de la misma. Para escribir el contenido de la capa utilizaremos la etiqueta DIV El título de la capa Aquí es donde iría el texto Capas

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Podemos poner tantas capas como queramos: #micapa {position:absolute; top:100px; left:400px;background: url(zen-bg.jpg) } #micapa2 {position:absolute; top:200px; left:800px;background-color: green } El título de la capa Aquí es donde iría el texto.... El título de la otra capa Aquí es donde iría el texto Capas

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades EJEMPLO #capa1{position:absolute;top:100px; left:100px;width:500px;height:100px;background-color:red} #capa2{position:absolute;top:100px; left:100px;width:500px;height:100px;background-color:blue} a:hover{color:red;font-size:5cm} enlace 8. Ejemplos

TEMA 4. Hojas de Estilo 1. Introducción 2. Integración en HTML 3. Sintáxis 4. Unidades de medida 6. Definición de Estilos 7. Capas 8. Ejemplos 5. Propiedades Cambios sobre el ejemplo anterior Realiza pruebas sobre las unidades de medida en el ejemplo anterior. Utiliza: Centímetros Porcentajes Haz los cambios necesarios para que ambas capas se visualicen de manera que disten de los bordes un 10%. Elige el ancho de las capas, que debe ser el mismo para las dos. Prueba el resultado en distintos navegadores y distintas resoluciones de pantalla. Realiza también pruebas sobre los posibles valores del la propiedad position.¿Qué efecto tienen los distintos valores? 8. Ejemplos