CSS - intermediate - Lección nº 9
Barras de navegación CSS mejoradas
¿De qué trata esta lección?
En esta lección aprenderemos a crear barras de navegación. Hay más formas de crear una: usaremos listas desordenadas en un ejercicio y enlaces y botones simples (<button>) en otro. Para lograr esto, necesitamos estudiar las posibilidades de cambiar la posición predeterminada y la visibilidad de un elemento HTML.
Nuevas etiquetas HTML en esta lección:
<button> - esta etiqueta también se puede utilizar en formularios, pero fuera de un formulario podemos usarla para adjuntar acciones. El contenido de esta etiqueta suele ser breve y algunas configuraciones de diseño, que no se vieron en el caso de listas o enlaces, se agregan de forma predeterminada (contenido centrado).
Nuevas propiedades CSS en esta lección:
display – esta propiedad se utiliza para cambiar el modo de visualización de un elemento. Los modos de visualización básicos son block (en bloque) y inline (en línea). Algunas etiquetas se muestran en línea como predeterminadas, como <a> y <img>, otras como bloque, como <div> y <p>. Los valores comúnmente utilizados para esta propiedad son: block, inline, inline-block y none.
float – esta propiedad se utiliza también para posicionar. Un elemento flotante se alinea hacia el lado izquierdo o derecho dejando su lugar originalmente ocupado, sin dejar espacios en blanco. Valores posibles: left, right.
Nuevo selector de CSS en esta lección:
:not – este selector se usa para agregar formato de forma "negativa" o para agregar excepciones a una descripción de CSS.
Formas posibles:
p :not(.p1) - Se aplica a cada párrafo, que no tiene clase .p1
:not(p) – Se aplica a cada elemento, que no es un párrafo.
Guía:
Ejemplo de la propiedad display (visualización):
La imagen de arriba contiene algunos tipos de contenido con la configuración de visualización predeterminada: los párrafos y las secciones (marcadas con la etiqueta <div>) se muestran por defecto en bloque (block): cada una aparece una encima de la otra; Las imágenes aparecen inline-block por defecto, apareciendo en una línea.
En la imagen de arriba vemos el elemento con la configuración de visualización modificada: las secciones se muestran como inline-block para colocarlas en una fila, las imágenes están una encima de la otra mostradas como bloque (block) y los párrafos se muestran en línea (inline), en una fila.
Cuando se usa en línea (inline) en una sección, pierde su altura y ancho.
Ejemplo de mostrar elemento oculto:
En la imagen de arriba hay una página web en dos estados: al principio, el botón con el identificador box2 no aparece, luego cuando movemos el ratón sobre el primer botón, aparece.
No resulta evidente cómo hacerlo porque el box2 debería aparecer cuando seleccionamos el box1. Hemos usado: desplazarse (:hover) antes, pero la configuración se aplicó al elemento seleccionado y no a otro: usamos el signo + y mencionamos el elemento que queremos cambiar como se muestra en la imagen.
El signo + funciona si tenemos dos elementos vecinos (box2 debe estar después de box1), usamos el símbolo ~ si los elementos están en el mismo nivel pero no son vecinos o usamos el símbolo > si el elemento oculto está dentro del otro (es su hijo).
En esta lección aprenderemos a crear barras de navegación. Hay más formas de crear una: usaremos listas desordenadas en un ejercicio y enlaces y botones simples (<button>) en otro. Para lograr esto, necesitamos estudiar las posibilidades de cambiar la posición predeterminada y la visibilidad de un elemento HTML.
Nuevas etiquetas HTML en esta lección:
<button> - esta etiqueta también se puede utilizar en formularios, pero fuera de un formulario podemos usarla para adjuntar acciones. El contenido de esta etiqueta suele ser breve y algunas configuraciones de diseño, que no se vieron en el caso de listas o enlaces, se agregan de forma predeterminada (contenido centrado).
Nuevas propiedades CSS en esta lección:
display – esta propiedad se utiliza para cambiar el modo de visualización de un elemento. Los modos de visualización básicos son block (en bloque) y inline (en línea). Algunas etiquetas se muestran en línea como predeterminadas, como <a> y <img>, otras como bloque, como <div> y <p>. Los valores comúnmente utilizados para esta propiedad son: block, inline, inline-block y none.
float – esta propiedad se utiliza también para posicionar. Un elemento flotante se alinea hacia el lado izquierdo o derecho dejando su lugar originalmente ocupado, sin dejar espacios en blanco. Valores posibles: left, right.
Nuevo selector de CSS en esta lección:
:not – este selector se usa para agregar formato de forma "negativa" o para agregar excepciones a una descripción de CSS.
Formas posibles:
p :not(.p1) - Se aplica a cada párrafo, que no tiene clase .p1
:not(p) – Se aplica a cada elemento, que no es un párrafo.
Guía:
- El valor block para la propiedad de visualización significa que el contenido aparece en una fila separada.
- El valor inline significa que el contenido de la etiqueta se funde entre el otro contenido en línea en la fila. No podemos agregar un margen (margin) o relleno (padding) por encima o por debajo. No podemos usar height o width.
- Los elementos mostrados como inline-block aparecen en línea, pero pueden implementar tamaños, márgenes y rellenos sin restricciones.
- El valor none se usa para esconder elementos.
Ejemplo de la propiedad display (visualización):
La imagen de arriba contiene algunos tipos de contenido con la configuración de visualización predeterminada: los párrafos y las secciones (marcadas con la etiqueta <div>) se muestran por defecto en bloque (block): cada una aparece una encima de la otra; Las imágenes aparecen inline-block por defecto, apareciendo en una línea.
En la imagen de arriba vemos el elemento con la configuración de visualización modificada: las secciones se muestran como inline-block para colocarlas en una fila, las imágenes están una encima de la otra mostradas como bloque (block) y los párrafos se muestran en línea (inline), en una fila.
Cuando se usa en línea (inline) en una sección, pierde su altura y ancho.
Ejemplo de mostrar elemento oculto:
En la imagen de arriba hay una página web en dos estados: al principio, el botón con el identificador box2 no aparece, luego cuando movemos el ratón sobre el primer botón, aparece.
No resulta evidente cómo hacerlo porque el box2 debería aparecer cuando seleccionamos el box1. Hemos usado: desplazarse (:hover) antes, pero la configuración se aplicó al elemento seleccionado y no a otro: usamos el signo + y mencionamos el elemento que queremos cambiar como se muestra en la imagen.
El signo + funciona si tenemos dos elementos vecinos (box2 debe estar después de box1), usamos el símbolo ~ si los elementos están en el mismo nivel pero no son vecinos o usamos el símbolo > si el elemento oculto está dentro del otro (es su hijo).
Ejercicios
1. Aplica los cambios a la sección menu del archivo index.html como se describe a continuación:
Agrega un nuevo enlace al menú que hace referencia a la página principal Main.
Ver el resultado
Agrega un nuevo enlace al menú que hace referencia a la página principal Main.
Borra las etiquetas <br>.
Crea una lista desordenada que contenga los tres enlaces como elementos de lista.
2. Añade ajustes de diseño a la lista de enlaces del ejercicio anterior:
Esta lista desordenada (unordered list) no debería tener viñetas. Después, quita (list-decoration). Elimina el margen (margin) y el relleno (padding) predeterminados, agrega el valor 0 para las propiedades.
Para cada elemento de la lista (list item) en la barra de navegación, el texto contenido debe estar alineado al centro (text-align). Los elementos de la lista aparecen uno debajo del otro. Alinéalos en una fila con inline-block.
Cada link en la lista debe tener 20px de distancia desde la parte superior e inferior de la sección y 40px de distancia de las partes izquierda y derecha (padding), elimina el subrayado (text-decoration) y coloréalo en negro. El enlace es más alto de esta manera que el elemento de la lista que lo contiene: usa el modo de visualización de bloque para forzar a los enlaces a regresar al elemento de la lista..
Si movemos el cursor sobre un enlace, el color de fondo (background-color) del enlace debería cambiar. (:hover)
Define una clase de CSS llamada active, agregando otro color de fondo al enlace que se refiere a la página actual. Los enlaces marcados por esta clase no deben cambiar su color de fondo cuando se seleccionan. Utiliza el selector :not.
Establece la clase active en cada archivo HTML para el enlace correcto. (por ejemplo, en toplangs.html, solo el enlace que hace referencia en href a toplangs.html debe tener la clase activa, y así sucesivamente en los otros archivos)
Ver el resultado
Esta lista desordenada (unordered list) no debería tener viñetas. Después, quita (list-decoration). Elimina el margen (margin) y el relleno (padding) predeterminados, agrega el valor 0 para las propiedades.
Para cada elemento de la lista (list item) en la barra de navegación, el texto contenido debe estar alineado al centro (text-align). Los elementos de la lista aparecen uno debajo del otro. Alinéalos en una fila con inline-block.
Cada link en la lista debe tener 20px de distancia desde la parte superior e inferior de la sección y 40px de distancia de las partes izquierda y derecha (padding), elimina el subrayado (text-decoration) y coloréalo en negro. El enlace es más alto de esta manera que el elemento de la lista que lo contiene: usa el modo de visualización de bloque para forzar a los enlaces a regresar al elemento de la lista..
Si movemos el cursor sobre un enlace, el color de fondo (background-color) del enlace debería cambiar. (:hover)
Define una clase de CSS llamada active, agregando otro color de fondo al enlace que se refiere a la página actual. Los enlaces marcados por esta clase no deben cambiar su color de fondo cuando se seleccionan. Utiliza el selector :not.
Establece la clase active en cada archivo HTML para el enlace correcto. (por ejemplo, en toplangs.html, solo el enlace que hace referencia en href a toplangs.html debe tener la clase activa, y así sucesivamente en los otros archivos)
3. En el archivo aspects.html hay cuatro enlaces en línea, transfórmalos en una lista de navegación desplegable siguiendo estos pasos:
Envuelve estos enlaces en una etiqueta <div> con el id drop. Agrega un botón antes con el texto Content. Envuelve esto nuevamente en una etiqueta <div> con el identificador menu2.
La sección menu2 debe deslizarse (float) hacia la derecha, su contenido (button and links) debe estar alineado (text-align) también a la derecha.
Al button en la sección menu2, agrégale color de fuente, color de fondo, padding y elimina el borde.
Formatea los cuatro enlaces agregando borde, relleno de color de fondo (background-color), padding, font color, block display y elimina el subrayado (text-decoration). El enlace que tiene el cursor arriba debe cambiar su color de fondo.
La sección desplegable (drop) no debe mostrarse como predeterminada, pero cuando movemos el cursor sobre la sección menu2 debe aparecer.
Ver el resultado
Envuelve estos enlaces en una etiqueta <div> con el id drop. Agrega un botón antes con el texto Content. Envuelve esto nuevamente en una etiqueta <div> con el identificador menu2.
La sección menu2 debe deslizarse (float) hacia la derecha, su contenido (button and links) debe estar alineado (text-align) también a la derecha.
Al button en la sección menu2, agrégale color de fuente, color de fondo, padding y elimina el borde.
Formatea los cuatro enlaces agregando borde, relleno de color de fondo (background-color), padding, font color, block display y elimina el subrayado (text-decoration). El enlace que tiene el cursor arriba debe cambiar su color de fondo.
La sección desplegable (drop) no debe mostrarse como predeterminada, pero cuando movemos el cursor sobre la sección menu2 debe aparecer.
Cuestionario
1. ¿Qué sucederá si aplicamos la siguiente función CSS a una página web?
div:not(#box2) {
div:not(#box2) {
color: red;
}2. ¿Qué modo de visualización colocará el elemento en cuestión en una fila separada?
3. Si usamos una lista desordenada para una barra de navegación, ¿qué operación debemos completar adicionalmente?
4. Si queremos mostrar un elemento no mostrado…
Información suplementaria
Puedes leer más sobre el tema de la lección y hacer ejercicios visitando los siguientes enlaces:
https://www.w3schools.com/cssref/pr_class_display.asp;
https://www.w3schools.com/css/css_display_visibility.asp;
https://www.w3schools.com/html/html_blocks.asp;
https://www.w3schools.com/howto/howto_css_dropdown.asp;
https://www.w3schools.com/Css/css_navbar.asp.
https://www.w3schools.com/cssref/pr_class_display.asp;
https://www.w3schools.com/css/css_display_visibility.asp;
https://www.w3schools.com/html/html_blocks.asp;
https://www.w3schools.com/howto/howto_css_dropdown.asp;
https://www.w3schools.com/Css/css_navbar.asp.
