Entrar Ainda não tem acesso?
2
respostas

Não consigo usar o "body" no css

por João Pedro Uvo Mariano
| 53.8k xp | 7 posts

Olá, É o segundo projeto que tento fazer pra exercitar o aprendizado recente e que tive o mesmo problema. Quando tento configurar o body no css nada acontece, e acabo tendo que implementar a font-family item a item, diferente do que aprendi na aula. Quando tento mudar a font-size direto no body também nada acontece. O que estou fazendo de errado? Uso o mesmo reset do curso de html e css.

<!DOCTYPE HTML>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="reset.css">
        <link href="https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap" rel="stylesheet">                
    <title>João Pedro Uvo - Ator</title>    
    </head>
    <body>
        <header>
            <div class="caixa">
                <a href="index.html" class="titulo">João Pedro Uvo</a>
                <nav class="menu">
                    <ul>
                        <li><a href="curriculo.html">Currículo</a></li>
                        <li><a href="fotos.html">Fotos</a></li>
                        <li><a href="videos.html">Vídeos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <main>
            <section class="conteudo-home">
                <img src="imagem-home.jpeg" alt="Foto de João Pedro Uvo" class="imagem-home">
            </section>
        </main>
        <footer>
            <div class="conteudo-rodape">
                <h2>Siga nas redes sociais</h2>
                <div class="caixa-rodape">
                <a href="https://www.facebook.com/joaopedro.uvo/"><img border="0" src="facebook-icon.png" /></a>
                <a href="https://www.instagram.com/joaopedrouvo/?hl=pt-br"><img border="0" src="instagram-icon.png" /></a>
                <a href="https://vimeo.com/user105622530"><img border="0" src="vimeo-icon.png" /></a>
                </div>
            </div>
        </footer>
    </body>
</html>
2 respostas
por João Pedro Uvo Mariano
| 53.8k xp | 7 posts

css

body{
    font-family: 'Lora', serif; /*nao funciona!*/
}
header{
    background: #66CDAA;
}

.caixa{
    position: relative;
    width:940px;
    margin: auto;
    padding: 30px 0;
}
.titulo{
    /*font-family: 'Lora', serif;*/
    display: inline;
    border:solid black;
    padding: 5px;    
    font-size:35px;
    font-weight: bold;
    text-decoration:none;
    color: black;
}
.menu {
    position: absolute;
    right:0;
    top: 40px;
/*font-family: 'Lora', serif;*/}
nav li{
    display: inline;
    margin:0 0 0 10px;
}
nav a{
    font-weight: bold;
    font-size:20px;
    text-transform:uppercase;
    text-decoration: none;
    color: black;
}
nav a:hover{
    color: white;
    text-decoration:underline;

}
main{
    background: #FEFEFE;
}
/*conteúdo home*/
.conteudo-home{
    background:#2F4F4F; 
}
.imagem-home{
    width: 100%;
}
footer{
    clear: right;
}
.conteudo-rodape h2{
    margin: 20px 0;
    /*font-family: 'Lora', serif;*/;
    font-style: italic;

}

.conteudo-rodape{
    background:#2F4F4F;
    padding:40px;
    color: white;
    text-align: center;
}
.conteudo-rodape a{
    margin:0 20px 0 0;
    vertical-align: top;
}
.caixa-rodape{
    margin: 40px 0;
}
/*Conteúdo Currículo*/
.cursos{
    width: 940px;    
    /*font-family: 'Lora', serif;*/;
    margin: 0 auto;

}
.titulo-curriculo, .titulo-fotos, .titulo-videos, .titulo-contato{
    font-weight:bold;
    font-size:2.5em;
    padding: 20px 0 0 0;
    text-align: center;
    position: relative;
}
.titulo-categoria{
    margin-top:30px;
    font-size: 2em;

}
/*categoria cursos*/
.lista-cursos{
    display: inline-block;
    width: 50%;
    margin-top: 50px;


}
.item, .item-audiovisual, .item-teatro{
    line-height: 1.5;
    margin: 0 0 1em 0;
}
.item b{
    font-weight:bold;
}

.imagem-cursos{
    width: 30%;
    float: right;
    margin: 40px 0;
}    
/*Categoria Audiovisual*/
.audiovisual{
    clear:right;
    width: 940px;    
    /*font-family: 'Lora', serif;*/;
    margin: 0 auto;
    padding:5em 0;
}
.audiovisual h2{
    text-align: right;
}
.imagem-audiovisual{
    width:30%;
    margin:40px 0;

}

.lista-audiovisual{
    margin-top: 200px;
    display: inline-block;
    float:right;
}
.item-audiovisual:before{
    content:"●";
}
/*Categoria Teatro*/
.teatro{
    width: 940px;    
    /*font-family: 'Lora', serif;*/;
    margin: 0 auto;
    padding:5em 0;
}
.lista-teatro{
    margin-top:50px;
    display: inline-block;
}
.imagem-teatro{
    width: 30%;
    float: right;
    margin: 40px 0;
}
.item-teatro:before{
    content:"●";
}
/*Fotos*/
.fotos{
    width: 940px;
    margin: 0 auto;
}
.foto-1, .foto-2, .foto-3, .foto-4{
    width: 400px;
    margin: 40px 20px 40px 20px;
    vertical-align: top;
}
.foto-5{
    width: 500px;
    margin: 40px 20px 40px 20px;
    position: relative;
    right: -200px;
}
/*Vídeos*/
.videos{

}
.conteudo-videos{
    width: 640px;
    padding: 3em;
    margin: 0 auto;

}
.video-1, .video-2{
    margin: 3em 0;
}
/*Contatos*/
form{
    background: #DDDDDD;
    width: 100%;
    padding: 30px 0;

}
.titulo-formulario{
    font-style: italic;
    margin-left:30%;
    padding: 2em 0;
}
.conteudo-formulario{
    margin-left:30%;
}

form label{
    display: block;
    padding-bottom:10px;
    font-size: 22px;
}
.input-padrao{
    margin-bottom: 1em; 
}
.enviar{
    width: 10%;
    margin-top: 30px;
    display: block;
}
por THIAGO TREVISAN ANGELICO
| 732.8k xp | 1017 posts

Boa tarde!

Algumas fontes não são padrão do browser. Então , é necessário disponibilizá-la junto no seu pacote.

Esta fonte está disponível em: https://fonts.google.com/specimen/Lora

No seu CSS você deve colocar também:

src: url(lora.woff); (exemplo)