Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Dúvida] explicação do "nav a" e "nav li"

Eu não consegui entender direito qual é o motivo de separar as informações entre o "nav li" e o "nav a" no arquivo CSS, em parte eu vi que colocar algumas informações como cor e o "text-decoration: none ;" no "nav li" não funcionam e não são aplicadas na página, mas o resto como tamanho da fonte, palavra em maiusculo e a grossura da fonte funcionam mesmo no "nav li". sou bem iniciante e coisas como essa me deixam com algumas dúvidas em entender o contexto do código.

nav li{
    display: inline ;
    margin: 0 0 0 15px;
}
nav a{
    text-transform: uppercase;
    color:#000000 ;
    font-weight: bold ;
    font-size: 22px ;
    text-decoration: none ;
}
4 respostas
solução!

Olá Gustavo, tudo bem com você?

Sua dúvida é muito pertinente e não se preocupe esse ponto que você levantou é muito relevante.

  • Quando se trata de CSS e de onde colocar os parâmetros é simplesmente uma novela, visto que os parâmetros na maioria das vezes funcionam em vários lugares, porém nem sempre devem estar nos lugares em que aparecem, isso porque existe uma coisa chamada clean code, que é algo que diz que devemos sempre manter nosso código organizado de forma que quem for ler aquele código possa ler aquilo sem muitas dificuldades, e isso também serve até para quem está programando ter mais facilidade em programar algo.
  • Agora trazendo isso para a sua dúvida, no arquivo CSS todos aqueles parâmetros funcionariam no marcador nav li ou no nav a contudo eles foram separados e eu vou explicar porque:
  • No marcador nav li foram colocados os seguintes parâmetros:
display: inline;
margin: 0 0 0 15px;

Porém se você analisar eles, o primeiro está mudando a apresentação visual e operacional do display, e o segundo faz a mesma coisa porém dessa vez ele altera o posicionamento visual da lista em relação a margem da pagina.

  • Já no marcador nav a foi colocado:
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;

E se você parar para analisar eles você irá perceber que todos eles tratam de mudar a configuração visual de como os link´s se apresentam no site, e não mexem na configuração operacional dos itens de navegação.

Em suma no marcador nav li foram colocados parâmetros que mudavam tanto a aparência como operação dos itens de navegação em relação á pagina;

Já no marcador nav a foram colocados apenas mudanças na aparecia dos itens e relação com eles mesmos e as interações do usuário com ele.

É por motivos e separações como essas que eles estão nesses lugares, pois cada um tem um resultado diferente, mas em síntese eles possuem algo em comum e ao perceber isso é possível perceber onde colocar cada um dos parâmetros.

Era isso espero ter explicado, caso tenha mais dúvidas recorra ao fórum, estarei à disposição.

Um grande abraço e bons estudos!

Olá, achei bem pertinente a questao, pois tive a mesma dúvida, acredito. Pois, em primeira analise, nao compreendi o motivo da separacao nav li e nav a, mas observando mais atentamente, percebi q nav li diz respeito ao posicionnamento e nav a diz respeito a propria aparencia. todavia, nao tenho certeza se estou certo, alguem poderia me dizer? abraços.

Fala, Gustavo!

Eu sei que o instrutor já respondeu (de forma brilhante) mas também quero deixar a minha contribuição.

O elemento li é um elemento de lista e o elemento a é um elemento de link. Quando colocamos um link dentro de um elemento de lista, é comum querer estilizar o link de forma diferente do resto da lista. Por exemplo, vc pode querer que o link apareça com uma cor de fundo diferente quando o usuário passa o cursor do mouse sobre ele, mas não quer que a cor de fundo do resto da lista mude. Neste caso, você pode usar o seletor li a para aplicar estilos apenas aos links dentro da lista, enquanto o seletor li é usado para aplicar estilos ao elemento de lista em si.

Existem tbm algumas propriedades de estilo que só podem ser aplicadas a elementos específicos. Por exemplo, a propriedade text-decoration é usada para controlar a decoração do texto, como sublinhado ou riscado, e só pode ser aplicada a elementos que contenham texto, como a, p e h1. Portanto, se você tentar aplicar a propriedade text-decoration: none ao elemento li, ela não terá nenhum efeito, pois o elemento li não contém texto.

Olá, Anderson. se você tentar aplicar a propriedade text-decoration: none ao elemento li, ela não terá nenhum efeito, pois o elemento li não contém texto. Sim, concordo, mas isso se restringe somente a esse caso em especifico e nao todos, né? Pois, muito bem li pode comportar texto, mas no caso do exemplo eh um link.