t comportait également du code en backend(confère note ci-dessous), c'est là qu'on indiquerait une URL q... d'inspecter ce qu'on obtient, assez simplement.
<note>
En règle générale, un site internet est composé ... des informations dans une base de données, etc.
</note>
Voyons maintenant quelle balise HTML utiliser p... bre de colonnes** qui peuvent être affichées).
<note>
Vous pouvez pré-remplir le ''<textarea>'' avec u
oirement à l'intérieur d'une balise ''block''.
<note>
Il existe en fait plusieurs autres catégories tr... r le moment, car ces balises sont minoritaires.
</note>
Pour bien visualiser le concept, voici un petit... La balise ''<div>''(qui est de type **block**).
<note>
N’abusez pas des balises universelles, même si e... nt que d'autres balises plus adaptées existent.
</note>
Par exemple :
* ''<span class="important">''
t bien un code plus lisible et compréhensible !
<note>
Si vous souhaitez vous entraîner et comparer ce ... t d’observer en temps réel le code CSS compilé.
</note>
===== Incorporez les sélecteurs au nesting ====... v .petite-fille-div {
color: #D6FFF5;
}
</code>
<note>
Au lieu de répliquer exactement la structure du ... t donc de vous donner une certaine maniabilité.
</note>
Par exemple, si vous avez ce code et que vous v
correspondante :
{{comparaison_css_sass.png}}
<note>
Ne soyez pas trop spécifique lorsque vous nommez... ain-color''** (couleur principale, en anglais).
</note>
Le nom de la variable vous indique que son rôle... !
===== Créez des ombres avec une mixin =====
<note>
En programmation objet, on dit un **ensemble de ... pas de genre, donc bon, on va pas chipoter 😉).
</note>
Plutôt que d’être limités à des valeurs, les mi
===== Révisez les principes du responsive =====
<note>
Les media queries sont des règles qui indiquent ... ries|Créez votre site web avec HTML5 et CSS3]].
</note>
Les media queries indiquent au navigateur d’**... edia queries sont appelées des **breakpoints**.
<note>
Les breakpoints représentent les **limites** lié... non les ensembles de règles liés s’appliquent.
</note>
Pour notre exemple, nous avons créé une media q
ée ; et tout cela grâce aux **pseudo-classes**.
<note>
Les [[https://developer.mozilla.org/fr/docs/Web/... oment un style en particulier doit s'appliquer.
</note>
===== Stylisez un élément au survol de la souri... sur le lien, la couleur de fond du lien change.
<note>
Vous remarquerez d'ailleurs que le navigateur ap... ar défaut où color du lien actif est rouge.
</note>
===== Stylisez un élément sélectionné par le vi
e boîte à outils mais une grande, la totale ! 🛠
<note>
Si vous y jetez un œil, vous découvrirez qu’il y... ules/color|uniquement dédiés aux couleurs]] ! 🎉
</note>
On appelle ces outils des **fonctions**.
En pr... entation/modules/color#darken|documentation]] !
<note>
La documentation, c’est le mode d’emploi, un peu... logiciel, utiliser une fonction ou un service.
</note>
Voici ce qu’on peut lire :
{{documentation_fc_
;
* Impact ;
* Trebuchet MS ;
* Verdana.
<note>
Le ''sérif'' désigne l’empattement situé à l’ext... d’accessibilité, car c’est plus facile à lire.
</note>
{{texte_serif_vs_sans_serif.jpg|différences car... CSS pour associer cette police à vos balises.
<note>
Ici, on s'est contenté de suivre les étapes préc... rmat spécifique et de son utilisation en CSS]].
</note>
===== Mettez du texte en italique avec la propr
pacité : ''%%color: rgba(250,25,118, 0.5);%%''
<note>
Si vous voulez trouver une couleur, ou bien conv... m/colors/colors_picker.asp|HTML Color Picker]].
</note>
===== Appliquez une couleur d'arrière-plan avec... en absolu via une url ou en relatif (fond.png).
<note>
Attention lorsque vous écrivez une adresse en re... que le fichier .css (ou dans un sous-dossier).
</note>
Voyons tout de suite à quoi ça ressemble !
On
n, un lien de connexion à son espace personnel.
<note>
Attention, la balise ''<header>'' n'a rien à vo... rs des polices, vers une feuille de style, etc.
</note>
Il peut y avoir plusieurs en-têtes dans votre p... complémentaires à l'article que l'on visualise.
<note>
La balise ''<article>'' sert à englober une port... actualités (articles de journaux ou de blogs).
</note>
Pour résumer :
{{schema_structure_page_html.jpg
ement d'un carton (euh pardon, d'un conteneur).
<note>
Un conteneur (container en anglais) est une bali... élèbres sont les balises %%<div> et <span>%%.
</note>
<code html>
<div class="container">
<div class=... les-ci seront réparties avec ''align-content''.
<note>
Cette propriété n'a aucun effet s'il n'y a qu'une seule ligne dans la Flexbox.
</note>
Prenons donc un cas de figure où nous avons plu
riétés liées à ''grid-column'' et ''grid-row''.
<note>
C'est surtout dans ce genre de cas qu'on voit qu... lors qu'ici, on peut le faire assez simplement.
</note>
À chaque fois que vous écrivez ''display: grid'... e css>
.une {
grid-column: 1 / 4;
}
</code>
<note>
Attendez, mais pourquoi on dit d'aller jusqu'à ... te la largeur, on "atteint" un élément suivant.
</note>
===== Mesurez vos rangées =====
On veut mainte
type ''block'' par défaut devienne ''inline''.
<note>
Si vous ne vous souvenez plus de la différence e... le_des_boites|Découvrez le modèle des boîtes]].
</note>
===== Cachez vos éléments avec display: none; ... se positionner en haut à gauche de l'élément 2.
<note>
La propriété [[https://developer.mozilla.org/fr/... la valeur initiale (s'il n'y a pas d'héritage).
</note>
===== Gérez le chevauchement avec la propriété
v style="background-color: red;"></div>
</code>
<note warning>
On vous déconseille très fortement ce st... t reste LA règle de base pour un code organisé.
</note>
==== 2 - Les id ====
Les ''id'' sont uniques. ... ent, par définition, être utilisés qu’une fois.
<note>
Il est toujours judicieux de revoir les bases po... classes et id, et dans quels cas les utiliser.
</note>
Comme les id ont une spécificité plus important
nctuation vous permet aussi d’écrire plus vite.
<note>
Entre nous, il est assez rare que vous tombiez s... lerons, il s’agira de .scss et de sa syntaxe.
</note>
===== Découvrez les fonctionnalités de Sass ==... white;
text-shadow: 10px 10px red;
}
</code>
<note>
Il existe de nombreuses fonctionnalités Sass à d... /documentation/at-rules/extend|Les extensions]]
</note>
Sur CodePen, nous avons prédéfini SCSS comme pr
