tarea

UPOLI Campus Rivas
Páginas Web

XVI. HOJAS DE ESTILO
Objetivos
- Entender la importancia de separar el contenido de la forma de presentar el documento en
la pantalla
- Conocer las instrucciones que permiten al css ser una manera fácil de reutilizar esfuerzos.
- Conocer la sintaxis básica para la creación de hojas de estilo
- Aplicar estilo sin importan a que texto o elementos se leaplica
- Valorar los beneficios que se obtienen al estructurar de manera correcta las páginas al
momento de aplicar estilos.
- Conocer los colores web estándares comunes
Conceptos generales
Introducción
 Separar contenido de formato
 css1-recomendación 1996
 css2-recomendación 1998, últimos cambios de la recomendación 2006
 css3-borrador
 No todos los exploradores reconocen todas lasfuncionalidades de css2. Nos centraremos
en las que funcionan en IE y Firefox.
Herramientas para las CSS
 Editores: bloc de notas, Dreamweaver, otros..
 Validador:
http://jigsaw.w3.org/css-validator/
Existen programas que validan código HTML-XHTML y CSS. Por ejemplo:
http://www.htmlvalidator.com/htmldownload2.html
Selector
 Elemento al que se asocia el estilo:
selector { declaraciónestilo }
Ejemplos:
body {background-color: blue;}
h1,h2,h3 {font-size:40pt;}
Declaración
 Declaración de un estilo:
propiedad: valor;
 Ejemplo:
background-color: red;
h1
{propiedad1:valor1;
Página 1 de 13

propiedad2:valor2;}
Ing. Wilfredo José Meneses Bejarano - Facilitador

UPOLI Campus Rivas
Páginas Web

Clases
 Para crear nuestros propios selectores.
 Podemos usar elselector class o el selector id.
 .nombre_clase {estilos}
 Se puede usar esta clase para cualquier etiqueta
 nombre_etiqueta.nombre_clase {estilos}
 Solo se puede usar esta clase para la etiqueta nombre_etiqueta
 Ejemplos:
 .eni {font-family: Verdana;}
 blockquote.eni {font-family: Verdana;}
 Para usar la clase:

 Ejemplo: ….
 Se puede invocar la clase varias veces
 Se puedencombinar las declaraciones class e id.
 El selector id también puede usarse para aplicar estilos, pero sólo puede usarse una
sola vez en el documento al contrario que class.
 #nombre_id {estilos}
 Ejemplo: #eni {font-family: Verdana;}
 Invocación:

 Ejemplo: …
Comentarios
 Los comentarios en css se ponen así:
/* comentario */
Unidades de medida
 Xhtml sólo usa pixel yporcentaje.
 Css permite otras posibilidades
Unidad

Descripción

Valor

Ejemplo

in

Pulgada

Real

0.1in

cm

Centímetro

Entero

6cm

mm

Milímetro

Entero

60mm

Página 2 de 13

Ing. Wilfredo José Meneses Bejarano - Facilitador

UPOLI Campus Rivas
Páginas Web

pt

Puntos

Entero

48pt

pc

Picas (12 puntos)

Real

4.5pc

px

Píxel

Entero800px

%

Porcentaje

Entero

30%

Notación de colores
 Xhtml sólo palabras clave (red, blue…) y valores en hexadecimal.
 css otras alternativas:
 #rrggbb: no usar comillas
 #rgb: notación abreviada que implica que si el color es #cde , en realidad es #ccddee
 rgb(r,g,b): r, g y b números decimales entre 0 y 255.
 rgb(r%,g%,b%)
 Palabra clave: red, blue,….
CSS y XHTML Indicar que se usan hojas de estilo en el documento xhtml:

 Inserción de estilos en línea: (Evitar)
 Ejemplo:
Titulo
 Inserción de estilos en la cabecera:


……

……

 css exterior al documento (recomendada)

 Podemos poner todas las etiquetas link que queramos
 Podemos usar al mismo tiempo hojas de estilo internas y estilos en línea.
 css exterior al documento


Página 3de 13

Ing. Wilfredo José Meneses Bejarano - Facilitador

UPOLI Campus Rivas
Páginas Web


 Esta notación es de css2 y no funciona en muchos exploradores.
 EJERCICIO I: modificar alguno de los ejercicios de temas anteriores para ver si esta
sintaxis funciona en IE y en Firefox.
Noción de Cascada
 En caso de convergencia entre varios estilos, interviene la noción de “cascada” o...