Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Ejemplos de Css

    Cargado por

    Veronica Navarro B
    3 vistas4 páginas
    Hojas estilo

    Título original

    Ejemplos de css

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Hojas estilo

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    3 vistas4 páginas

    Ejemplos de Css

    Cargado por

    Veronica Navarro B
    Hojas estilo

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 4

    EJEMPLO 1

    <HTML>
    <HEAD>
    <TITLE>Ejemplo de mrgenes, rellenos y bordes</TITLE>
    <STYLE type="text/css">
    UL {
    background: green;
    margin: 12px 12px 12px 12px;
    padding: 3px 3px 3px 3px;
    /* No se especifica border */
    }
    LI {
    color: black;
    /* el color del texto es negro */
    background: gray;
    /* Contenido, padding ser gris */
    margin: 12px 12px 12px 12px;
    padding: 12px 0px 12px 12px; /* Note 0px para padding right */
    list-style: none
    /* sin vieta antes de un tem */
    /* Ningn borde definido */
    }
    LI.withborder {
    border-style: dashed;
    border-width: medium;
    /* pone el ancho de border para todos los
    lados */
    border-color: black;
    }
    </STYLE>
    </HEAD>
    <BODY>
    <UL>
    <LI>El primer elemento
    <LI class="withborder">El segundo elemento de la lista es
    ms largo y se ajusta.
    </UL>
    </BODY>

    EJEMPLO 2
    <HTML>
    <HEAD>
    <TITLE>Ejemplo de flujo en lnea sobre varias lneas</TITLE>
    <STYLE type="text/css">
    EM {
    padding: 8px;
    margin: 1em;
    border-width: medium;
    border-style: dashed;
    line-height: 2.4em;
    }

    </STYLE>
    </HEAD>
    <BODY>
    <P>Algunas <EM>palabras con nfasis</EM> aqu.</P>
    </BODY>
    </HTML>
    EJEMPLO 3
    <HTML>
    <HEAD>
    <TITLE>Ejemplo de flotante</TITLE>
    <STYLE type="text/css">
    IMG { float: left }
    BODY, P, IMG { margin: 2em }
    </STYLE>
    </HEAD>
    <BODY>
    <P><IMG src=soporte.png alt="Esta imagen ilustrar un flotante">
    <br> Un texto de ejemplo que no tiene otro...
    <br>Un texto de ejemplo que no tiene otro...
    <br>Un texto de ejemplo que no tiene otro...
    <br> Un texto de ejemplo que no tiene otro...
    <br>Un texto de ejemplo que no tiene otro...
    <br>Un texto de ejemplo que no tiene otro...
    <br> Un texto de ejemplo que no tiene otro...
    <br>Un texto de ejemplo que no tiene otro...
    <br>Un texto de ejemplo que no tiene otro...
    </BODY>
    </HTML>

    EJEMPLO 4
    <HTML>
    <HEAD>
    <TITLE>Un documento con marcos con CSS2</TITLE>
    <STYLE type="text/css">
    BODY { height: 8.5in } /* Requerido para los porcentajes de altura usados
    abajo */
    #cabecera {
    position: fixed;
    width: 100%;
    height: 15%;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    }

    #lateral {
    position: fixed;
    width: 10em;
    height: auto;
    top: 15%;
    right: auto;
    bottom: 100px;
    left: 0;
    }
    #principal {
    position: fixed;
    width: auto;
    height: auto;
    top: 15%;
    right: 0;
    bottom: 100px;
    left: 10em;
    }
    #pie {
    position: fixed;
    width: 100%;
    height: 100px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    }
    </STYLE>
    </HEAD>
    <BODY>
    <DIV id="cabecera"> CABECERA </DIV>
    <DIV id="lateral"> LATERAL </DIV>
    <DIV id="principal">PRINCIPAL </DIV>
    <DIV id="pie"> PIE DE PAGINA </DIV>
    </BODY>
    </HTML>

    También podría gustarte