Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

aplicação de estilos em tags

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação

por Ricardo Deo Sipione Augusto
| 269.8k xp | 29 posts
Developer

Saudações!

Cá estou eu novamente para tirar uma dúvida. Durante a aula eu me questionei se as aplicações visuais do css que foram feitas no nav a não poderiam ser feitas do mesmo modo no nav li. pois, pela aula, o nav li são todos os elmentos dentro da lista equanto o nav a teria relação com o link; logo, aplicar mudança de negrito, tamanho da fonte e colocar o texto em caixa alta me parece ter mais relação com o nav li(elemntos da lista) do que com o nav a(links ancorados nos elmentos).

Na mesma linha de dúvidas, eu não poderia colcoar todas essas configurações visuais de css dentro do nav simplesmente? pois assim já pegariam todos os elementos daquele grupo, já que são configurações comuns do meu "setor de navegação".

As duvudas ventiladas permeiam os seguinte código css:

header{
    background: #bbbbbb;
    padding: 20px 0 20px 0;
}

.caixa{
    position:  relative;
    width: 940px;
    max-width: 100%;
    margin: 0 auto;
}

nav{
    position:  absolute;
    top: 110px;
    right: 0;
}

/* nav li significa todos os itens da lista dentro de nav*/
nav li{
    display: inline;
/*Para dar um espaçamento eu faço isso no item porque o outro 
tag dali de baixo tem relação com o link e não com o item da lista em si.
a margem é primeiro topo, depois direita, baixo e esquerda*/
    margin: 0 0 0 15px;
}

nav a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size:  22px;
/*Para tirar o sublinhado das palavras que foram gerados pela ancoragem, 
então eu tiro toda decoração do texto*/     
    text-decoration: none;
}

O qual está linkado nos eguinte código html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>Produtos - Barbearia Alura</title>
        <link rel = "stylesheet" href="reset.css">
        <link rel = "stylesheet" href="produtos.css">

    </head>

    <body>
        <header>
            <div class = "caixa">
                <h1><img src ="logo.png"></h1>

                <nav>
                    <ul>
                        <li><a href="file:///E:/Users/Win%2010/Desktop/,/programa%C3%A7%C3%A3o/front-end/HTML%20e%20CSS/pagina%20principal/index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a>Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

Obrigado!

1 resposta
solução!
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Oi Ricardo, espero que esteja bem :)

Precisamos ter em mente que existem estilos que devem pertencer ao elemento pai e estilos que devem pertencer ao elemento filho.

Vamos lá!

Neste caso, se os estilos que foram aplicados no nav a fossem aplicados no nav li, o resultado visual esperado seria o mesmo.

Um ponto importante que explica o porque não foi feito dessa forma, é que como essas estilizações são referentes ao texto e esses textos estão alocados diretamente dentro da tag <a>, então semanticamente, é mais coerente que as estilizações sejam atribuídas a esse elemento.

Outra questão é que caso o nav li tivesse outros filhos, aplicar os estilos do nav a ou dos outros filhos no nav li não iria funcionar de forma adequada, veja o exemplo:

<li>
    <h2>Cabelo + Barba</h2>
    <img src="cabelo+barba.jpg">
    <p>Pacote completo de cabelo e barba</p>
    <p>R$ 35,00</p>
</li>

Como são elementos diferentes e queremos resultados diferentes, não faz sentido aplicar no pai e sim nos filhos os seus respectivos estilos, dessa forma:

li h2 {
    font-size: 30px;
    font-weight: bold;
}

li p {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

Então, como nem sempre os estilos do filho quando são aplicados no pai irão trazer o resultado esperado e como queremos visar a construção de um código o mais semântico possível, temos sempre que tentar referenciar os estilos diretamente ao elemento que ele se refere/pertence.

Sendo assim, caso todos os estilos fossem aplicados ao nav, iríamos ter não só uma questão semântica, mas algumas propriedades não iriam funcionar, por exemplo:

text-decoration: none;
color: #000000;
display: inline;
margin: 0 0 0 15px;

Isso ocorre porque algumas dessas propriedades não foram desenvolvidas para esse elemento e sim para elementos como textos e links e também o espaçamento e disposição seriam aplicados ao container e não a cada elemento como é o necessário, veja o exemplo do margin:

  • margin sendo aplicado no nav

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

  • margin sendo aplicado em cada li

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

Espero ter ajudado, qualquer dúvida fique a vontade para perguntar. Bons estudos!