0

Estou tentando colocar estilos css, mas só pegou o primeiro bloco de código no meu style.css
style.css

  h1 {
    color: blue;
}

.login {
  display: inline-block;
  padding: 15px;
  border-radius: 4%;
  text-decoration: none;
  margin: 12px;
  color: white;
  background-color: #34ADFB;
  transition: background-color 400ms ease-out;
}

.login:hover {
  background-color: #2B96DA;
}

.login:active {
  background-color: #34ADFB;
}

hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello from flask</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css')}}">
</head>
<body>
    {%- if name %}
        <h1>Hello {{ name }}!</h1>
    {% else %}
        <h1>Hello World!</h1>
    {% endif -%}
    <a class="login" href="{{ url_for('login') }}">Fazer login agora!</a>
</body>
</html>

Quando dou run no flask, somente esse bloco aparece:

  h1 {
    color: blue;
}

obs: já testei meu css no site jsbin, e funcionou normalmente.

Edit:

estrutura do projeto

flask-test 
   /static 
      style.css 
   /templates 
      hello.html 
      login.html 
   run.py 

obs2: estou usando o pycharm para fazer o projeto

7
  • Talvez seja somente um detalhe. Tentou mudar de )}} para ) }} (acrescentando um espaço) na linha do css? Commented 10/02/2021 às 18:28
  • tentei mudar sim, mas continua a mesma coisa. valeu pela ajuda! Commented 10/02/2021 às 18:47
  • atualize seu post com a estrutura de diretórios do projeto. Commented 10/02/2021 às 19:03
  • Poderia colocar uma saída do console, e uma do carregamento da página do browser da aba network ?
    – Danizavtz
    Commented 10/02/2021 às 19:57
  • tudo o que você está mostrando ai está correto - na minha experiência, esse tipo de "fantasma" acontce quando a gente está salvando as alterações num arquivo, achando que está modificando outro - no caso: verifique se você realmente está salvando o style.css no lugar certo, e nao deu um "save as..." e esqueceu em algum ponto.
    – jsbueno
    Commented 10/02/2021 às 20:12

1 Resposta 1

-1

Olá, Você pode fazer um teste utilizando um caminho relativo, ao invés de uma URL dinâmica do css.

<link rel="stylesheet" href="../static/style.css">

Abs.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .