Différences

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

--- public:appro-s7:td_web:css [2023/10/30 23:03] – edauce
+++ public: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 !
@@ 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.
-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.
@@ Ligne 70: / Ligne 70: @@
 </code>
-h1 a est un sélecteur CSS. Cela signifie que nous allons appliquer nos styles à tout élément a qui se trouve dans un élément h1 ; le sélecteur h2 a fait la même chose pour les éléments h2. Donc lorsque nous avons quelque chose comme <h1><a href="">lien</a></h1>, le style h1 a est appliqué. Dans notre cas, nous indiquons de changer sa couleur en #C25100, c'est à dire en orange foncé. Ou vous pouvez mettre votre propre couleur ici, mais assurez-vous qu’il contraste bien avec le fond blanc !
+h1 a est un sélecteur CSS. Cela signifie que nous allons appliquer nos styles à tout élément a qui se trouve dans un élément h1 ; le sélecteur h2 a fait la même chose pour les éléments h2. Donc lorsque nous avons quelque chose comme ''<h1><a href="">lien</a></h1>'', le style h1 a est appliqué. Dans notre cas, nous indiquons de changer sa couleur en #C25100, c'est à dire en orange foncé. Ou vous pouvez mettre votre propre couleur ici, mais assurez-vous qu’il contraste bien avec le fond blanc !
 Un fichier CSS permet de déterminer le style des éléments présents dans un fichier HTML. La première façon pour identifier des éléments, c'est avec leur nom d'élément. Vous vous en souviendrez car ces noms proviennent des balises HTML. Exemple : a, h1 et body sont tous des noms d'élément. Vous pouvez aussi identifier les éléments par leur attribut class ou id. La classe et l'identifiant sont des noms que vous choisissez vous-même. Les classes définissent des groupes d'éléments tandis que les identifiants pointent un élément spécifique. Par exemple, vous pouvez identifier la ligne suivant par le nom a, la classe .external_link, ou l'identifiant #link_to_wiki_page :
-<a href="https://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">
+''<a href="https://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">''
-Apprenez-en plus à propos des Sélecteurs CSS sur W3Schools.
+Apprenez-en plus à propos des Sélecteurs CSS sur {{http://www.w3schools.com/cssref/css_selectors.asp|W3Schools}}.
-Nous devons aussi dire à notre modèle HTML que nous avons utilisé un peu de CSS. Ouvrez le fichier blog/templates/blog/post_list.html dans l'éditeur de code et ajoutez cette ligne au tout début :
+Nous devons aussi dire à notre modèle HTML que nous avons utilisé un peu de CSS. Ouvrez le fichier ''blog/templates/blog/post_list.html'' dans l'éditeur de code et ajoutez cette ligne au tout début :
-blog/templates/blog/post_list.html
+''blog/templates/blog/post_list.html''
+<code html>
 {% load static %}
+</code>
-On vient tout juste de charger les fichiers statiques :). Entre les balises <head> et </head>, après les liens vers les fichiers CSS de Bootstrap, ajoutez cette ligne :
+On vient tout juste de charger les fichiers statiques :). Entre les balises ''<head>'' et ''</head>'', après les liens vers les fichiers CSS de Bootstrap, ajoutez cette ligne :
-blog/templates/blog/post_list.html
+''blog/templates/blog/post_list.html''
+<code html>
 <link rel="stylesheet" href="{% static 'css/blog.css' %}">
+</code>
 Le navigateur lit les fichiers dans l'ordre où ils sont donnés, donc nous devons nous assurer que c'est dans le bon endroit. Dans le cas contraire, le code dans notre fichier peut être écrasé par le code des fichiers Bootstrap. Nous venons simplement de dire à notre template où trouver notre fichier CSS.
@@ Ligne 94: / Ligne 96: @@
 Maintenant, votre fichier doit ressembler à ceci :
-blog/templates/blog/post_list.html
+''blog/templates/blog/post_list.html''
+<code html>
+{% load static %}
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Django Girls blog</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
+    </head>
+    <body>
+        <header>
+            <h1><a href="/">Django Girls Blog</a></h1>
+        </header>
-{% load static %} <html> <head> <title>Django Girls blog</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="{% static 'css/blog.css' %}"> </head> <body> <div> <h1><a href="/">Django Girls Blog</a></h1> </div>   {% for billet in billets %} <div> <p>published: {{ billet.published_date }}</p> <h2><a href="">{{ billet.title }}</a></h2> <p>{{ billet.text|linebreaksbr }}</p> </div> {% endfor %} </body> </html>
+        {% for post in posts %}
+            <article>
+                <time>Date de publication: {{ post.published_date }}</time>
+                <h2><a href="">{{ post.title }}</a></h2>
+                <p>{{ post.text|linebreaksbr }}</p>
+            </article>
+        {% endfor %}
+    </body>
+</html>
+</code>
 Ok, on sauvegarde et on rafraîchit la page !
