1
00:00:05,809 --> 00:00:18,429
Voy a explicar en qué consiste el modelo de caja para los elementos HTML y también vamos a realizar la actividad que está asociada a esta explicación, a este tema.

2
00:00:19,210 --> 00:00:27,429
Entonces, el modelo de caja consiste en entender que todos los elementos HTML, como el que aparece en la imagen, que es un párrafo, realmente están contenidos en una caja.

3
00:00:27,429 --> 00:00:40,090
y que podemos cambiar alguna de sus propiedades CSS para modificar su apariencia, entendiendo, como os digo, que están contenidos en una caja.

4
00:00:40,950 --> 00:00:53,189
También es importante recordar los conceptos de elemento en bloque y elemento en línea que alguna vez hemos hablado, pero que no he insistido mucho y que ahora os voy a comentar con unos ejemplos.

5
00:00:53,189 --> 00:01:02,759
Es importante que hayáis leído las actividades o todos los apartados que

6
00:01:02,759 --> 00:01:07,519
recomendaba sobre CSS para entender bien lo que ahora vamos a hacer.

7
00:01:07,519 --> 00:01:13,680
Entonces vamos a ir a brackets. Estos primeros ejemplos conviene hacerlos en

8
00:01:13,680 --> 00:01:17,840
el modo o mediante código. Aunque utilicemos bluegriffon, en principio os

9
00:01:17,840 --> 00:01:22,579
recomiendo que uséis la opción de código para empezar a manejar CSS y para

10
00:01:22,579 --> 00:01:28,439
entenderlo mejor entonces bueno aquí dentro de un documento html simplemente

11
00:01:28,439 --> 00:01:35,359
escrito un párrafo y quería manifestar pues que los párrafos se muestran en

12
00:01:35,359 --> 00:01:40,200
bloque como vamos a comprobar que se muestran en bloque quiere decir que

13
00:01:40,200 --> 00:01:54,140
aunque el siguiente elemento html que aparezca en esta página va a aparecer a

14
00:01:54,140 --> 00:01:58,519
a pesar de que tiene espacio, va a aparecer en otra línea.

15
00:01:58,519 --> 00:02:07,439
Es decir, los párrafos ocupan todo el espacio del navegador que hay a su lado.

16
00:02:08,419 --> 00:02:15,500
Para ver esto vamos a utilizar la primera propiedad CSS para aplicar estilos mediante CSS.

17
00:02:15,879 --> 00:02:23,879
Como ya sabéis, se puede hacer de diferentes maneras, pero en este caso lo voy a hacer mediante la etiqueta style

18
00:02:23,879 --> 00:02:27,879
en el G del documento, voy a coger

19
00:02:27,879 --> 00:02:33,949
selector párrafo, eso quiere decir que las propiedades

20
00:02:33,949 --> 00:02:37,969
que voy a modificar van a afectar al párrafo y simplemente vamos a utilizar

21
00:02:37,969 --> 00:02:41,069
una propiedad que es la propiedad border

22
00:02:41,069 --> 00:02:45,930
vamos a poner un border de 2 píxeles, sólido y de color rojo

23
00:02:45,930 --> 00:02:49,750
vale, le doy a guardar

24
00:02:49,750 --> 00:02:53,310
y vemos como se modifica en el navegador, aquí podemos

25
00:02:53,310 --> 00:02:57,590
apreciar lo que os decía, observamos como los párrafos

26
00:02:57,590 --> 00:03:01,509
a pesar de el texto del propio párrafo no ocupa

27
00:03:01,509 --> 00:03:05,449
el ancho del navegador, sí que lo hace el bloque, puesto que es

28
00:03:05,449 --> 00:03:10,009
un elemento en bloque. Los elementos en línea

29
00:03:10,009 --> 00:03:15,110
son por ejemplo, o un ejemplo de elemento en línea puede ser

30
00:03:15,110 --> 00:03:18,349
los enlaces, en este caso un enlace

31
00:03:18,349 --> 00:03:22,009
vamos a poner un enlace que no lleva a ningún sitio

32
00:03:22,009 --> 00:03:47,969
En este caso vamos a comprobar como un enlace es un elemento en línea y esto quiere decir que permite, si hay ancho suficiente, que los elementos aparezcan uno al lado de otro.

33
00:03:48,849 --> 00:03:54,129
Ahí vemos que aunque en la línea de código yo esté separando los enlaces, aquí aparecen juntos.

34
00:03:54,129 --> 00:04:25,180
Si añadimos la propiedad border a los enlaces, comprobaríamos que en este caso el elemento ocupa simplemente el espacio del propio contenido, es decir, es un elemento en línea.

35
00:04:26,759 --> 00:04:34,180
Los propios bordes que han aparecido en estos elementos nos muestran esa forma de caja de la que hablamos.

36
00:04:34,180 --> 00:04:50,879
Vamos a ir ahora viendo cómo modificamos las propiedades de esa caja. Por ejemplo, vemos que entre los dos enlaces que hemos creado existe una separación, o entre el enlace y el borde existe una separación que ahora mismo es mínima.

37
00:04:50,879 --> 00:05:18,860
Eso sería la propiedad margin y nos permite establecer un valor determinado de píxeles para generar esa separación. Por ejemplo, voy a poner 10 píxeles. También estos valores se pueden poner en porcentajes, pero bueno, de momento para entender el modelo de caja vamos a utilizar píxeles como medida de comunidad de distancia.

