' o ' Las etiquetas 'también se pueden utilizar, pero es una buena práctica usar la etiqueta' ' etiqueta. A continuación, asigne un “ encabezamiento ” class para aplicar estilos CSS en la sección de encabezado. Después de eso, agregue el '

” y asígnele una clase de “ título ” para mostrar el contenido “¡Bienvenido a Linuxhint!”:

clase = 'encabezamiento' >

< h1 clase = 'título' > ¡Bienvenido a Linuxhint! < / h1 >

< / encabezado>

Después de eso, seleccione el ' ” clase de etiqueta y asigne los siguientes estilos:

---

---

.encabezamiento {

imagen de fondo: url ( '../bg.jpg' ) ;

fondo- tamaño : cubrir;

repetición de fondo: sin repetición;

color : humo blanco;

posición de fondo: superior;

relleno: 0px 20px 20px 20px;

}

La explicación del código anterior se menciona a continuación:

• Primero, configura la imagen “ bg.jpg ” como fondo para la sección de encabezado usando el “ imagen de fondo ' propiedad.
• A continuación, el “ tamaño de fondo ' y ' repetición de fondo Las propiedades ” se utilizan para establecer el tamaño de la imagen y detener la repetición de la imagen, respectivamente.
• Después de eso, establezca el color del texto y la posición de la imagen en la parte superior con la ayuda de ' color ' y ' posición de fondo ' propiedades.
• Al final, el “ relleno La propiedad ” se utiliza para establecer un espacio entre el contenido del encabezado y el borde.

Después de ejecutar el código anterior, la página web se ve así:

El resultado anterior muestra que se crea la sección de encabezado y se le aplican estilos CSS.

Paso 2: crea una barra de navegación

El encabezado también puede contener una barra de navegación en la mayoría de los casos. Para la creación de la barra de navegación el HTML “ La etiqueta ” puede ser muy útil. Por eso, agregue elementos de la barra de navegación usando ' ” etiquetas y asignar una clase de “ acto ”:

clase = 'encabezamiento' >



< a clase = 'acto' href = '#' >Inicio< / a >

< a clase = 'acto' href = '#' >Servicios< / a >

< a clase = 'acto' href = '#' >Sobre Nosotros< / a >

< a clase = 'acto' href = '#' >Contáctenos< / a >

< a clase = 'acto' href = '#' >Novedades< / a >

< / no>

< hermano >< hermano >

< h1 clase = 'título' > ¡Bienvenido a Linuxhint! < / h1 >

< / encabezado>

Después de ejecutar el código anterior, la página web se ve así:

El resultado anterior ilustra que los elementos de la barra de navegación ' Hogar ”, “ Servicios ”, “ Sobre nosotros ”, “ Contáctenos ' y ' Los recién llegados ' ha sido creado.

Paso 3: aplique estilos a los elementos de la barra de navegación

Para diseñar los elementos de la barra de navegación, seleccione el botón ' acto ” clase y asigne las siguientes propiedades de estilos CSS:

.acto {

texto-decoración: ninguno;

color : blanco;

bloqueo de pantalla;

relleno: 15px;

fuente- tamaño : grande;

flotador izquierdo;

margen: 0px 20px;

}

La explicación del código anterior es:

• Primero el ' decoración de texto ” se establece en “ninguno” para eliminar el estilo predefinido del “ ' etiqueta.
• Para mejorar la visibilidad del texto para el usuario, el ' blanco ' y ' grande Los valores ” se proporcionan a la “ color ' y el ' tamaño de fuente ' propiedad.
• Después de eso, el “ mostrar ' y ' flotar ” propiedades ayudan al “ ” para que aparezcan en la misma línea.
• Al final, el “ relleno ' y ' margen Los valores de propiedades ” se utilizan para crear un espacio entre cada etiqueta “ ”.

Después de ejecutar el código anterior, la página web se ve así:

El resultado anterior ilustra que los elementos de la barra de navegación ahora tienen estilo.

Paso 4: agregue el efecto de desplazamiento a los elementos de la barra de navegación

Como en el resultado anterior, el efecto de desplazamiento no está disponible en el elemento de la barra de navegación. Para agregar ambos, seleccione el “ título ” clase que se asigna a la “

' etiqueta. Después de eso, agregue el ' :flotar ” selector con el “ acto ” clase para aplicar el efecto de desplazamiento en los elementos de la barra de navegación:

.act: pasar el cursor {

borde : 2px blanco sólido;

color : Violeta Azul;

}

.título {

texto- alinear : centro;

margen: 18 %0px;

}

La explicación del código anterior se proporciona a continuación:

• Primero, establezca el “ borde ” de un tipo sólido de 2px y asigne un blanco “ color ”. Junto con él, configure el “ Violeta Azul ” color solo cuando el usuario pasa el mouse sobre los elementos de la barra de navegación.
• A continuación, seleccione el “ título ” class y establezca su alineación en “ centro ” y proporciona algo de margen para que la sección parezca más grande.

Después de ejecutar el código anterior, el aspecto final del encabezado se ve así:

El resultado anterior muestra que el encabezado se crea utilizando HTML y CSS.

Conclusión

En el archivo HTML, la etiqueta “

” se usa para crear una sección para el encabezado. Después de eso, los usuarios pueden aplicar propiedades CSS como relleno e imágenes de fondo para mejorar la sección del encabezado. Se aplica a todos los elementos del encabezado, como una barra de navegación. Para crear una barra de navegación, los usuarios pueden utilizar la etiqueta '