1
00:00:04,660 --> 00:00:10,439
referencia a través de, como habíamos visto anteriormente, pero con la almohadilla, almohadilla

2
00:00:10,439 --> 00:00:14,619
único, que sea como se llama, y luego la propiedad y el valor. Solo afectará a aquellos

3
00:00:14,619 --> 00:00:23,579
que tengan este ID. Si lo ponemos con P, estará haciendo esto, todas aquellas etiquetas que

4
00:00:23,579 --> 00:00:28,800
tengan, de párrafo que tengan el ID igual a único, pues serán afectados por un color

5
00:00:28,800 --> 00:00:36,600
azul, mientras que si ponemos la almohadilla con único sin el selector delante, estaremos

6
00:00:36,600 --> 00:00:42,240
indicando que todas aquellas etiquetas cuyo ID se llama único serán afectadas por esta

7
00:00:42,240 --> 00:00:52,939
propiedad valor. Esto en cuanto al resumen en cuanto a ACSS. También otro repaso quería

8
00:00:52,939 --> 00:01:02,140
en cuanto a el modelo de cajas, en cuanto a lo que es, a ver si lo encuentro, para que

9
00:01:02,140 --> 00:01:07,719
sepamos lo que es el padding y el margin. Aquí tenemos una caja, un modelo de caja

10
00:01:07,719 --> 00:01:15,879
en el que se divide en el margen externo, que sería este recuadro de color blanco,

11
00:01:16,040 --> 00:01:20,879
luego el borde, luego el margen interno y luego el contenido. Bien, el borde sería

12
00:01:20,879 --> 00:01:25,920
cuando tenemos un contenido, pues el color de borde que va a tener o el tipo de borde

13
00:01:25,920 --> 00:01:30,560
que va a tener. Dentro del contenido, el espacio que hay entre el contenido y el borde sería

14
00:01:30,560 --> 00:01:36,540
lo que es el margen interno. Y el margen interno es lo que llama aquí margin. Perdón, el

15
00:01:36,540 --> 00:01:42,140
margen interno es lo que llama aquí padding. Padding sería todo esto de aquí. Si se refiere

16
00:01:42,140 --> 00:01:49,519
a padding up, down, left o right, sería en cada uno de los márgenes. Pero el padding

17
00:01:49,519 --> 00:01:54,099
es este margen interno que está entre el contenido y lo que es el borde, el borde del

18
00:01:54,099 --> 00:02:01,099
contenido. Margen externo sería toda la parte de exterior entre el borde y el resto de página.

19
00:02:01,540 --> 00:02:07,280
Este margen externo se le llama margin. ¿Por qué? Porque cuando tenemos un, vamos a ver

20
00:02:07,280 --> 00:02:17,300
aquí un ejemplo, cuando hablamos de padding, top, bottom, right o left, estamos indicando

21
00:02:17,300 --> 00:02:33,990
en el padding estamos indicando este lado, este otro, este y este. En cambio, si lo que ponemos es, en vez de padding margin, estaríamos refiriéndonos a toda esta parte.

22
00:02:35,389 --> 00:02:48,610
Bien, entonces, con todos estos conceptos podemos pasar al ejemplo que tenemos aquí. Hemos visto cómo era el formulario y lo que vamos a ver primero es el documento HTML,

23
00:02:48,610 --> 00:03:07,229
Que es este de aquí que le he llamado mi formulario. Documento HTML, en principio, la primera parte que tiene sería esta de aquí, vamos a agrandarlo para que se vea, y sería pues toda la parte, bueno, sabéis que todo documento HTML tiene que estar flanqueado por HTML y luego aparte abajo sería barra HTML, ¿vale?

24
00:03:07,229 --> 00:03:20,729
Entonces tenemos el caso del lenguaje que le he puesto como atributo HTML y lo tenemos la cabecera. Esta sería la cabecera en la que le ha metido un título y le ha metido también un link.

