Scribd Logo
Importer

Bienvenue sur Scribd !

  • Uso de Hojas de Estilos

    Transféré par

    Felipe Flores Vilca
    7 vues4 pages
    DSJDASLD ASDASJDLASJDLASJDAS DD AILJ DAAD KLDJ AKLADJ KLASD JASDASK DJDKL ASJDKAS DKLASDASKLJASASAD AS

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    DSJDASLD ASDASJDLASJDLASJDAS DD AILJ DAAD KLDJ AKLADJ KLASD JASDASK DJDKL ASJDKAS DKLASDASKLJASASAD AS

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    7 vues4 pages

    Uso de Hojas de Estilos

    Transféré par

    Felipe Flores Vilca
    DSJDASLD ASDASJDLASJDLASJDAS DD AILJ DAAD KLDJ AKLADJ KLASD JASDASK DJDKL ASJDKAS DKLASDASKLJASASAD AS

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 4

    1

    USO DE HOJAS DE ESTILOS


    EJEMPLOS

    EJEMPLO1

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>ejemplo css interno </title>

    <STYLE TYPE="text/css">
    BODY {background: yellow ;font-size: 10pt;
    font-family: Arial; margin-left: 0.5in; margin-right: 0.5in}
    H1 {background: blue; font-size: 14pt;font-weight: bold; color: red}
    H2 {font-size: 12pt;font-weight: bold; color: red}
    H4 {font-size: 12pt;font-weight: bold; color: white}
    DIV {background: URL(universo.jpg)}

    </STYLE>

    </HEAD>

    <body>
    <h1>ejemplo de uso de css interno</h1><br>
    <h2>mi primer ejemplo</h2>
    <div><p> <h4>El consorcio que regula los estandars para la web
    recomienda separar el contenido de una página de su diseño.
    El contenido se genera con html (tienes un curso de html aquí),
    y el diseño toma forma mediante código css. Estas siglas significan
    hojas de estilo en cascada, y su misión es la de proporcionar
    un diseño uniforme para todo nuestro sitio web.
    Esto proporciona una ventaja muy importante: a la hora de realizar
    cambios en el diseño de nuestra web, no necesitamos cambiar el código
    de cada una de las páginas que tengamos; sinó que bastará con cambiar
    solo el código css para que haga efecto en todos los documentos de
    nuestro sitio web.
    Lo primero que se verá en este curso será la sintaxis de este lenguaje;
    después veremos las diferentes formas de implementar esta tecnología
    en nuestra web y, por último, nos centraremos en asimilar los diferentes
    elementos para controlar nuestro diseño.
    </div>
    </body>
    </html>
    2

    EJEMPLO2
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <link href="estilo2.css" type="text/css"
    rel="stylesheet" />

    </head>
    <body>
    <h1><center>ejemplo de hojas de estilos externas</h1></center>
    <h1>capitales de paises del sur</h1>
    <br>
    <table>
    <tr>
    <td>peru</td><td >chile</td><td>brasil</td>
    </tr>
    <tr>
    <td>lima</td><td>santiago</td><td>brasilia</td>
    </tr>
    </body>
    </html>

    EJEMPLO3

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <link href="estilo3.css" rel="stylesheet" type="text/css" />

    </head>
    <body>
    <h1><center>ejemplo de hojas css usando clases </h1></center>
    <table border="1" cellspacing="3" cellpadding="0">
    <tr class="rojo">
    <td id="resaltado">Estas celdas son color rojo</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr class="azul">
    <td>&nbsp;</td>
    <td><font>Estas celdas son color azul</td> </font>
    <td>&nbsp;</td>
    </tr>
    <tr class="verde">
    3

    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td ><font>Estas celdas son color verde </td></font>
    </tr>
    </table>

    </body>
    </html>

    HOJAS DE ESTILOS
    ESTILO1
    BODY {font-family: verdana, arial, sans-serif; font-size: 10pt;}
    H1 {font-size: 16pt; font-weight: bold; color: #0066CC;}
    H2 {font-size: 12pt; font-weight: bold; font-style: italic; color: black;}
    H3 {font-size: 10pt; font-weight: bold; color: black;}
    TH {font-size: 10pt; font-weight: bold; color: white; background: #0066CC; text-align: left;
    text-align: center; }
    CENTER{color:olive;}
    TD {font-size: 10pt; background: #CCCCCC; vertical-align: middle}

    ESTILO2
    table {
    border-style:double;
    background-color:aliceblue;
    border-spacing:12px;
    }

    th {
    border-style:solid;
    background-color:aquamarine;
    }

    td {
    border-style:groove;
    background-color:orange;
    padding:10px;
    }

    CENTER {color:red;}
    H1 {font-size: 16pt; font-weight: bold; color: green;}

    ESTILO 3
    table {
    border-style:double;
    background-color:aliceblue;
    border-spacing:12px;
    }
    4

    th {
    border-style:solid;
    background-color:aquamarine;
    }
    font {color:yellow}

    .rojo td {
    background: #FF0000;
    }

    .azul td {
    background: #000099;
    }
    .verde td {
    background: #009966;
    }

    #resaltado{font-size:1em;font-weight:bold; color:white; font:arial}


    CENTER {color:red;}
    H1 {font-size: 16pt; font-weight: bold; color: green;}

    Vous aimerez peut-être aussi