Uso do seletor de CSS

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Conteúdo externo e atividade Fontes externas

por Adrian Satiro Sivilha

| 36.9k xp | 8 posts

Boas pessoal!

Eu estava lendo sobre o seletor css () e a descrição que encontrei foi "The asterisk () is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML page."

Então, teoricamente ao usá-lo para especificar a fonte desejada (Montserrat), eu deveria ter a alteração de todas as fontes da página, não? Mas não é isso que está acontecendo.

Usando o asterisco, a fonte de todas as seções estão ficando na fonte desejada, mas o menu de navegação fica como estava antigamente. Gostaria de saber o porquê disso.

Quando uso "body" fica tudo certinho, igual ao vídeo do professor.

Meu código html referente ao header está assim:

<header>
            <div class="caixa">
                <h1><img src="../images/logo.png" alt="Logo da Barbaria Alura em preto"></h1>
                <nav>
                    <ul>
                        <li><a href="home.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>    
        </header>

E o css, aplicando o * fica assim:

*{
    font-family: 'Montserrat', sans-serif;
}

/* css do cabeçalho (comum a todas as páginas) */
header{
    background-color: #BBBBBB;
    padding: 20px 0;
}

.caixa{
    width: 940px;
    position: relative;
    margin: 0 auto;
}

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

nav li{
    display: inline;
    margin-left: 20px;
}

nav a{
    text-transform: uppercase;
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;
    color: #000000;
}

nav a:hover{
    color: rgb(139,69,19);
    text-decoration: underline;
}

3 respostas

solução!

por Jefferson Vilela Freire

| 105.1k xp | 4 posts

19/08/2022

Boa tarde brother, deixa eu te explicar, usar * e body não é a mesma coisa, lembra que em uma das aulas o professor utilizou um arquivo para zerar todos os espaçamentos, algo mais ou menos assim:

p,
h1,
h2,
h3,
ul,
li,
table,
th,
tr,
td,
img,
div,
header,
main,
footer {
    margin: 0;
    padding: 0;
}

Pois então, ao invés de ficar digitando todas tags, podemos usar o seletor universal, que é o asterisco *, assim o que você colocar ali vai ser aplicado a todas as tags individualmente:

* {
    margin: 0;
    padding: 0;
}

Aplicar algo no body é diferente de aplicar algo a todas as tags, exemplo:

Zerar margin e padding do body vai zerar o espaçamento do corpo, tanto em cima e embaixo quanto dos lados, mas não vai zerar o espaçamento das outras tags:

Sem zerar margin e padding:

Agora vamos ver a diferença entre zerar com body e com *, as duas imagens de cima são com body e as de baixo com *

Body vs *

por Jefferson Vilela Freire

| 105.1k xp | 4 posts

19/08/2022

Mas na questão de alterar a fonte não parece ter diferença, testei o seu código e altera tanto com body quanto com *, lembre-se que mais abaixo você está aplicando outros estilos na navbar:

nav a{
    text-transform: uppercase;
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;
    color: #000000;
}

nav a:hover{
    color: rgb(139,69,19);
    text-decoration: underline;
}

Experimenta isolar para identificar o problema, alterando a fonte com body: Alterando a fonte com *, não teve diferença: Alterando a fonte com *

Eu particularmente só zero padding e margin com o seletor universal, a fonte eu aplico no body mesmo. Espero ter ajudado.

por Adrian Satiro Sivilha

| 36.9k xp | 8 posts

05/09/2022

Opa Jefferson! Muito obrigado mesmo cara, sua explicação ficou muito clara e as imagens ajudaram muito para ilustrar e ajudar a entender. Acabei demorando um pouco para retomar esse assunto e mesmo assim entendi rapidinho lendo, valeu!