-Figure 14.2
+{{https://tutorial.djangogirls.org/fr/css/images/color2.png}}
 Bravo ! Peut-être que nous pourrions aérer un peu notre page web en augmentant la marge du côté gauche ? Essayons pour voir !
-blog/static/css/blog.css
+''blog/static/css/blog.css''
+<code css>
 body { padding-left: 15px; }
+</code>
 Ajoutez ceci à votre CSS, enregistrez le fichier et regarder comment cela fonctionne !
-Figure 14.3
+{{https://tutorial.djangogirls.org/fr/css/images/margin2.png}}
-Et si nous changions aussi la police de caractères de notre entête ? Collez ceci dans le <head> de votre fichier blog/templates/blog/post_list.html :
+Et si nous changions aussi la police de caractères de notre entête ? Collez ceci dans le <head> de votre fichier ''blog/templates/blog/post_list.html'' :
-blog/templates/blog/post_list.html
+''blog/templates/blog/post_list.html''
+<code html>
 <link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
+</code>
-Comme précédemment, vérifiez l'ordre et placez le avant blog/static/css/blog.css. Cette ligne importera une police appelée Lobster à partir de Google Fonts (https://www.google.com/fonts).
+Comme précédemment, vérifiez l'ordre et placez le avant ''blog/static/css/blog.css''. Cette ligne importera une police appelée Lobster à partir de Google Fonts ({{https://www.google.com/fonts}}).
-Retrouvez le bloc de règles h1 a (délimité par les accolades { }) dans le fichier css blog/static/css/blog.css. Ajoutez maintenant la ligne font-family; 'Lobster', dans les accolades et rafraîchissez la page :
+Retrouvez le bloc de règles h1 a (délimité par les accolades { }) dans le fichier css ''blog/static/css/blog.css''. Ajoutez maintenant la ligne font-family; 'Lobster', dans les accolades et rafraîchissez la page :
-blog/static/css/blog.css
+''blog/static/css/blog.css''
+<code css>
 h1 a, h2 a { color: #C25100; font-family: 'Lobster'; }
+</code>
-Figure 14.3
+{{https://tutorial.djangogirls.org/fr/css/images/font.png}}
 Super !
@@ Ligne 134: / Ligne 160: @@
 Allons donner des noms à certaines parties de notre code html. Ajouter la classe page-header à votre div qui contient votre en-tête. Votre fichier doit ressembler maintenant à ceci :
-blog/templates/blog/post_list.html
+''blog/templates/blog/post_list.html''
+<code html>
-<div class="page-header"> <h1><a href="/">Django Girls Blog</a></h1> </div>
+<header class="page-header">
+    <div class="container">
+        <h1><a href="/">Django Girls Blog</a></h1>
+    </div>
+</header>
+</code>
 Maintenant, ajoutez la classe billet à votre div contenant votre billet de blog.
-blog/templates/blog/post_list.html
+''blog/templates/blog/post_list.html''
+<code html>
-<div class="billet"> <p>published: {{ billet.published_date }}</p> <h2><a href="">{{ billet.title }}</a></h2> <p>{{ billet.text|linebreaksbr }}</p> </div>
+<article class="post">
+    <time>Date de publication: {{ post.published_date }}</time>
+    <h2><a href="">{{ post.title }}</a></h2>
+    <p>{{ post.text|linebreaksbr }}</p>
+</article>
+</code>
 Nous allons maintenant ajouter des blocs de règles aux différents sélecteurs. Les sélecteurs qui commencent par . désignent des classes. De nombreux tutoriels et explications sur le CSS existent sur le Web, cela pourra vous aider qui à comprendre le code suivant. Pour le moment, copiez et collez-le dans votre fichier blog/static/css/blog.css :
-blog/static/css/blog.css
+''blog/static/css/blog.css''
+<code css>
+.page-header {
+    background-color: #C25100;
+    margin-top: 0;
+    margin-bottom: 40px;
+    padding: 20px 20px 20px 40px;
+}
-.page-header { background-color: #C25100; margin-top: 0; padding: 20px 20px 20px 40px; }   .page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active { color: #ffffff; font-size: 36pt; text-decoration: none; }   .content { margin-left: 40px; }   h1, h2, h3, h4 { font-family: 'Lobster', cursive; }   .date { color: #828282; }   .save { float: right; }   .post-form textarea, .post-form input { width: 100%; }   .top-menu, .top-menu:hover, .top-menu:visited { color: #ffffff; float: right; font-size: 26pt; margin-right: 20px; }   .post { margin-bottom: 70px; }   .post h2 a, .post h2 a:visited { color: #000000; }
+.page-header h1,
+.page-header h1 a,
+.page-header h1 a:visited,
+.page-header h1 a:active {
+    color: #ffffff;
+    font-size: 36pt;
+    text-decoration: none;
+}
-Nous allons maintenant nous intéresser au code concernant les billets. Il va falloir remplacer le code le code suivant :
+h1,
+h2,
+h3,
+h4 {
+    font-family: 'Lobster', cursive;
+}
-blog/templates/blog/post_list.html
+.date {
+    color: #828282;
+}
-{% for billet in billets %} <div class="billet"> <p>published: {{ billet.published_date }}</p> <h2><a href="">{{ billet.title }}</a></h2> <p>{{ billet.text|linebreaksbr }}</p> </div> {% endfor %}
+.save {
+    float: right;
+}
-se trouvant dans le fichier blog/templates/blog/post_list.html par :
+.post-form textarea,
+.post-form input {
+    width: 100%;
+}
-blog/templates/blog/post_list.html
+.top-menu,
+.top-menu:hover,
+.top-menu:visited {
+    color: #ffffff;
+    float: right;
+    font-size: 26pt;
+    margin-right: 20px;
+}
-<div class="content container"> <div class="row"> <div class="col-md-8"> {% for billet in billets %} <div class="billet"> <div class="date"> <p>published: {{ billet.published_date }}</p> </div> <h2><a href="">{{ billet.title }}</a></h2> <p>{{ billet.text|linebreaksbr }}</p> </div> {% endfor %} </div> </div> </div>
+.post {
+    margin-bottom: 70px;
+}
-Sauvegardez les fichiers modifiés et rafraîchissez votre page.
+.post h2 a,
+.post h2 a:visited {
+    color: #000000;
+}
-Figure 14.4
+.post > .date,
+.post > .actions {
+    float: right;
+}
-Woohoo ! Ça a l'air génial, non ? Intéressez-vous au code que nous venons juste de coller pour trouver quelles règles CSS sont appliquées aux sélecteurs HTML que nous avons nommés précédemment. Où feriez-vous le changement si l'on souhaite mettre la date en turquoise ?
+.btn-default,
+.btn-default:visited {
+    color: #C25100;
+    background: none;
+    border-color: #C25100;
+}
-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 !
+.btn-default:hover {
+    color: #FFFFFF;
+    background-color: #C25100;
+}
+</code>
-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.
+Nous allons maintenant nous intéresser au code concernant les billets. Il va falloir remplacer le code suivant :
-Prêt pour le chapitre suivant ? :)
+''blog/templates/blog/post_list.html''
+<code html>
+{% for post in posts %}
+    <article class="post">
+        <time>Date de publication: {{ post.published_date }}</time>
+        <h2><a href="">{{ post.title }}</a></h2>
+        <p>{{ post.text|linebreaksbr }}</p>
+    </article>
+{% endfor %}
+</code>
+se trouvant dans le fichier ''blog/templates/blog/post_list.html'' par :
+''blog/templates/blog/post_list.html''
+<code html>
+<main class="container">
+    <div class="row">
+        <div class="col">
+            {% for post in posts %}
+                <article class="post">
+                    <time class="date">
+                        {{ post.published_date }}
+                    </time>
+                    <h2><a href="">{{ post.title }}</a></h2>
+                    <p>{{ post.text|linebreaksbr }}</p>
+                </article>
+            {% endfor %}
+        </div>
+    </div>
+</main>
+</code>
+Sauvegardez les fichiers modifiés et rafraîchissez votre page.
+{{https://tutorial.djangogirls.org/fr/css/images/final.png}}
+Génial, non ? Intéressez-vous au code que nous venons juste de coller pour trouver quelles règles CSS sont appliquées aux sélecteurs HTML que nous avons nommés précédemment. Où feriez-vous le changement si l'on souhaite mettre la date en turquoise ?
+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 !
 [[public:appro-s7:td_web:heritage-templates|14. Héritage de templates]]