public:appro-s7:td_web:css

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
public:appro-s7:td_web:css [2023/10/30 23:17] – edaucepublic:appro-s7:td_web:css [2023/11/03 14:59] (Version actuelle) – edauce
Ligne 1: Ligne 1:
-==== CSS - Rendez votre site joli ! ====+==== 13. CSS - Rendez votre site joli ! ====
  
 Soyons honnêtes : notre blog est plutôt moche, non ? Un peu de CSS devrait nous permettre d'arranger ça ! Soyons honnêtes : notre blog est plutôt moche, non ? Un peu de CSS devrait nous permettre d'arranger ça !
Ligne 59: Ligne 59:
 Et c'est parti pour un peu de CSS ! Ouvrez le fichier ''blog/static/css/blog.css'' dans votre éditeur de texte. Et c'est parti pour un peu de CSS ! Ouvrez le fichier ''blog/static/css/blog.css'' dans votre éditeur de texte.
  
-Nous n'irons pas trop loin dans la personnalisation et l'apprentissage du CSS ici. Il y a à la fin de cette page une recommandation pour un cours CSS gratuit si vous souhaitez en savoir plus.+Nous n'irons pas trop loin dans la personnalisation et l'apprentissage du CSS ici.
  
 Que pourrions-nous faire rapidement ? Pourquoi ne pas changer la couleur de notre en-tête ? Pour indiquer la couleur que nous souhaitons utiliser, nous devons utiliser un code particulier. Ce code commence par un # suivi de 6 lettres (A-F) et chiffres (0-9). Par exemple, le code pour du bleu est #0000FF. Afin de trouver le code associé à la couleur de votre choix, vous pouvez consulter le site {{http://www.colorpicker.com/}}. Vous pouvez aussi utiliser des couleurs prédéfinies, comme red ou green. Que pourrions-nous faire rapidement ? Pourquoi ne pas changer la couleur de notre en-tête ? Pour indiquer la couleur que nous souhaitons utiliser, nous devons utiliser un code particulier. Ce code commence par un # suivi de 6 lettres (A-F) et chiffres (0-9). Par exemple, le code pour du bleu est #0000FF. Afin de trouver le code associé à la couleur de votre choix, vous pouvez consulter le site {{http://www.colorpicker.com/}}. Vous pouvez aussi utiliser des couleurs prédéfinies, comme red ou green.
Ligne 256: Ligne 256:
 </code> </code>
  
-Nous allons maintenant nous intéresser au code concernant les billets. Il va falloir remplacer le code le code suivant :+Nous allons maintenant nous intéresser au code concernant les billets. Il va falloir remplacer le code suivant :
  
 ''blog/templates/blog/post_list.html'' ''blog/templates/blog/post_list.html''
Ligne 297: Ligne 297:
  
 N'ayez pas peur de bricoler un peu le CSS et essayer de changer certaines choses. Jouer avec le CSS peut vous aider à comprendre comment et qui agit sur quoi. Si vous cassez quelque chose, ne vous inquiétez pas – vous pouvez toujours faire marche arrière ! N'ayez pas peur de bricoler un peu le CSS et essayer de changer certaines choses. Jouer avec le CSS peut vous aider à comprendre comment et qui agit sur quoi. Si vous cassez quelque chose, ne vous inquiétez pas – vous pouvez toujours faire marche arrière !
- 
-Nous vous recommandons chaudement de suivre les cours en ligne "Basic HTML & HTML5" et "Basic CSS" sur freeCodeCamp. Ils vous aideront à en apprendre plus sur le sujet et à créer de magnifiques sites web avec HTML et CSS. 
- 
-Prêt pour le chapitre suivant ? :) 
  
  
 [[public:appro-s7:td_web:heritage-templates|14. Héritage de templates]] [[public:appro-s7:td_web:heritage-templates|14. Héritage de templates]]
  • public/appro-s7/td_web/css.1698704233.txt.gz
  • Dernière modification : 2023/10/30 23:17
  • de edauce