hiers CSS, modifier **TOUTES** les valeurs à la main, une par une.
Reprenons l’introduction de notre ... rple {
color: #a5b4fc;
}
.intro__title {
margin-bottom: 15px;
font-size: 3.5em;
color: #a5b4f... **référencer** à chaque fois qu’on en aurait besoin, ce serait vraiment pratique. Eh bien, heureuseme... ndre, ne surtout pas toucher !). Si vous avez besoin d’utiliser votre couleur (ou de manger votre choc
oms.com/|Openclassrooms]].
Vous avez créé un mixin pour incorporer une bordure sur le titre du portf... dark-purple: #1d0221;
$title-color: #a5b4fc;
@mixin title-shadow {
text-shadow: .50rem .50rem $dark-... ' qui contiennent chacune une couleur ;
* un mixin ''title-shadow'' qui contient une propriété CSS t... e une couleur ''$dark-purple''.
Comment cette mixin est-elle utilisée ?
<code sass>
.intro__title {
compilation sert à traduire le code Sass en CSS afin que les navigateurs puissent les lire et les util... avers l’ensemble de votre code**.
<code sass>
$main-color: red;
.header {
background-color: $main-color;
}
.footer {
background-color: $main-color;
}
</code>
Ce qui nous donne en CSS :
<code css
izons, il nous reste quelques notions à aborder afin que vous puissiez être en totale autonomie.
====... s en ligne =====
Si vous vous souvenez bien, en fin de la partie 1, je vous expliquais que les naviga... r eux-mêmes, et que c’est pourquoi nous avons besoin de… compiler notre code en CSS.
Il existe bien d... imaginez que vous travailliez au café, dans le train ou simplement dans un endroit avec une mauvaise c
s et réfléchissez à la façon dont vous êtes en train de structurer votre bloc. Il y a des chances que vous soyez en train de créer des sélecteurs trop spécifiques.
<note>... du parent, ici <div>.
<code css>
.links {
margin-left: 30px;
}
.links > a {
color: #242424;
t... e le combinateur descendant, mais il en existe plein d’autres. Et je suis certaine que vous en connais
et donc d’**attribuer un score** à un sélecteur afin de déterminer la **priorité** d’un sélecteur par ... ze: cover;
width: 500px;
height: 500px;
margin: auto;
}
</code>
Si j’ajoute mon CSS dans mon HT... ze: cover;
width: 500px;
height: 500px;
margin: auto;
}
Modifions le CSS initial comme suivant ... ** permet de mesurer le poids d’un sélecteur au sein du HTML, parmi les autres.
* Il existe quatre n
dre plus spécifiques ;
- refactoriser le code afin d’éviter les répétitions ;
- réorganiser votre ... rmet :
- d’attribuer un score à un sélecteur afin de déterminer la priorité d’un sélecteur par rapp... e HTML, ce sera la classe qui sera appliquée ; enfin, si vous supprimez la classe de votre HTML ce ser... sibles).
- Attribuer un score aux sélecteurs afin de déterminer leur style ;
- Assigner chacun de
ble et mieux organisé, placer les sélecteurs au sein de la media query signifie qu’**ils ne feront pas...
Vous avez parcouru un sacré bout de chemin, c’est bientôt la fin de ce cours ! Mais pas si vite ! Il faut encore déployer votre code Sass en ligne. C'est ce qu'on va voir dans le prochain et dernier chapitre.
[[230_ameliorer_mixins_v
défini ainsi :
<code css>
.navbar__link {
margin-left: 30px;
color: #242424;
text-decoration: ... fférentes versions d’un bloc ou d’un élément. Besoin de changer la taille, la couleur, la police, etc.... -content: space-between;
}
.navbar__link {
margin-left: 30px;
color: #242424;
text-decoration:
s **préprocesseurs CSS** et notamment **Sass**, afin d’optimiser notre code. De la structure à la lisi... re : vous saurez simplifier votre CSS, c’est certain. Nous allons aussi aborder des notions de simplif
