1
00:00:00,500 --> 00:00:12,480
Aunque las hojas de estilo, las Cascade Style Seeds, pueden utilizarse en XML, realmente se definieron para ser utilizadas con HTML, que veremos posteriormente.

2
00:00:12,480 --> 00:00:16,559
Sin embargo, bueno, un poco la idea si queremos verla

3
00:00:16,559 --> 00:00:20,579
Entonces, bueno, pues nosotros tenemos en este caso este documento XML

4
00:00:20,579 --> 00:00:23,739
Que no tiene hojas de estilo, en la cual definimos una biblioteca

5
00:00:23,739 --> 00:00:31,079
Donde hay multitud de libros y cada uno de los libros dispone de un título, un autor y una fecha de publicación

6
00:00:31,079 --> 00:00:35,159
Del autor incluso a veces podemos saber su fecha de nacimiento

7
00:00:35,159 --> 00:00:38,899
Y de la publicación conocemos el año en que se publicó

8
00:00:38,899 --> 00:00:50,100
Bueno, visto este documento, nosotros si lo publicáramos en Firefox o Google Chrome o Microsoft Edge, pues esta información la veríamos de una manera determinada.

9
00:00:51,439 --> 00:00:53,200
De esta manera, ¿de acuerdo?

10
00:00:53,780 --> 00:00:59,020
Siempre y cuando estuviera bien escrito, si estuviera como el escrito, daría error en cualquiera de estos navegadores.

11
00:00:59,020 --> 00:01:05,459
Bueno, a cualquier fichero HTML o a cualquier fichero XML

12
00:01:05,459 --> 00:01:09,599
Le podemos indicar que se le aplique un CSS

13
00:01:09,599 --> 00:01:14,299
En el caso de HTML5, de HTML para entendernos

14
00:01:14,299 --> 00:01:17,840
La forma de indicar que se le aplique es esta de aquí

15
00:01:17,840 --> 00:01:24,159
Sin embargo, en un CSS sería indicar que se le aplica una hoja de estilo con esta referencia

16
00:01:24,159 --> 00:01:25,200
¿De acuerdo?

17
00:01:26,260 --> 00:01:26,680
Bien

18
00:01:26,680 --> 00:01:30,739
Nosotros tenemos esta información

19
00:01:30,739 --> 00:01:32,700
Libro cuyo título es

20
00:01:32,700 --> 00:01:33,920
La vida está en otra parte

21
00:01:33,920 --> 00:01:35,159
Y autor Miran Kundera

22
00:01:35,159 --> 00:01:36,700
Y fecha de publicación es 73

23
00:01:36,700 --> 00:01:38,620
Y libro

24
00:01:38,620 --> 00:01:40,900
Si no aplicamos

25
00:01:40,900 --> 00:01:42,659
Si aplicamos esta información

26
00:01:42,659 --> 00:01:44,040
Que no tiene realmente nada

27
00:01:44,040 --> 00:01:46,859
Puede ser ir a publicar simplemente la parte

28
00:01:46,859 --> 00:01:48,299
Que está en la parte de texto

29
00:01:48,299 --> 00:01:50,540
La vida está en otra parte

30
00:01:50,540 --> 00:01:53,920
La vida está en otra parte

31
00:01:53,920 --> 00:01:56,079
Miran Kundera

32
00:01:56,079 --> 00:01:57,939
Milan Kundera

33
00:01:57,939 --> 00:02:00,799
pero podemos

34
00:02:00,799 --> 00:02:02,879
empezar a indicar elementos

35
00:02:02,879 --> 00:02:04,680
que van a tener características propias

36
00:02:04,680 --> 00:02:05,840
por ejemplo, que el título

37
00:02:05,840 --> 00:02:08,639
su color, el color del texto

38
00:02:08,639 --> 00:02:10,219
esté en color rojo

39
00:02:10,219 --> 00:02:12,560
bien, pues entonces veríamos

40
00:02:12,560 --> 00:02:14,060
la información de esta manera

41
00:02:14,060 --> 00:02:16,580
la vida es a la parte, en color rojo

42
00:02:16,580 --> 00:02:19,159
y Milan Kundera tal como venía

