Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 34

Visitas el mes pasado: 42

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




10. Formularios (IV)

10.4 Estilo

Paso 27

logo miweb

El archivo formulario.css

En las páginas anteriores de este tema hemos creado un formulario. El formulario, aunque acabado, no está presentable, ya que aparecen todos los elementos en el estilo por defecto de la página. En esta página crearemos un archivo de estilo (CSS) para maquetar y dar forma a los elementos del formulario.

para ello haremos un nuevo archivo CSS, llamado formulario.css, ya que en la cabecera del archivo formulario.html tenemos ya el enlace o link a este archivo CSS.

Tal como hemos hecho en las páginas anteriores de nuestra web, empezamos por crer un archivo de texto en blanco, (si usas HTML-Kik pulsa en "Archivo / Nuevo.." y en el cuadro que aparece pulsa en la pestaña "General" y dentro de ella en "Blank Text File").

Con el archivo en blanco abierto, que después guardaremos como el archivo CSS, empezamos a escribir para poner el estilo de los elementos que están dentro del id="principal", pero fuera del formulario, es decir, el título principal, los párrafos, y el título del formulario. Escribimos por tanto lo siguiente:

/*estilo específico para formularios.html*/
/*titulo principal, título de formulario, y párrafos */
#principal h2 { margin: 0.5em; color: navy; font-size: 1.5em }
#principal p { margin: 0.5em 5em; text-align: justify; font-size: 0.9em; }
#principal h3 { color: #4b0082; margin: 0.5em 2em; }

La primera línea es un comentario con la descripción de la página. La segunda es también un comentario, con lo que vamos a hacer en las siguientes.

En la tercera linea cambiamos el estilo del título principal. Damos un margen, cambiamos el color y aumentamos el tamaño.

La cuarta línea cambia el aspecto de los párrafos. Pone los márgenes, da una alineación justificada, y reduce el tamaño de letra. Esta regla CSS afecta también a los párrafos que están dentro del formulario, lo que en principio nos viene bien porque así cambiamos también su estilo.

La última línea que hemos puesto cambia el estilo del título del formulario. Cambiamos aquí el color y los márgenes.

Después de escribir lo anterior cerramos el archivo. Al cerrarlo lo guardamos con el nombre de formulario.css y lo ubicamos en la carpeta raíz de nuestra web.

Comprobamos después el resultado de este cambio, para ello abrimos el archivo formulario.html con el navegador, el cual quedará como el del siguiente enlace:


El aspecto de la página ha mejorado, sin embargo todavía debemos hacer algunos cambios en el formulario.


Formulario: estilo general

Pondremos aquí el estilo general para el formulario, y separaremos las dos secciones. Abrimos por tanto el archivo formulario.css con el editor de textos y debajo de lo que habíamos escrito antes escribimos lo siguiente:

/*Formulario: Aspectos generales:*/
#principal h4 { text-align: left; color: purple; font-size: 1.1em; margin: 0.5em 4em; }
.seccion { width: 40%; margin: 4%; border: 1px solid black; float: left; }	

Como hacemos siempre, la primera línea es un comentario con la descripción de lo que vamos a modificar.

En la segunda línea modificamos los títulos de los apartados del formulario. Alineamos el texto a la izquierda, le cambiamos el color y le damos márgenes.

La tercera línea cambia el aspecto de cada una de las dos secciones o "divs" en que se divide el formulario. Restringimos la anchura a un 40% de la página. le ponemos un margen de un 4%, la referencia es también la anchura de la página. El margen al estar en tantos por ciento, afecta sólo en horizontal. Ponemos después un borde a las secciones, este consiste en una línea negra y continua de un pixel, (1px solid black). Por último posicionamos las secciones de forma flotante, de manera que queden las dos a la misma altura.

Cerramos y guardamos el archivo formulario.css, y comprobamos cómo queda la página después de este cambio. Para ello abrimos el archivo formulario.html con el navegador, el cual debe quedar como el del siguiente enlace:


El aspecto del formulario ha mejorado considerablemente, y está ya casi listo, sin embargo todavía pueden mejorarse algunos aspectos.


Formulario: elementos específicos

Aunque el formulario está ya casi listo, hay algunos aspectos que podemos mejorar. Observamos que dentro de los campos de texto el texto queda centrado, cosa que no queremos, ya que preferimos una alineación a la izquierda, por otra parte queremos ampliar el tamaño del "textarea", así como reducir el tamaño de letra de lo que se escribe dentro. Al campo "select" le daremos también un poco más de anchura. todo ello lo haremos mediante el lenguaje CSS.

Abrimos de nuevo el archivo formulario.css con el editor de textos, para modificar su contenido. Después de todo lo que hemos escrito anteriormente, escribiremos lo siguiente:

/*Formulario: elementos específicos*/							
input { text-align: left; }
textarea { text-align: left; font-size: 0.8em; width: 90%; height: 5em }
select { width: 12em; text-align: left;  }
option { text-align: left; }

Explicamos a continuación el codigo. La primera línea es el comentario de que vamos a cambiar algunos elementos.

La segunda línea cambia la alineación del texto que tiene que escribir el usuario dentro de las etiquetas input. Afecta a los tipos text y password.

La tercera línea cambia el aspecto del campo textarea. Alineamos el texto que hay dentro a la derecha, lo hacemos más pequeño, y ampliamos el recuadro en donde hay que escribir.

La cuarta línea cambia el aspecto de la lista desplegable (select). Alineamos el texto a la izquierda y alargamos un poco el recuadro.

En la última línea alineamos a la izquierda el texto de las opciones de la lista desplegable.

Después de haber incluido estas líneas, cerramos y guardamos el archivo formulario.css y comprobamos el resultado. Para ello abrimos el archivo formulario.html con el navegador, el cual debe quedar como el del siguiente enlace:


completamos con esto el archivo CSS, y por tanto también la página.


Código completo del archivo CSS

Vemos aquí el código completo del archivo formulario.css que hemos hecho en esta página.

/*estilo específico para formularios.html*/
/*titulo principal, título de formulario y párrafos */
#principal h2 { margin: 0.5em; color: navy; font-size: 1.5em }
#principal p { margin: 0.5em 5em; text-align: justify; font-size: 0.9em; }
#principal h3 { color: #4b0082; margin: 0.5em 2em; }
/*Formulario: Aspectos generales:*/
#principal h4 { text-align: left; color: purple; font-size: 1.1em; margin: 0.5em 4em; }
.seccion { width: 40%; margin: 4%; border: 1px solid black; float: left; }	
/*Formulario: elementos específicos*/							
input { text-align: left; }
textarea { text-align: left; font-size: 0.8em; width: 90%; height: 5em }
select { width: 12em; text-align: left;  }
option { text-align: left; }

Con esto la web está ya acabada. En la próxima página damos un resumen con la estructura de la web y los archivos que la componen.



En el siguiente paso acabamos esta página l incorporar un nuevo archivo CSS que nos maquetará y dará estilo al formulario.

Resumen




Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com