Scribd Logo
Hochladen

Willkommen bei Scribd!

  • CSS Lab: Estilos para títulos y párrafos

    Hochgeladen von

    AnaNieto
    23 Ansichten5 Seiten
    HTML

    Originaltitel

    LabCSS Nieto,Ana 1IL142

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    DOCX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    HTML

    Copyright:

    © All Rights Reserved
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    23 Ansichten5 Seiten

    CSS Lab: Estilos para títulos y párrafos

    Hochgeladen von

    AnaNieto
    HTML

    Copyright:

    © All Rights Reserved
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 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.

    Das könnte Ihnen auch gefallen