Créer un blog avec Django

00:00:00 :Afin de rajouter un petit peu de style sur l'interface de notre site, on va utiliser des fichiers CSS.Donc ces fichiers, ce sont des fichiers statiques que l'on va devoir inclure dans notre projet.
00:00:12 :Donc dans mon projet, je vais dans l'application Post ici, créer un dossier qui va s'appeler statique.Donc statique comme ceci, avec un C à la fin, je valide et à l'intérieur de ce dossier,je vais créer un autre sous-dossier qui va s'appeler CSS et qui va contenir mes fichiers CSS.
00:00:28 :On va aller dans le fichier de base, donc le fichier base.html ici.Et après la balise de titre ici, on va inclure notre fichier CSS.
00:00:37 :Donc pour ça, on va faire une balise link.Par défaut, ça va créer une balise avec une relation style sheet.Donc ça, c'est PyCharm qui nous fait toute la complétion automatiquement pour nous.
00:00:47 :Et on va mettre dans le href ici, donc le lien vers le fichier que l'on va créer.On va créer deux fichiers.On va créer un premier fichier qui va être un fichier qu'on appelle le reset,qui va me permettre de remettre à zéro pas mal de règles en CSS qui sont assez embêtantes,
00:01:01 :comme des marges et plein de choses du genre,qui rendent l'édition du CSS assez confuse généralement,puisqu'on va avoir plein de marges par défaut qui vont se rajouter sans trop qu'on sache forcément où.
00:01:11 :Donc je préfère mettre ce reset de CSS qui va tout remettre à zéro et qui va nous permettre d'être très précis.Donc on va faire un fichier qui s'appelle reset.css
00:01:19 :et on va créer un autre fichier qui lui va s'appeler style.css.Et ce qu'on va faire, c'est qu'on va importer le fichier reset à l'intérieur du fichier style,puisqu'on aimerait en fait avoir quelque chose d'assez clean à l'intérieur du fichier de style.
00:01:33 :Donc dans reset.css, on va mettre tout ça ici.Donc ça, c'est un template que vous pouvez trouver sur Internet.Il y en a plein qui existent, qui vont vous permettre de remettre à zéro la plupart des choses qui sont donc setupées automatiquement par les feuilles de style de votre navigateur.
00:01:48 :Donc vous voyez, par exemple, sur le body, les titres ou les listes ou encore les paragraphes,on va remettre le margin et le padding à zéro.
00:01:55 :Donc ça, c'est le fichier reset.css.Et à l'intérieur du fichier de style, on va donc importer ce fichier.Donc pour ça, on va faire at import et on va mettre le nom du fichier,qui dans ce cas-ci est juste reset.css.
00:02:07 :Donc on peut mettre juste le nom du fichier,puisqu'il se trouve dans le même dossier que ce fichier style.css.On va également tout de suite importer une famille que j'ai récupérée de Google,donc une famille, une police d'écriture en fait.
00:02:20 :Une police d'écriture qui est l'écriture Railway,qui va me permettre d'avoir un rendu un peu plus intéressant que l'écriture par défaut qu'on a actuellement sur notre blog.
00:02:29 :Donc voilà pour la base.On a donc notre fichier style.css, notre fichier reset.css qui est importé dans le style et on va donc faire le lien à l'intérieur de notre fichier base.html ici.
00:02:41 :Pour ça, on va devoir loader une balise.Donc on va utiliser les accolades, le pourcentage et on va dire load statique.Donc ça, c'est bien important.
00:02:49 :Ça va nous permettre en fait d'utiliser ce tag statique à l'intérieur ici du href.Donc on va mettre une autre balise.On va dire qu'on veut utiliser les ressources statiques et on va mettre le lien vers la ressource.
00:03:00 :Donc là encore, faites bien attention, on met des guillemets doubles pour le href et des guillemets simples ici pour le lien vers le fichier.Donc le lien vers le fichier, ça va être css.style.css,
00:03:09 :donc le fichier qu'on a créé juste avant.Donc là, le fichier style.css à l'intérieur de CSS,il va être reconnu automatiquement puisqu'on a ajouté ce dossier à l'intérieur d'une application,donc à l'intérieur de POST directement.
00:03:23 :Et donc Django va reconnaître tous les fichiers statiques qui sont à l'intérieur des dossiers qui s'appellent statiques.Il ne faut juste pas oublier de loader ce tag statique et ensuite, on va pouvoir mettre le chemin relatif à partir du dossier statique.
00:03:36 :Donc dans ce cas-ci, à partir de statique, on met juste css.style.css.Donc pour vérifier que ça fonctionne bien,on va mettre un body ici et on va changer la couleur du fond avec background color qu'on va mettre en rouge, donc un bon rouge vif juste pour vérifier que ça fonctionne.
00:03:52 :Donc je reviens sur mon site, j'actualise et alors là, ça ne semble pas fonctionner parce que tout simplement ici, j'ai oublié le point virgule après l'import.
00:03:59 :Je vais vérifier que je l'ai bien mis aussi ici.Donc là, on a bien le point virgule à la fin de la ligne,le point virgule ici, donc c'est parfait.
00:04:06 :Donc c'était juste une erreur de syntaxe.Je rafraîchis ma page ici et là, on a bien le fond qui est en rouge et vous voyez également, donc là, je vais peut-être enlever le body juste pour que ce soit un peu plus visible.
00:04:16 :Vous voyez également qu'on a tout qui s'est beaucoup plus compacté.Donc ça, c'est avec l'import du reset.Si j'enlève le reset et que j'actualise, vous voyez qu'on a des marges à peu près sur tout ici et si je remets le reset,là, on a quelque chose qui est beaucoup plus compacté.
00:04:28 :Donc ça, c'est parce qu'il n'y a plus les paddings et les marges,mais ça permet d'avoir quelque chose qui va être plus facile d'éditer par la suite.
00:04:34 :Donc voilà, pour la base, on a nos deux fichiers, le style et le reset et on a importé tout ça à l'intérieur de notre fichier HTML de base.

Ajouter un fichier CSS statique

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Christian Aucane

fichier reset.css

Rechercher sur le site