===== Question 2 =====
En vous basant sur le code HTML suivant,
<code html>
<section>
<h1>Titre</h1>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
</section>
</code>
Quel combinateur applique la couleur bleue aux éléments de notre liste ?
- <code css>
section + li {
color: blue;
}
</code>
css sass html}}
====== Optimisez la lecture du code ======
Notes et transcriptions du cours [[https:... syntaxe est importante et nous permet d’écrire du code plus organisé, certes ; mais seule, elle n’est pa... es sélecteurs, ou autrement dit, les "nester" :
<code sass>
.nav {
text-align: right;
.nav__lin... urple {
color: #a5b4fc;
}
}
}
</code>
Vous obtenez une hiérarchie de sélecteurs clair
s dessus, on doit écrire notre CSS comme ceci :
<code css>
a:hover {
// Insérer ici les propriétés CSS à appliquer
}
</code>
D'où il sort ce ''a'' qu'on a mis avant la pseu... va s'appliquer au sélecteur ====
Dans le bout de code ci-dessous, on va appliquer une couleur différent... element .
On a la structure suivante en HTML :
<code html>
<body>
<div class="mon-element">
<h1>Ma
b css sass html}}
====== Quiz : Structurer son code ======
Notes et transcriptions du cours [[https:... les rendre plus spécifiques ;
- refactoriser le code afin d’éviter les répétitions ;
- réorganiser v... te : le principe du DRY est de refactoriser votre code, d’éviter les répétitions.
++++
===== Question ... ropriétés de votre premier bouton ci-dessous :
<code css>
.btn {
background-color: #001534;
color:
u HTML, c’est ce qu’on appelle du style inline.
<code html>
<div style="background-color: red;"></div>
</code>
<note warning>
On vous déconseille très forteme... breux problèmes et reste LA règle de base pour un code organisé.
</note>
==== 2 - Les id ====
Les ''id... liser plusieurs fois un ''id'' dans votre HTML.
<code html>
<div id="box"></div>
</code>
<code css>
#b
esoin de déclarer la propriété display: grid; :
<code css>
.conteneur {
display: grid;
}
</code>
Ensuite, il faut préciser quelques éléments supplémenta... nts déclarés côté HTML de la manière suivante :
<code html>
<div class="conteneur">
<div class="box... >
<div class="box">🐋 Élément 9</div>
</div>
</code>
La classe CSS ''.box'' permet d'ajouter un peu
du CSS, avec une syntaxe différente.
Prenons ce code CSS :
<code css>
.nav {
text-align: right;
}
.nav .nav__link {
font-size: 15px;
padding-left: 3... __link .nav__link--purple {
color: #a5b4fc;
}
</code>
Et si je vous dis, que grâce à Sass, on pourrait le réécrire comme ceci :
<code sass>
.nav {
text-align: right;
.nav__lin
nt web css sass html}}
====== Simplifiez votre code ======
Notes et transcriptions du cours [[https:... u importe le langage que vous utilisez, écrire du code, rajouter des lignes, créer un immense plat de sp... chasse aux pokémons, euh... aux répétitions !
<code html>
<body>
<h2>Différents exemples de boutons... "orange-round">Bouton</button>
</div>
</body>
</code>
Avec ce code HTML, on comprend que cette page c
la structure de base d’un formulaire en HTML :
<code html>
<p>Texte avant le formulaire</p>
<form... </form>
<p>Texte après le formulaire</p>
</code>
Je donne la valeur "get" à l'attribut ''method... ction ?
Si notre projet comportait également du code en backend(confère note ci-dessous), c'est là qu'... s'agit d'une zone de texte d'une seule ligne :
<code html>
<input type="text">
</code>
Ensuite, il fa
suis incapable de retenir les couleurs par leur **code couleur hexadécimal**, ni de savoir quelle couleur correspond à quel code. Alors oui, de nos jours, certains éditeurs ajout... la couleur, ou alors je pourrais copier-coller le code sur Google. Oui. Mais c’est une sacrée perte de t... ntroduction de notre site, que remarquez-vous ?
<code css>
.navbar__link--purple {
color: #a5b4fc;
}
e <link> doit être insérée sous <head></head> :
<code html>
<head>
<meta charset="utf-8">
<titl... link href="style.css" rel="stylesheet">
</head>
</code>
===== Appliquez une propriété CSS à une balise ... présents dans un fichier CSS est la suivante :
<code css>
h1 {
color: blue;
}
</code>
Dans un code CSS comme ci-dessus, on distingue 2 parties :
* Le
e'') d'apparaître sous forme de type ''block'':
<code css>
a {
display: block;
}
</code>
À ce moment-là, les liens vont se positionner les uns en dessou... ents qui ont la classe secret, je vais écrire :
<code css>
.secret {
display: none;
}
</code>
''none'' est très pratique lorsqu'il faut cacher certains
onnêtes, vous passerez plus de temps à lire votre code qu’à l’écrire. Que ce soit parcourir votre code à la recherche d’un élément à modifier, ou juste pour v... ment les règles qui sont spécifiques à ce bloc.
<code html>
<nav class="navbar">
<!-- Notre barre de navigation -->
</nav>
</code>
<code css>
.navbar {
display: flex;
flex-di
ment web css sass html}}
====== Déployez votre code Sass en ligne ======
Notes et transcriptions du ... est pourquoi nous avons besoin de… compiler notre code en CSS.
Il existe bien des outils et plateformes en ligne pour pouvoir pratiquer votre code Sass sans l’installer sur votre ordinateur.
* ... ss, sans nous préoccuper de compiler ou non notre code ; tellement pratique !
Vous pouvez créer des col
ste au-dessus.
On écrit dans le fichier HTML :
<code html>
<p class="element">Élément</p>
</code>
Puis dans le CSS:
<code css>
.element {
border-top: 3px #EB5353 dotted;
border-right: 3px #F9D923... E7C dashed;
border-left: 3px #187498 solid;
}
</code>
Ce qui nous donnerait :
{{exemple_bordures.png}
