WEBVTT

00:00:00.531 --> 00:00:04.192
Hemos logrado hacer muchas cosas, con los selectores que hemos visto en CSS:

00:00:04.192 --> 00:00:08.006
seleccionando elementos por nombre de etiqueta, por Id, por nombre de clase.

00:00:08.290 --> 00:00:11.028
Vamos a revisarlos por un momento en esta página web.

00:00:11.257 --> 00:00:13.655
Esta página web es sobre donas.

00:00:13.789 --> 00:00:15.963
Y tiene un encabezado, párrafos,

00:00:15.963 --> 00:00:19.234
y algunos de los párrafos son cortos, de una sóla línea.

00:00:19.242 --> 00:00:23.142
El CSS empieza con una regla sobre seleccionar todas las etiquetas "" de la página web,

00:00:23.142 --> 00:00:25.611
y asignarles un tipo de letra "sans-serif".

00:00:26.074 --> 00:00:30.063
La voy a cambiar a "monospace" para que puedan ver todo lo que está seleccionado.

00:00:30.785 --> 00:00:31.808
¿Lo vieron?

00:00:34.102 --> 00:00:37.836
La siguiente regla selecciona el elemento que tiene un "Id" igual a "donut-header".

00:00:38.034 --> 00:00:41.913
Y sabemos que es un "Id" porque la regla inicia con el símbolo numeral "#".

00:00:42.029 --> 00:00:43.759
Como el "Id" es muy descriptivo,

00:00:43.759 --> 00:00:46.688
me suena a que se ha seleccionado el encabezado grande de arriba,

00:00:46.688 --> 00:00:47.747
y se ha cambiado la fuente.

00:00:47.974 --> 00:00:51.417
Pero voy a desplazarme hacia abajo para confirmar que "" tiene ese "Id".

00:00:51.453 --> 00:00:53.184
Sí, aquí está.

00:00:53.387 --> 00:00:56.790
La última regla selecciona todos los elementos que tienen "fact" como nombre de clase.

00:00:56.896 --> 00:01:00.384
Y sabemos que estamos buscando una clase porque esta regla empieza con un punto.

00:01:00.488 --> 00:01:02.956
Para descubrir cuáles elementos tienen ese nombre de clase,

00:01:02.956 --> 00:01:05.230
puedo ver lo que la regla está haciendo,

00:01:05.230 --> 00:01:07.833
añadiendo un borde en la parte de arriba y de abajo y algo de relleno "padding",

00:01:07.833 --> 00:01:10.462
o puedo buscar dentro de mi HTML el nombre de la clase.

00:01:10.619 --> 00:01:13.148
Puedo ver el nombre de la clase en este párrafo,

00:01:13.148 --> 00:01:14.300
y en este párrafo,

00:01:14.300 --> 00:01:16.461
los dos párrafos que contienen información de una línea,

00:01:16.461 --> 00:01:18.315
y es por eso que tienen el borde.

00:01:18.448 --> 00:01:19.778
Los nombres de clases son geniales,

00:01:19.778 --> 00:01:23.007
porque nos permiten usar los mismos estilos en múltiples elementos.

00:01:23.033 --> 00:01:25.346
Pero hay más que podemos hacer con los nombres de clases,

00:01:25.346 --> 00:01:27.058
y es lo que les voy a mostrar ahora.

00:01:27.230 --> 00:01:29.136
Entonces, tenemos una página web sobre donas,

00:01:29.136 --> 00:01:31.361
pero las donas en realidad no son saludables para ti.

00:01:31.436 --> 00:01:34.007
Puede que sean una de las cosas menos sanas para ti.

00:01:34.030 --> 00:01:36.963
Y también son adictivas, por toda esa azúcar que contienen.

00:01:37.009 --> 00:01:39.644
Así que si vamos a tener una página que hable de ellas,

00:01:39.644 --> 00:01:42.421
probablemente deberíamos advertir a la gente sobre lo poco saludable que son.

00:01:42.539 --> 00:01:47.257
¿Qué tal si hacemos roja esta clase "fact", para realmente mostrar que es una advertencia?

00:01:47.626 --> 00:01:49.015
¿Cómo hacemos eso?

00:01:49.200 --> 00:01:53.401
Bueno, podríamos empezar añadiendo la propiedad "color" a la regla "fact" de CSS,

00:01:53.401 --> 00:01:55.099
y ver qué pasa.

