{{tag>dev web html css}}
====== Allez plus loin ======
Notes et transcriptions du cours [[https://op... age plus interactive, un langage comme JavaScript devient indispensable.
**JavaScript est un langage d... ainsi arriver aujourd'hui à créer des **sites qui deviennent littéralement des applications web**, l'éq... tre, n'hésitez pas à consulter le site de Mozilla Developer pour connaître les spécificités de [[https:
{{tag>dev web html css}}
====== Changez l'apparence du texte ======
Notes et transcriptions du cours ... Pour avoir un texte de 16 pixels de hauteur, vous devez donc écrire :
<code css>
p {
font-size: 16px... regardez ma page web depuis votre smartphone vous devriez pouvoir le lire. Maintenant, si mon site web ... es de plus. Le lien suivant présente un [[https://developer.mozilla.org/fr/docs/Web/CSS/@font-face|exem
{{tag>dev web html css}}
====== Ajoutez de la couleur et un fond ======
Notes et transcriptions du co... {
color: blue;
}
</code>
De nombreux [[https://developer.mozilla.org/fr/docs/Web/CSS/color_value#les... e à aller tester en direct sur le site de Mozilla Developer les différents effets possibles des proprié... oir plus, vous pouvez vous référer à la [[https://developer.mozilla.org/fr/docs/Web/CSS/background|docu
{{tag>dev web html css}}
====== Abordez d'autres techniques de mise en page ======
Notes et transcrip... ssous des autres (comme des blocs normaux), et il devient possible de modifier leurs dimensions! Et à l... u'un élément qui est de type ''block'' par défaut devienne ''inline''.
<note>
Si vous ne vous souvenez... fonction de la taille de l'écran.
La [[https://developer.mozilla.org/fr/docs/Web/CSS/display|liste d
{{tag>dev web html css}}
====== Utilisez le responsive design avec les Media Queries ======
Notes et...
<code html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</code>
</note>
Ic... n peut rajouter le préfixe ''min-'' ou ''max-'' devant la plupart de ces règles. Ainsi, ''min-width''... ocs, comme on vient de le faire, il arrive qu'ils deviennent trop petits pour le texte qu'ils contienne
{{tag>cours dev développement web css sass html}}
====== Optimisez la lecture du code ======
Notes ... mant. Seulement soyez prudent, des sélecteurs qui deviennent trop spécifiques se verront accorder un pl... a conséquence ? Un casse-tête à débugger, et vous devrez refactoriser votre code.
Nous avons effectué ... ez augmenté la spécificité de votre élément. Vous devez aussi augmenter celle de vos modificateurs, sin
{{tag>cours dev développement web css sass html}}
====== Utilisez les variables et mixins ======
No... Mais c’est une sacrée perte de temps et cela peut devenir **dangereux**.
Pour la perte de temps je com... olet et veut que son site soit orange. Vous allez devoir repasser en revue **tous** vos fichiers CSS, m... agisse de violet, de rose ou… d’orange ! Là où ça devient intéressant, c’est que lorsque vous vous repl
{{tag>cours dev développement web css sass html}}
====== Adaptez votre code sur tous supports ======... re site s’adapte sur n’importe quel support, nous devons mettre en place des **media queries**.
===== ... on est abordée dans le cours [[cours:informatique:dev:web:creez_votre_site_web_avec_html5_et_css3:420_r... }
}
</code>
Pas mal, non ? Plutôt que de devoir tout séparer, la media query et ses règles son
{{tag>cours dev développement web css sass html}}
====== Simplifiez votre code ======
Notes et tran... L à mettre en forme dans nos pages web.
[[https://developer.mozilla.org/en-US/|MDN]], ou Mozilla Developer Network, est un site hébergé par la fondation Moz... en les séparant par leur fonction, votre codebase devient plus **facile à maintenir**. Plutôt que de re
{{tag>dev web html css}}
====== Créez des apparences dynamiques ======
Notes et transcriptions du co... âce aux **pseudo-classes**.
<note>
Les [[https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes|... de la puissance des sélecteurs avec le [[https://developer.mozilla.org/fr/docs/Web/CSS/Adjacent_siblin
{{tag>dev web html css}}
====== Faites votre mise en page avec Flexbox ======
Notes et transcription... direction verticale. Dans ce cas, l'axe vertical devient l'axe principal, et ''justify-content'' s'app... x Froggy]]. Avec les différentes propriétés, vous devrez replacer les grenouilles sur les nénuphars.
{{tag>dev web html css}}
====== Découvrez les bases de CSS Grids ======
Notes et transcriptions du co... ur plusieurs colonnes ou plusieurs rangées, on va devoir indiquer un point de départ et un point d'arri... largeur, alors qu'il n'y a que 3 colonnes ? On ne devrait pas plutôt dire ''grid-column-end: 3;'' pour ... lus loin, vous pouvez :
* Creuser la [[https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
{{tag>dev web html css}}
====== Créez des formulaires ======
Notes et transcriptions du cours [[http... ''%%<input type="range">%%'' On utilise [[https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/... enlever les attributs ''name'', vous verrez qu'il devient possible de sélectionner tous les éléments d'
{{tag>cours dev développement web css sass html}}
====== Définissez des priorités ======
Notes et t... r spécificité =====
Jetons un œil à la [[https://developer.mozilla.org/fr/docs/Learn/CSS/Building_bloc... ces : n’hésitez pas à relire [[cours:informatique:dev:web:creez_votre_site_web_avec_html5_et_css3/210_i
{{tag>cours dev développement web css sass html}}
====== Clarifiez votre HTML avec BEM ======
Notes... bar__link%%''.
Pour nommer le modificateur, vous devez :
* préciser le **bloc** (ou l’élément) qu’i... orme de classes.
</note>
Mais pourquoi ? 🤔
Vous devez être sûr que **vos sélecteurs ont une spécifici
