1.5 KiB
1.5 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
bad87fee1348bd9aedf08756 | Dare una priorità maggiore a uno stile rispetto a un altro | 0 | https://scrimba.com/c/cZ8wnHv | 18258 | prioritize-one-style-over-another |
--description--
A volte i tuoi elementi HTML riceveranno più stili in conflitto tra loro.
Ad esempio, l'elemento h1
non può essere sia verde che rosa allo stesso tempo.
Vediamo cosa succede quando creiamo una classe che rende il testo rosa, quindi applicalo a un elemento. La nostra classe sovrascriverà la proprietà CSS color: green;
dell'elemento body
?
--instructions--
Crea una classe CSS chiamata pink-text
che dia a un elemento il colore rosa.
Dai al tuo elemento h1
la classe pink-text
.
--hints--
L'elemento h1
dovrebbe avere la classe pink-text
.
assert($('h1').hasClass('pink-text'));
Il tuo <style>
dovrebbe avere una classe CSS pink-text
che modifica il color
.
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
Il tuo elemento h1
dovrebbe essere rosa.
assert($('h1').css('color') === 'rgb(255, 192, 203)');
--seed--
--seed-contents--
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
</style>
<h1>Hello World!</h1>
--solutions--
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
</style>
<h1 class="pink-text">Hello World!</h1>