Aplicación en documento web
CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una página Web:
- Una hoja de estilo externa, esta almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
- Una hoja de estilo interna, está incrustada dentro de un documento HTML (Dentro del elemento <head>). De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML se pierde. En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica específica una página Web.
- Un estilo en línea, que es un método para insertar el lenguaje de
estilo de página, directamente, dentro de una etiqueta HTML. Este
modo de trabajo se podría usar de manera ocasional si se pretende
aplicar un formateo al vuelo. No es todo lo claro, o estructurado, que
debería ser, pero funciona. es necesario incluir el atributo STYLE.
Hoja de estilo interna
El siguiente código estará colocado en el head del archivo html.
<style>
body {
background-color:#345485;
}
h1 {
color:orange;
font-family:'Times New Roman';
text-align:center;
}
p {
color:#E9EBAB;
font-family:Arial,Helvetica,sans-serif;
font-size:20px;
text-align:center;
}
</style>
Hoja de estilo externa
- El código que a continuación se presenta deberá almacenarse en un archivo con extensión css.
- Dicho archivo será referenciado desde el head con la siguiente línea.
<head>
<link href='0306css02.css' rel='stylesheet' />
<head>
Fijar una imagen de fondo
- El atributo background nos indica la imagen que se usara de fondo (línea 2)
- El atributo background-attachment en fixed fija la imagen al centro de la forma (línea 3).
body {
background: transparent url('escudoITV.png')
no-repeat center
background-attachment: fixed;
}
h1 {
color:red;
font-family:'Times New Roman';
font-size:24px;
font-weight:bold;
text-align:center;
}
h2 {
color:blue;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
font-weight:bold;
text-align:center;
}
p {
color:black;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
text-align:center;
}
No hay comentarios:
Publicar un comentario