Hoja de estilo

Taller CSS

INtroduccion: ver pag. 42

CSS es un lenguaje que da al HTML estilos visuales a los elementos del documento.

Cada navegador garantiza estilos para cada etiqueta html.

El CSS3 ya trae términos para que cada navegador aplique los estilos correspondientes

para que los diseñadores puedan aplicar.

Estilos CSS

a) Elementos block ( es por defecto )

b) Elementos Inline.

a) Elementos block:

Los elementos son posicionados uno de bajo de otro.

b) Elementos Inline : Los elementos sopo posicionados unos al lado del otro, sin saltos de

línea.

Modelo de caja

Cada navegador considera a un elemento html como una caja con sus propias

reglas.

Juntando las rglas de los navegadores y CSS se pueden hacer desarrollo web.

La combinación de reglas se llama modelo de caja tradicional.

Conceptos básicos de estilos

a) Estilos en línea:

Es colocar los estilos dentro de las etiquetas html, usando el atributo style.

Ejercicio:

1. Crear la pagina: estilo1.html en bloc de notas: ver pag. 45

<!DOCTYPE html>

<html lang="es">

<head>

<title>Este es el título del documento</title>

</head>

<body>

Mitexto

</body>

</html>

2. Guardar y probar.

b) Estilos embebidos:

Insertar estilos en la cabecera del documento.

3. Crear la pagina: estilo2.html

<!DOCTYPE html> <html lang="es"> <head> <title>Este texto es el título del documento</title> <style> p { font-size: 20px } </style> </head> <body> Mitexto </body> </html>

c) Archivosexternos:

4. Crear en bloc de notas: misestilos1.css

5. Digitar:

p { font-size: 20px }

6. Guardar archivo.

7. Crear la pagina: estilos3.html

8. Digitar:

<!DOCTYPE html> <html lang="es"> <head> <title>Este texto es el título del documento</title> <link rel="stylesheet" href="misestilos.css"> </head> <body> Mitexto </body> </html>

9. Guardar y probar.

Referencias:

Son los métodos para asignar estilos a las

etiquetas html.

a) Por la clave del elemento.

b) Por el atributo id

c) Por el atributo class

a) Por la clave:

Es el caso del ejemplo: misestilos1.html

b) Por el atributo id:

Para cada id asignado a una etiequeta se le

asigna un estilo en particular.

Formato usado en el archivo css:

#valor_id{ parámetro1 :

valor;parametron:valor; }

Ejemplo:

#texto1 { Font-size: 20px }

10.Abrir el bloc de notas del archivo: misestilos1.css:

11.Añadir:

#texto1 { Font-size: 20px }

12.Guardar.

13. Abra el bloc de notas de la pagina: estilos3.html

14. Digite:

<!DOCTYPE html> <html lang="es"> <head> <title>Este texto es el título del documento</title> <link rel="stylesheet" href="misestilos.css"> </head> <body> Mitexto Mi texto </body> </html>

Hoja de estilo

Documents

Transcript of Hoja de estilo