43
00:02:19,159 --> 00:02:22,360
o incluso hacerle aplicar

44
00:02:22,360 --> 00:02:24,159
las características propias de

45
00:02:24,159 --> 00:02:26,080
XHTML, por lo tanto

46
00:02:26,080 --> 00:02:28,139
si ponemos una etiqueta H1

47
00:02:28,139 --> 00:02:29,800
que ya veremos que significa header

48
00:02:29,800 --> 00:02:31,800
1 o cabecera 1

49
00:02:31,800 --> 00:02:33,759
pues lo veremos de esta manera

50
00:02:33,759 --> 00:02:36,120
y la transformación así

51
00:02:36,120 --> 00:02:36,979
¿de acuerdo?

52
00:02:38,680 --> 00:02:39,319
bueno

53
00:02:39,319 --> 00:02:42,180
podemos incluso enlazar con

54
00:02:42,180 --> 00:02:44,060
varias hojas de estilo, ¿de acuerdo?

55
00:02:44,800 --> 00:02:46,020
entonces en una ponemos

56
00:02:46,020 --> 00:02:48,099
el título cuyo color está en rojo

57
00:02:48,099 --> 00:02:50,080
y otra que decimos que

58
00:02:50,080 --> 00:02:52,280
el tamaño de la fuente, del autor

59
00:02:52,280 --> 00:03:02,819
esté al doble de tamaño pues este es el caso o incluso podemos ir cambiando según su título en

60
00:03:02,819 --> 00:03:09,219
distintos al visualizar un navegador diversos estilos distintos esto realmente no se puede

61
00:03:09,219 --> 00:03:17,520
hacer con chrome pero si se puede que hacer con firefox y así podemos definir y estableciendo

62
00:03:17,520 --> 00:03:19,659
elementos para distintas partes de nuestro

63
00:03:19,659 --> 00:03:20,639
xml

64
00:03:20,639 --> 00:03:23,280
la propiedad display es realmente importante

65
00:03:23,280 --> 00:03:25,520
porque display block es que la muestre

66
00:03:25,520 --> 00:03:27,599
y display none es que no

67
00:03:27,599 --> 00:03:29,740
lo muestre, y hay algunas cosas intermedias

68
00:03:29,740 --> 00:03:30,580
que ya iremos viendo

69
00:03:30,580 --> 00:03:32,680
además tenemos

70
00:03:32,680 --> 00:03:34,759
cosas como inline

71
00:03:34,759 --> 00:03:37,719
se visualiza, se displaya

72
00:03:37,719 --> 00:03:39,680
o se visualiza en línea

73
00:03:39,680 --> 00:03:41,740
o listing en forma

74
00:03:41,740 --> 00:03:43,580
de lista, o table en forma

75
00:03:43,580 --> 00:03:44,699
de tabla, etc

76
00:03:44,699 --> 00:03:50,759
de acuerdo, entonces bueno, pues aquí estamos viendo información mostrada de diversas maneras

77
00:03:50,759 --> 00:03:53,900
y además de las listas podemos tener contadores

78
00:03:53,900 --> 00:03:59,740
entonces tenemos un contador que hacemos que cada vez que haya una etiqueta biblioteca se resete

79
00:03:59,740 --> 00:04:05,479
que siempre que haya un libro, antes de que arranque el libro, se incremente el contador

80
00:04:05,479 --> 00:04:09,300
y que se haga de forma alfanumérica mayúsculas

81
00:04:09,300 --> 00:04:10,780
vemos aquí ABC

82
00:04:10,780 --> 00:04:13,719
y aquí podemos mostrar información de varias maneras

83
00:04:13,719 --> 00:04:14,960
O aquí que sea una tabla

84
00:04:14,960 --> 00:04:17,040
No vamos a extender mucho más

85
00:04:17,040 --> 00:04:18,160
Aquí vemos más ejemplos

86
00:04:18,160 --> 00:04:19,660
Pero no vamos a extender mucho más

87
00:04:19,660 --> 00:04:21,800
Porque lo veremos esto más despacio

88
00:04:21,800 --> 00:04:23,220
Y de mejor manera

89
00:04:23,220 --> 00:04:27,079
Cuando se le aplique un CSS a un HTML