38
00:05:18,860 --> 00:05:22,040
comprobamos que aparece esa separación

39
00:05:22,040 --> 00:05:25,000
la siguiente propiedad sería la separación

40
00:05:25,000 --> 00:05:27,800
que hay entre el contenido y el borde interior de la caja

41
00:05:27,800 --> 00:05:32,160
esa propiedad

42
00:05:32,160 --> 00:05:36,220
es el padding, podemos establecer

43
00:05:36,220 --> 00:05:38,699
una separación como os decía

44
00:05:38,699 --> 00:05:42,000
entre el contenido

45
00:05:42,000 --> 00:05:45,680
y el borde interior

46
00:05:45,680 --> 00:05:47,879
ahí vemos

47
00:05:47,879 --> 00:05:52,600
podríamos hacer lo mismo

48
00:05:52,600 --> 00:05:56,759
con los elementos de tipo párrafo

49
00:05:56,759 --> 00:06:00,699
y posteriormente lo vamos a hacer en el ejercicio. También podríamos

50
00:06:00,699 --> 00:06:04,360
la siguiente propiedad sería la que establece un color para

51
00:06:04,360 --> 00:06:07,100
el fondo de estas cajas.

52
00:06:08,319 --> 00:06:10,819
Vamos a coger un fondo

53
00:06:10,819 --> 00:06:16,360
y vemos que según vamos cambiando

54
00:06:16,360 --> 00:06:19,800
lo vamos activando y podríamos cambiar, por ejemplo,

55
00:06:19,800 --> 00:06:24,300
esto no es una propiedad de caja

56
00:06:24,300 --> 00:06:28,500
sino es una propiedad de cualquier elemento que es el color del elemento

57
00:06:28,500 --> 00:06:34,279
vale, pero ahora vamos a comprobar

58
00:06:34,279 --> 00:06:39,259
otra cosa importante que es la forma en la cual

59
00:06:39,259 --> 00:06:42,379
aparecen estos elementos y como podemos modificarlos

60
00:06:42,379 --> 00:06:44,699
es decir, podemos modificar

61
00:06:44,699 --> 00:06:50,600
la propiedad display que es la forma en la que se muestra un elemento párrafo

62
00:06:50,600 --> 00:06:58,000
un elemento enlace de en línea a bloque o viceversa bueno se me olvidaba también que

63
00:06:58,000 --> 00:07:03,959
podemos manejar la propiedad del ancho que también es interesante en muchos casos por

64
00:07:03,959 --> 00:07:15,740
ejemplo vamos a manejar la propiedad del ancho en el caso de los párrafos y vamos a ponerle

65
00:07:15,740 --> 00:07:28,139
que sean de un 30% y ahí observamos cómo se ha reducido el ancho de la caja al tamaño que

66
00:07:28,139 --> 00:07:40,290
le hemos dicho, ya que mediante la propiedad display vamos a poder hacer que por ejemplo

67
00:07:40,290 --> 00:07:45,850
un elemento que se muestra normalmente en bloque como es un párrafo pues se muestre

68
00:07:45,850 --> 00:07:56,980
en línea, bueno en este caso como todos los elementos serán en línea vemos que se nos

69
00:07:56,980 --> 00:08:01,379
han incluso superpuesto, vamos a intentar arreglar esto de alguna forma, para empezar

70
00:08:01,379 --> 00:08:17,079
vamos a hacer lo contrario, vamos a decir a los enlaces que se muestren como un bloque, ahí lo tenemos, como no les hemos puesto ningún ancho determinado,

71
00:08:17,220 --> 00:08:33,940
pues se muestran como un bloque y ocupan todo el ancho de la página. Bueno, pues vamos a añadirle un ancho determinado, por ejemplo, igual que los que le hemos puesto a los párrafos,

72
00:08:33,940 --> 00:08:48,840
Pero mirad lo que nos pasó con el párrafo. A pesar de haberle puesto un ancho, el hecho de obligarles a ponerse en línea establece esa forma de mostrarse con el contenido a lo largo del párrafo.

73
00:08:48,840 --> 00:09:07,919
Es decir, no me está respetando esta propiedad. Para ello, lo interesante es utilizar una propiedad combinada, que es el inline block, y que nos permite llegar al resultado que nos interesa, que es que aparezcan en línea, pero con un ancho, en este caso, del 30%.

74
00:09:08,899 --> 00:09:17,899
Ahí vemos que conseguíamos el efecto deseado. Esto es un poco lo que se nos pedía en la actividad que os he propuesto.

75
00:09:19,100 --> 00:09:26,299
La verdad es que pretendía resolverla, pero yo creo que con estas indicaciones vais a ser capaces de resolverlo vosotras solas.

76
00:09:26,299 --> 00:09:31,000
una cosa que faltaría

77
00:09:31,000 --> 00:09:32,100
que hago en la actividad

78
00:09:32,100 --> 00:09:34,340
y que no es tanto del modelo de caja

79
00:09:34,340 --> 00:09:35,440
sino en general

80
00:09:35,440 --> 00:09:38,679
es quitar el subrayado

81
00:09:38,679 --> 00:09:41,019
de los enlaces