00:01:55.650 --> 00:02:00.326
Pero esto hace que las dos "fact" sean rojas, y la segunda "fact" no es una advertencia,

00:02:00.326 --> 00:02:01.847
es sólo una aclaración de ortografía.

00:02:02.051 --> 00:02:03.845
Así que no queremos que sea roja.

00:02:04.169 --> 00:02:05.578
Podríamos añadir un "Id",

00:02:05.578 --> 00:02:09.573
pero entonces si quisiéramos colorear otras cosas más tarde que son advertencias

00:02:09.573 --> 00:02:10.958
y añadir más advertencias,

00:02:10.958 --> 00:02:14.185
tendríamos que añadir más y más "Id´s", y reglas para esos "Id´s".

00:02:14.391 --> 00:02:19.806
En un caso como éste, lo mejor es añadir otra clase a la etiqueta "".

00:02:20.104 --> 00:02:24.151
Los navegadores en realidad nos permiten añadir las clases que queramos a una etiqueta.

00:02:24.541 --> 00:02:28.532
Para hacer eso, simplemente ponemos el cursor después del último nombre de clase,

00:02:28.532 --> 00:02:33.196
ponemos un espacio, y luego escribimos un nombre nuevo de clase, como "warning".

00:02:33.984 --> 00:02:36.329
Ahora podemos hacer una regla para "warning",

00:02:37.119 --> 00:02:40.243
y mover esta propiedad de color a esta regla.

00:02:40.835 --> 00:02:44.001
Y ahora la clase "fact" de arriba es roja, y la segunda no.

00:02:44.218 --> 00:02:45.411
Hermoso.

00:02:45.852 --> 00:02:49.285
Podemos poner el nombre de clase en más elementos, como antes.

00:02:49.643 --> 00:02:54.121
Tal vez queremos colorear el texto "deep fried",

00:02:54.121 --> 00:02:56.986
lo queremos colorear de rojo porque "deep fried" (fritas) es algo

00:02:56.986 --> 00:02:59.872
a menudo asociado con cosas que no son saludables.

00:03:00.025 --> 00:03:03.692
Así que podemos añadir la clase "warning",

00:03:03.692 --> 00:03:04.626
también roja.

00:03:05.035 --> 00:03:10.820
Ahora, fíjate que esta advertencia de aquí está de color rojo,

00:03:10.820 --> 00:03:14.653
y también tiene un borde arriba y un borde abajo.

00:03:14.795 --> 00:03:17.545
Y eso es lo que pasa cuando usamos muchas clases,

00:03:17.545 --> 00:03:20.578
los navegadores van a revisar todas las reglas que se aplican a ellas,

00:03:20.578 --> 00:03:22.340
y van a aplicar todos los estilos.

00:03:22.733 --> 00:03:26.810
Debemos ser cuidadosos cuando usamos colores para transmitir significados,

00:03:26.810 --> 00:03:28.563
porque algunas personas no distinguen los colores.

00:03:28.636 --> 00:03:31.298
Hay algunas personas que difícilmente pueden notar la diferencia

00:03:31.298 --> 00:03:33.815
entre rojo y negro, tal vez tú seas una de ellas.

00:03:33.899 --> 00:03:37.463
Así que déjenme cambiar nuestra clase para hacerla más evidente para todas las personas.

00:03:38.070 --> 00:03:40.711
Cambiaremos este color y el color de fondo,

00:03:40.711 --> 00:03:44.740
porque cualquier persona podría identificar que un elemento tiene un color de fondo.

00:03:45.104 --> 00:03:47.564
El rojo y negro tienen un contraste muy bajo.

00:03:47.564 --> 00:03:51.304
Y el contraste también es importante para hacer que nuestra página sea legible para todos.

00:03:51.400 --> 00:03:54.080
Así que voy a cambiar el color a blanco.

00:03:54.785 --> 00:03:56.811
Ok, ahora tenemos más contraste,

00:03:56.811 --> 00:03:59.611
y un fondo rojo para las personas que pueden ver el rojo.

00:03:59.994 --> 00:04:04.497
Y como estamos usando clases las dos etiquetas "warning" tienen los mismos estilos.

00:04:04.774 --> 00:04:07.787
Ahora, gracias a la flexibilidad de las clases de CSS,

00:04:07.787 --> 00:04:10.735
podemos salvar al mundo entero de las donas.