---
title: "Escrevendo sua primeira aplicação Django, parte 6"
version: 2.2
locale: pt-br
source: https://docs.djangoproject.com/pt-br/2.2/intro/tutorial06/
canonical: https://djangodocs.dev/pt-br/2.2/intro/tutorial06/
---
# Escrevendo sua primeira aplicação Django, parte 6

Este tutorial começa onde o [Tutorial 5](/pt-br/2.2/intro/tutorial05/) parou. Nós construímos uma aplicação web de enquete testada, e agora nós vamos adicionar uma folha de estilos e uma imagem.

Além do HTML gerado pelo servidor, aplicações web normalmente precisam servir outros arquivos – como imagens, JavaScript, ou CSS – necessário para renderizar a página web completa. No Django, nós chamamos estes arquivos de “arquivos estáticos”.

Para projetos pequenos, isto não é um grande problema, porque você pode simplesmente manter os arquivos estáticos em algum lugar que o seu servidor web consegue encontrar. Entretanto, em grandes projetos – especialmente aqueles comprometidos com múltiplas apps – lidar com múltiplos conjuntos de arquivos estáticos provindos de cada aplicação começa a se tornar complicado.

É para isto que o `django.contrib.staticfiles`  serve: ele coleciona os arquivos estáticos de cada uma de suas aplicações (e qualquer outro lugar que você especifique) em um único local que pode ser facilmente servido em produção.

## Personalize a aparência do seu *app*

Primeiro, crie um diretório chamado `static` no seu diretório `polls`. O Django vai procurar os arquivos estáticos ali, de maneira similar a como o Django encontra os templates dentro de `polls/templates/`.

A configuração [`STATICFILES_FINDERS`](/pt-br/2.2/ref/settings/#std-setting-STATICFILES_FINDERS) do Django contém uma lista de buscadores que sabem como descobrir os arquivos estáticos de diversas fontes. Um dos padrões é o `AppDirectoriesFinder` que procura por um subdiretório “static” em cada uma das [`INSTALLED_APPS`](/pt-br/2.2/ref/settings/#std-setting-INSTALLED_APPS), como a `polls` que nós acabamos de criar. O site admin usa a mesma estrutura de diretórios para os arquivos estáticos.

Com o diretório `static` que você acabou de criar, crie outro diretório chamado `polls` e com ele crie um arquivo chamado `style.css`. Em outras palavras, o seu stylesheet deve ficar em `polls/static/polls/style.css`. Por conta da forma que o buscador de arquivos estáticos `AppDirectoriesFinder` funciona, você pode referênciar este arquivo estático no Django simplesmente como `polls/style.css`, similarmente como você referência o caminho para templates.

> **Arquivo estático namespace**
>
> Assim como templates, nós *podemos* nos safar somente colocando os arquivos estáticos diretamente em `polls/static` (ao invés de criar outro subdiretório `polls`), mas na verdade isso seria uma má idéia. O Django vai escolher o primeiro o arquivo estático que encontrar com aquele nome, e se você tem um arquivo estático com aquele mesmo nome em uma aplicação *diferente*, o Django não conseguiria distinguir entre elas. Nós precisamos poder apontar o Django para o arquivo correto, e a forma mais fácil de garantir isso é por usar um *namespacing* com eles. Isto é, colocando aqueles arquivos estáticos dentro de *outro* diretório com o mesmo nome da aplicação.

Coloque o seguinte código na sua folha de estilo (`polls/static/polls/style.css`):

*polls/static/polls/style.css*

```css
li a {
    color: green;
}
```

Em seguida, adicione o seguinte no topo de “polls//templates/polls/index.html”:

*polls/templates/polls/index.html*

```html+django
{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
```

O modelo tag `{% static %}` gera a URL absoluta para arquivos estáticos.

Isso é tudo que você precisa fazer para o desenvolvimento.

Inicie o servidor (ou reinicie se estiver em execução):

```console
$ python manage.py runserver
```

*Windows*

```doscon
...\> py manage.py runserver
```

Reload `http://localhost:8000/polls/` and you should see that the question
links are green (Django style!) which means that your stylesheet was properly
loaded.

## Adicionar uma imagem de fundo

Após, nós vamos criar o subdiretório para imagens. Crie um subdiretório `images` no diretório `polls/static/polls`. Dentro deste diretório, coloque uma imagem chamada `background.gif`.  Em outras palavras, coloque sua imagem em `polls/static/polls/images//background.gif`.

Então, adicione em seu stylesheet (`polls/static/polls/style.css`):

*polls/static/polls/style.css*

```css
body {
    background: white url("images/background.gif") no-repeat;
}
```

Reload `http://localhost:8000/polls/` and you should see the background
loaded in the top left of the screen.

> **Warning**
>
> Claro que o `{% static %}` template tag não está disponível para uso em arquivos estáticos como o seu stylesheet que não são gerados pelo Django. Você deve sempre usar **caminhos relativos** para conectar seus arquivos estáticos entre cada um, porque assim, você pode mudar [`STATIC_URL`](/pt-br/2.2/ref/settings/#std-setting-STATIC_URL) (usado pelo [`static`](/pt-br/2.2/ref/templates/builtins/#std-templatetag-static) template tag para gerar as URLs) sem ter que modificar um monte de caminhos em seus arquivos estáticos também.

Estes são os **básicos**. Para mais detalhes nas configurações e outras coisas incluídas no framework veja [o howto arquivos estáticos](/pt-br/2.2/howto/static-files/). Fazendo deploy de arquivos estáticos discute como usar arquivos estáticos em um servidor real.

Quando você estiver confortável com os arquivos estáticos, leia [parte 7 deste tutorial](/pt-br/2.2/intro/tutorial07/) para aprender como customizar o site do admin auto-gerado do Django.