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

[Bug] depois que coloquei o :root não consigo mais mexer em outra funções do vscode

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Aplicando variáveis CSS e atividade Variáveis CSS

por Mateus Sampaio Correia
| 37.8k xp | 4 posts
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root {
    --cor-primaria: black;
    --cor-secundaria: white; 
    --cor-tercearia: #22D4FD; 

}

* {
    margin: 0;
    padding: 0;
}
body {
    /* height: 100vh; */
    box-sizing: border-box;
    background-color: black;
    color: white;
}

.cabecalho {
    padding: 2% 0% 0% 5%;
} 

.cabecalho__menu {
    display: flex;
    gap: 80px;
}

.cabecalho__menu__link {
    font-family: 'Montserrat' sans-serif;
    font-weight: 600;
    font-size: 24px;
    color:#22D4FD


} 

.apresentacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5%;
}

.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
}

.titulo-destaque{
    color: #22D4FD;
}

.apresentacao__conteudo__texto {
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;   
}

.apresentacao__links {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 32px;
}
.apresentacao__links__subtitulo {
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    font-size: 24px;
} 

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 378px;
    text-align: center;
    border: 2px solid #22D4FD;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
}
.apresentacao__links__link :hover {
    background-color: #000;
    color: #22D4FD;
    text-decoration: none;
    background-color: #272727;

}
.rodape {
    color: #22D4FD;
    padding: 23.64px;
    text-align: center;
    font-family: 'Montserrat' sans-serif;   
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
}
3 respostas
por Renan Lima
| 3708.1k xp | 7842 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Mateus.

Tudo bem?

Não entendi ao certo a sua dúvida, poderia explicar melhor, e se possível compartilhar o código HTML também? Valeu.

por Mateus Sampaio Correia
| 37.8k xp | 4 posts

quando coloquei a função:root no meu vccode, não estou conseguindo mais colocar nenhuma outra tag nele. por exemplo. tentei colocar text-color e não esta aparencendo a função é como se todo o meu vscode so estivesse para colocar cores novas.

solução!
por Renan Lima
| 3708.1k xp | 7842 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Mateus!

É importante lembrar que o :root é utilizado para definir variáveis CSS globais, ou seja, que serão utilizadas em todo o seu código.

Se você quer definir uma variável CSS que seja utilizada apenas em um determinado elemento, você pode definir essa variável dentro do seletor desse elemento. Por exemplo:

.minha-classe {
  --minha-variavel: red;
  color: var(--minha-variavel);
}

Dessa forma, a variável --minha-variavel será utilizada apenas dentro do elemento com a classe .minha-classe.

Espero ter ajudado e bons estudos!