Tema 3 - Formulario y CSS
Tema 3 - Formulario y CSS
Tema 3 - Formulario y CSS
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>
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" />
<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>
<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;
}
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>