cuisine-du-web/livre-de-cuisine
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout de la section "Ajuster les couleurs" et "Mettre en avant le premier paragraphe"

Browse Source
This commit is contained in:
EpicKiwi 2024-05-24 12:35:15 +02:00
parent 326409abea
commit c6211a8b8d
Signed by: epickiwi
GPG Key ID: C4B28FD2729941CE
1 changed files with 84 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
recettes/02-creer-un-journal.html
View File

@ -104,7 +104,7 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
<style>
body {
padding: 25px;
max-width: 1500px;
max-width: 800px;
width: 100%;
box-sizing: border-box;
margin-left: auto;
@ -123,6 +123,7 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
<article>
<p>Ajouter le code suivant dans l'élément <code>style</code> définit précédemment.</p>
<pre><code>img {
display: block;
max-width: 100%;
margin-left: auto;
margin-right: auto;
@ -130,6 +131,67 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
</article>
</section>
<section class="guide">
<h2>Ajuster les couleurs de la page</h2>
<article>
<p>Ajuster la couleur de l'arrière plan de la page en ajoutant le code suivant dans l'élément <code>style</code> précédente:</p>
<pre><code>body {
background-color: hsl(35.2, 69%, 83.5%);
}</code></pre>
</article>
<article>
<p>Définir la police de la page en <em>Sans-serif</em> et la police des titres en <em>Serif</em> en ajoutant le code suivant dans l'élément <code>style</code> précédent:</p>
<pre><code>body {
font-family: sans-serif;
}
h1, h2, h3 {
font-family: serif;
}</code></pre>
</article>
</section>
<section>
<h2>Mettre en avant le premier paragraphe</h2>
<article>
<p>Contrer le titre principal de la page en ajoutant le code suivant a l'élément <code>style</code> précédent:</p>
<pre><code>
h1 {
text-align: center;
}</code></pre>
</article>
<article>
<p>Contrer le paragraphe suivant le titre principal de la page en ajoutant le code suivant dans l'élément <code>style</code> précédent:</p>
<pre><code>
h1 + p {
text-align: center;
}</code></pre>
</article>
<article>
<p>Ajouter un style particulier a ce meme paragraphe en ajoutant le code suivant dans l'élément <code>style</code> précédent:</p>
<pre><code>h1 + p {
font-size: 1.1rem;
font-style: italic;
}</code></pre>
</article>
<article>
<p>Ajouter de la marge au dessus du titre principal et au dessous du paragraphe qui le suit en ajoutant le code suivant dans l'élément <code>style</code> de la plage:</p>
<pre><code>h1 {
margin-top: 100px;
}
h1 + p {
margin-bottom: 100px;
}</code></pre>
</article>
</section>
<section class="ressource">
<h2>Pour aller plus loin</h2>
<ul>
@ -172,6 +234,27 @@ J'ai mal à la tête et j'ai faim. Je vais essayer de trouver quelque chose à m
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing"></qr-code>
box-sizing
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/font-family" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/font-family"></qr-code>
font-family
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/font-style" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/font-style"></qr-code>
font-style
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/font-size" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/font-size"></qr-code>
font-size
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/background-color" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/background-color"></qr-code>
background-color
</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/color_value/hsl" target="_blank">
<qr-code data="https://developer.mozilla.org/fr/docs/Web/CSS/color_value/hsl"></qr-code>
hsl()
</a></li>
</ul>
</section>