25
00:03:21,030 --> 00:03:32,530
Ese link que aparece aquí va a hacer referencia a la página .css, que es mi CSS, que sería este de aquí, que es la que nos va a dar todo el estilo al formulario.

26
00:03:32,530 --> 00:03:36,509
ya lo hemos explicado

27
00:03:36,509 --> 00:03:37,710
se realizaba a través de link

28
00:03:37,710 --> 00:03:40,110
y luego pues a través de

29
00:03:40,110 --> 00:03:42,689
referenciando

30
00:03:42,689 --> 00:03:43,969
pues aquí va a ser una hoja de estilo

31
00:03:43,969 --> 00:03:46,469
de tipo text barra css

32
00:03:46,469 --> 00:03:48,210
esto hay que ponerlo

33
00:03:48,210 --> 00:03:49,770
en la cabecera

34
00:03:49,770 --> 00:03:51,789
para que pueda

35
00:03:51,789 --> 00:03:54,129
ya vimos que de las tres maneras

36
00:03:54,129 --> 00:03:55,389
para poder hacer referencia

37
00:03:55,389 --> 00:03:58,310
a una hoja de estilos o a un estilo

38
00:03:58,310 --> 00:03:59,629
pues se hacía a través

39
00:03:59,629 --> 00:04:01,150
de una referencia exterior

40
00:04:01,150 --> 00:04:07,949
que sería una referencia a una página exterior, que sería esta de aquí, que sería mi.css.css.

41
00:04:08,289 --> 00:04:11,569
Bien, una vez que ya se ha configurado el head, vamos a pasar al body.

42
00:04:11,689 --> 00:04:15,729
En el body vamos a tener al principio lo que es un div.

43
00:04:16,110 --> 00:04:26,149
El div no es nada más que una etiqueta que lo que va es a agrupar o a generar agrupaciones,

44
00:04:26,149 --> 00:04:39,810
Es como una especie de contenedor en el que en principio parece que no se ve parada, pero sirve para agrupar distintos componentes o etiquetas y dentro de ellas puedes darle un formato o un estilo.

45
00:04:39,810 --> 00:05:06,209
Si veis, he rodeado div a todo lo que es el formulario. Entonces, al poner el div, lo que estoy haciendo es que a toda la parte, no solo del formulario, sino incluido en las dos cabeceras que tenemos aquí, formulario de contacto y escribir, para denominarle con una clase como es contact form y le aplique en el CSS, le aplique todas estas reglas del contact form.

46
00:05:06,209 --> 00:05:20,689
Por eso le he añadido el div. Bien, ese div que va a tener en principio tendrá dos cabeceras, una primera que será formulario de contacto y otra que escribimos y en breve le pondremos en contacto contigo.

47
00:05:20,689 --> 00:05:33,910
Bien, vimos que en estas cabeceras el tamaño de letra era mayor cuanto más pequeño pues era el número que había acompañado al lado derecho de la H, entonces este sería un título mucho mayor y este más pequeño.

48
00:05:33,910 --> 00:05:53,430
Si nosotros lo ejecutamos, nosotros lo ejecutamos, vemos que esas dos cabeceras serían esta de aquí, que sería el H1, y este sería el H3.

49
00:05:53,430 --> 00:05:59,009
bien entonces seguimos si seguimos aquí

50
00:05:59,009 --> 00:06:02,930
vemos que ya empieza el formulario y en

51
00:06:02,930 --> 00:06:04,470
el formulario pues bueno le ha metido el

52
00:06:04,470 --> 00:06:08,730
método post y va a estar configurado

53
00:06:08,730 --> 00:06:12,089
pues por varias varias partes

54
00:06:12,089 --> 00:06:17,610
aquí tengo las bien esta es la parte

55
00:06:17,610 --> 00:06:18,850
primera parte del formulario que lo

56
00:06:18,850 --> 00:06:21,689
único que tiene pues es un dos párrafos

57
00:06:21,689 --> 00:06:22,949
con en el que