Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

Tema 3 - Formulario y CSS

Descargar como docx, pdf o txt
Descargar como docx, pdf o txt
Está en la página 1de 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