Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

CSS e Inspect Element

Bom dia. Tive algumas diferenças em meu projeto, pois exercitei algumas coisas diferentes das orientações e confesso que me perdi um pouco e apanhei para encontrar os motivos dos resultados não esperados conforme orientação do curso.

Notei que no Inspect Element aparece a 'pilha' das formatações compreendidas e efetivamente executadas pelo navegador. Algumas destas formatações aparecem sublinhadas, o que me pareceu ser desnecessária a configuração naquela tag pois já estaria herdando esta característica das tags utilizadas (sempre assumindo a configuração da última definição de formatação), por exemplo:


parte do código da página (bio.html):

    <aside>
        <nav>
            <h1>João da Silva</h1>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>

parte do código do CSS (site.css):

h1, h2 { font-family: "Open Sans Condensed", "Arial", sans-serif; }

aside { background-color: #851944; font-family: "Open Sans Condensed", "Arial", sans-serif; text-align: center; padding: 20px; margin-bottom: 25px; color: #F2FFFC; }

A questão é: Poderia nos dar uma explicação melhor sobre as opções disponíveis do Inspector Element, pois ao que me pareceu pode nos auxiliar muito na refatoração do arquivo CSS, para não ficarmos disperdiçando recursos.

2 respostas
solução

Oi Otavio,

Temos o curso de devtools que pode te ajudar bastante nisso:

https://cursos.alura.com.br/course/chrome-devtools

Ele cobre não só essa parte do DOM, mas vai pegando outras partes da ferramenta inteira.

Abcs!

Fala Otavio!

Que bom que conseguiu resolver sua dúvida. Estou fechando seu tópico, porém, não hesite em criar um novo caso precise.

Abraços!