1
00:00:01,330 --> 00:00:08,710
A la hora de diseñar una página HTML, uno de los elementos más importantes es cómo vamos a encajar la información.

2
00:00:09,189 --> 00:00:13,949
En cajas visibles o no visibles, pero cómo vamos a ir poniendo esa información, distribuyéndola.

3
00:00:14,630 --> 00:00:19,149
Para ello, hay dos elementos que son importantísimos, el margin y el padding.

4
00:00:19,149 --> 00:00:25,629
El margin es el margen exterior a la información y el padding el margen interior a la información.

5
00:00:26,429 --> 00:00:29,550
Vemos aquí perfectamente cómo tenemos un elemento, que es este de aquí.

6
00:00:29,550 --> 00:00:40,549
Esto de aquí es un elemento que tiene un borde, este borde de aquí, y dentro hay un padding o margen interior y fuera de ese hay un margen exterior.

7
00:00:41,030 --> 00:00:45,009
Y el siguiente elemento que se escriba vendrá después de ese margen exterior.

8
00:00:46,170 --> 00:00:54,609
Bien, podemos ir cambiando elementos del modelo de cajas, perfectamente cambiándolo, cambiando una serie de componentes.

9
00:00:54,609 --> 00:00:59,710
Entonces podemos decir, por ejemplo, que el tamaño de la caja va a estar con un border box

10
00:00:59,710 --> 00:01:05,650
De tal manera que aquí definimos su ancho y su alto y su borde

11
00:01:05,650 --> 00:01:10,409
Y entonces decimos que esa va a ser la manera de introducirlo

12
00:01:10,409 --> 00:01:14,489
Bueno, aquí más ejemplos del mismo tipo

13
00:01:14,489 --> 00:01:17,829
Otro elemento muy importante es el display

14
00:01:17,829 --> 00:01:20,829
Cómo vamos a mostrar cualquier información

15
00:01:20,829 --> 00:01:23,170
No solamente las cajas, casi cualquier información

16
00:01:23,170 --> 00:01:27,750
con non simplemente no se genera esa información

17
00:01:27,750 --> 00:01:29,810
con block se muestra como un bloque

18
00:01:29,810 --> 00:01:34,049
inline va incluyendo como continuación de una línea

19
00:01:34,049 --> 00:01:39,969
inline block lo que hace es que forma como un bloque pero al lado de la línea

20
00:01:39,969 --> 00:01:45,489
running lo que hace es un tipo inline pero que se añade al principio del elemento siguiente

21
00:01:45,489 --> 00:01:49,989
list item es de tipo block pero incluye también el marcador

22
00:01:49,989 --> 00:01:53,790
Y después hay varios elementos, cajas, que forman parte de una tabla

23
00:01:53,790 --> 00:01:58,109
Que son todas estas y que ya las veremos en su entorno correspondiente

24
00:01:58,109 --> 00:02:01,769
Bueno, dicho eso, vamos a ver cómo manejamos bordes

25
00:02:01,769 --> 00:02:04,549
Entonces tenemos aquí bordes de todo tipo

26
00:02:04,549 --> 00:02:09,830
En los cuales lo más habitual es que lo que digamos sea el color, su grosor o su estilo

27
00:02:09,830 --> 00:02:14,469
Podemos poner border-top o border-pero

28
00:02:14,469 --> 00:02:19,569
Pero esto, border a pelo, significa simplemente un borde alrededor de todo

29
00:02:19,569 --> 00:02:26,009
Pueden ser valores fijos o puede ser fin fino, medio o thick grueso

30
00:02:26,009 --> 00:02:31,430
Y el color puede ser también el valor transparente o el código de algún color

31
00:02:31,430 --> 00:02:37,930
Que puede ser el nombre del color o su etiqueta hexadecimal precedida de una almohadilla

32
00:02:37,930 --> 00:02:40,870
O su código RGB entre paréntesis los valores

33
00:02:40,870 --> 00:02:47,389
Bien, tenemos un borde que es rojo de 5 píxeles y sólido

34
00:02:47,389 --> 00:02:48,969
Pues esta es la información que tenemos

35
00:02:48,969 --> 00:02:51,250
aquí tenemos un borde que es rojo

36
00:02:51,250 --> 00:02:53,250
5 píxel, pero que no tiene

37
00:02:53,250 --> 00:02:55,430
ningún tipo, entonces aquí ni aparece

38
00:02:55,430 --> 00:02:57,250
¿de acuerdo? con lo cual

39
00:02:57,250 --> 00:02:58,770
vemos que los tipos son

40
00:02:58,770 --> 00:03:01,250
ninguno, oculto

41
00:03:01,250 --> 00:03:02,530
que aparentemente es lo mismo

42
00:03:02,530 --> 00:03:05,129
a puntos

43
00:03:05,129 --> 00:03:06,669
a rayitas

44
00:03:06,669 --> 00:03:08,949
sólido, voy a seguir

45
00:03:08,949 --> 00:03:10,870
por aquí, doble

46
00:03:10,870 --> 00:03:13,189
el tipo groove, o donde

47
00:03:13,189 --> 00:03:14,389
fíjense que hay como

48
00:03:14,389 --> 00:03:17,689
como un espejo

49
00:03:17,689 --> 00:03:20,909
del marco

50
00:03:20,909 --> 00:03:22,389
que se ve por un lado o por otro

51
00:03:22,389 --> 00:03:24,189
por un sitio es un poco más arriba que otro

