Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Ejemplo formulario HTML y CSS. Parte4 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 19 de diciembre de 2024 por Francisco J. G.

39 visualizaciones

Ejemplo formulario HTML y CSS. Parte4

Más información Transcripción

Descargar la transcripción

Hemos pasado a 130, vamos a ponerlo para que se vea más caro marcado, vamos a poner 300, en vez de los 80. 00:00:06
Lo guardamos, si veis, ¿veis cómo ha aumentado el margen exterior? 00:00:15
Si lo ponemos ahora en 80, que era lo que tenía, y le damos a guardar, vemos que se modifica. 00:00:31
¿Qué tenemos en cuanto al padding? 00:00:44
El padding, lo habíamos visto, el padding era el margen interno entre el borde y el contenido. 00:00:45
Ahora nos vamos a nuestro padding. 00:00:52
Hemos dicho que el padding top es de 30, el padding bottom es de 20, 00:00:57
que el color de fondo va a ser ese color blanco y que el padding izquierdo va a ser de 30 píxeles. 00:01:02
Bien, yo puedo modificar el padding, sería lo que hay desde el contenido hasta aquí. 00:01:09
hasta aquí y hasta aquí y luego abajo. Entonces, veis que el fondo, el background es de color 00:01:13
blanco, pero vamos a cambiar el padding, por ejemplo, el top, vamos a cambiar el left para 00:01:20
que se vea marcado y vamos a ponerle a 100. Al cambiarle el padding, si nos vamos a la 00:01:26
página, le damos a actualizar, veis que ese padding izquierdo está modificándose, lo 00:01:36
Lo cual hace que se reduzca el padding derecho, porque es lo único que hemos añadido. Al no añadir el padding derecho, el padding izquierdo modifica por defecto el padding derecho. 00:01:43
Lo colocamos en como estaba y tendríamos que, entonces, en resumen, constant form o lo que es todo el div que englobaba todo el formulario estaría formado por todas estas propiedades. 00:01:56
Y repaso, que el borde radius se refiere, que no lo he explicado, se refiere pues a cómo en el borde, cómo se redondea esto. Si yo modifico, bueno, antes de hacerlo, vamos a guardarlo y lo vamos a actualizar. 00:02:13
entonces, vamos al resumen, hemos dicho que de aquí a aquí sería el padding 00:02:34
que serían todas las propiedades del padding y que la parte externa 00:02:40
de aquí a aquí sería el margin, luego hemos visto que la amplitud 00:02:44
del formulario que se ve afectado sería esta de aquí a aquí 00:02:48
los 470 píxeles y que 00:02:52
estábamos con el borde de radios que sería de 10 píxeles, que sería el redondeo 00:02:54
de aquí, si yo le aumento el redondeo, le pongo a 50 00:03:00
veréis que no lo deja más redondeado, no lo deja tan cuadrado 00:03:04
como aparece actualmente. Al darle a actualizar veis que te lo redondea 00:03:08
más. En cuanto a todas las demás propiedades 00:03:12
de, por ejemplo, del input, si veis casi todo 00:03:15
es lo mismo. El input, cada uno de los inputs 00:03:22
que tenemos, todos, tanto los input text como 00:03:26
input text area, input email, tel, etc., pues van a tener todas estas propiedades de valor. 00:03:30
Estas propiedades de valor nos están diciendo que el color de fondo va a ser blanco, que 00:03:37
la amplitud va a ser de 408 píxeles y la altura de 40 píxeles, y que el radio va a 00:03:41
ser 5 píxeles, no es muy marcado, si lo vemos aquí, el radio, veis, no es muy marcado en 00:03:48
cuanto a cada uno de los inputs, nos está diciendo también que el estilo del borde 00:03:54
va a ser un estilo sólido, como el que veis aquí, que el color del borde va a ser este 00:04:05
color rosa, que es el que aparece, y luego el margin y el padding, como hemos visto anteriormente, 00:04:13
Este sería, pues, el de aquí a aquí, sería, pues, el, como veis aquí, sería, pues, el margin, el exterior, aquí, aquí, y de aquí a aquí sería el padding, ¿vale? 00:04:19
¿Veis? Margin era la parte externa, que era de aquí a aquí, y padding de aquí a aquí, ¿vale? 00:04:34
Y poco más en cuanto al ejemplo que acabo de poner. El resto de componentes son muy parecidos, también le aplica un estilo al botón, pero todos son muy parecidos a los que acabo de indicar. 00:04:48
Y este sería pues el ejemplo de un formulario completo y sencillo. Y nada más, nos vemos en los siguientes tutoriales. 00:05:11
Idioma/s:
es
Materias:
Informática
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado superior
      • Primer Curso
      • Segundo Curso
Autor/es:
Francisco J. González Constanza
Subido por:
Francisco J. G.
Licencia:
Todos los derechos reservados
Visualizaciones:
39
Fecha:
19 de diciembre de 2024 - 22:32
Visibilidad:
Público
Centro:
IES CIFP a Distancia Ignacio Ellacuría
Duración:
05′ 22″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
147.46 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid