1
00:00:00,240 --> 00:00:01,290
Dar una buena acogida.

2
00:00:01,290 --> 00:00:06,670
Entonces, este video va a ser una descripción general de alto nivel de cómo funciona la evaluación y qué hace.

3
00:00:06,720 --> 00:00:11,310
Así que queremos escribir cualquier código hasta la próxima lección y casi todas las lecciones

4
00:00:11,310 --> 00:00:13,120
a partir de ahí nos cubrirán.

5
00:00:13,500 --> 00:00:18,930
Pero lo que vamos a hacer es tres cosas importantes para definir el éxito y hablar

6
00:00:18,930 --> 00:00:21,870
sobre el papel que desempeña por qué lo usas.

7
00:00:21,870 --> 00:00:24,180
Vamos a ver algunos sitios web que tienen el.

8
00:00:24,210 --> 00:00:27,560
Vamos a sacar el C S C S y ver cómo cambian.

9
00:00:27,900 --> 00:00:32,490
Y luego vamos a definir esta regla general que seguirá para cada línea de CSSA que escribamos.

10
00:00:34,380 --> 00:00:39,580
Entonces, vamos a hablar sobre cuál es la postura de las hojas de estilos en cascada.

11
00:00:39,840 --> 00:00:43,670
Entonces, la parte en cascada a la que vamos a volver en un video posterior.

12
00:00:43,830 --> 00:00:46,690
Pero las hojas de estilo son bastante auto explicativas.

13
00:00:46,710 --> 00:00:55,390
Recuerde que C Ss a menudo se considera los adjetivos o la piel donde H M L serían los sustantivos.

14
00:00:55,590 --> 00:00:59,830
Entonces, Jim Ellis, la estructura que queremos al encabezar aquí y un punto de vista aquí.

15
00:01:00,090 --> 00:01:07,740
Solíamos decir que los encabezados eran de color púrpura y el tamaño de fuente de 50 píxeles, moverlo hacia abajo

16
00:01:07,740 --> 00:01:09,170
y darle un borde.

17
00:01:09,240 --> 00:01:13,760
Entonces lo usamos para describir cómo deberían verse las cosas, así que las hojas de estilo.

18
00:01:13,770 --> 00:01:19,410
La otra parte es la parte de las hojas y lo que eso significa es que vamos a escribir

19
00:01:19,530 --> 00:01:21,030
estas separadamente de cada equipo.

20
00:01:21,110 --> 00:01:23,400
No están dentro de HMO.

21
00:01:23,460 --> 00:01:27,590
Son documentos separados que luego incluimos en nuestra HMO.

22
00:01:28,020 --> 00:01:31,510
Empecemos por echar un vistazo a algunos ejemplos.

23
00:01:31,560 --> 00:01:35,430
sitio que realmente me gusta llamado jardín CSX Zen y el

24
00:01:38,610 --> 00:01:44,490
objetivo de este sitio es mostrarte la variedad de cosas que puedes lograr con Jesse s.

25
00:01:44,490 --> 00:01:45,220
Hay un

26
00:01:45,300 --> 00:01:49,200
Entonces, si miran aquí, tenemos un margen de beneficio.

27
00:01:49,260 --> 00:01:52,120
Miremos el archivo HDMI.

28
00:01:52,410 --> 00:01:54,010
Podemos continuar y abrir eso.

29
00:01:54,450 --> 00:01:58,780
Así que este es el archivo central que cada página de NCEA dice.

30
00:01:58,840 --> 00:02:00,300
El jardín Zen usa.

31
00:02:00,300 --> 00:02:02,130
Entonces puedes ver que es bastante básico.

32
00:02:02,130 --> 00:02:04,280
Tenemos algunos encabezados.

33
00:02:04,280 --> 00:02:10,260
Tenemos algunos párrafos, algunos enlaces, algunas viñetas en la parte inferior, y luego, la idea general

34
00:02:10,260 --> 00:02:16,710
de este sitio es que los contribuyentes lo envíen por correo electrónico y escriban su propio CSSA

35
00:02:16,710 --> 00:02:17,580
sin cambiarlo.

36
00:02:17,580 --> 00:02:23,360
Entonces solo cambias para ver que la estructura es la misma y terminas con diferentes resultados.

37
00:02:23,370 --> 00:02:25,550
Así que aquí hay uno.

38
00:02:25,720 --> 00:02:31,320
Y en el lado derecho puede ver algunos otros y hay muchos en el sitio y realmente puede

39
00:02:31,350 --> 00:02:33,800
contribuir con los suyos si así lo desea.

40
00:02:34,080 --> 00:02:35,020
Bueno, echemos un vistazo.

