5
respostas

PQ A PAGINA N FICA CINZA?

</head> <body> <header> <h1><img src="logo.png"></h1> <ul> <li><a href="BarbeariaAlura.html">Home</a></li> <li><a href="produtos.html">produtos</a></li> <li><a href="contato.html">contato</a></li> </ul> </header> </body>
header {
background: #BBBBBBBB;

}

5 respostas

Faaala Daphne, tudo bem?

Eu não entendi ao certo se você quis dizer que a página inteira ficou cinza, ou se foi só o cabeçalho (header). Abri aqui no meu pc e o cabeçalho está cinza sim, igual você definiu no teu código...

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Agora.. Se você quiser que a página inteira fique cinza, você vai ter que mudar o teu css, pra ao invés de selecionar a tag header, selecionar a tag body.

body {
            background: #BBBBBBBB;
}

Isso aconteceu porque a altura do elemento <header> é da mesma altura do conteúdo dele. Ja a altura do elemento body é a mesma altura da página. No teu código css, você tinha selecionado somente o header, então somente ele ficou cinza. Agora.. Suponhamos que você quisesse que o header ocupasse o tamanho da tela inteira, você poderia usar o seguinte código css.

body {
            margin: 0;
}

header {
            margin: 0;
            width: 100vw;
            height: 100vh;
            background: #BBBBBBBB;
}

Enfim, espero ter ajudado. Bons estudos!

era pra estar igual no teu computador mas no meu nao fica assim... o meu "head" um fico com cor e outro fica branco Insira aqui a descrição dessa imagem para ajudar na acessibilidade

</head> (aqui no vscode fica branco)
</head>

Daphne, a tag head e a tag header são duas coisas distintas.

A tag head não aparece na tela, nela você não coloca nenhum conteúdo, nela vocẽ só define algumas "configurações" pra sua página html.

Exemplo das configurações:

- o tipo de caractere que você está utilizando
- o título da página
- a importação de algum arquivo css
- entre outros

Já a tag header, aparece na tela, igual a qualquer outro elemento do tipo block.

Outra coisa, ambas as tags precisam ser abertas e fechadas, caso contrário pode bagunçar toda a sua página ex.:

<head>
....
</head>

<header>
...
</header>

Então vou te mandar o código html que fará sua página funcionar:

<body>
    <style>
        body {
            margin: 0;
        }

        header {
            margin: 0;
            width: 100vw;
            height: 100vh;
            background: #BBBBBBBB;
        }
    </style>

    <header>
        <h1><img src="logo.png"></h1>
        <ul>
            <li><a href="BarbeariaAlura.html">Home</a></li>
            <li><a href="produtos.html">produtos</a></li>
            <li><a href="contato.html">contato</a></li>
        </ul>
    </header>
</body>

Aproveitando esse tópico, vou te mostrar como seria a utilização da tag head nesse exemplo de código. Nesse código pode ter algumas coisas que você não viu ainda, mas não se preocupa, pois você vai ver em breve.

<html>

<head>
    <meta charset="UTF-8">
    <title>Barbearia Alura</title>

    <style>
        body {
            margin: 0;
        }

        header {
            margin: 0;
            width: 100vw;
            height: 100vh;
            background: #BBBBBBBB;
        }
    </style>
</head>

<body>
    <header>
        <h1><img src="logo.png"></h1>
        <ul>
            <li><a href="BarbeariaAlura.html">Home</a></li>
            <li><a href="produtos.html">produtos</a></li>
            <li><a href="contato.html">contato</a></li>
        </ul>
    </header>
</body>

</html>

Enfim, espero ter ajudado. Bons estudos!

deu certo!

muito obrigadaaa