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>
<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>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
Mitexto
 
Mi texto
</body>
</html>

Hoja de estilo

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Hoja de estilo

Similar a Hoja de estilo (20)

Más de Nadin David Herrera

Más de Nadin David Herrera (20)

Hoja de estilo