41
00:02:35,250 --> 00:02:42,750
Así que este es radicalmente diferente total diferentes diseños diferentes esquemas de color fuentes de imágenes.

42
00:02:42,750 --> 00:02:44,190
Este también es muy diferente.

43
00:02:44,190 --> 00:02:47,840
Tiene esta bonita animación de carga, todo hecho Roscius nosotros.

44
00:02:48,240 --> 00:02:54,420
Puede desplazarse hacia abajo y tenemos este efecto donde nuestro contenido se desplaza pero la imagen de fondo es estática.

45
00:02:56,130 --> 00:03:00,190
Tenemos este que es radicalmente diferente también.

46
00:03:01,020 --> 00:03:06,990
Y podríamos pasar todo el día aquí y solo encontramos uno más que es mi favorito, que

47
00:03:06,990 --> 00:03:08,820
es un robot llamado Jimmy.

48
00:03:09,190 --> 00:03:13,510
Obtenemos a este pequeño robot que aparece en este giro con un estallido en la espalda.

49
00:03:13,620 --> 00:03:20,860
También otro efecto de desplazamiento, así que te estoy mostrando esto para que puedas ver qué tan poderoso es CSSA.

50
00:03:21,060 --> 00:03:23,330
Básicamente es el doctor de la piel.

51
00:03:23,370 --> 00:03:27,330
Los aditivos para su estructura pueden cambiar.

52
00:03:27,330 --> 00:03:35,020
Usted sabe aparte de lucir así y puede cambiarlo para que se vea así.

53
00:03:35,070 --> 00:03:40,140
Así que, con suerte, eso es suficiente para entusiasmarte por aprender que el lado de C S ha sido

54
00:03:40,140 --> 00:03:40,690
bastante insulso.

55
00:03:40,770 --> 00:03:45,170
No hemos tenido ningún estilo además de los estilos en blanco y negro predeterminados.

56
00:03:46,440 --> 00:03:51,660
Así que, a continuación, quiero hablar sobre una regla general que seguirá cada línea de CSSA que hemos escrito.

57
00:03:52,050 --> 00:03:55,090
Entonces este patrón aquí se ve así.

58
00:03:55,230 --> 00:03:56,800
Seleccionamos algo

59
00:03:57,270 --> 00:04:02,990
Así que vamos a hablar mucho sobre lo que realmente sucede allí, pero seleccionaremos algo como All h

60
00:04:03,300 --> 00:04:06,470
one o cada etiqueta de anclaje dentro de un aliado.

61
00:04:06,540 --> 00:04:12,690
Así que hacemos algo en donde estamos seleccionando elementos h timL están haciendo referencia a html existente y

62
00:04:12,690 --> 00:04:19,710
luego dentro de las llaves usamos algunos estilos y siguen este formato de pares de valores clave donde tenemos una

63
00:04:19,710 --> 00:04:24,350
propiedad dos puntos y luego un valor correspondiente y luego un semi -colon.

64
00:04:24,690 --> 00:04:30,090
diferentes que estamos cambiando, pero siempre siguen el valor Colan de esta propiedad de sintaxis.

65
00:04:30,090 --> 00:04:33,770
Para que podamos tener una cosa aquí, podemos tener 100 propiedades

66
00:04:34,740 --> 00:04:36,510
Así que aquí hay dos ejemplos.

67
00:04:36,540 --> 00:04:40,190
Esta primera sección seleccionará todas las h.

68
00:04:40,260 --> 00:04:42,920
Entonces, de nuevo, volveremos a ver cómo funcionan estos selectores.

69
00:04:43,080 --> 00:04:49,350
Pero va a seleccionar todos los elementos en una página y luego les dará un

70
00:04:49,350 --> 00:04:57,000
color púrpura y un tamaño de fuente de 56 y luego el siguiente aquí seleccionará todas las etiquetas de

71
00:04:57,000 --> 00:05:02,100
imagen y les dará color rojo y borde con borde de tres pixeles

72
00:05:02,100 --> 00:05:06,350
Entonces, sabes que no siempre vamos a seleccionar todos los que están en todas las etiquetas de imagen.

73
00:05:06,570 --> 00:05:10,860
Vamos a tener varios videos sobre los matices de la selección de las cosas. A

74
00:05:10,860 --> 00:05:15,310
veces queremos seleccionar toneladas de cosas; a veces hacemos un pequeño elemento a la vez.

75
00:05:15,450 --> 00:05:19,160
Entonces hay muchas opciones pero siempre sigue este formato.

76
00:05:19,470 --> 00:05:26,250
Seleccionamos algo con llaves y luego dentro de las llaves tenemos pares de valores clave que en realidad son solo

77
00:05:26,250 --> 00:05:27,420
propiedades que estamos cambiando