Olá, meu footer está desta forma, porem os itens do meu footer estao azuis e com essa linha embaixo
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá, meu footer está desta forma, porem os itens do meu footer estao azuis e com essa linha embaixo
acrescente no seu css o codigo abaixo
.lista__link a{
text-decoration: none;
color: var(--branco-principal);
margin-left: 1em;
}
text-decoration: none;: Remove a decoração padrão de link, que geralmente é um sublinhado. Com esta regra, os links dentro de elementos com a classe .lista__link não terão sublinhado.
color: var(--branco-principal);: Define a cor do texto dos links. Neste caso, a cor é obtida a partir de uma variável chamada --branco-principal. O uso de variáveis CSS (custom properties) é uma prática comum para tornar o código mais flexível e fácil de manter.
margin-left: 1em;: Adiciona uma margem à esquerda dos links. Isso cria um espaço entre o conteúdo à esquerda dos links e o próprio link. A unidade "em" é relativa ao tamanho da fonte do elemento pai, proporcionando um espaçamento relativo e responsivo.
Rafael,
Por que o text-decoration funciona quando o código está assim:
.lista__link a{
text-decoration: none;
color: var(--branco-principal);
margin-left: 1em;
}
E não funciona quando está assim:
.lista__link {
text-decoration: none;
color: var(--branco-principal);
margin-left: 1em;
}
No primeiro exemplo, o seletor .lista__link a especifica os links dentro de elementos com a classe .lista__link, garantindo que a propriedade text-decoration: none; afete diretamente os links.
No segundo exemplo, apenas os elementos com a classe .lista__link são selecionados, então os links dentro deles não são afetados pela propriedade text-decoration: none;.
Obrigada pela explicação, Rafael.