1 00:00:10,400 --> 00:00:11,420 Vamos a continuar 2 00:00:13,960 --> 00:00:16,340 ahora la imagen de la izquierda no se va a repetir. 3 00:00:16,520 --> 00:00:21,230 Por favor una imagen se repite en todo el espacio que tenga para desplazarse. 4 00:00:21,230 --> 00:00:27,170 Por lo tanto vamos a agregar la propiedad de Bagram repeat igual a no repeat esto para que no se repita 5 00:00:27,170 --> 00:00:32,900 la imagen y con eso cerramos los estilos que vamos a utilizar en nuestro primer Dib que va a ser el 6 00:00:33,040 --> 00:00:39,980 más externo de nuestro primer tabulador vamos a definir ahora los estilos que vamos a aplicar a nuestro 7 00:00:39,980 --> 00:00:40,970 Dib más interno 8 00:00:45,030 --> 00:00:51,520 y como hemos comentado en este Dib más interno vamos a aplicar ahora la imagen del tabulador con la 9 00:00:51,520 --> 00:00:54,180 esquina redondeada de la parte derecha. 10 00:00:54,190 --> 00:01:00,850 Por ello vamos a utilizar la imagen de ver Taub punto GIFF es decir el tabulador de la parte derecha 11 00:01:01,290 --> 00:01:05,590 que básicamente únicamente como hemos comentado es una esquina redondeada. 12 00:01:05,590 --> 00:01:11,320 También indicamos la propiedad no repeat y la posesión de la imagen la vamos a colocar en la parte superior 13 00:01:11,380 --> 00:01:12,550 del lado derecho. 14 00:01:12,550 --> 00:01:20,930 Para ello utilizamos la propiedad de Bagram posición top right el alto de la imagen es de veintiún píxeles 15 00:01:21,350 --> 00:01:27,500 y la vamos a flotar hacia la izquierda el margen es igual a cero y con eso cerramos las propiedades 16 00:01:27,590 --> 00:01:29,420 de este Dib más interno. 17 00:01:29,420 --> 00:01:32,790 Por último vamos a agregar los estilos a nuestro Link. 18 00:01:32,930 --> 00:01:38,150 Recordemos que este link es el elemento más interno de los dos DIV que hemos agregado. 19 00:01:38,150 --> 00:01:44,450 Por ello para aplicar correctamente los estilos a este elemento más interno podemos observar que estamos 20 00:01:44,450 --> 00:01:51,050 utilizando primeramente el elemento más externo es decir Dib punto Taub ya que este es el nombre de 21 00:01:51,050 --> 00:01:54,000 la clase que vamos a utilizar posteriormente. 22 00:01:54,270 --> 00:01:55,820 El más interno. 23 00:01:55,820 --> 00:02:01,010 Y finalmente indicamos el elemento a que es el elemento más interno. 24 00:02:01,010 --> 00:02:07,180 También de igual manera en el elemento más interno podemos observar que utilizamos de manera similar. 25 00:02:07,220 --> 00:02:14,420 Primero identificamos el elemento Dip punto Taub y éste es el más externo y posteriormente indicamos 26 00:02:14,560 --> 00:02:19,880 DIV que es el elemento interno que es un Dib dentro de este. 27 00:02:20,070 --> 00:02:25,370 Todo esto lo definimos en nuestros documentos HTML así que cualquier duda pueden revisar nuevamente 28 00:02:25,430 --> 00:02:29,130 el código HTML que agregamos en estos archivos. 29 00:02:29,140 --> 00:02:35,030 Aquí únicamente ya estamos explicando el uso de los dips y cómo es que se aplican los estilos y dentro 30 00:02:35,030 --> 00:02:36,380 de este elemento más interno. 31 00:02:36,380 --> 00:02:42,380 Dentro de este hipervínculo vamos a hacer lo siguiente Las imágenes de la izquierda y la derecha tienen 32 00:02:42,440 --> 00:02:44,150 un ancho de 8 píxeles. 33 00:02:44,180 --> 00:02:50,390 Por lo tanto dejamos este espacio para que se completen las esquinas así que agregamos un margen cuando 34 00:02:50,390 --> 00:02:54,560 definimos dos elementos únicamente dentro de un margen. 35 00:02:54,680 --> 00:03:02,180 Este elemento aplica a la parte superior y a la parte inferior y este segundo elemento aplica a la parte 36 00:03:02,180 --> 00:03:04,640 derecha y a la parte izquierda. 37 00:03:04,640 --> 00:03:09,830 Así que las imágenes de la izquierda y la derecha van a ser las esquinas redondeadas. 38 00:03:09,830 --> 00:03:16,250 Las imágenes con las esquinas redondeadas por lo tanto estamos dejando un espacio de 8 píxeles para 39 00:03:16,250 --> 00:03:22,340 que se muestre correctamente estas imágenes pero realmente lo que estamos manipulando en este momento 40 00:03:22,550 --> 00:03:23,690 es la parte central 41 00:03:26,960 --> 00:03:33,790 y las imágenes tienen un alto de veintiún píxeles y también por ello vamos a manejar esta propiedad 42 00:03:33,790 --> 00:03:42,120 de la OIT que va a ser el alto de veintiún píxeles para este elemento más interno y finalmente también 43 00:03:42,180 --> 00:03:50,230 agregamos un Bagram y más en la cual vamos a usar la imagen de centro Tapp punto IHF también utilizamos 44 00:03:50,230 --> 00:03:56,430 la propiedad de display Block Text de corazón no se va a utilizar ningún tipo de decoración para el 45 00:03:56,430 --> 00:04:04,900 texto vertical Aline vamos a utilizar la propiedad de Midón para que se ponga al centro y vamos a flotar 46 00:04:04,930 --> 00:04:06,310 este elemento hacia la izquierda 47 00:04:12,280 --> 00:04:12,810 por default. 48 00:04:12,880 --> 00:04:18,760 La imagen se repite pero en este caso lo vamos a hacer explícito ya que puede crecer a la izquierda 49 00:04:18,850 --> 00:04:24,040 o a la derecha así que dependiendo del tamaño que vaya a ocupar todo el texto que tengamos en la parte 50 00:04:24,040 --> 00:04:29,650 más interna se va a repetir esta imagen así que va a poder crecer este tabulador a la izquierda y a 51 00:04:29,650 --> 00:04:36,210 la derecha y con esto cerramos el estilo que le estamos aplicando a la parte más interna de nuestros 52 00:04:36,210 --> 00:04:43,430 dips ahora vamos a definir un estilo con el cual va a ser un selector de tipo Heydi solamente debe de 53 00:04:43,430 --> 00:04:46,270 haber un tabulador activo en la página. 54 00:04:46,280 --> 00:04:50,690 Por lo tanto vamos a utilizar el selector de tipo Heydi en lugar de una clase. 55 00:04:50,780 --> 00:04:56,480 Para ello vamos a utilizar el símbolo de número y este selector único se va a llamar actual y vamos 56 00:04:56,480 --> 00:04:58,520 a agregar los siguientes estilos. 57 00:04:58,610 --> 00:05:04,430 Vamos a cambiar el color de este selector en particular para que se note que es el tabulador activo 58 00:05:04,730 --> 00:05:11,210 así que vamos a utilizar la imagen de AC izq tap es decir que va a ser una esquina redondeada pero con 59 00:05:11,210 --> 00:05:13,450 el color del tabulador activo 60 00:05:16,100 --> 00:05:19,540 también paradigmas interno especificamos que vamos a utilizar. 61 00:05:19,550 --> 00:05:26,750 Otra imagen que va a ser un color más claro y el elemento más interno que es el hipervínculo indicamos 62 00:05:26,870 --> 00:05:33,020 que vamos a utilizar una imagen con un color de centro con el color activo así que con esos tres elementos 63 00:05:33,110 --> 00:05:40,460 vamos a poder modificar el estilo para el tabulador activo posteriormente para los elementos de Link. 64 00:05:40,460 --> 00:05:47,450 Vamos a especificar el siguiente color y también el de corazón que no subraye y cuando nos posicionamos 65 00:05:47,510 --> 00:05:52,190 sobre el hipervínculo también va a cambiar el color va a ser un color distinto 66 00:05:55,550 --> 00:06:01,040 finalmente vamos a ejecutar nuestro proyecto y el resultado es como sigue Nos muestra la página de laboratorio 67 00:06:01,040 --> 00:06:07,970 CCS y si damos clic en la página de contenido podemos observar los tres tabuladores y podemos observar 68 00:06:07,970 --> 00:06:14,000 que si estamos en la primera página entonces el primer tabulador se muestra con un color distinto es 69 00:06:14,000 --> 00:06:20,180 decir que se aplica el estilo de tabulador activo y los demás tabuladores están con un color distinto 70 00:06:20,380 --> 00:06:27,320 y si hiciéramos un sobre este tabulador podríamos observar que cada tabulador se compone de tres elementos 71 00:06:27,500 --> 00:06:30,720 por un lado una imagen en la parte izquierda. 72 00:06:30,830 --> 00:06:38,750 Posteriormente una imagen central y posteriormente una imagen en la parte derecha la imagen izquierda 73 00:06:38,900 --> 00:06:47,060 tiene la esquina redondeada en la parte izquierda y la imagen derecha tiene la parte derecha redondeada. 74 00:06:47,060 --> 00:06:56,010 Por ello es que podemos observar este efecto del tabulador este se aplica al dip más externo al más 75 00:06:56,010 --> 00:07:02,190 interno y éste a Link interno que se encuentra dentro de los dips y de esta manera es como hemos aplicado 76 00:07:02,190 --> 00:07:08,310 las hojas de estilo a estos elementos y con esto conseguimos el efecto de tabuladores según se muestra. 77 00:07:08,400 --> 00:07:14,790 Como hemos comentado podemos ejecutar el proyecto sin activar los estilos y podremos observar que únicamente 78 00:07:14,790 --> 00:07:20,430 podemos visualizar texto y no obtendremos el efecto deseado del manejo de estilos. 79 00:07:20,430 --> 00:07:26,190 También se le solicita inspeccionar estos elementos para que puedan tener más claro el concepto de estilos 80 00:07:26,400 --> 00:07:29,400 y todo lo que hemos aplicado en este laboratorio. 81 00:07:29,400 --> 00:07:34,890 Poco a poco nos iremos familiarizando con estos conceptos y con las propiedades que hemos aplicado en 82 00:07:34,890 --> 00:07:35,850 este laboratorio 83 00:07:38,830 --> 00:07:46,090 como conclusión con este laboratorio CSS hemos puesto en práctica más ejemplos del uso de CSS. 84 00:07:46,090 --> 00:07:52,540 Incluso les invitamos a probar el ejercicio sin el archivo estilos puntos CSS para que vean la diferencia 85 00:07:52,780 --> 00:08:01,090 entre usar únicamente etiquetas HTML y agregar estilos CSS y así lograr una diferencia sustancial en 86 00:08:01,090 --> 00:08:04,240 la forma en que se presenta la información al usuario. 87 00:08:04,240 --> 00:08:06,880 Con esto finalizamos el laboratorio CSS.