1 00:00:11,330 --> 00:00:17,740 Vamos a analizar a continuación el ejercicio CSS Ejercicio 2 están listos. 2 00:00:17,810 --> 00:00:18,320 Vamos 3 00:00:22,270 --> 00:00:28,570 el objetivo del ejercicio es crear un programa para continuar practicando lo básico de estilo CSS y 4 00:00:28,570 --> 00:00:31,540 al finalizar deberemos observar lo siguiente según se muestra 5 00:00:34,510 --> 00:00:37,070 como primer paso vamos a crear nuestro proyecto. 6 00:00:37,120 --> 00:00:43,630 El proyecto se va a llamar CSS Ejercicio 2 y lo vamos a depositar en la ruta mostrada y damos clic en 7 00:00:43,630 --> 00:00:44,520 Finalizar. 8 00:00:48,180 --> 00:00:54,750 Ahora vamos a crear un archivo CSS para depositar ahora dentro de este archivo los estilos CSS así que 9 00:00:54,750 --> 00:01:00,110 el archivo se va a llamar estilos CSS para crear este archivo. 10 00:01:00,210 --> 00:01:04,280 Vamos a dar clic derecho sobre nuestro proyecto CSS Ejercicio 2. 11 00:01:04,380 --> 00:01:09,440 Posteriormente seleccionamos la opción de Niu y seleccionamos la opción de Qashqai. 12 00:01:09,510 --> 00:01:10,230 Esta Exit 13 00:01:14,190 --> 00:01:20,810 el nombre del archivo se va a llamar estilos y podemos observar que se crea este archivo estilos CSS. 14 00:01:20,910 --> 00:01:26,730 En este caso debido a que seleccionamos que vamos a crear un archivo de tipo Qashqai de installed no 15 00:01:26,730 --> 00:01:33,480 es necesario agregar la extensión puntos CSS ya que en automático el IDE agregar por nosotros y también 16 00:01:33,480 --> 00:01:39,750 podemos observar que se deposita a nivel raíz de nuestro proyecto web es decir a nivel raíz de la carpeta 17 00:01:39,750 --> 00:01:47,880 Public HTML y damos frieguen finalizar como siguiente paso lo que vamos a hacer es modificar nuestro 18 00:01:47,880 --> 00:01:53,250 archivo índex punto HTML y agregamos lo siguiente a nuestro documento HTML 19 00:01:56,020 --> 00:02:01,570 en este caso lo nuevo en este documento es que vamos a agregar un link hacia nuestro archivo de estilos 20 00:02:02,020 --> 00:02:02,800 CSS 21 00:02:05,640 --> 00:02:10,010 la sintaxis que vamos a utilizar para hacer referencia a nuestra hoja de estilos. 22 00:02:10,080 --> 00:02:16,680 Es por medio de la etiqueta Link y vamos a utilizar el atributo rel para indicar qué tipo de documento 23 00:02:16,680 --> 00:02:19,970 vamos a utilizar en este caso una hoja de estilos. 24 00:02:19,980 --> 00:02:22,510 Por ello indicamos el valor de esta exit. 25 00:02:22,620 --> 00:02:31,050 El tipo es un texto diagonal CSS y vamos a utilizar el atributo de HR-V e indicamos el valor del documento 26 00:02:31,170 --> 00:02:33,390 que vamos a utilizar como una hoja de estilos. 27 00:02:33,390 --> 00:02:36,540 Por ello indicamos el valor de estilos puntos CSS. 28 00:02:36,870 --> 00:02:42,180 Si estuviera dentro de otra carpeta aquí simplemente vamos agregando las carpetas en donde se encuentre 29 00:02:42,240 --> 00:02:43,830 esta hoja de estilos. 30 00:02:43,830 --> 00:02:47,280 Por ejemplo si se encontrara dentro de una carpeta llamada estilos 31 00:02:51,360 --> 00:02:56,370 ponemos el nombre de la carpeta y posteriormente el nombre del archivo CSS. 32 00:02:56,490 --> 00:03:00,090 De esta manera podemos hacer referencia a nuestro archivo CSS 33 00:03:03,660 --> 00:03:05,930 posteriormente vamos a agregar lo siguiente. 34 00:03:06,060 --> 00:03:11,310 Recordemos que cuando trabajamos con hojas de estilo básicamente se les llama hojas de estilo en cascada 35 00:03:11,490 --> 00:03:17,820 debido a que los estilos definidos se van aplicando precisamente como una cascada es decir que dependiendo 36 00:03:18,060 --> 00:03:23,760 de en el lugar en que se defina el estilo va a ser la prioridad que va a tomar y un estilo como hemos 37 00:03:23,760 --> 00:03:30,540 visto puede sobreescribir a otro así que los estilos definidos en un archivo externo van a tomar la 38 00:03:30,540 --> 00:03:37,470 prioridad 3 los estilos definidos a nivel del cabecero o cuerpo del documento van a tomar la prioridad 39 00:03:37,500 --> 00:03:45,510 2 y los estilos definidos a nivel del elemento HTML van a tomar la prioridad 1 así que los estilos definidos 40 00:03:45,510 --> 00:03:50,920 con prioridad 1 van a sobreescribir a los estilos definidos con otro tipo de prioridades. 41 00:03:50,970 --> 00:03:55,980 Por ello es que en este caso estamos indicando que estos estilos que vamos a definir a continuación 42 00:03:56,220 --> 00:04:02,850 tienen la segunda prioridad y en este caso sobre escriben a los estilos definidos en el archivo externo 43 00:04:03,030 --> 00:04:08,790 para definir estilos también directamente sobre nuestro documento HTML dentro de la etiqueta de Get 44 00:04:09,000 --> 00:04:16,870 podemos utilizar la etiqueta estáel y podemos observar que los estilos se van a aplicar dentro de la 45 00:04:16,870 --> 00:04:19,640 etiqueta como si fuera un comentario. 46 00:04:19,660 --> 00:04:25,320 Esto debido a que algunos navegadores podrían tener problemas para procesar este tipo de estilos. 47 00:04:25,360 --> 00:04:31,120 Por ello es que se agrega como un comentario y así en dado caso de que alguna llegador no soportara 48 00:04:31,180 --> 00:04:35,680 esta etiqueta entonces simplemente lo va a tomar como un comentario. 49 00:04:35,680 --> 00:04:41,710 Sin embargo al día de hoy la mayoría de los navegadores soporta esta etiqueta así que dentro de la etiqueta 50 00:04:41,710 --> 00:04:47,890 de estáel agregamos un comentario y posteriormente podemos agregar los estilos que vamos a manejar en 51 00:04:47,890 --> 00:04:49,840 esta página HTML. 52 00:04:49,840 --> 00:04:56,890 En este caso estamos indicando que para la etiqueta de Body de nuestro documento HTML vamos a aplicar 53 00:04:57,070 --> 00:05:00,430 el estilo de Font Family con la fuente indicada. 54 00:05:00,550 --> 00:05:07,810 En este caso la fuente de Bodoni MT Black y podemos observar la sintaxis en la cual estamos agregando 55 00:05:08,020 --> 00:05:12,160 el elemento HTML al cual le queremos aplicar el estilo. 56 00:05:12,220 --> 00:05:17,920 Posteriormente abrimos una llave y vamos agregando los estilos que queremos aplicar en este caso el 57 00:05:17,920 --> 00:05:19,820 Font Family indicado. 58 00:05:19,960 --> 00:05:25,120 Separado el valor por dos puntos y terminando este estilo con un punto y coma. 59 00:05:25,270 --> 00:05:29,150 Y así podemos agregar más estilos a este elemento de Bodhi. 60 00:05:29,590 --> 00:05:35,410 Por ejemplo también estamos indicando el color pero recordemos que estamos utilizando el código de colores 61 00:05:35,470 --> 00:05:42,160 hexadecimal y con eso cerramos los estilos que le estamos aplicando a nuestro elemento Bodhi del documento 62 00:05:42,190 --> 00:05:43,060 HTML 63 00:05:45,450 --> 00:05:49,130 cerramos también el comentario y cerramos la etiqueta de estilo. 64 00:05:49,200 --> 00:05:54,830 Así que de esta manera es que estamos definiendo un estilo a nivel del cabecero de nuestro documento 65 00:05:54,870 --> 00:06:00,770 HTML y éste tiene mayor prioridad sobre los estilos definidos en un archivo externo. 66 00:06:00,930 --> 00:06:06,840 Así que en dado caso de que en un archivo externo se definieran también estilos para la etiqueta de 67 00:06:06,840 --> 00:06:12,620 Bodhi entonces va a tomar prioridad estos estilos que estamos definiendo en la etiqueta de cabecera. 68 00:06:14,270 --> 00:06:18,170 Como siguiente paso indicamos el título de nuestro documento CSS. 69 00:06:18,170 --> 00:06:27,090 Ejemplo 2 y cerramos el cabecero de nuestro documento HTML como siguiente paso vamos a definir la etiqueta 70 00:06:27,090 --> 00:06:33,270 de Bodhi y agregamos el comentario de que el tag de Bodhi hereda las propiedades del archivo estilos 71 00:06:33,270 --> 00:06:34,610 pontos CSS. 72 00:06:34,620 --> 00:06:40,440 Sin embargo recordemos que los estilos definidos en este archivo externo tienen una tercera prioridad 73 00:06:40,680 --> 00:06:45,570 y en este caso la prioridad 2 es decir los elementos que hemos definido en este momento sobre la etiqueta 74 00:06:45,570 --> 00:06:51,120 Bodhi van a tomar prioridad sobre los estilos definidos en el archivo externo así que los estilos que 75 00:06:51,120 --> 00:06:58,820 se van a aplicar son los que estamos indicando en este momento sin embargo si definimos un estilo sobre 76 00:06:58,820 --> 00:07:05,450 una etiqueta directamente en nuestra página HTML toma la prioridad 1 ya que es el estilo aplicado de 77 00:07:05,450 --> 00:07:13,520 manera más interna por ello si agregamos un párrafo e indicamos el estilo y modificamos la fuente por 78 00:07:13,520 --> 00:07:20,420 ejemplo en este caso por el Font Family de alguien si FB entonces va a tomar prioridad sobre las otras 79 00:07:20,420 --> 00:07:26,030 fuentes que hayamos definido ya sea a nivel del cabecero o en un archivo externo y sobreescribir los 80 00:07:26,030 --> 00:07:32,630 valores definidos entonces en los otros elementos y se aplica el valor definido de estilo en este elemento 81 00:07:32,690 --> 00:07:33,410 de párrafo 82 00:07:37,260 --> 00:07:40,800 podemos agregar más elementos para poner en práctica estos conceptos. 83 00:07:40,800 --> 00:07:44,660 Sin embargo con esto podemos ejecutar nuestro proyecto para observar el resultado. 84 00:07:44,690 --> 00:07:51,090 Cerramos las etiquetas de Bodhi y HTML y vamos a terminar de codificar nuestra hoja de estilo CSS y 85 00:07:51,090 --> 00:07:59,170 posteriormente ejecutar nuestro proyecto la hoja de estilos CSS va a tener el siguiente código. 86 00:07:59,170 --> 00:08:05,170 Así es como agregamos comentarios vamos a definir una diagonal asterisco y vamos a cerrar el comentario 87 00:08:05,170 --> 00:08:11,350 con asterisco diagonal e indicamos en este comentario que se definen las propiedades de los estilos 88 00:08:11,900 --> 00:08:18,240 toman la prioridad 3 los estilos definidos en un archivo externo según ya lo hemos comentado anteriormente 89 00:08:20,340 --> 00:08:26,880 así que estos estilos aplican después que los estilos definidos en el documento HTML y también aplican 90 00:08:26,880 --> 00:08:37,160 después de los estilos definidos en el elemento HTML y cerramos nuestro comentario así que podemos observar 91 00:08:37,160 --> 00:08:41,540 que podemos indicar en este caso el estilo para la etiqueta de body. 92 00:08:41,840 --> 00:08:49,410 Indicamos la etiqueta HTML en este caso la etiqueta Bodin y posteriormente abrimos una llave e indicamos 93 00:08:49,470 --> 00:08:53,940 los valores en este caso el atributo de background e indicamos un color. 94 00:08:54,000 --> 00:08:59,820 Sin embargo como hemos comentado estas propiedades se van a sobreescribir directamente sobre el archivo 95 00:08:59,880 --> 00:09:07,980 HTML indicamos el background el color y el fondo familiar indicamos estas propiedades y cerramos nuestra 96 00:09:07,980 --> 00:09:08,820 llave. 97 00:09:08,820 --> 00:09:11,000 Así podemos ir agregando más elementos. 98 00:09:11,000 --> 00:09:12,240 Esta es la sintaxis. 99 00:09:12,240 --> 00:09:18,030 Básicamente indicamos el estilo al cual queremos aplicar el elemento en este caso el elemento de Bodin. 100 00:09:18,450 --> 00:09:24,720 Abrimos una llave y dentro de llaves vamos a agregar los estilos que queramos aplicar a estos elementos 101 00:09:24,920 --> 00:09:31,260 y como podemos observar podemos agregar más de un elemento que se aplica a una etiqueta y posteriormente 102 00:09:31,260 --> 00:09:36,750 veremos también que no solamente es a etiquetas sino que podemos definir nuestros propios estilos y 103 00:09:36,750 --> 00:09:39,630 aplicarlos a cualquier elemento HTML 104 00:09:42,870 --> 00:09:43,790 como siguiente paso. 105 00:09:43,800 --> 00:09:49,830 Ejecutamos nuestro proyecto y el resultado es como sigue podemos observar que tomó prioridad los estilos 106 00:09:49,920 --> 00:09:55,910 definidos según hemos comentado en primer lugar los elementos definidos en el párrafo y esos estilos 107 00:09:56,050 --> 00:10:03,270 reescribieron a los elementos definidos en el Get del documento HTML y a su vez también se escriben 108 00:10:03,270 --> 00:10:09,360 los valores definidos en el archivo externo así que toma prioridad los elementos definidos sobre el 109 00:10:09,360 --> 00:10:18,000 elemento HTML directamente en el documento para aclarar más este concepto podemos inspeccionar el párrafo 110 00:10:18,000 --> 00:10:21,110 de ejemplo y vemos cómo se han escrito los estilos. 111 00:10:21,120 --> 00:10:26,970 Por ejemplo podemos seleccionar el párrafo y si estamos utilizando el navegador de Google Chrome podemos 112 00:10:26,970 --> 00:10:29,760 dar clic derecho y seleccionar inspeccionar 113 00:10:32,370 --> 00:10:39,880 y podemos observar lo siguiente sobre el elemento en este caso en el documento HTML directamente sobre 114 00:10:39,940 --> 00:10:41,600 el elemento de párrafo. 115 00:10:41,740 --> 00:10:46,440 Hemos definido que se va a aplicar la fuente de Ainsi FB. 116 00:10:46,540 --> 00:10:52,360 Sin embargo ya habíamos definido esta propiedad de Font Family en otros elementos por ejemplo a nivel 117 00:10:52,480 --> 00:11:00,100 de nuestro documento HTML dentro del jet de nuestro documento HTML y podemos observar cómo es que este 118 00:11:00,100 --> 00:11:04,030 elemento ya no aplicó sino que se escribió por este valor. 119 00:11:04,030 --> 00:11:10,450 Sin embargo el color debido a que no se definió dentro del elemento de párrafo entonces el color que 120 00:11:10,450 --> 00:11:17,830 se aplica sí es el color rojo definido sobre el jet del documento índex HTML pero también estos mismos 121 00:11:17,830 --> 00:11:25,840 elementos los definimos sobre el archivo externo estilos CSS y podemos observar como el color debido 122 00:11:25,930 --> 00:11:30,520 a que se escribió a nivel del documento inexperto HTML en el jet. 123 00:11:30,820 --> 00:11:37,120 Entonces ya no se va a aplicar el color definido en el archivo CSS ni tampoco la propiedad de Font Family 124 00:11:37,530 --> 00:11:43,780 así que se escribió tanto este valor y también este valor a nivel del font family y únicamente se aplicó 125 00:11:43,830 --> 00:11:50,770 el font family definido en el párrafo directamente ya que es el elemento que toma mayor prioridad así 126 00:11:50,770 --> 00:11:56,770 que como hemos comentado este toma la prioridad 1 de tomaria la prioridad 2 y este tomaria la prioridad 127 00:11:56,780 --> 00:12:03,820 3 si no se define este elemento entonces el siguiente elemento que se utilizaría sería este elemento 128 00:12:04,200 --> 00:12:10,870 y si no se define este elemento entonces el valor que se aplicaría sería nuestra prioridad 3 es decir 129 00:12:10,900 --> 00:12:17,940 el estilo definido en el archivo pero podemos observar que por ejemplo el background no se definió en 130 00:12:17,940 --> 00:12:24,240 ninguna otra parte que no fuera el archivo estilo CSS por lo tanto el color de background si se va a 131 00:12:24,240 --> 00:12:32,760 tomar de este estilo definido a nivel del archivo CSS así que estamos utilizando la misma etiqueta de 132 00:12:32,760 --> 00:12:39,960 Bodhi tanto a nivel del archivo CSS como dentro del GET de nuestro documento HTML pero debido a que 133 00:12:39,960 --> 00:12:46,530 únicamente se están aplicando algunas propiedades en común entonces se van escribiendo entre ellas según 134 00:12:46,560 --> 00:12:52,500 aplique también de este lado derecho podemos observar cuáles son las propiedades que finalmente se aplicaron 135 00:12:52,620 --> 00:12:53,890 a nuestros elementos. 136 00:12:54,000 --> 00:12:59,970 Por ejemplo en este caso la propiedad de color y también podemos observar la propiedad de Font Family 137 00:13:00,420 --> 00:13:05,580 y también cómo se escribieron los estilos definidos por ejemplo a nivel del Bodhi podemos observar que 138 00:13:05,580 --> 00:13:12,390 este valor ya no aplicó y tampoco aplicó el valor definido a nivel del archivo externo así que ninguna 139 00:13:12,390 --> 00:13:18,420 de estas fuentes aplicó sino que se escribieron los valores y finalmente se aplicó el font family de 140 00:13:18,570 --> 00:13:25,310 audiencia definido a nivel del elemento de párrafo directamente en nuestro documento HTML 141 00:13:28,700 --> 00:13:34,250 así que de esta manera es como podemos observar cómo es que se aplican las hojas de estilo y también 142 00:13:34,250 --> 00:13:40,910 podemos entender por qué se les conoce como hojas de estilo en cascada ya que entre ellas mismas se 143 00:13:40,910 --> 00:13:46,790 va aplicando este concepto de cascada y se van sobre escribiendo según la prioridad de los elementos 144 00:13:46,790 --> 00:13:48,800 que vayamos aplicando. 145 00:13:48,800 --> 00:13:54,350 Así que cualquier duda que tengan con las hojas de estilo y el estilo que finalmente se está aplicando 146 00:13:54,470 --> 00:14:00,620 pueden hacer una inspección con ayuda del navegador que estén utilizando en este caso con ayuda del 147 00:14:00,620 --> 00:14:02,000 navegador de Google Chrome. 148 00:14:05,450 --> 00:14:11,240 Como conclusión con este ejercicio hemos puesto en práctica la definición de estilos tanto dentro de 149 00:14:11,240 --> 00:14:21,260 un atributo HTML en el archivo HTML y en un archivo externo de tipo CSS con esto ya tenemos las bases 150 00:14:21,470 --> 00:14:26,030 para ir avanzando más respecto a temas de las hojas de estilo CSS. 151 00:14:26,210 --> 00:14:28,660 Con eso incluimos elejercicio CSS. 152 00:14:28,670 --> 00:14:29,540 Ejemplo 2.