' ou ' ” tags também podem ser utilizadas, mas é uma boa prática usar as tags “ ' marcação. Em seguida, atribua um “ cabeçalho ” para aplicar estilos CSS na seção de cabeçalho. Depois disso, adicione o “

” nele e atribua a ele uma classe de “ cabeçalho ” para exibir o conteúdo “Welcome to Linuxhint!”:

aula = 'cabeçalho' >

< h1 aula = 'cabeçalho' > Bem-vindo ao Linuxhint! < / h1 >

< / cabeçalho>

Depois disso, selecione a opção “ ” e atribua os seguintes estilos:

---

---

.cabeçalho {

background-image: url ( '../bg.jpg' ) ;

fundo- tamanho : cobrir;

repetição de fundo: sem repetição;

cor : fumaça branca;

posição de fundo: superior;

preenchimento: 0px 20px 20px 20px;

}

A explicação do código acima é mencionada abaixo:

• Primeiro, defina a imagem “ bg.jpg ” como pano de fundo para a seção de cabeçalho usando o “ imagem de fundo ' propriedade.
• A seguir, o “ tamanho de fundo ' e ' fundo de repetição ” são usadas para definir o tamanho da imagem e interromper a repetição da imagem, respectivamente.
• Depois disso, defina a cor do texto e a posição da imagem para o topo com a ajuda de “ cor ' e ' posição de fundo ” propriedades.
• No final, o “ preenchimento ” é utilizada para definir um espaço entre o conteúdo do cabeçalho e a borda.

Depois de executar o código acima, a página da Web ficará assim:

A saída acima mostra que a seção de cabeçalho foi criada e os estilos CSS são aplicados a ela.

Etapa 2: criar uma barra de navegação

O cabeçalho também pode conter uma barra de navegação na maioria dos casos. Para a criação da barra de navegação o HTML “ ” pode ser muito útil. É por isso que adicione itens da barra de navegação usando “ ” e atribua uma classe de “ agir ”:

aula = 'cabeçalho' >



< a aula = 'agir' href = '#' >Casa< / a >

< a aula = 'agir' href = '#' >Serviços< / a >

< a aula = 'agir' href = '#' >Sobre Nós< / a >

< a aula = 'agir' href = '#' >Fale Conosco< / a >

< a aula = 'agir' href = '#' >Novidades< / a >

< / não>

< br >< br >

< h1 aula = 'cabeçalho' > Bem-vindo ao Linuxhint! < / h1 >

< / cabeçalho>

Depois de executar o código acima, a página da Web ficará assim:

A saída acima ilustra que os itens da barra de navegação “ Lar ”, “ Serviços ”, “ Sobre nós ”, “ Contate-nos ' e ' Novas chegadas ' foi criado.

Etapa 3: aplicar estilos aos itens da barra de navegação

Para estilizar os itens da barra de navegação, selecione o botão “ agir ” e atribua as seguintes propriedades de estilos CSS:

.agir {

decoração de texto: nenhum;

cor : branco;

exibição: bloco;

preenchimento: 15px;

Fonte- tamanho : grande;

flutuar: esquerda;

margem: 0px 20px;

}

A explicação do código acima é:

• Primeiro, o “ decoração de texto ” é definida como “none” para remover o estilo predefinido do “ ' marcação.
• Para melhorar a visibilidade do texto para o usuário, o “ branco ' e ' grande ” valores são fornecidos para o “ cor ' e a ' tamanho da fonte ' propriedade.
• Depois disso, o “ mostrar ' e ' flutuador ” As propriedades ajudam o “ ” apareçam na mesma linha.
• No final, o “ preenchimento ' e ' margem ” os valores das propriedades são usados ​​para criar espaço entre cada tag “ ”.

Depois de executar o código acima, a página da Web ficará assim:

A saída acima ilustra que os itens da barra de navegação agora estão estilizados.

Etapa 4: adicionar efeito de foco aos itens da barra de navegação

Como na saída acima, o efeito de foco não está disponível no item da barra de navegação. Para adicionar ambos, selecione o botão “ cabeçalho ” classe que é atribuída ao “

' marcação. Depois disso, adicione o “ :flutuar ” seletor com o botão “ agir ” para aplicar o efeito de foco nos itens da barra de navegação:

.act:hover {

fronteira : 2px branco sólido;

cor : azulvioleta;

}

.cabeçalho {

texto- alinhar : Centro;

margem: 18 % 0px;

}

A explicação do código acima é fornecida abaixo:

• Primeiro, defina o “ fronteira ” de um sólido do tipo 2px e atribua um branco “ cor ”. Junto com ele, defina o “ azul violeta ” cor somente quando o mouse é direcionado pelo usuário nos itens da barra de navegação.
• Em seguida, selecione a opção “ cabeçalho ” e defina seu alinhamento como “ Centro ” e forneça alguma margem para fazer a seção parecer maior.

Depois de executar o código acima, a aparência final do cabeçalho fica assim:

A saída acima mostra que o cabeçalho foi criado usando HTML e CSS.

Conclusão

No arquivo HTML, a tag “

” é usada para criar uma seção para o cabeçalho. Depois disso, os usuários podem aplicar propriedades CSS como preenchimento e imagens de fundo para aprimorar a seção de cabeçalho. Aplica-se a todos os elementos de cabeçalho, como uma barra de navegação. Para criar uma barra de navegação, os usuários podem utilizar a tag “