Prácticas Internet y web 2.0. Utilizar hojas de estilo para dar formato a las páginas web.

Transcripción

1 PRÁCTICA 13. HOJAS DE ESTILO. Objetivos: Utilizar hojas de estilo para dar formato a las páginas web. Teoría: ESTILOS. CSS (Cascading Style Sheets) es un lenguaje que describe el estilo de una página web. Tienes una guía de referencia completa en Podemos hacer una página web utilizando estilos, por ejemplo con la etiqueta y el lenguaje CSS (EJEMPLO 1): background-color: lightblue; h1 { color: white; text-align: center; font-family: verdana; font-size: 20px; <h1>my First CSS Example</h1> <p>this is a paragraph.</p> Si analizamos el código anterior, veremos que la etiqueta da un estilo a cada tipo de etiqueta, así, definimos el color de fondo de como azul claro, las etiquetas de título - 1 -

2 <h1> color blanco y centradas, y los párrafos con tipo de letra verdana y tamaño 20. Fíjate en la sintaxis, cada etiqueta que definimos tiene sus atributos entre llaves { y cada atributo va separado por un punto y coma ;. Podemos asignar dos estilos distintos a la misma etiqueta mediante el atributo id. (EJEMPLO 2): #elemento1 { #elemento2 { color: green; <p id= elemento1 >En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.</p> <p>una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.</p> <p id= elemento2 > El resto della concluían sayo de velarte, calzas de velludo para las fiestas con sus pantuflos de lo mismo, los días de entre semana se honraba con su vellori de lo más fino.</p> En este caso tenemos tres párrafos, cada uno de un color. El atributo id nos sirve para identificar un elemento concreto dentro de la página web, por lo que solo se puede utilizar una vez. Se define dentro de los estilos con el símbolo #

3 Para poder reutilizar un estilo, lo hacemos mediante una clase (EJEMPLO 3): span { color: red;.clase1 { <p>en un lugar de la <span>mancha</span>, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un <span class= clase1 >hidalgo</span> de los de lanza en astillero, adarga antigua, rocín flaco y <span class= clase1 >galgo corredor</span>.</p> En este ejemplo tenemos tres etiquetas <span>, una de ellas dibujará en rojo, otras dos según la clase clase1, definida en color azul. Definimos las clases con un punto. delante. HOJAS DE ESTILOS. El código definido dentro de la etiqueta es lo que denominamos la hoja de estilos, y lo más común es sacar ese código de la página web y llevarlo a otro fichero que solo almacene la información de los estilos. El fichero estilos.css sería este: - 3 -

4 span { color: red;.clase1 {.clase2 { color: fuchsia; font-style: italic; El fichero html queda ahora con menos código: <link rel="stylesheet" type="text/css" href="estilos.css"/> <p>en un lugar de la <span>mancha</span>, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un <span class="clase1">hidalgo</span> de los de lanza en astillero, <span class="clase2">adarga</span> antigua, <span class="clase2">rocín</span> flaco y <span class="clase1">galgo corredor</span>.</p> Aparece una nueva instrucción en la cabecera con la etiqueta <link>, que relaciona la hoja de estilos estilos.css con la página web. El atributo rel nos indica el tipo de relación, en este caso stylesheet, u hoja de estilos, el atributo type nos indica el tipo de archivo, y el atributo href nos indica dónde está y cómo se llama el fichero de estilos. De este modo separamos el contenido del formato

5 Práctica: 1. Copia el texto de EJEMPLO 1 y prueba a cambiar atributos de estilo. Deja el fondo color verde claro, el título en rojo y el párrafo en azul oscuro. Llámale practica13a.html. 2. Copia el texto de EJEMPLO 2 (cuidado con las comillas, quizá tengas que reescribirlas en el bloc de notas), y mete dos etiquetas <span>, una para la palabra Mancha y otra para hidalgo, con colores rojo y fucsia, respectivamente. La palabra hidalgo debe ir en negrita también (defínelo en el estilo). Llámale practica13b.html. 3. Copia el texto de EJEMPLO 3 (cuidado con las comillas, quizá tengas que reescribirlas en el bloc de notas), y prueba el atributo clase. Crea una nueva clase en color fucsia y tipo de letra cursiva para las palabras adarga y rocín. Llámale practica13c.html. 4. Saca los estilos de la práctica 13c a un fichero aparte, y haz que siga funcionando como antes. Llámale practica13d.html. 5. Sube las prácticas comprimidas al Aula Virtual