- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte personlive_helpToutes les questions
Christian Aucane
30 décembre 2022 - 30 décembre 2022 à 10:01
checkConversation résolue
2 réponses
fichier reset.css
Salut,Tu pourrais nous mettre le fichier reset.css en dessous de la video stp ? qu'on puisse le télécharger directement ?
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éroet 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 chosesqui 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éressantque 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 styleet 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 statiqueset on va mettre le lien vers la ressource.
00:03:00 :Donc là encore, faites bien attention, on met des guillemets doubles pour le hrefet 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 statiquesqui sont à l'intérieur des dossiers qui s'appellent statiques.Il ne faut juste pas oublier de loader ce tag statiqueet 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 colorqu'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 fonctionnerparce 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 rougeet vous voyez également, donc là, je vais peut-être enlever le bodyjuste 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é.
folder_zip
Télécharger les fichiers
cloud_download
reset.css
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.