Vamos a continuar
ahora la imagen de la izquierda no se va a repetir.
Por favor una imagen se repite en todo el espacio que tenga para desplazarse.
Por lo tanto vamos a agregar la propiedad de Bagram repeat igual a no repeat esto para que no se repita
la imagen y con eso cerramos los estilos que vamos a utilizar en nuestro primer Dib que va a ser el
más externo de nuestro primer tabulador vamos a definir ahora los estilos que vamos a aplicar a nuestro
Dib más interno
y como hemos comentado en este Dib más interno vamos a aplicar ahora la imagen del tabulador con la
esquina redondeada de la parte derecha.
Por ello vamos a utilizar la imagen de ver Taub punto GIFF es decir el tabulador de la parte derecha
que básicamente únicamente como hemos comentado es una esquina redondeada.
También indicamos la propiedad no repeat y la posesión de la imagen la vamos a colocar en la parte superior
del lado derecho.
Para ello utilizamos la propiedad de Bagram posición top right el alto de la imagen es de veintiún píxeles
y la vamos a flotar hacia la izquierda el margen es igual a cero y con eso cerramos las propiedades
de este Dib más interno.
Por último vamos a agregar los estilos a nuestro Link.
Recordemos que este link es el elemento más interno de los dos DIV que hemos agregado.
Por ello para aplicar correctamente los estilos a este elemento más interno podemos observar que estamos
utilizando primeramente el elemento más externo es decir Dib punto Taub ya que este es el nombre de
la clase que vamos a utilizar posteriormente.
El más interno.
Y finalmente indicamos el elemento a que es el elemento más interno.
También de igual manera en el elemento más interno podemos observar que utilizamos de manera similar.
Primero identificamos el elemento Dip punto Taub y éste es el más externo y posteriormente indicamos
DIV que es el elemento interno que es un Dib dentro de este.
Todo esto lo definimos en nuestros documentos HTML así que cualquier duda pueden revisar nuevamente
el código HTML que agregamos en estos archivos.
Aquí únicamente ya estamos explicando el uso de los dips y cómo es que se aplican los estilos y dentro
de este elemento más interno.
Dentro de este hipervínculo vamos a hacer lo siguiente Las imágenes de la izquierda y la derecha tienen
un ancho de 8 píxeles.
Por lo tanto dejamos este espacio para que se completen las esquinas así que agregamos un margen cuando
definimos dos elementos únicamente dentro de un margen.
Este elemento aplica a la parte superior y a la parte inferior y este segundo elemento aplica a la parte
derecha y a la parte izquierda.
Así que las imágenes de la izquierda y la derecha van a ser las esquinas redondeadas.
Las imágenes con las esquinas redondeadas por lo tanto estamos dejando un espacio de 8 píxeles para
que se muestre correctamente estas imágenes pero realmente lo que estamos manipulando en este momento
es la parte central
y las imágenes tienen un alto de veintiún píxeles y también por ello vamos a manejar esta propiedad
de la OIT que va a ser el alto de veintiún píxeles para este elemento más interno y finalmente también
agregamos un Bagram y más en la cual vamos a usar la imagen de centro Tapp punto IHF también utilizamos
la propiedad de display Block Text de corazón no se va a utilizar ningún tipo de decoración para el
texto vertical Aline vamos a utilizar la propiedad de Midón para que se ponga al centro y vamos a flotar
este elemento hacia la izquierda
por default.
La imagen se repite pero en este caso lo vamos a hacer explícito ya que puede crecer a la izquierda
o a la derecha así que dependiendo del tamaño que vaya a ocupar todo el texto que tengamos en la parte
más interna se va a repetir esta imagen así que va a poder crecer este tabulador a la izquierda y a
la derecha y con esto cerramos el estilo que le estamos aplicando a la parte más interna de nuestros
dips ahora vamos a definir un estilo con el cual va a ser un selector de tipo Heydi solamente debe de
haber un tabulador activo en la página.
Por lo tanto vamos a utilizar el selector de tipo Heydi en lugar de una clase.
Para ello vamos a utilizar el símbolo de número y este selector único se va a llamar actual y vamos
a agregar los siguientes estilos.
Vamos a cambiar el color de este selector en particular para que se note que es el tabulador activo
así que vamos a utilizar la imagen de AC izq tap es decir que va a ser una esquina redondeada pero con
el color del tabulador activo
también paradigmas interno especificamos que vamos a utilizar.
Otra imagen que va a ser un color más claro y el elemento más interno que es el hipervínculo indicamos
que vamos a utilizar una imagen con un color de centro con el color activo así que con esos tres elementos
vamos a poder modificar el estilo para el tabulador activo posteriormente para los elementos de Link.
Vamos a especificar el siguiente color y también el de corazón que no subraye y cuando nos posicionamos
sobre el hipervínculo también va a cambiar el color va a ser un color distinto
finalmente vamos a ejecutar nuestro proyecto y el resultado es como sigue Nos muestra la página de laboratorio
CCS y si damos clic en la página de contenido podemos observar los tres tabuladores y podemos observar
que si estamos en la primera página entonces el primer tabulador se muestra con un color distinto es
decir que se aplica el estilo de tabulador activo y los demás tabuladores están con un color distinto
y si hiciéramos un sobre este tabulador podríamos observar que cada tabulador se compone de tres elementos
por un lado una imagen en la parte izquierda.
Posteriormente una imagen central y posteriormente una imagen en la parte derecha la imagen izquierda
tiene la esquina redondeada en la parte izquierda y la imagen derecha tiene la parte derecha redondeada.
Por ello es que podemos observar este efecto del tabulador este se aplica al dip más externo al más
interno y éste a Link interno que se encuentra dentro de los dips y de esta manera es como hemos aplicado
las hojas de estilo a estos elementos y con esto conseguimos el efecto de tabuladores según se muestra.
Como hemos comentado podemos ejecutar el proyecto sin activar los estilos y podremos observar que únicamente
podemos visualizar texto y no obtendremos el efecto deseado del manejo de estilos.
También se le solicita inspeccionar estos elementos para que puedan tener más claro el concepto de estilos
y todo lo que hemos aplicado en este laboratorio.
Poco a poco nos iremos familiarizando con estos conceptos y con las propiedades que hemos aplicado en
este laboratorio
como conclusión con este laboratorio CSS hemos puesto en práctica más ejemplos del uso de CSS.
Incluso les invitamos a probar el ejercicio sin el archivo estilos puntos CSS para que vean la diferencia
entre usar únicamente etiquetas HTML y agregar estilos CSS y así lograr una diferencia sustancial en
la forma en que se presenta la información al usuario.
Con esto finalizamos el laboratorio CSS.