e reste simple, pour le CSS en revanche c’est une autre histoire : en CSS, certaines règles prennent le dessus sur d’autres, et peuvent vous donner des migraines lorsqu’... par exemple, qui indique que l’on passe la souris au-dessus du sélecteur. Les attributs permettent de ... s différents, mais peuvent quand même s’appliquer au même élément.
La spécificité permet donc d’**att
ntervient le nesting !
===== Hiérarchisez grâce au nesting =====
De la même façon que vous imbrique... ans Sass vous pouvez imbriquer les sélecteurs, ou autrement dit, les "nester" :
<code sass>
.nav {
... compilé.
</note>
===== Incorporez les sélecteurs au nesting =====
Il n’y a pas réellement de limite ... rofondeur du nesting qu’on peut opérer dans Sass. Au début de mon apprentissage, j’ai plusieurs fois t
sass html}}
====== Améliorez vos mixins grâce aux fonctions ======
Notes et transcriptions du cou... ''%%.intro__title%%'' : elle sera donc appliquée aux éléments contenus dans ''%%.intro__title%%''. Ic... bien d’une seule ombre. Mais imaginons que sur d’autres pages, vous ayez un autre titre, **de la même couleur**, seulement il vous faut une ombre, mais p
d’une page qui a été supprimée en HTML et dont on aurait oublié de supprimer le CSS ?
Tout peut arriv... kémons, l’idéal serait qu’en un simple coup d'œil au nom d’une classe, on comprenne son usage et comment celle-ci interagit avec d’autres éléments.
On retrouve les essentiels de la pa... dre nos classes plus compréhensibles, et ce grâce au **nommage**.
**BEM** est l’acronyme de **B**loc
ux premières réponses sont fausses car contraires au principe du DRY : éviter les répétitions.
La der... s du DRY. Vous obtenez deux nouveaux boutons mais au prix de multiples répétitions.
Pour la troisième... bords carrés, alors qu’on vous demande un bouton aux bords arrondis.
La deuxième réponse est juste :... tout en créant de nouveaux boutons qui répondent aux besoins des deux boutons sans altérer le .btn gé
rrière votre écran, je vous vois. 👀
Je l’ai fait aussi et pendant longtemps. Rassurez-vous : personne... lus parlant que 10 000 mots ! Partons à la chasse aux pokémons, euh... aux répétitions !
<code html>
<body>
<h2>Différents exemples de boutons</h2>
... boutons :
{{css_exemple_boutons.png}}
4 boutons aux caractéristiques différentes.
Nous avons donc q
rooms.com/|Openclassrooms]].
===== Initiez-vous aux variables =====
Pour le moment, le site de Robb... ois** et la **référencer** à chaque fois qu’on en aurait besoin, ce serait vraiment pratique. Eh bien,... une sacrée migraine...
Parfait ! Du coup je peux aussi stocker mes borders, paddings et margins ? 🤯
... ci on parlera de la mixin en tant que règle, donc au féminin (entre nous, en anglais on ne donne pas d
et CSS3]].
</note>
Les media queries indiquent au navigateur d’**utiliser un ensemble de règles** s... ra les ensembles de règles spécifiquement adaptés aux écrans plus petits, comme une tablette, voire un... uery. Dès que la résolution de l’écran correspond au breakpoint, alors le breakpoint prendra le pas su... t ordonne les éléments sur **une seule colonne**. Au final, cette section est bien plus lisible de cet
rs.
Avant de vous laisser partir et voler vers d’autres horizons, il nous reste quelques notions à aborder afin que vous puissiez être en totale autonomie.
===== Utilisez Sass en ligne =====
Si v... ande envergure.
Et imaginez que vous travailliez au café, dans le train ou simplement dans un endroit... ra plus lente que les précédentes options listées au-dessus. Mais l’interface sera la même, dans tous
code>
Quel combinateur applique la couleur bleue aux éléments de notre liste ?
- <code css>
sectio... >
++++ Réponse|
Choix 3. La réponse 1 correspond au combinateur adjacent : la couleur sera appliquée ... uliez utiliser le combinateur parent > enfant, il aurait fallu avoir ul > li.
La réponse 3 est un com... rluette permet de relier directement le sélecteur au sélecteur parent, la réponse 3 est fausse car dan
éveloppement web css sass html}}
====== Passez au niveau supérieur avec Sass ======
Notes et trans... s condensée et concise. En ''.sass'', dites adieu aux accolades et aux points-virgules ! À la place, elle utilise uniquement des tabulations et des retour... ter qu’éviter toute cette ponctuation vous permet aussi d’écrire plus vite.
<note>
Entre nous, il est
isation et la structure des fichiers HTML/CSS. On aurait gagné du temps aussi bien dans la rédaction que dans la mise en œuvre ou la maintenance.
Le cours propose de répondre aux trois problématiques suivantes :
* Comment éc... avec votre HTML : simplifier votre HTML est tout aussi important que de simplifier votre CSS ! Antici
