Kompozer: Crear una hoja de estilos

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Kompozer: Crear una hoja de estilos"

Nicolás Benítez Gil
hace 8 años
Vistas:

1 Kompozer: Crear una hoja de estilos Las hojas de estilo en cascada (en inglés, Cascading Style Sheets), son archivos con extensión.css que se utilizan para dar estilo a nuestros documentos html, separando el contenido de la presentación, de manera que cualquier cambio que hagamos en el estilo afectará a todas las páginas vinculadas a ese estilo. Con las hojas de estilo podemos cambiar el formato (tipo, fuente, tamaño de letra, colores, etc). Visita la página para ver una demostración de lo que se puede lograr con el diseño basado en CSS. Selecciona a la derecha distintos diseños. Al cambiar el formato css quedaría, por ejemplo, así: 1

afectará a todas las páginas vinculadas a ese estilo. Con las hojas de estilo podemos cambiar el formato (tipo, fuente, tamaño de letra, colores, etc).

2 1.- Vamos a crear una hoja de estilos sencilla. Para ello, abre desde el Kompozer el archivo arteprerromanico.html y pulsa sobre la etiqueta Código fuente. Fíjate que el texto que seleccionamos como Titulo 1 (Arte Prerrománico) se ha colocado entre las etiquetas <h1> y </h1>. Si elegimos títulos de otros tamaños (Título 2, Título 3, etc) utilizaríamos las etiquetas <h2>, <h3>, etc. La lista de viñetas se encuentra entre las etiquetas <ul> y </ul>; los enlaces utilizan la etiqueta <a href=...>, etc. 2.- Vamos a crear una hoja de estilos enlazada (Elem enl) para guardar los etilos en una hoja independiente. Para ello pulsa sobre el menú Herramientas/Editor CSS. 2

Si elegimos títulos de otros tamaños (Título 2, Título 3, etc) utilizaríamos las etiquetas <h2>, <h3>, etc.

3 3.- Se abre el cuadro de diálogo Hojas de estilo CSS. Seleccionamos la hoja de estilos interna y la eliminamos. 4.- Pulsa el botón de la paleta y elige crear una hoja de estilos enlazada (Elem. Enlace). 5.- Crea una carpeta estilos CSS en la carpeta Documents/Web/Web Asturias de tu pendrive. En el campo URL del cuadro de diálogo de Hojas de estilo CSS escribe la ruta relativa estilos CSS/estilo1.css. De esta manera se creará una hoja de estilos llamada estilo1.css en la carpeta estilos CSS. Pulsa sobre Crear hoja de estilos. 3

- Crea una carpeta estilos CSS en la carpeta Documents/Web/Web Asturias de tu pendrive.

4 6.- Pulsa otra vez sobre la paleta, pero esta vez selecciona Regla. Añadimos una nueva regla de estilo, para cambiar el tipo de letra y color de todos los elementos que estén dentro de las etiquetas <body> y </body>. Para ello selecciona estilo aplicado a todos los elementos de tipo y escribe body. Pulsa sobre el botón Crear regla de estilo. 4

elementos que estén dentro de las etiquetas <body> y </body>.

5 7.- Pulsa la pestaña Texto para cambiar el formato del texto para todos los elementos body. Pulsa sobre el botón Aceptar. 5

6 8.- Pulsa el botón Recargar en el Administrador de Sitios para ver que aparece la nueva hoja de estilos creada. El archivo arteprerrománico.html ha quedado modificado con la nueva hoja de estilos. 6

7 9.- Crea una nueva regla de estilos en el archivo estilo1.css para el selector <h1> (color rojo y subrayado) Crea una nueva regla para el selector <ul> (lista de viñetas). Cambia el color de fondo y el tipo de viñeta (a cuadrado) Si queremos modificar el estilo de los hipervínculos, tenemos que tener en cuenta los siguientes atributos de la etiqueta <a> del código HTML: link: enlace no visitado visited: enlace visitado active: enlace activo (cuando se está pulsando) hover: enlace con el ratón por encima. Crea las siguientes reglas: 7

- Si queremos modificar el estilo de los hipervínculos, tenemos que tener en cuenta los siguientes atributos de la etiqueta <a> del

8 a:link color negro a:visited color morado a:active bordes con estilo punteado Ahora vamos a enlazar otras páginas a esta hoja de estilos. Para ello abre la página gastronomía.html, accede al menú Herramientas/Editor CSS, pulsa sobre la paleta y escoge Elem. Enlace ; luego en el campo URL escoge el archivo estilo1.css que hemos creado. Pulsa sobre el botón Crear hoja de estilos para que queda enlazada a la página gastronomía.html. 8

html, accede al menú Herramientas/Editor CSS, pulsa sobre la paleta y escoge Elem.

Documentos relacionados

Páginas web ::: Hojas de estilo CSS Diseño de materiales multimedia. Web 2.0. 1.7 Hojas de estilo CSS

Páginas web ::: Hojas de estilo CSS Diseño de materiales multimedia. Web 2.0. 1.7 Hojas de estilo CSS 49 1.7 Hojas de estilo CSS 50 1.7 Hojas de estilo CSS 1.7.1 Qué es una hoja de estilo? Una hoja de estilo es un archivo de extensión *.CSS (CSS, Cascading Style Sheets = Hojas de estilo) que contempla