3
respostas

POR QUE NÃO FUNCIONA CLASS?

<nav>
    <ul>
        <li><a href="index.html>home</a></li>
        <li><a href="produtos.html">Produtos</a></li>
        <li><a href="contato.html">Contatos</a></li>
    </ul>    
</nav>        

No video o instrutor usa uma tag (Nav a) no CSS para alterar o estilo do

  • Tentei usar uma classe (
    • ) , posteriormente (.style) no Css, e não funcionou. Porquê?

3 respostas

Seria interessante você postar seu código html e css para entendermos o que está acontecendo.

Uma dica, para escrever tags no fórum deixe ela entre aspas, assim:

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

Acho que entendi seu problema, mas não tenho certeza.

No CSS o nav a {} faz referência aos itens que estão dentro da tag <nav> seguido da tag <a>.

Como se fosse uma pasta, onde você quer alterar os arquivos dentro da pasta <a> que está dentro de outra pasta <nav>, se tiver algum outro <a> no arquivo html não será afetado, somente os que estão nesse caminho <nav> > <a>.

Diferente do nav a {} que irá alterar tudo que existe com esse caminho, a classe vai afetar apenas os itens que estiverem especificados como membros da classe, seguindo essa lógica, para utilizar uma classe, você deve colocar a classe em todos os <a> que deseja alterar o estilo.

            <nav>
                <ul>
                    <li><a class="menu" href="index.html">Home</a></li>
                    <li><a class="menu" href="produtos.html">Produtos</a></li>
                    <li><a class="menu" href="contato.html">Contato</a></li>
                </ul>
            </nav>

Para chamar a classe no arquivo CSS é necessário utilizar o . + nome da classe seguido de {}, ficando as configurações de estilo dentro das {}:

.menu{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;    
}

Você também pode fazer a classe direto no <ul> para não precisar ficar repetindo a classe várias vezes:

            <nav>
                <ul class="menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>

Mas se preferir fazer a lista no <ul>, o text-decoration: none; só irá funcionar se você colocar o caminho .menu a {}:

.menu a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

Olá, estou aprendendo a digitar aqui ainda, meu texto foi todo errado.

Minha dúvida é sobre fazer a lista no <ul>. Por que eu preciso colocar o caminho .menu a {} , ao invés de apenas .menu {} ?

A tag <ul> é pai das tags <li> e <a> e assim tudo o que eu fizer nela, fará nas tags filhos. Por que precisa especificar a tag <a> no CSS ?

Considerando o código abaixo:

            <nav>
                <ul class="menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>

Fazer no arquivo CSS nav ul {} ou .menu {} é a mesma coisa e irá funcionar.

nav ul {}
nav ul{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 25px;
    text-decoration: none;
}
`
.menu {}
nav ul{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 25px;
    text-decoration: none;
}
`

Porém, o menu ficará com essa cara:

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

Se você fizer com o caminho nav a {} ou menu a {} ficará assim:

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

nav a {}
nav a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 25px;
    text-decoration: none;
}
`
.menu {}
.menu a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 25px;
    text-decoration: none;
}
`

Isso acontece porque o text-decoration: none utilizado na aula é uma propriedade textual e a tag <ul> não é textual, é apenas uma lista, nela pode conter texto ou mídia. Para a propriedade text-decoration: none funcionar você deve utilizar ele em um elemento textual.