.. _ref-staticfiles: Fichiers statiques ================== .. container:: section :name: static-files Votre site web fonctionne, mais il est très basique à ce stade. Il est possible d’y ajouter du `CSS `__ de façon à améliorer la mise en forme de vos pages HTML. Comme ce style ne changera pas, il sera stocké comme un fichier *statique* plutôt qu’en utilisant un template. Flask ajoute automatiquement une vue ``static`` qui prend un chemin relatif au répertoire ``mobility/static`` et sert les fichiers qui s’y trouvent. Ajoutez le lien vers le fichier CSS dans le fichier ``mobility/templates/aiport.html`` après la balise ````: .. container:: highlight-html+jinja notranslate :name: id0 .. container:: highlight ``mobility/static/base.html`` .. code-block:: html+jinja ... Outre le CSS, les autres types de fichiers statiques pourraient être les fichiers contenant des fonctions JavaScript ou des images et logos. Ils sont tous placés dans le répertoire ``mobility/static`` et référencés en utilisant ``url_for('static', filename='...')``. Pour l'instant, ne prêtez pas attention au style, copiez simplement le fichier ci-dessous dans ``mobility/static/style.css``. Vous pourrez cependant, à la fin du TP, prendre du temps pour changer le design de votre site: .. container:: literal-block-wrapper docutils :name: id1 .. container:: code-block-caption ``mobility/static/style.css`` .. code-block:: css html { font-family: sans-serif; background: #eee; padding: 1rem; } body { max-width: 960px; margin: 0 auto; background: white; } h1 { font-family: serif; color: #377ba8; margin: 1rem 0; } a { color: #377ba8; } nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; } nav h1 { flex: auto; margin: 0; } nav ul { display: flex; list-style: none; margin: 0; padding: 0; } nav ul li a, nav ul li span, header { display: block; padding: 0.5rem; } Si vous allez sur http://127.0.0.1:5000/, la page devrait ressembler à la capture d’écran ci-dessous. .. image:: ../_images/mobility_with_css.png :class: screenshot align-center Vous trouverez plus d’informations sur CSS dans `Mozilla’s documentation `__. Si vous changez un fichier statique, rafraîchissez la page de votre navigateur. Si le changement n’a pas d’effet, essayer de vider la cache de votre navigateur. .. only:: html Continuez en lisant le document `Le Menu `__.