Esta guía comienza donde Tutorial 5 dejó de lado. Hemos construido una aplicación web de encuesta probada y ahora agregaremos un estilo y una imagen.
Además del HTML generado por el servidor, las aplicaciones web necesitan generalmente servir archivos adicionales — como imágenes, JavaScript o CSS — necesarios para renderizar la página web completa. En Django, denominamos a estos archivos «archivos estáticos».
Para proyectos pequeños, esto no es un gran problema, ya que puedes mantener los archivos estáticos en algún lugar donde tu servidor web pueda encontrarlos. Sin embargo, en proyectos más grandes — especialmente aquellos compuestos por múltiples aplicaciones — manejar las múltiples colecciones de archivos estáticos proporcionados por cada aplicación comienza a ser complicado.
Eso es lo que hace django.contrib.staticfiles: recopila los archivos estáticos de cada una de tus aplicaciones (y cualquier otro lugar que especifiques) en un solo lugar que se puede servir fácilmente en producción.
¿Dónde obtener ayuda:
Si tienes problemas al seguir este tutorial, por favor dirígete a la sección Ayuda del FAQ.
Primero, crea un directorio llamado static en tu directorio polls. Django buscará archivos estáticos allí, de manera similar a cómo Django encuentra plantillas dentro de polls/templates/.
La configuración STATICFILES_FINDERS de Django contiene una lista de buscadores que saben cómo descubrir archivos estáticos desde diversas fuentes. Uno de los valores por defecto es AppDirectoriesFinder, que busca un directorio «static» en cada una de las INSTALLED_APPS, como el creado en polls. El sitio administrativo utiliza la misma estructura de directorios para sus archivos estáticos.
Dentro del directorio static que acabas de crear, crea otro directorio llamado polls y dentro de él crea un archivo llamado style.css. En otras palabras, tu estilo CSS debería estar en polls/static/polls/style.css. Debido a cómo funciona el buscador de archivos estáticos AppDirectoriesFinder, puedes referirte a este archivo estático en Django como polls/style.css, similar a cómo se referencia la ruta para las plantillas.
Nombres de espacio de archivos estáticos
Como los templates, podríamos lograr evitar poner nuestros archivos estáticos directamente en polls/static (en lugar de crear otro subdirectorio polls), pero sería una mala idea. Django elegirá el primer archivo estático que encuentre cuyo nombre coincida y si tenías un archivo estático con el mismo nombre en otra aplicación, Django no podría distinguir entre ellos. Necesitamos poder apuntar a Django al archivo correcto y la mejor manera de asegurarlo es nombrándolos (poner esos archivos estáticos dentro de otro directorio llamado por la aplicación misma).
Pon el siguiente código en ese estiloho (polls/static/polls/style.css):
polls/static/polls/style.css¶li a {
color: green;
}
A continuación, agrega lo siguiente en la parte superior de polls/templates/polls/index.html:
polls/templates/polls/index.html¶{% load static %}
<link rel="stylesheet" href="{% static 'polls/style.css' %}">
La plantilla {% static %} genera la URL absoluta de los archivos estáticos.
Eso es todo lo que necesitas hacer para el desarrollo.
Inicia el servidor (o reiniciarlo si ya estaba en ejecución):
$ python manage.py runserver
Recarga http://localhost:8000/polls/ y deberías ver que los enlaces de las preguntas están en verde (Django estilo!) lo que significa que tu estiloho se cargó correctamente.
A continuación, crearemos un subdirectorio para imágenes. Crea un directorio images dentro del directorio polls/static/polls/. Dentro de este directorio, agrega cualquier archivo de imagen que desees usar como fondo. Para los propósitos de esta tutoría, estamos utilizando un archivo llamado background.png, que tendrá la ruta completa polls/static/polls/images/background.png.
Then, add a reference to your image in your stylesheet (polls/static/polls/style.css):
polls/static/polls/style.css¶body {
background: white url("images/background.png") no-repeat;
}
Recarga http://localhost:8000/polls/ y deberías ver el fondo cargado en la esquina superior izquierda de la pantalla.
Advertencia
La etiqueta de plantilla {% static %} no está disponible para su uso en archivos estáticos que no son generados por Django, como tu hoja de estilo. Debes utilizar siempre rutas relativas para vincular tus archivos estáticos entre sí, porque entonces puedes cambiar :setting:`STATIC_URL (usado por la etiqueta de plantilla static para generar sus URLs) sin tener que modificar una serie de rutas en tus archivos estáticos también.
Estos son los elementos básicos. Para obtener más detalles sobre configuraciones y otros elementos incluidos con el marco, vea la guía de cómo trabajar con archivos estáticos y la referencia a staticfiles. Desplegar archivos estáticos discute cómo utilizar archivos estáticos en un servidor real.
Cuando estés cómodo con los archivos estáticos, lee la parte 7 de este tutorial para aprender a personalizar el sitio administrativo generado automáticamente por Django.
may 31, 2026