rtexte, avec une balise ''<a>''. On pourrait très bien appliquer un style au survol d'un paragraphe (on écrirait alors ''p:hover''), ou bien d'un élément auquel on a attribué une classe ma-c... SS permet pourtant de créer des effets fondus, ou bien des animations qui se répètent autant de fois que... est enfoncé. Ce n'est donc pas forcément toujours bien visible.
Essayons de changer la couleur de fond
car ces balises sont minoritaires.
</note>
Pour bien visualiser le concept, voici un petit schéma :
{... padding'' (taille de la marge intérieure).
Pour bien comprendre la différence, faisons quelques tests.... balise ''background-color'' pour qu'on visualise bien la différence entre les différentes marges :
<co... (padding) dans le bloc du paragraphe, (on le voit bien car il a un fond jaune et que les bordures sont c
ux colonnes et aux rangées qu'il faudra créer. Eh bien, c'est la même chose ici !
On va définir les col... à la propriété ''grid-template-rows''. Et on fait bien attention à supprimer la hauteur fixe qu'on avait... râce aux hauteurs spécifiées une à une, on a donc bien 3 rangées, une de 100 pixels de hauteur, la secon... allant jusqu'au bout de notre logique, on obtient bien :
{{exemple_css_grid_09.png}}
Ci-dessus, l'élém
: #e67e22;
color: #242424;
}
</code>
Regardez bien, prenez votre temps et trouvez les répétitions.
... ue vous avez dupliqué votre code. En soi, rien de bien grave, mais en termes de lecture on se répète bea... pour rendre notre code plus lisible pour des cas bien précis.
On commence par le refactoring !
Le ... r, il nous faut trouver les répétitions. Ça tombe bien, rappelez-vous plus haut : nous avons analysé not
e sur le web, les navigateurs respectent un ordre bien précis : en premier le HTML, qui va déterminer le... es lorsqu’un texte reste bleu alors que vous avez bien précisé qu’il est rouge.
===== Différenciez les... tera sur Salamèche, car l’eau triomphe du feu. Eh bien c’est pareil en CSS : le navigateur établit des r... établis dans notre CSS ! 😨
Mais pourquoi ? On a bien tout détaillé dans notre CSS, pourtant ?
Le navi
en aurait besoin, ce serait vraiment pratique. Eh bien, heureusement pour nous, il existe bien une solution pour le faire, et c’est une **variable**! 🙌
Les v... t, quand vous regardez le CSS compilé, vous voyez bien que Sass a remplacé le nom de la variable par la ... vos variables. ''$light-purple'' fonctionne très bien pour un violet clair c’est sûr, seulement il est
te à l'écran.
Le positionnement fonctionne aussi bien sur des balises qui sont ''inline'' que ''block''... Mais dans les faits, vous verrez qu'on l'utilise bien plus souvent sur des balises ''block'' que sur d... droite que le bord gauche de la page.
Bon c'est bien beau, mais cela ne suffit pas pour positionner un... se placer par rapport aux bords de la page ?
Eh bien… pas nécessairement. Un élément ''absolute'' va s
e bordures…
Oui, un tableau HTML sans CSS paraît bien vide…
===== Ajoutez des bordures au tableau HTM... vue au début.
Ok d'accord, mais en fait, je vois bien ce qu'on peut mettre en en-tête et à l'intérieur ... nes : la fusion s'effectue horizontalement, aussi bien sur les lignes d'en-tête que sur le contenu lui-m... rticalement avec ''rowspan''. Il faut indiquer combien de cellules doivent être fusionnées.
[[330_quiz_
nctionne tel ou tel élément. D’où l’importance de bien nommer vos sélecteurs.
Si je nomme ma classe ''.... primer le CSS ?
Tout peut arriver, mais tout ira bien, il nous suffit d’anticiper !
===== Découvrez B... ilisable, ce qui nous permet d’avoir une codebase bien ordonnée, tout en assurant une certaine cohérence... nisé et compréhensible.
<note>
D’ailleurs, notez bien, c’est important : les sélecteurs BEM sont toujou
l'ombre a changée dans le brief !
Wow. Là c’est bien flashy niveau couleur !
Avant même de commencer ... a coul... stooooooop. 🛑
Dans ce cas-ci, on parle bien d’une seule ombre. Mais imaginons que sur d’autre... ous noyer dans une complexité de définitions. 😵💫 Bien au contraire !
Tout d’abord, qu’est-ce qu’une fo... urer, inverser et même assombrir les couleurs (et bien d’autres encore, la liste est longue…). Dans notr
''
<note>
Si vous voulez trouver une couleur, ou bien convertir une valeur en utilisant une autre synta... lle permet de s'assurer que nos éléments prennent bien toute la largeur de la page */
}
.banniere {
p... r: white;
text-align: center;
}
</code>
C'est bien beau tout ça, mais l'image apparaît floue : elle
lacent en colonne, du bas vers le haut.
Regardez bien la différence : les blocs sont maintenant dans l'... comme on veut !
Maintenant, voici ce qu'il faut bien comprendre : ça marche aussi si vos éléments sont... us entraîner pour vous assurer que vous maîtrisez bien les propriétés de Flexbox, je vous recommande le
r sur la même page. En revanche, si vous observez bien la barre URL de votre navigateur, vous verrez le ... re+le+machine+learning
</code>
Donc, il se passe bien quelque chose !
Mais comme je l'avais dit au cha... ons saisies et décider quoi en faire.
Cela tombe bien, j'ai aussi rédigé un [[https://openclassrooms.co
us ne trouvez pas ? Exactement comme en HTML ! Eh bien, c’est une des fonctionnalités de Sass : le nesti... der en utilisant une syntaxe plus cohérente c’est bien pratique, le souci c’est que les navigateurs sont... hier .sass ?!
Oh que non ! Sass fonctionne très bien avec le CSS. Copiez votre CSS et collez-le dans u
*une seule colonne**. Au final, cette section est bien plus lisible de cette manière sur petit écran.
M... r tout séparer, la media query et ses règles sont bien **imbriquées dans leur bloc BEM** ; du coup, bonu... Vous avez parcouru un sacré bout de chemin, c’est bientôt la fin de ce cours ! Mais pas si vite ! Il fau
