1 00:00:00,430 --> 00:00:17,609 Bueno, pues ahora vamos a ver selectores en hojas de estilo, en CSS. Un selector es simplemente cómo identificar un componente en una web y cómo darle estilo, ¿vale? Y vamos a ver diferentes formas de identificar esos componentes dentro de una página web, ¿vale? 2 00:00:17,609 --> 00:00:22,410 Entonces, como siempre digo, nos vamos a ir a nuestro Brackets, ¿vale? 3 00:00:22,449 --> 00:00:27,449 Yo tengo aquí abierto Brackets y también tengo abierto el navegador, ¿vale? 4 00:00:27,609 --> 00:00:34,829 He creado un archivo que como veis aquí se llama selectores.html, ¿vale? 5 00:00:35,869 --> 00:00:38,229 Así es como lo tendréis que llamar vosotros. 6 00:00:39,649 --> 00:00:47,049 Y bueno, vamos a empezar como siempre hacemos, poniendo html 2.5 y le damos al tabulador, ¿vale? 7 00:00:47,609 --> 00:00:58,630 Y ahora aquí, pues, lo que hacemos, le cambiamos al idioma, lo ponemos como español, y el título vamos a poner selectores en ATSS3, ¿vale? 8 00:00:59,289 --> 00:01:03,530 Y lo primero que vamos a hacer es crearnos una estructura de web sencillita, ¿vale? 9 00:01:03,689 --> 00:01:12,890 Voy a empezar con un encabezado H1, y luego con un par de párrafos. 10 00:01:13,849 --> 00:01:18,250 Recuerdo que para poner texto aleatorio ponemos la palabra lorem terminado en M, ¿vale? 11 00:01:18,250 --> 00:01:30,659 Y le damos al tabulador y como digo voy a poner un par de párrafos, esto es, ahora voy a poner un encabezado de nivel 2, ¿vale? 12 00:01:31,560 --> 00:01:51,590 Y lo mismo, me voy a poner un par de párrafos, 1 y 2 y por último me voy a poner un encabezado de nivel 3 con la misma estructura, ¿vale? 13 00:01:51,609 --> 00:01:57,920 Un par de párrafos a la 2, ¿vale? 14 00:01:57,920 --> 00:02:05,579 Entonces, una vez que ya tenemos esto, que esto sería la estructura de una web súper, súper simple, ¿vale? 15 00:02:05,579 --> 00:02:10,539 Vamos a empezar a aplicar estilo y vamos a empezar a ver lo que son los selectores, ¿vale? 16 00:02:11,740 --> 00:02:21,680 Entonces, en primer lugar, recuerdo que teníamos tres formas de poner estilo, hojas de estilo, una era utilizando el estilo en línea, ¿vale? 17 00:02:21,719 --> 00:02:26,360 Que era simplemente modificar las etiquetas, ¿vale? Ya dijimos que eso no es recomendado. 18 00:02:26,360 --> 00:02:29,020 luego teníamos el estilo interno 19 00:02:29,020 --> 00:02:30,819 que es el que vamos a utilizar aquí 20 00:02:30,819 --> 00:02:33,460 que lo utilizamos porque es para hacer pruebas 21 00:02:33,460 --> 00:02:36,680 y luego tenemos utilizando hojas de estilo en archivos externos 22 00:02:36,680 --> 00:02:38,400 que es lo que yo recomiendo que se haga, ¿vale? 23 00:02:38,659 --> 00:02:40,340 aquí lo voy a hacer en el mismo sitio 24 00:02:40,340 --> 00:02:43,280 para que podamos ver los cambios de forma inmediata en la web, ¿vale? 25 00:02:45,080 --> 00:02:48,180 entonces, nos vamos a venir aquí al head, ¿vale? 26 00:02:48,319 --> 00:02:49,659 y justo debajo de title 27 00:02:49,659 --> 00:02:53,120 voy a poner la etiqueta style, ¿vale? 28 00:02:53,120 --> 00:02:55,699 le doy al tabulador y fijaros que ya me aparece 29 00:02:55,699 --> 00:02:58,139 el apertura y el cierre, ¿vale? 30 00:02:59,300 --> 00:03:04,240 Y ahora aquí dentro es donde yo voy a definir esos selectores, ¿vale? 31 00:03:05,080 --> 00:03:10,340 Entonces, en primer lugar os voy a explicar cómo se ponen comentarios en hojas de estilo, ¿vale? 32 00:03:10,479 --> 00:03:16,180 Recuerdo que si queríamos poner el comentario en HTML era utilizando esta estructura, ¿vale? 33 00:03:16,759 --> 00:03:22,780 Es decir, signo de menor, exclamación y dos guiones y pondría esto es un comentario. 34 00:03:22,780 --> 00:03:26,819 Y luego poníamos otra vez los dos guiones y el símbolo de Mallorca, ¿vale? 35 00:03:27,360 --> 00:03:29,979 Sin embargo, en hojas de estilo se hace un poco diferente. 36 00:03:30,539 --> 00:03:34,800 Se hace poniendo la barra del 7, ¿vale? 37 00:03:34,979 --> 00:03:37,939 Y asterisco, y luego asterisco y la barra del 7. 38 00:03:38,039 --> 00:03:40,159 Y todo lo que vaya aquí dentro es un comentario, ¿vale? 39 00:03:42,310 --> 00:03:45,569 Entonces, lo primero que vamos a ver son los selectores de etiquetas. 40 00:03:47,430 --> 00:03:47,870 ¿Vale? 41 00:03:48,270 --> 00:03:49,189 Selectores de etiquetas. 42 00:03:49,409 --> 00:03:50,189 ¿Una etiqueta qué era? 43 00:03:50,189 --> 00:03:57,750 Una etiqueta era, por ejemplo, h1, que era la etiqueta p, h2, que era la etiqueta table, la etiqueta tb, ¿vale? 44 00:03:57,750 --> 00:03:59,469 Todo esto eran etiquetas, ¿vale? 45 00:03:59,949 --> 00:04:09,629 Nosotros nos vamos a venir aquí y, por ejemplo, si queramos modificar la etiqueta h1, pues yo pondría h1 y luego abrimos y cerramos llave, ¿vale? 46 00:04:09,810 --> 00:04:14,289 Al poner abrir llave ya automáticamente brackets hace el cierre, ¿vale? 47 00:04:14,289 --> 00:04:23,050 Y hago pulso la tecla Enter para poner el estilo que queremos poner, ¿vale? 48 00:04:23,050 --> 00:04:27,069 En este caso lo que yo voy a hacer es cambiar el color de fondo de ese título, ¿vale? 49 00:04:27,430 --> 00:04:32,129 Para eso utilizo la propiedad background color, ¿vale? 50 00:04:33,230 --> 00:04:41,449 Y le voy a poner como color, pues por ejemplo, el amarillo, ¿vale? 51 00:04:42,389 --> 00:04:45,829 Fijaros que automáticamente me sale ese color amarillo, ¿vale? 52 00:04:46,970 --> 00:04:52,310 Luego podemos utilizar otra etiqueta, por ejemplo, para cambiar el tamaño de fuente de los párrafos, ¿vale? 53 00:04:52,350 --> 00:04:59,589 Pues yo pongo mi etiqueta P, utilizo el selector de etiqueta P y pongo font-size, ¿vale? 54 00:04:59,689 --> 00:05:02,829 Y le voy a poner 20 píxeles, ¿vale? 55 00:05:03,569 --> 00:05:07,170 Y fijaros como el tamaño de la fuente ha aumentado, ¿vale? 56 00:05:08,750 --> 00:05:14,370 Esto lo podríamos hacer también para etiquetas H2, etiquetas H3, etc, etc, etc, ¿vale? 57 00:05:16,370 --> 00:05:24,110 Luego, recuerdo, vamos a ver ahora otro tipo de etiqueta, de forma de selectores, perdón, ¿vale? 58 00:05:24,310 --> 00:05:32,709 Que van a ser los selectores por ID, ¿vale? 59 00:05:37,579 --> 00:05:49,050 Entonces, vamos a imaginarnos que yo pongo en este párrafo, este párrafo de aquí, le voy a poner un ID, ¿vale? 60 00:05:49,110 --> 00:05:53,649 Recordad que el ID era el identificador que nosotros poníamos para los párrafos. 61 00:05:53,649 --> 00:06:10,610 Entonces, vamos a ponerle yo a este párrafo de aquí, quiero que tenga un color rojo, ¿vale? La letra, y le voy a poner rojo, ¿vale? Y ese va a ser su identificador, ¿vale? 62 00:06:10,610 --> 00:06:32,250 Pues entonces, yo ahora podría decir que poniendo la tecla almohadilla y diciendo rojo, es decir, el identificador rojo, que tenga un color rojo, ¿vale? 63 00:06:32,769 --> 00:06:41,949 Entonces, como yo a este elemento le he puesto el identificador rojo, fijaros que solo me cambia en ese elemento, ¿vale? 64 00:06:41,949 --> 00:06:56,250 Esto puede tener muchas utilidades, ¿vale? ¿Por qué? Pues porque nosotros tenemos la posibilidad de seleccionar un elemento en concreto al que le queramos cambiar el estilo, ¿vale? 65 00:06:59,339 --> 00:07:05,300 Vale, eso en cuanto a selectores ID, ¿vale? Eso en cuanto a selectores ID. 66 00:07:05,300 --> 00:07:09,399 Ahora vamos a ver otro tipo de selectores, ¿vale? 67 00:07:09,600 --> 00:07:15,379 Recuerdo que el id es un identificador único, que no solo debemos de poner a más párrafos ni a más elementos, ¿vale? 68 00:07:15,660 --> 00:07:19,259 Pero luego tenemos otro tipo de selector, que es el selector class, ¿vale? 69 00:07:24,290 --> 00:07:25,410 Selector class. 70 00:07:25,910 --> 00:07:31,129 Esto significa que nosotros englobamos o agrupamos elementos en función de una clase, ¿vale? 71 00:07:31,129 --> 00:07:48,589 Entonces, vamos a coger, por ejemplo, y a este párrafo de aquí le vamos a poner el clas verde, ¿vale? Y se lo vamos a poner también a este de aquí, clas verde, ¿vale? 72 00:07:48,589 --> 00:08:00,529 Fijaros que estos son párrafos, ¿vale? Y se lo vamos a poner también al encabezado 3, ¿vale? Clas verde, ¿vale? 73 00:08:01,129 --> 00:08:13,990 Y yo ahora me vengo aquí y lo que voy a hacer es, en primer lugar, seleccionar un elemento de esa clase, ¿vale? 74 00:08:14,170 --> 00:08:16,009 Entonces, ¿qué vamos a hacer? 75 00:08:16,009 --> 00:08:22,310 En primer lugar, voy a elegir, si yo quisiera seleccionar un elemento class, ¿vale? 76 00:08:23,069 --> 00:08:27,689 A diferencia que los elementos ID que poníamos en la almohadilla, aquí lo que haremos será poner un punto, ¿vale? 77 00:08:27,709 --> 00:08:29,970 Entonces yo pondría punto verde, ¿vale? 78 00:08:29,970 --> 00:08:47,590 Eso ya me estaría identificando esa clase, ¿vale? Y yo aquí pondría, por ejemplo, color dos puntos, color dos puntos gris, ¿vale? Entonces, fijaros que ya se me ha cambiado automáticamente el color de los dos párrafos que yo había marcado y el del encabezado, ¿vale? 79 00:08:47,590 --> 00:09:09,529 Pero ahora nosotros podemos hacer elementos más complejos, ¿vale? O sectores más complejos. ¿Por qué? Porque nosotros podemos escoger, por ejemplo, vamos a imaginarnos que yo quiero cambiar el color de fondo de los elementos verde de P, ¿vale? 80 00:09:09,529 --> 00:09:23,970 O quiero hacer la letra más pequeña, ¿vale? Por ejemplo, entonces yo diría, cógeme de los elementos P aquellos que tienen la clase verde, ¿vale? 81 00:09:24,250 --> 00:09:36,049 Es decir, esto que yo acabo de hacer, esta primera opción, ¿vale? Lo voy a poner aquí entre comentarios, sería modifica la clase verde, ¿vale? 82 00:09:36,049 --> 00:09:46,629 Y esto ahora modifica sólo los elementos P de la clase verde, ¿vale? 83 00:09:46,909 --> 00:09:51,470 Entonces yo a este, por ejemplo, elemento P le voy a cambiar el tamaño de la letra, ¿vale? 84 00:09:52,009 --> 00:09:57,389 Por ejemplo, y se lo voy a poner a 10, ¿vale? 85 00:09:58,509 --> 00:10:00,269 10 piso, ¿vale? 86 00:10:00,509 --> 00:10:07,169 Y fijaros que sólo me ha modificado los elementos P de la clase verde, ¿vale? 87 00:10:07,169 --> 00:10:23,940 Y de la misma forma podría modificar, voy a poner aquí un comentario, modifica solo los elementos h3 de la clase verde, ¿vale? Pues de la misma forma pondríamos h3.verde, ¿vale? 88 00:10:23,940 --> 00:10:47,100 Y ahora aquí, pues, por ejemplo, le cambiamos el color a white, ¿vale? Pongo punto y coma porque voy a poner varias propiedades, varias declaraciones, voy a poner un color de verde, ¿vale? Y voy a poner un tamaño de letra mayor, ¿vale? 89 00:10:47,100 --> 00:11:08,860 Y ya para terminar, otra cosa que es importante que sepáis es la posibilidad de tener varias clases dentro de un mismo elemento, ¿vale? 90 00:11:08,860 --> 00:11:16,320 Para eso, por ejemplo, nos vamos a crear justo al final de la web, ¿vale? Nos vamos a crear un botón, ¿vale? 91 00:11:16,320 --> 00:11:21,100 Bueno, vamos a crear un botón, etiqueta button, ¿vale? 92 00:11:22,639 --> 00:11:25,220 Y vamos a poner pulsar aquí, ¿vale? 93 00:11:25,720 --> 00:11:27,440 Fijaros que aparece el botón normal. 94 00:11:28,039 --> 00:11:36,139 Si yo a este botón le asigno la clase verde, fijaros que automáticamente me pone letra verde, ¿vale? 95 00:11:36,220 --> 00:11:42,919 ¿Por qué? Pues porque nosotros habíamos dicho que la clase verde tuviera un color de fuente verde, ¿vale? 96 00:11:42,919 --> 00:11:49,899 Pero, como decía, podemos tener varias, un elemento puede pertenecer a varias clases, ¿vale? 97 00:11:50,419 --> 00:11:53,539 Entonces, si yo, por ejemplo, tengo ese elemento verde ahí, ¿vale? 98 00:11:53,919 --> 00:11:58,879 Y yo aquí añado otra clase que voy a poner, por ejemplo, destacado, ¿vale? 99 00:12:00,259 --> 00:12:00,820 Destacado. 100 00:12:01,860 --> 00:12:11,019 Y lo que hago en esta clase es que pongo un tamaño de letra más grande, onSize igual a 30, ¿vale? 101 00:12:11,019 --> 00:12:24,580 Yo ahora puedo decirle que el botón pertenezca a la clase verde y para que pertenezca también a la clase destacado simplemente espacio y pongo el nombre de la nueva clase, destacado, ¿vale? 102 00:12:25,000 --> 00:12:33,179 Y fijaros que automáticamente aparece el botón con un tamaño de fuente mayor, ¿vale? 103 00:12:33,179 --> 00:12:36,539 esto es muy importante que lo dominemos 104 00:12:36,539 --> 00:12:37,700 ¿por qué? porque va a dar 105 00:12:37,700 --> 00:12:40,639 es lo que va a hacer que agilicemos en el diseño 106 00:12:40,639 --> 00:12:41,919 de los estilos de la web ¿vale? 107 00:12:42,620 --> 00:12:44,659 porque así no vamos a tener que estar modificando 108 00:12:44,659 --> 00:12:46,840 uno a uno cada uno de los elementos 109 00:12:46,840 --> 00:12:47,899 ¿vale? 110 00:12:48,940 --> 00:12:50,100 entonces es importante que 111 00:12:50,100 --> 00:12:52,759 tengamos organización, que metamos 112 00:12:52,759 --> 00:12:54,740 elementos dentro de clases, que le demos 113 00:12:54,740 --> 00:12:56,159 identificadores, etcétera 114 00:12:56,159 --> 00:12:57,120 ¿vale? 115 00:12:58,379 --> 00:13:00,620 bueno, espero que os haya quedado 116 00:13:00,620 --> 00:13:02,600 claro como utilizan los selectores, aún no 117 00:13:02,600 --> 00:13:07,019 Estamos viendo muchas propiedades, muchas formas de cambiar el estilo de la web, 118 00:13:07,139 --> 00:13:08,440 pero lo iremos viendo poco a poco.