Vous êtes sur la page 1sur 5

UNIVERSIDAD TECNOLGICA DE PANAM

FACULTAD DE INGENIERA DE SISTEMAS COMPUTACIONALES


HERRAMIENTAS DE PROGRAMACIN APLICADA IV
GUA DE LABORATORIO
CASCADE STYLE SHEETS
NOMBRE: NIETO, ANA 8-892-1660

Objetivos:

Modificar una pgina web (.html) desde un archivo CSS (.css)


Observar los cambios que presenta la pgina web (.html) con las propiedades de
CSS (.css)

Enunciado:

Crear una regla para la etiqueta <p>


Crear reglas independientes para las etiquetas <h1>, <h2>,<h3>

Crear una pgina web que describa un objeto (auto, cama, casa, etc.) sin utilizar
propiedades dentro del .html, utilizando el siguiente formato:

Titulo con el nombre del objeto.


Imagen del objeto.
Prrafo que describa el objeto en cuestin.

Luego, crear un archivo .css (con el nombre de propiedades.css) que contenga el


siguiente cdigo:

h1, h2, h3

serif;

margin-right: auto;

text-align: center;

img

color: black;

font-weight: normal;

display:block;

text-align: justify;

font-family: Arial,
Helvetica, sans-

margin-left: auto;

color: black;

font-weight: normal;

font-family: Arial,
Helvetica, sans-

serif;
}

Nota: para importar el archive .css al HTML, utilice la etiqueta <link> y escriba el
siguiente cdigo dentro de la etiqueta <head>:
<head>
<link rel=stylesheets type=text/css href=propiedades.css>
</head>

Observe, y proceda a hacer los siguientes cambios:

Cambie los colores del ttulo y el prrafo a negro.


Centre el ttulo.
Justifique el prrafo.
Cambie la fuente del ttulo a Verdana.

DESARROLLO DEL LABORATORIO

Creacin de la pgina con el ttulo, imagen y la descripcin del objeto

Como se puede observar cada nombre de objeto tiene una etiqueta diferente
(etiquetas <h1>, <h2>, <h3>), esto para efecto de las siguientes instrucciones que se
crearan en el cdigo CSS. De igual manera se puede observar que para cada prrafo
se le coloco una instruccin parecida a esta id= objeto (objeto=cama, sof, silla),
esto nos servir para que nuestro elemento tome el estilo del selector P#objeto
(objeto=cama, sof, silla), que estar definido en el archivo .CSS (propiedades.css).

Creacin del archivo CSS que contiene las reglas para <p> y para <h1>, <h2>,
<h3>.
h1
{
text-align: center;
color: black;
font-weight: 300;
font-family:
cursive;
}
h2
{
text-align: left;

color: Red;
font-weight: 200;
font-family:
fantasy;
}
h3
{
text-align: left;
color: blue;
font-weight: 250;

font-family:
monospace;
}
img
{
display:block;
margin-left: auto;
margin-right:
auto;
}
p#Cama

{
text-align: justify;
color:green;
font-size: 12pt;
font-family:
cursive;
}
p#Sofa
{
text-align: justify;

color:red;
font-size: 14pt;
font-family:
monospace;
}
p#Silla
{
text-align: justify;
color:green;
font-size: 16pt;

Resultado de la ejecucin de la pgina labcss.html

font-family:
"Homer
Simpson",
cursive;
}

Cada elemento tomo los estilos correspondientes a los que se definieron en nuestro cdigo
CSS.