Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Ordem de links do CSS

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas

por Mario Jorge
| 103k xp | 22 posts

Galera, bom dia. Todos bem? Espero que sim.

Estou tentando criar ícones de redes sociais na minha página web, e estou enfrentando o seguinte problema, segue o código:

01 - No head da minha pagina estou passando o link dos arquivos css:

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">

02 - Criei os ícones conforme informa o W3C, que usa o font-awesome.min.css:

<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-twitter"></a>

03 - No index.css passo as configurações para adequar os botões a minha página, ainda como orienta o W3C(atenção para o text-decoration:none):

.fa {
  padding: 20px;
  font-size: 30px;
  width: 60px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover{
    opacity: 0.7;
}

E ai então vem meu problema, ao carregar página, os links pegam a configuração do arquivo bootstrap.min.css. Segue abaixo:

a:hover{
    color: #23527;
    text-decoration: underline;
}

Como faço para dar "prioridade" ao meu index.css? Existe uma forma melhor de realizar essa tarefa? É uma pratica ruim ter mais de uma biblioteca CSS como neste caso?

5 respostas
por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

A ordem está correta. Se os seletores estiverem com mesmo peso (parecem estar), o seu index vai sobrescrever os do bootstrap.

Não sei se foi problema na hora de copiar aqui, mas ta faltando um ponto na declaracao do seletor do .fa. Pode ser isso...

por Mario Jorge
| 103k xp | 22 posts

Sérgio, obrigado pela resposta. Mas o erro foi apenas ao copiar, no código original está certinho.

Uma outra dúvida me ocorreu olhando aqui... No bootstrap ele passa as configurações para o "a" e no meu index.css estou passando para uma classe ".la". A tag "a" tem mais peso neste caso que a class ".la"? Se sim poderia ser isso...

por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

A ordem de peso dos seletores, bem simplificadamente é (do mais fraco pro mais forte):

TAG < .CLASSE < #ID

Entao o seu .fa deveria sobrescrever o a do bootstrap sim. Será que o font-awesome está fazendo algo com .fa com prioridade mais alta?

Se bem que vc falou que quem ta ganhando é o bootstrap ne. Meu proximo chute é que o arquivo index.css nao esta sendo carregado entao. As vezes o caminho ta errado. Ou tem algum erro de sintaxe nele que ta impedindo que seja executado

por Mario Jorge
| 103k xp | 22 posts

Acho que descobri Sérgio. Não sei se realmente é isso mas pra mim fez sentido rsrs

No bootstrap.css temos:

a:hover{
    color: #23527;
    text-decoration: underline;
}

Já no index.css temos:

.fa:hover{
    opacity: 0.7;
}

Pelo que entendi, me corrija se eu estiver errado, o bootstrap passa o decoration e a color pro a:hoverporém no .fa:hover não há nada que faça a "troca" desses valores. Logo é como se o navegador interpretasse:

a+.fa:hover{
    color: #23527;
    text-decoration: underline;
    opacity: 0.7;
}

Alterei o .fa:hover para:

.fa:hover{
    color:#FFFFFF;
    text-decoration: none;
    opacity: 0.7;
}

Ai sim, então, o index.css sobrescreveu o bootstrap.

Obrigado!

solução!
por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

Isso, exato! Ele soma as propriedades se no index nao tiver nada sobrescrevendo