Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Tema 3 - Formulario y CSS

    Cargado por

    Vladimir FT
    96 vistas9 páginas
    Tema 3 . Formulario y CSS

    Título original

    Tema 3 . Formulario y 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
    Tema 3 . Formulario y CSS

    Copyright:

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

    Tema 3 - Formulario y CSS

    Cargado por

    Vladimir FT
    Tema 3 . Formulario y CSS

    Copyright:

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

    Selectores bsicos

    h1 {
    color: #8A8E27;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    }

    Selector de clase
    En el documento html:
    <body>
    <p class="destacado">Lorem ipsum dolor sit amet...</p>
    <p>Nunc sed lacus et est adipiscing accumsan...</p>
    <p>Class aptent taciti sociosqu ad litora...</p>
    </body>
    En el documento css:
    .destacado { color: red; }

    Selectores de ID
    Documento css:
    #destacado { color: red; }
    p#aviso { color: blue; }
    Documento html:
    <p>Primer prrafo</p>
    <p id="destacado">Segundo prrafo</p>
    <p>Tercer prrafo</p>

    Fondo de una imagen


    body { background-image: url("imagenes/fondo.png") }

    uso de cajas con imagenes


    #caja1 {
    background-image: url("images/help.png");
    background-repeat: no-repeat;
    background-position: bottom left;
    }
    #caja2 {
    background-image: url("images/help.png");
    background-repeat: no-repeat;
    background-position: right top;
    }
    #caja3 {
    background-image: url("images/help.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    }
    En el document html:

    <div id="caja1"><h1>bottom left</h1></div>


    <div id="caja2"><h1>right top</h1></div>
    <div id="caja3"><h1>50% 50%</h1></div>

    Formularios
    Mostrar un botn como un enlace
    Las reglas CSS del ejemplo anterior son las siguientes:
    .enlace {
    border: 0;
    padding: 0;
    background-color: transparent;
    color: blue;
    border-bottom: 1px solid blue;
    }
    En el html:
    <input type="button" value="Botn normal" />
    <input class="enlace" type="button" value="Botn como enlace" />

    Mejoras en los campos de texto


    Aadiendo un pequeo padding a cada elemento <input>, se mejora
    notablemente el aspecto del formulario:

    La regla CSS necesaria para mejorar el formulario es muy sencilla:


    form.elegante input { padding: .2em; }

    Labels alineadas y formateadas


    Los elementos <input> y <label> de los formularios son elementos en lnea, por
    lo que el aspecto que muestran los formularios por defecto, es similar al de la
    siguiente imagen:

    El cdigo HTML del ejemplo anterior es el siguiente:

    <form>
    <fieldset>
    <legend>Alta en el servicio</legend>
    <label for="nombre">Nombre</label>
    <input type="text" id="nombre" />
    <label for="apellidos">Apellidos</label>
    <input type="text" id="apellidos" size="50" />
    <label for="dni">DNI</label>
    <input type="text" id="dni" size="10" maxlength="9" />
    <label for="contrasena">Contrasea</label>
    <input type="password" id="contrasena" />
    <input class="btn" type="submit" value="Darme de alta" />
    </fieldset>
    </form>

    Aprovechando los elementos <label>, se pueden aplicar unos estilos CSS


    sencillos que permitan mostrar el formulario con el aspecto de la siguiente imagen:

    En primer lugar, se muestran los elementos <label> como elementos de bloque,


    para que aadan una separacin para cada campo del formulario. Adems, se
    aade un margen superior para no mostrar juntas todas las filas del formulario:
    label {
    display: block;
    margin: .5em 0 0 0;
    }

    El botn del formulario tambin se muestra como un elemento de bloque y se le


    aade un margen para darle el aspecto final deseado:
    .btn {
    display: block;
    margin: 1em 0;
    }

    En ocasiones, es ms til mostrar todos los campos del formulario con


    su <label> alineada a la izquierda y el campo del formulario a la derecha de
    cada <label>, como muestra la siguiente imagen:

    Para mostrar un formulario tal y como aparece en la imagen anterior no es


    necesario crear una tabla y controlar la anchura de sus columnas para conseguir
    una alineacin perfecta. Sin embargo, s que es necesario aadir un nuevo
    elemento (por ejemplo un <div>) que encierre a cada uno de los campos del
    formulario (<label> y <input>). El esquema de la solucin propuesta es el
    siguiente:

    Figura 11.6 Esquema de la tcnica de alineacin de etiquetas label y campos de


    formulario
    Por tanto, en el cdigo HTML del formulario anterior se aaden los
    elementos <div>:
    <form>
    <fieldset>

    <legend>Alta en el servicio</legend>
    <div>
    <label for="nombre">Nombre</label>
    <input type="text" id="nombre" />
    </div>
    <div>
    <label for="apellidos">Apellidos</label>
    <input type="text" id="apellidos" size="35" />
    </div>
    ...
    </fieldset>
    </form>

    Y en el cdigo CSS se aaden las reglas necesarias para alinear los campos del
    formulario:
    div {
    margin: .4em 0;
    }
    div label {
    width: 25%;
    float: left;
    }

    Estructura o layout
    Diseo a 2 columnas con cabecera y pie de pgina
    El objetivo de este diseo es definir una estructura de pgina con cabecera y pie,
    un men lateral de navegacin y una zona de contenidos. La anchura de la pgina
    se fija en 700px, la anchura del men es de 150px y la anchura de los contenidos
    es de 550px:

    El cdigo HTML y CSS mnimos para definir la estructura de la pgina sin aplicar
    ningn estilo adicional son los siguientes:
    #contenedor {
    }
    #cabecera {
    }
    #menu {
    float: left;
    width: 15%;
    }
    #contenido {
    float: left;
    width: 85%;
    }
    #pie {
    clear: both;
    }

    Diseo a 3 columnas con cabecera y pie de pgina


    La solucin CSS emplea la misma estrategia del diseo a dos columnas y se basa
    en utilizar las propiedades float y clear:

    El cdigo HTML y CSS mnimos para definir la estructura de la pgina sin aplicar
    ningn estilo adicional son los siguientes:
    #contenedor {
    }
    #cabecera {
    }
    #menu {
    float: left;
    width: 15%;
    }
    #contenido {
    float: left;
    width: 85%;
    }
    #contenido #principal {
    float: left;
    width: 80%;
    }
    #contenido #secundario {
    float: left;
    width: 20%;
    }
    #pie {
    clear: both;

    }
    <body>
    <div id="contenedor">
    <div id="cabecera">
    </div>
    <div id="menu">
    </div>
    <div id="contenido">
    <div id="principal">
    </div>
    <div id="secundario">
    </div>
    </div>
    <div id="pie">
    </div>
    </div>
    </body>

    También podría gustarte