gustavoguanabara / html-css

Curso de HTML5 e CSS3
https://gustavoguanabara.github.io/html-css/
MIT License
13.99k stars 3.35k forks source link

Gostaria de relatar um erro,pelo menos para mim(html5 css3 desafio 12-projeto cordel) #341

Closed Mathsmano closed 2 years ago

Mathsmano commented 2 years ago

Então o erro se mantem na parte do

Root:
  --fonte3:'Sriracha',cursive;

Até ai tudo,ja havia importado a fonte e colocado ela ao "root". O problema é na hora de adciona-la veja o ex:

p{Font-family:var(--fonte3);}

A fonte não é adcionada,no inicio pensei que fosse erro de exportação,mas quando coloquei manualmente sem o "root"ela foi

{Font-family:'Sriracha',cursive;}

Só foi desse jeito. Obs:desenvolvo o html e o css pelo celular utilizando o app "TrebEdit"versão premium.

Gabriel-A-B commented 2 years ago

Duas coisas: eu não trabalho para o Gustavo, n sei o que rolou, pq comecei a receber esses emails

Segunda: pode ser que o aplicativo q vc está usando pode estar desatualizado, já que tags e css estão sempre sendo acrescentados e tirados

Em sex., 11 de nov. de 2022 09:22, Mathsmano @.***> escreveu:

Então o erro se mantem na parte do

Root:

--fonte3:'Sriracha',cursive;

Até ai tudo,ja havia importado a fonte e colocado ela ao "root". O problema é na hora de adciona-la veja o ex:

p{Font-family:var(--fonte3);}

A fonte não é adcionada,no inicio pensei que fosse erro de exportação,mas quando coloquei manualmente sem o "root"ela foi

{Font-family:'Sriracha',cursive;}

Só foi desse jeito. Obs:desenvolvo o html e o css pelo celular utilizando o app "TrebEdit"versão premium.

— Reply to this email directly, view it on GitHub https://github.com/gustavoguanabara/html-css/issues/341, or unsubscribe https://github.com/notifications/unsubscribe-auth/AV4Y3E6ZEWEHIBHKKNZAJHTWHY27ZANCNFSM6AAAAAAR5RS5VY . You are receiving this because you are subscribed to this thread.Message ID: @.***>

BenjamimCS commented 2 years ago

Pode parecer besta, mas pelo código apresentado você realmente declarou?:

Root:
  --fonte3:'Sriracha',cursive;

Recomendo que aguce mais as práticas e revise seu código, mas se puder mandar o código mais detalhadamente, por favor.

@Gabriel-A-B você deve ter clicado pra assistir o repositório, hahaha

Mathsmano commented 2 years ago
@charset"utf-8";

 @import url('https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700;900&display=swap');

 @import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');

 :root { 
     --fonte1:'Verdana','geneva','tahoma','sans-serif';
     --fonte2: 'Passion One', cursive; 
     --fonte3: 'Sriracha', cursive;
 }

*{margin: 0px;
  padding: 0px;
  }

html, body { 

     min-height: 100vh; 
     background-color:darkgray;
     font-family:'verdana','geneva','tahoma',Sans-serif; 

 }

header{background-color: black;
       color:white ;
       text-align: center;
       padding:27px;
       }

header > h1{font-size:2em;
           font-weight:bolder;
           font-variant: small-caps;
          font-family: 'Passion One', cursive;}

header a{color: white;
         text-decoration:none;
         font-weight:bolder;}  

header p{font-size:0.8em;
         }

a:hover{text-decoration:underline;}

section{
    line-height:2em;
    font-family:'sriracha',cursive ;
    font-size:5vw ;}

    section.normal > p{padding-top:10vh;
               padding-left: 30px;
               }

    .imagem1{background:lightgray url('../imagens/background001.jpg') center right no-repeat fixed  ;
        background-size:cover;
        box-shadow inset:6px 6px 13px 0px black black;;
        padding: 20px 0px;}

     .imagem1  p{color: white;
                display:inline-block;  
                margin:5vw;             
           background-color:rgba(0,0,0,0.253);                                                                  
               padding: 5%;}

      .imagem2{background:lightgray url('../imagens/background002.jpg') center right no-repeat fixed  ;
             background-size:cover; 
             box-shadow inset:6px 6px 13px 0px black black; 
             padding: 20px 0px;}       

             .imagem2 p{color: white;
              display:inline-block;  
              margin:5vw; background-color:rgba(0,0,0,0.253);
              padding: 5%;}

    footer{background-color:black;
           color: white;
           text-align: center;}

    footer a{color: white;
             text-decoration: none;
             font-weight:bolder;}

    footer a:hover{text-decoration: underline;}

Aqui o código,como citei tentei colocar" :var(--fonte3); "mas n funciona

BenjamimCS commented 2 years ago

Verficando o seu código relamente não há nada de errado a olho nu, mas colando no Sublime ou inspecionando aqui no navegador seu código tem alguns &nbsp no qual é um espaço, no caso do Sublime ele me mostro em hexadecimal. Esses caracteres estão presentes na parte mais superior do seu arquivo, até o html, body { ... }.

Como não é possível saber onde eles exatamente estão , coloque o var(--fonte3) onde você queria e depois copie esse código e cole-o em alguma ferramenta que remova espaços em branco: https://helpseotools.com/text-tools/trim-text. Copie o código gerado e substitua aí onde você vê espaços é onde eles estão. Com o que o programa remover já vai ser suficiente, mas saiba que ainda há alguns por ali.

Realmente estranho isso, provável do seu editor. Eu instalei ele pra checar algo e parece que tem como diminuir o tanto de espaços/tabs, acho que isso possa resolver. Qualquer coisa, tem esse site.

Mathsmano commented 2 years ago

Obrigado,mas vou ficar por isso mesmo,depois vou ger se utilizo o vscode.