52
00:03:24,189 --> 00:03:26,129
inset y offset, ¿de acuerdo?

53
00:03:26,210 --> 00:03:28,409
dando un aspecto como que estamos dentro

54
00:03:28,409 --> 00:03:29,409
o fuera

55
00:03:29,409 --> 00:03:31,949
ese efecto tridimensional que dicen aquí

56
00:03:31,949 --> 00:03:34,490
yo no lo veo tan tridimensional, pero bueno, eso que dicen

57
00:03:34,490 --> 00:03:36,030
para las tablas

58
00:03:36,030 --> 00:03:38,310
cuando ponemos una tabla en principio

59
00:03:38,310 --> 00:03:40,129
no hay que decir si tiene un borde o no

60
00:03:40,129 --> 00:03:42,150
entonces podemos decir que la tabla puede estar

61
00:03:42,150 --> 00:03:43,689
los bordes colapsados

62
00:03:43,689 --> 00:03:46,189
es decir, las celdas están pegaditas

63
00:03:46,189 --> 00:03:47,129
unas con otras

64
00:03:47,129 --> 00:03:55,689
O podemos también ir definiendo cada uno de los bordes interiores

65
00:03:55,689 --> 00:03:57,750
Entonces, por ejemplo, aquí algunos van sin borde

66
00:03:57,750 --> 00:04:01,949
Estas dos celdas no llevan borde, con lo cual las podemos ocultar

67
00:04:01,949 --> 00:04:06,569
O podemos aquí decir simplemente que no haya

68
00:04:06,569 --> 00:04:08,509
Entonces las ponemos aquí

69
00:04:08,509 --> 00:04:13,490
Bien, hay borde en la parte de arriba, border top

70
00:04:13,490 --> 00:04:15,129
En la parte de abajo, border bottom

71
00:04:15,129 --> 00:04:18,370
a la izquierda border-left y a la derecha border-right

72
00:04:18,370 --> 00:04:22,670
y yo puedo definir las características de cada una de ellas por separado

73
00:04:22,670 --> 00:04:24,529
aquí vemos varios ejemplos

74
00:04:24,529 --> 00:04:29,470
y también existen propiedades de border-color, border-width y border-style

75
00:04:29,470 --> 00:04:32,009
es decir, color, ancho y estilo

76
00:04:32,009 --> 00:04:35,410
entonces nosotros podemos ir definiendo toda esta información

77
00:04:35,410 --> 00:04:39,230
si solamente ponemos un valor, ahora lo vamos a ver mejor

78
00:04:39,230 --> 00:04:42,110
si solamente ponemos un valor, este valor se aplica a todo

79
00:04:42,110 --> 00:04:44,670
por ejemplo, el color es rojo, pues todo es rojo

80
00:04:44,670 --> 00:04:53,250
Si ponemos dos valores, se aplica arriba y abajo el primero, y el segundo a la derecha y a la izquierda.

81
00:04:53,889 --> 00:05:07,050
Si ponemos tres valores, se aplica el primero arriba, el segundo a la derecha, el tercero abajo, y el cuarto es el segundo que teníamos puesto.

82
00:05:07,050 --> 00:05:14,029
Y he seguido este orden porque va a ser el orden del reloj para entendernos. Primero, segundo, tercero y cuarto.

83
00:05:14,029 --> 00:05:16,629
¿De acuerdo? Ese es el orden que se va a seguir

84
00:05:16,629 --> 00:05:19,069
Aparte puedo indicar características

85
00:05:19,069 --> 00:05:23,750
Características, por ejemplo, color rojo y negro

86
00:05:23,750 --> 00:05:26,750
Como sé que es rojo y negro, rojo será arriba y abajo

87
00:05:26,750 --> 00:05:29,509
Y negro, derecha e izquierda

88
00:05:29,509 --> 00:05:29,910
¿De acuerdo?

89
00:05:30,470 --> 00:05:32,990
Podemos ir aplicando a cada elemento

90
00:05:32,990 --> 00:05:35,269
Características distintas

91
00:05:35,269 --> 00:05:38,269
Estas son las propiedades individuales

92
00:05:38,269 --> 00:05:42,230
Tema aparte son los bordes redondeados

93
00:05:42,230 --> 00:05:44,470
bordes redondeados, esto hasta hace

94
00:05:44,470 --> 00:05:45,769
no mucho no existía siquiera

95
00:05:45,769 --> 00:05:47,850
y poco a poco va introduciéndose

96
00:05:47,850 --> 00:05:50,389
en todos los navegadores

97
00:05:50,389 --> 00:05:52,310
y bueno, pues aquí lo que vamos

98
00:05:52,310 --> 00:05:54,550
diciéndole es como es ese

99
00:05:54,550 --> 00:05:57,860
ese borde

100
00:05:57,860 --> 00:05:59,660
como es y como es el radio

101
00:05:59,660 --> 00:06:01,480
que se va a aplicar en los sitios

102
00:06:01,480 --> 00:06:03,240
correspondientes, como solo ponemos uno

103
00:06:03,240 --> 00:06:04,720
pues se aplica en todos los sitios

104
00:06:04,720 --> 00:06:06,779
si pusiéramos top left

105
00:06:06,779 --> 00:06:09,160
pues arriba y aquí

106
00:06:09,160 --> 00:06:10,860
a este lado, etc

107
00:06:10,860 --> 00:06:13,180
esto ya es simplemente ir jugando

108
00:06:13,180 --> 00:06:16,079
para obtener todo este tipo de salidas.