chore(i18n,curriculum): update translations (#42487)
* chore(i18n,curriculum): update translations * chore: Italian to italian Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,115 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08823
|
||||
title: Aggiungere un margine negativo a un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpyGs3'
|
||||
forumTopicId: 16166
|
||||
dashedName: add-a-negative-margin-to-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il `margin` di un elemento controlla la quantità di spazio tra il suo `border` e gli elementi circostanti.
|
||||
|
||||
Se si imposta il `margin` di un elemento ad un valore negativo, l'elemento si allargherà.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Prova a impostare il `margin` ad un valore negativo come quello del riquadro rosso.
|
||||
|
||||
Imposta il `margin` del riquadro blu a `-15px`, in modo che riempia l'intera larghezza orizzontale del riquadro giallo intorno ad esso.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare `-15px` di `margin` agli elementi.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '-15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,190 @@
|
||||
---
|
||||
id: bad87fee1348bd9bedf08813
|
||||
title: Aggiungere bordi Intorno agli elementi
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvnHZ'
|
||||
forumTopicId: 16630
|
||||
dashedName: add-borders-around-your-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
I bordi CSS hanno proprietà come `style`, `color` e `width`.
|
||||
|
||||
Per esempio, se volessimo creare un bordo rosso di 5 pixel attorno ad un elemento HTML, potremmo usare questa classe:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.thin-red-border {
|
||||
border-color: red;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea una classe chiamata `thick-green-border`. Questa classe dovrebbe aggiungere un bordo di 10px, solido e verde intorno ad un elemento HTML. Applica la classe alla foto del gatto.
|
||||
|
||||
Ricorda che puoi applicare più classi a un elemento usando il suo attributo `class`, separando ogni nome di classe con uno spazio. Per esempio:
|
||||
|
||||
```html
|
||||
<img class="class1 class2">
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `img` dovrebbe avere la classe `smaller-image`.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
Il tuo elemento `img` dovrebbe avere la classe `thick-green-border`.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
La tua immagine dovrebbe avere uno spessore del bordo di `10px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').hasClass('thick-green-border') &&
|
||||
parseInt($('img').css('border-top-width'), 10) >= 8 &&
|
||||
parseInt($('img').css('border-top-width'), 10) <= 12
|
||||
);
|
||||
```
|
||||
|
||||
La tua immagine dovrebbe avere uno stile `solid` per il bordo.
|
||||
|
||||
```js
|
||||
assert($('img').css('border-right-style') === 'solid');
|
||||
```
|
||||
|
||||
Il bordo attorno al tuo elemento `img` dovrebbe essere verde.
|
||||
|
||||
```js
|
||||
assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-width: 10px;
|
||||
border-color: green;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: bad87fee1248bd9aedf08824
|
||||
title: Aggiungere margini differenti ad ogni lato di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4RWh4'
|
||||
forumTopicId: 16633
|
||||
dashedName: add-different-margins-to-each-side-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A volte si vuole personalizzare un elemento in modo che abbia un `margin` diverso su ciascuno dei suoi lati.
|
||||
|
||||
CSS consente di controllare il `margin` di tutti e quattro i lati di un elemento con le proprietà `margin-top`, `margin-right`, `margin-bottom`e `margin-left`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dài al riquadro blu un `margin` di `40px` sul lato superiore e sinistro, ma di soli `20px` sul lato inferiore e destro.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte superiore degli elementi `40px` di `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte destra degli elementi `20px` di `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte inferiore degli elementi `20px` di `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte sinistra degli elementi `40px` di `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08824
|
||||
title: Aggiungere un padding diverso su ogni lato di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mwUw'
|
||||
forumTopicId: 16634
|
||||
dashedName: add-different-padding-to-each-side-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A volte si vuole personalizzare un elemento in modo che abbia un diverso `padding` (imbottitura) su ciascuno dei suoi lati.
|
||||
|
||||
CSS consente di controllare il `padding` di tutti e quattro i lati di un elemento con le proprietà `padding-top`, `padding-right`, `padding-bottom`e `padding-left`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Assegna al riquadro blu un `padding` di `40px` sul lato superiore e sinistro, ma di soli `20px` sul lato inferiore e destro.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte superiore degli elementi `40px` di `padding`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte destra degli elementi `20px` di `padding`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte inferiore degli elementi `20px` di `padding`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte sinistra degli elementi `40px` di `padding`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,164 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08814
|
||||
title: Aggiungere degli angoli arrotondati con border-radius
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cbZm2hg'
|
||||
forumTopicId: 16649
|
||||
dashedName: add-rounded-corners-with-border-radius
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La tua foto del gatto attualmente ha gli angoli squadrati. Possiamo arrotondare gli angoli con una proprietà di CSS chiamata `border-radius`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Puoi specificare un `border-radius` in pixel. Dai alla foto del gatto un `border-radius` di `10px`.
|
||||
|
||||
**Nota:** Questa sfida ha diverse soluzioni possibili. Ad esempio, puoi aggiungere `border-radius` alla classe `.thick-green-border` o alla classe `.smaller-image`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento img dovrebbe avere la classe `thick-green-border`.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
La tua immagine dovrebbe avere un border radius di `10px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').css('border-top-left-radius') === '10px' &&
|
||||
$('img').css('border-top-right-radius') === '10px' &&
|
||||
$('img').css('border-bottom-left-radius') === '10px' &&
|
||||
$('img').css('border-bottom-right-radius') === '10px'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,116 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08822
|
||||
title: Regolare il margine di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJarHW'
|
||||
forumTopicId: 16654
|
||||
dashedName: adjust-the-margin-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il `margin` di un elemento controlla la quantità di spazio tra il suo `border` e gli elementi circostanti.
|
||||
|
||||
Qui possiamo vedere che il riquadro blu e quello rosso sono annidati all'interno del riquadro giallo. Nota che il riquadro rosso ha un `margin` più grande di quello blu, e questo fa sì che appaia più piccolo.
|
||||
|
||||
Quando si aumenta il `margin` del riquadro blu, esso aumenta la distanza tra il suo bordo e gli elementi circostanti.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia il `margin` del riquadro blu per farlo corrispondere a quello del riquadro rosso.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare agli elementi `20px` di `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08825
|
||||
title: Regolare il padding di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cED8ZC2'
|
||||
forumTopicId: 301083
|
||||
dashedName: adjust-the-padding-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora mettiamo da parte per un po' la nostra Cat Photo App e impariamo di più sugli stili in HTML.
|
||||
|
||||
Potresti averlo già notato, ma tutti gli elementi HTML sono essenzialmente piccoli rettangoli.
|
||||
|
||||
Tre importanti proprietà controllano lo spazio che circonda ogni elemento HTML: `padding`, `border` e `margin`.
|
||||
|
||||
Un elemento `padding` controlla la quantità di spazio tra il contenuto dell'elemento e il suo `border`.
|
||||
|
||||
Qui possiamo vedere che il riquadro blu e quello rosso sono annidati all'interno del riquadro giallo. Si noti che il riquadro rosso ha più `padding` di quello blu.
|
||||
|
||||
Quando aumenti il `padding` del riquadro blu, aumenterà la distanza (`padding`) tra il testo e il bordo attorno ad esso.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia il `padding` del riquadro blu per farlo corrispondere a quello del riquadro rosso.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare agli elementi `20px` di `padding`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,272 @@
|
||||
---
|
||||
id: 5a9d7286424fe3d0e10cad13
|
||||
title: Aggiungere un valore di fallback a una variabile CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDNfp'
|
||||
forumTopicId: 301084
|
||||
dashedName: attach-a-fallback-value-to-a-css-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando si utilizza una variabile come valore di proprietà CSS, è possibile allegare un valore di ripiego (fallback) al quale il browser ritornerà se la variabile data non è valida.
|
||||
|
||||
**Nota:** Questo fallback non viene utilizzato per aumentare la compatibilità del browser e non funzionerà con i browser IE. Piuttosto, viene utilizzato in modo che il browser abbia un colore da visualizzare se non riesce a trovare la tua variabile.
|
||||
|
||||
Ecco come si fa:
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin, black);
|
||||
```
|
||||
|
||||
Questo imposterà lo sfondo a `black` se la tua variabile non è stata impostata. Nota che questo può essere utile per il debug.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Sembra che ci sia un problema con le variabili fornite alle classi `.penguin-top` e `.penguin-bottom`. Invece di correggere l'errore, aggiungi un valore di fallback di `black` alla proprietà `background` delle classi `.penguin-top` e `.penguin-bottom`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il valore di fallback di `black` dovrebbe essere utilizzato nella proprietà `background` della classe `penguin-top`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Il valore di fallback di `black` dovrebbe essere utilizzato nella proprietà `background` della classe `penguin-bottom`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
--penguin-skin: black;
|
||||
--penguin-belly: gray;
|
||||
--penguin-beak: yellow;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: var(--pengiun-skin);
|
||||
/* Change code above this line */
|
||||
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: var(--pengiun-skin);
|
||||
/* Change code above this line */
|
||||
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin-top {
|
||||
background: var(--pengiun-skin, black);
|
||||
}
|
||||
.penguin-bottom {
|
||||
background: var(--pengiun-skin, black);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,254 @@
|
||||
---
|
||||
id: 5a9d72a1424fe3d0e10cad15
|
||||
title: Modificare una variabile per un'area specifica
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRwbuW'
|
||||
forumTopicId: 301085
|
||||
dashedName: change-a-variable-for-a-specific-area
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando crei le tue variabili in `:root` questo imposterà il loro valore per l'intera pagina.
|
||||
|
||||
È quindi possibile sovrascrivere queste variabili impostandole di nuovo all'interno di un elemento specifico.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia il valore di `--penguin-belly` in `white` nella classe `penguin`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `penguin` dovrebbe riassegnare alla variabile `--penguin-belly` il valore `white`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
La classe `penguin` non dovrebbe contenere la proprietà `background-color`
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g)
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--penguin-skin: gray;
|
||||
--penguin-belly: pink;
|
||||
--penguin-beak: orange;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--penguin-belly, #c6faf1);
|
||||
}
|
||||
|
||||
.penguin {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {--penguin-belly: white;}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,122 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08803
|
||||
title: Cambiare il colore del testo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkVmSm'
|
||||
forumTopicId: 16775
|
||||
dashedName: change-the-color-of-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora cambiamo il colore di alcuni dei nostri testi.
|
||||
|
||||
Possiamo farlo cambiando lo `style` dell'elemento `h2`.
|
||||
|
||||
La proprietà responsabile del colore del testo di un elemento è la proprietà di stile `color`.
|
||||
|
||||
Ecco come impostare il colore del testo del tuo elemento `h2` su blu:
|
||||
|
||||
```html
|
||||
<h2 style="color: blue;">CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
Nota che è una buona pratica terminare le dichiarazioni in linea `style` con un `;`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia lo stile dell'elemento `h2` in modo che il colore del testo sia rosso.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h2` dovrebbe avere una dichiarazione `style`.
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style'));
|
||||
```
|
||||
|
||||
Il tuo elemento `h2` dovrebbe avere il color impostato su `red`.
|
||||
|
||||
```js
|
||||
assert($('h2')[0].style.color === 'red');
|
||||
```
|
||||
|
||||
La tua dichiarazione `style` dovrebbe terminare con un `;`.
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08806
|
||||
title: Cambiare la dimensione del carattere di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvDc8'
|
||||
forumTopicId: 16777
|
||||
dashedName: change-the-font-size-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La dimensione del carattere è controllata dalla proprietà CSS `font-size`, come in questo esempio:
|
||||
|
||||
```css
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
All'interno dello stesso tag `<style>` che contiene la tua classe `red-text`, crea una voce per `p` e imposta il `font-size` a 16 pixel (`16px`).
|
||||
|
||||
# --hints--
|
||||
|
||||
All'interno dei tag `style`, dai agli elementi `p` un `font-size` di `16px`. L'ingrandimento del browser e del testo dovrebbe essere al 100%.
|
||||
|
||||
```js
|
||||
assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,241 @@
|
||||
---
|
||||
id: 5a9d726c424fe3d0e10cad11
|
||||
title: Creare una variabile CSS personalizzata
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQd27Hr'
|
||||
forumTopicId: 301086
|
||||
dashedName: create-a-custom-css-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per creare una variabile CSS, hai solo bisogno di dargli un nome con due trattini di fronte e assegnargli un valore come questo:
|
||||
|
||||
```css
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
Questo creerà una variabile chiamata `--penguin-skin` e assegnerà ad essa il valore di `gray`. Ora puoi usare quella variabile da altre parti nel tuo CSS per impostare il valore di altri elementi su grigio.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Nella classe `penguin`, crea una variabile `--penguin-skin` e dai ad essa un valore `gray`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `penguin` dovrebbe dichiarare la variabile `--penguin-skin` e assegnarle il valore `gray`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: black;
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: black;
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: black;
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: white;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: orange;
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: orange;
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.penguin {--penguin-skin: gray;}</style>
|
||||
```
|
||||
@ -0,0 +1,176 @@
|
||||
---
|
||||
id: bad87fed1348bd9aede07836
|
||||
title: Dare un colore di sfondo a un elemento div
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRKMCk'
|
||||
forumTopicId: 18190
|
||||
dashedName: give-a-background-color-to-a-div-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
È possibile impostare il colore di sfondo di un elemento con la proprietà `background-color`.
|
||||
|
||||
Ad esempio, se volessi che il colore di sfondo di un elemento fosse `green`, dovresti metterlo all'interno del tuo elemento `style`:
|
||||
|
||||
```css
|
||||
.green-background {
|
||||
background-color: green;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea una classe chiamata `silver-background` con il `background-color` di `silver`. Assegna questa classe al tuo elemento `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `div` dovrebbe avere la classe `silver-background`.
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('silver-background'));
|
||||
```
|
||||
|
||||
Il tuo elemento `div` dovrebbe avere uno sfondo silver.
|
||||
|
||||
```js
|
||||
assert($('div').css('background-color') === 'rgb(192, 192, 192)');
|
||||
```
|
||||
|
||||
Una classe chiamata `silver-background` dovrebbe essere definita all'interno dell'elemento`style` e il valore di `silver` dovrebbe essere assegnato alla proprietà `background-color`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,175 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08807
|
||||
title: Importare un font Google
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MRsJ'
|
||||
forumTopicId: 18200
|
||||
dashedName: import-a-google-font
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Oltre a specificare i caratteri comuni che si trovano nella maggior parte dei sistemi operativi, possiamo anche specificare font web personalizzati non standard per l'uso nel nostro sito web. Ci sono molte fonti dove reperire i web fonts su Internet. Per questo esempio ci concentreremo sulla libreria Google Fonts.
|
||||
|
||||
[Google Fonts](https://fonts.google.com/) è una libreria gratuita di web fonts che puoi usare nel tuo CSS facendo riferimento all'URL del font.
|
||||
|
||||
Quindi, andiamo avanti e importiamo e applichiamo un carattere di Google (nota che se Google è bloccato nel vostro paese, dovrai saltare questa fase).
|
||||
|
||||
Per importare un font Google, puoi copiare l'URL del font dalla libreria di font Google e poi incollarlo nel tuo HTML. Per questa sfida, importeremo il font `Lobster`. Per fare questo, copia la seguente linea di codice e incollala nella parte superiore dell'editor di codice (prima dell'elemento di apertura `style`):
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
```
|
||||
|
||||
Ora puoi usare il carattere `Lobster` nel tuo CSS usando `Lobster` come FAMILY_NAME come nell'esempio seguente:
|
||||
|
||||
```css
|
||||
font-family: FAMILY_NAME, GENERIC_NAME;
|
||||
```
|
||||
|
||||
Il GENERIC_NAME è opzionale, ed è un carattere di ripiego nel caso in cui l'altro carattere specificato non sia disponibile. Questo aspetto viene affrontato nella prossima sfida.
|
||||
|
||||
I family name sono sensibili alle maiuscole e devono essere inseriti tra virgolette se c'è uno spazio nel nome. Ad esempio, hai bisogno delle virgolette per usare il carattere `"Open Sans"`, ma per non per usare il carattere `Lobster`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Importa il carattere `Lobster` nella tua pagina web. Usa quindi un selettore di elementi per impostare `Lobster` come `font-family` per il tuo elemento `h2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Devi importare il font `Lobster`.
|
||||
|
||||
```js
|
||||
assert($('link[href*="googleapis" i]').length);
|
||||
```
|
||||
|
||||
Il tuo elemento `h2` dovrebbe usare il font `Lobster`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h2')
|
||||
.css('font-family')
|
||||
.match(/lobster/i)
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti utilizzare solo un selettore di elementi `h2` per cambiare il carattere.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `p` dovrebbe usare il font `monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('p')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 5b7d72c338cd7e35b63f3e14
|
||||
title: Migliorare la compatibilità con i fallback del browser
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301087
|
||||
dashedName: improve-compatibility-with-browser-fallbacks
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando si lavora con CSS è probabile che prima o poi si incontrino problemi di compatibilità del browser. Ecco perché è importante fornire fallback del browser per evitare potenziali problemi.
|
||||
|
||||
Quando il tuo browser analizza il CSS di una pagina web, ignora qualsiasi proprietà che non riconosce o supporta. Ad esempio, se si utilizza una variabile CSS per assegnare un colore di sfondo ad un sito, Internet Explorer ignorerà il colore di sfondo perché non supporta le variabili CSS. In questo caso, il browser userà qualsiasi valore abbia per quella proprietà. Se non riesce a trovare alcun altro valore impostato per quella proprietà, tornerà al valore predefinito, che in genere non è l'ideale.
|
||||
|
||||
Ciò significa che se si desidera fornire un fallback del browser, è sufficiente fornire un altro valore più ampiamente supportato immediatamente prima della dichiarazione. In questo modo un browser più vecchio avrà qualcosa su cui ripiegare, mentre un browser più recente interpreterà semplicemente qualsiasi dichiarazione arriverà più tardi nella cascata.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Sembra che venga utilizzata una variabile per impostare il colore di sfondo della classe `.red-box`. Miglioriamo la compatibilità del nostro browser aggiungendo un'altra dichiarazione `background` subito prima della dichiarazione esistente e impostiamo il suo valore su `red`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua regola `.red-box` dovrebbe includere un fallback con il `background` impostato su `red` immediatamente prima della dichiarazione `background` esistente.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code
|
||||
.replace(/\s/g, '')
|
||||
.match(
|
||||
/\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--red-color: red;
|
||||
}
|
||||
.red-box {
|
||||
|
||||
background: var(--red-color);
|
||||
height: 200px;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--red-color: red;
|
||||
}
|
||||
.red-box {
|
||||
background: red;
|
||||
background: var(--red-color);
|
||||
height: 200px;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
```
|
||||
@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 5a9d7295424fe3d0e10cad14
|
||||
title: Ereditare variabili CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLZZhZ'
|
||||
forumTopicId: 301088
|
||||
dashedName: inherit-css-variables
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando crei una variabile, essa è disponibile per essere usata all'interno del selettore nel quale l'hai creata. Essa è disponibile anche in qualsiasi discendente di quel selettore. Questo avviene perché le variabili CSS sono ereditate, proprio come le proprietà ordinarie.
|
||||
|
||||
Per fare uso dell'ereditarietà, le variabili CSS sono spesso definite nell'elemento <dfn>:root</dfn>.
|
||||
|
||||
`:root` è un selettore di <dfn>pseudo-classe</dfn> che corrisponde all'elemento radice del documento, di solito l'elemento `html`. Creando le tue variabili in `:root`, esse saranno disponibili globalmente e accessibili da qualsiasi altro selettore nel foglio di stile.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Definisci una variabile denominata `--penguin-belly` nel selettore `:root` e dalle il valore di `pink`. Puoi quindi vedere che la variabile è ereditata e che tutti gli elementi figlio che la utilizzano hanno sfondi rosa.
|
||||
|
||||
# --hints--
|
||||
|
||||
La variabile `--penguin-belly` deve essere dichiarata in `:root` e deve avere il valore `pink`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--penguin-belly, #c6faf1);
|
||||
}
|
||||
|
||||
.penguin {
|
||||
--penguin-skin: gray;
|
||||
--penguin-beak: orange;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>:root {--penguin-belly: pink;}</style>
|
||||
```
|
||||
@ -0,0 +1,111 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08746
|
||||
title: Ereditare gli stili dall'elemento Body
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bmdtR'
|
||||
forumTopicId: 18204
|
||||
dashedName: inherit-styles-from-the-body-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Abbiamo visto che ogni pagina HTML ha un elemento `body`, e che anche il suo elemento `body` può essere stilizzato con CSS.
|
||||
|
||||
Ricorda, puoi stilizzare il tuo elemento `body` proprio come qualsiasi altro elemento HTML, e tutti gli altri elementi erediteranno gli stili dell'elemento `body`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Per prima cosa, crea un elemento `h1` con il testo `Hello World`
|
||||
|
||||
Quindi, dai a tutti gli elementi sulla tua pagina il colore `green` aggiungendo `color: green;` alla tua dichiarazione di stile dell'elemento `body`.
|
||||
|
||||
Infine, dai al tuo elemento `body` la font-family di `monospace` aggiungendo `font-family: monospace;` alla tua dichiarazione di stile per l'elemento `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un elemento `h1`.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe contenere il testo `Hello World`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h1').length > 0 &&
|
||||
$('h1')
|
||||
.text()
|
||||
.match(/hello world/i)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h1>/g) &&
|
||||
code.match(/<h1/g) &&
|
||||
code.match(/<\/h1>/g).length === code.match(/<h1/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `body` dovrebbe avere la proprietà `color` di `green`.
|
||||
|
||||
```js
|
||||
assert($('body').css('color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
Il tuo elemento `body` dovrebbe avere la proprietà `font-family` di `monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('body')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe ereditare il font `monospace` dal tuo elemento `body`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h1').length > 0 &&
|
||||
$('h1')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe ereditare il colore verde dal tuo elemento`body`.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
<h1>Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,159 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08815
|
||||
title: Creare immagini circolari con il border-radius
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvrcB'
|
||||
forumTopicId: 18229
|
||||
dashedName: make-circular-images-with-a-border-radius
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Oltre che con i pixel, è anche possibile specificare il `border-radius` utilizzando una percentuale.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dai alla foto del gatto un `border-radius` del `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua immagine dovrebbe avere un border-radius del `50%`, rendendola perfettamente circolare.
|
||||
|
||||
```js
|
||||
assert(parseInt($('img').css('border-top-left-radius')) > 48);
|
||||
```
|
||||
|
||||
Il valore di `border-radius` dovrebbe usare un valore percentuale di `50%`.
|
||||
|
||||
```js
|
||||
assert(code.match(/50%/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,114 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf07756
|
||||
title: Sovrascrivere tutti gli altri stili usando Important
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24rcp'
|
||||
forumTopicId: 18249
|
||||
dashedName: override-all-other-styles-by-using-important
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sì! Abbiamo appena dimostrato che gli stili in linea sovrascrivono tutte le dichiarazioni CSS del tuo elemento `style`.
|
||||
|
||||
Ma aspetta... C'è un ultimo modo per sovrascrivere CSS. Questo è il metodo più potente di tutti. Prima di farlo però parliamo del perché mai vorresti sovrascrivere i CSS.
|
||||
|
||||
In molte situazioni, utilizzerai delle librerie CSS. Queste possono accidentalmente sovrascrivere il CSS scritto da te. Quindi, quando hai assolutamente bisogno di essere sicuro che un elemento abbia un CSS specifico, puoi usare `!important`.
|
||||
|
||||
Ritorniamo alla nostra dichiarazione di classe `pink-text`. Ricorda che la nostra classe `pink-text` è stata sovrascritta da successive dichiarazioni di classe, dichiarazioni id e stili in linea.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi la parola chiave `!important` alla dichiarazione del colore dell'elemento pink-text per avere la certezza che il tuo elemento `h1` diventi rosa.
|
||||
|
||||
Un esempio di come farlo è il seguente:
|
||||
|
||||
```css
|
||||
color: red !important;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere la classe `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere la classe `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere l'`id` di `orange-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere lo stile inline di `color: white`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||
```
|
||||
|
||||
La tua dichiarazione di classe `pink-text` dovrebbe avere la parola chiave `!important` per sovrascrivere tutte le altre dichiarazioni.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe essere rosa.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink !important;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,123 @@
|
||||
---
|
||||
id: bad87fee1348bd8aedf06756
|
||||
title: Sovrascrivere le dichiarazioni di classe stilizzando gli attributi ID
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpDhB'
|
||||
forumTopicId: 18251
|
||||
dashedName: override-class-declarations-by-styling-id-attributes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Abbiamo appena dimostrato che i browser leggono CSS dall'alto al basso, in ordine di dichiarazione. Ciò significa che, in caso di conflitto, il browser utilizzerà la dichiarazione CSS che è arrivata per ultima. Nota che se avessimo messo `blue-text` prima di `pink-text` nelle classi dell'elemento `h1`, il browser rispetterebbe ancora l'ordine di dichiarazione e non l'ordine con cui vengono usate!
|
||||
|
||||
Però non abbiamo ancora finito. Ci sono altri modi in cui puoi sovrascrivere il CSS. Ti ricordi gli attributi id?
|
||||
|
||||
Sovrascrivi le tue classi `pink-text` e `blue-text`, e rendi il tuo elemento `h1` arancione, dando all'elemento `h1` un id e poi stilizzando questo id.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dai al tuo elemento `h1` l'attributo `id` di `orange-text`. Ricorda, gli id di stile appaiono così:
|
||||
|
||||
```html
|
||||
<h1 id="orange-text">
|
||||
```
|
||||
|
||||
Lascia le classi `blue-text` e `pink-text` sul tuo elemento `h1`.
|
||||
|
||||
Crea una dichiarazione CSS per il tuo id `orange-text` nel tuo elemento`style`. Ecco un esempio di come questo appare:
|
||||
|
||||
```css
|
||||
#brown-text {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
**Nota:** Non importa se dichiari questo CSS sopra o sotto la classe `pink-text`, dato che l'attributo `id` avrà sempre la priorità.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere la classe `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
L'elemento `h1` dovrebbe avere la classe `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere l'id di `orange-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
Dovrebbe esserci un solo elemento `h1`.
|
||||
|
||||
```js
|
||||
assert($('h1').length === 1);
|
||||
```
|
||||
|
||||
Il tuo id `orange-text` dovrebbe avere una dichiarazione CSS.
|
||||
|
||||
```js
|
||||
assert(code.match(/#orange-text\s*{/gi));
|
||||
```
|
||||
|
||||
Il tuo tag `h1` non dovrebbe avere alcun attributo `style`.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1.*style.*>/gi));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe essere arancione.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf06756
|
||||
title: Sovrascrivere le dichiarazioni di classe con gli stili in linea
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDRha'
|
||||
forumTopicId: 18252
|
||||
dashedName: override-class-declarations-with-inline-styles
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Abbiamo mostrato che le dichiarazioni id sovrascrivono le dichiarazioni di classe, indipendentemente da dove vengono dichiarate nell'elemento `style`.
|
||||
|
||||
Ci sono altri modi in cui puoi sovrascrivere il CSS. Ti ricordi gli stili inline?
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa uno stile in linea per cercare di rendere bianco l'elemento `h1`. Ricorda, gli stili inline appaiono così:
|
||||
|
||||
```html
|
||||
<h1 style="color: green;">
|
||||
```
|
||||
|
||||
Lascia le classi `blue-text` e `pink-text` sul tuo elemento `h1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `h1` dovrebbe avere la classe `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
L'elemento `h1` dovrebbe avere la classe `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
L'elemento `h1` dovrebbe avere l'id di `orange-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
L'elemento `h1` dovrebbe avere uno stile inline.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1[style]'));
|
||||
```
|
||||
|
||||
L'elemento `h1` dovrebbe essere bianco.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf04756
|
||||
title: Sovrascrivere gli stili nei CSS successivi
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDQug'
|
||||
forumTopicId: 18253
|
||||
dashedName: override-styles-in-subsequent-css
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La nostra classe `pink-text` sovrascrive la dichiarazione CSS del `body`!
|
||||
|
||||
Abbiamo appena dimostrato che le nostre classi sovrascriveranno il CSS dell'elemento `body`. Quindi la prossima domanda logica è: che cosa possiamo fare per sovrascrivere la nostra classe `pink-text`?
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea una classe CSS aggiuntiva chiamata `blue-text` che dia ad un elemento il colore blu. Assicurati che sia sotto la tua dichiarazione di classe `pink-text`.
|
||||
|
||||
Applica la classe `blue-text` al tuo elemento `h1` in aggiunta alla tua classe `pink-text`, e vediamo quale vince.
|
||||
|
||||
Per applicare più attributi di classe a un elemento HTML devi inserire degli spazi bianchi tra di essi in questo modo:
|
||||
|
||||
```html
|
||||
class="class1 class2"
|
||||
```
|
||||
|
||||
**Nota:** Non importa in quale ordine sono elencate le classi nell'elemento HTML.
|
||||
|
||||
Quello che veramente conta è l'ordine delle dichiarazioni di `class` nella sezione `<style>`. La seconda dichiarazione avrà sempre la precedenza sulla prima. Poiché `.blue-text` viene dichiarato per secondo, esso sovrascrive gli attributi di `.pink-text`
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere la classe `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
L'elemento `h1` dovrebbe avere la classe `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Entrambe le classi `blue-text` e `pink-text` dovrebbero essere associate al tuo elemento `h1`.
|
||||
|
||||
```js
|
||||
assert($('.pink-text').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe essere blu.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08756
|
||||
title: Dare una priorità maggiore a uno stile rispetto a un altro
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ8wnHv'
|
||||
forumTopicId: 18258
|
||||
dashedName: 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`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
Il tuo `<style>` dovrebbe avere una classe CSS `pink-text` che modifica il `color`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe essere rosa.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<h1>Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,132 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08807
|
||||
title: Impostare la famiglia di caratteri di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvpCg'
|
||||
forumTopicId: 18278
|
||||
dashedName: set-the-font-family-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Puoi impostare il tipo di carattere che un elemento deve utilizzare con la proprietà `font-family`.
|
||||
|
||||
Ad esempio, se desideri impostare il carattere del tuo elemento `h2` su `sans-serif`, dovresti utilizzare il seguente CSS:
|
||||
|
||||
```css
|
||||
h2 {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Fai in modo che tutti i tuoi elementi `p` utilizzino il carattere `monospace`.
|
||||
|
||||
# --hints--
|
||||
|
||||
I tuoi elementi `p` dovrebbero usare il font `monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('p')
|
||||
.not('.red-text')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,170 @@
|
||||
---
|
||||
id: bad87eee1348bd9aede07836
|
||||
title: Impostare l'id di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN6MEc2'
|
||||
forumTopicId: 18279
|
||||
dashedName: set-the-id-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Oltre alle classi, ogni elemento HTML può avere anche un attributo `id`.
|
||||
|
||||
Ci sono diversi vantaggi ad usare gli attributi `id`: puoi usare un `id` per stilizzare un singolo elemento, e in seguito imparerai che puoi usarli per selezionare e modificare elementi specifici con JavaScript.
|
||||
|
||||
Gli attributi `id` dovrebbero essere unici. I browser non applicano questa regola rigorosamente, ma è una buona pratica largamente accettata. Quindi non dare a più di un elemento lo stesso attributo `id`.
|
||||
|
||||
Ecco un esempio di come fornire al tuo elemento `h2` l'id di `cat-photo-app`:
|
||||
|
||||
```html
|
||||
<h2 id="cat-photo-app">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dai al tuo elemento `form` l'id `cat-photo-form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `form` dovrebbe avere l'id di `cat-photo-form`.
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,156 @@
|
||||
---
|
||||
id: bad87fee1348bd9acdf08812
|
||||
title: Dimensionare le immagini
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MmCP'
|
||||
forumTopicId: 18282
|
||||
dashedName: size-your-images
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il CSS ha una proprietà chiamata `width` che controlla la larghezza di un elemento. Proprio come con i caratteri, useremo `px` (pixel) per specificare la larghezza dell'immagine.
|
||||
|
||||
Per esempio, se volessimo creare una classe CSS denominata `larger-image` per dare agli elementi HTML una larghezza di 500 pixel, useremmo:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.larger-image {
|
||||
width: 500px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea una classe denominata `smaller-image` e usala per ridimensionare l'immagine in modo che sia larga solo 100 pixel.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `img` dovrebbe avere la classe `smaller-image`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class')
|
||||
.trim().split(/\s+/g).includes('smaller-image')
|
||||
);
|
||||
```
|
||||
|
||||
La tua immagine dovrebbe essere larga 100 pixel.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').width() < 200 &&
|
||||
code.match(/\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,172 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08808
|
||||
title: Specificare in che modo i caratteri devono degradare
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cpVKBfQ'
|
||||
forumTopicId: 18304
|
||||
dashedName: specify-how-fonts-should-degrade
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Esistono diversi caratteri predefiniti disponibili in tutti i browser. Queste famiglie generiche di caratteri includono `monospace`, `serif` e `sans-serif`.
|
||||
|
||||
Quando un carattere non è disponibile, puoi dire al browser di "degradare" a un altro carattere.
|
||||
|
||||
Ad esempio, se desideri che un elemento utilizzi il carattere `Helvetica`, ma degradi al carattere `sans-serif` quando `Helvetica` non è disponibile, lo specificherai come segue:
|
||||
|
||||
```css
|
||||
p {
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
I nomi delle famiglie di caratteri generici non fanno distinzione tra maiuscole e minuscole. Inoltre, non hanno bisogno di virgolette perché sono parole chiave CSS.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Per iniziare, applica il carattere `monospace` all'elemento `h2`, in modo che ora abbia due caratteri: `Lobster` e `monospace`.
|
||||
|
||||
Nell'ultima sfida, hai importato il carattere `Lobster` utilizzando il tag `link`. Ora commenta l'importazione del carattere `Lobster` (utilizzando i commenti HTML che hai imparato in precedenza) da Google Fonts in modo che non sia più disponibile. Nota come il tuo elemento `h2` degrada al carattere `monospace`.
|
||||
|
||||
**Nota:** se hai il carattere `Lobster` installato sul tuo computer, non vedrai il degrado perché il tuo browser sarà comunque in grado di trovare il carattere.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento h2 dovrebbe usare il carattere `Lobster`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h2')
|
||||
.css('font-family')
|
||||
.match(/^"?lobster/i)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento h2 dovrebbe degradare al carattere `monospace` quando `Lobster` non è disponibile.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti commentare la tua chiamata a Google per il carattere `Lobster` inserendo `<!--` davanti.
|
||||
|
||||
```js
|
||||
assert(new RegExp('<!--[^fc]', 'gi').test(code));
|
||||
```
|
||||
|
||||
Dovresti chiudere il tuo commento aggiungendo `-->`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('[^fc]-->', 'gi').test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!--<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">-->
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,133 @@
|
||||
---
|
||||
id: bad87fee1348bd9aefe08806
|
||||
title: Stilizzare elementi multipli con una classe CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkVbsQ'
|
||||
forumTopicId: 18311
|
||||
dashedName: style-multiple-elements-with-a-css-class
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Le classi consentono di utilizzare gli stessi stili CSS su più elementi HTML. Puoi vederlo applicando la tua classe `red-text` al primo elemento `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h2` dovrebbe essere rosso.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Il tuo elemento `h2` dovrebbe avere la classe `red-text`.
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
Il tuo elemento `p` dovrebbe essere rosso.
|
||||
|
||||
```js
|
||||
assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Il secondo e il terzo elemento `p` non dovrebbero essere rossi.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!($('p:eq(1)').css('color') === 'rgb(255, 0, 0)') &&
|
||||
!($('p:eq(2)').css('color') === 'rgb(255, 0, 0)')
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo primo elemento `p` dovrebbe avere la classe `red-text`.
|
||||
|
||||
```js
|
||||
assert($('p:eq(0)').hasClass('red-text'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08736
|
||||
title: Stilizzare l'elemento Body
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB77PHW'
|
||||
forumTopicId: 18313
|
||||
dashedName: style-the-html-body-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora iniziamo a parlare dell'ereditarietà dei CSS.
|
||||
|
||||
Ogni pagina HTML ha un elemento `body`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Possiamo dimostrare che l'elemento `body` esiste dandogli un `background-color` nero.
|
||||
|
||||
Possiamo farlo aggiungendo quanto segue al nostro elemento `style`:
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `body` dovrebbe avere il `background-color` nero.
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
La regola CSS dovrebbe essere formattata correttamente con entrambe le parentesi graffe di apertura e chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
|
||||
);
|
||||
```
|
||||
|
||||
La tua regola CSS dovrebbe terminare con un punto e virgola.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,123 @@
|
||||
---
|
||||
id: bad82fee1322bd9aedf08721
|
||||
title: Comprendere le unità assolute e le unità relative
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN66JSL'
|
||||
forumTopicId: 301089
|
||||
dashedName: understand-absolute-versus-relative-units
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Le ultime sfide impostavano tutte il margine o il riempimento di un elemento con i pixel (`px`). I pixel sono un tipo di unità di lunghezza, che è quello che dice al browser come dimensionare o spaziare un elemento. Oltre a `px`, CSS ha un certo numero di diverse opzioni utilizzabili per le unità di lunghezza.
|
||||
|
||||
Le due principali categorie di unità di lunghezza sono assolute e relative. Le unità assolute sono legate alle unità fisiche di lunghezza. Ad esempio, `in` e `mm` si riferiscono rispettivamente a pollici e millimetri. Le unità di lunghezza assoluta approssimano la misura effettiva su uno schermo, ma ci sono alcune differenze a seconda della risoluzione.
|
||||
|
||||
Le unità relative, come `em` o `rem`, sono relative ad un altro valore di lunghezza. Per esempio, `em` è basato sulla dimensione del carattere di un elemento. Se lo usi per impostare la proprietà `font-size`, questa è relativa al `font-size` del genitore.
|
||||
|
||||
**Nota:** Ci sono diverse opzioni di unità relative che sono legate alla dimensione della viewport (lo schermo). Esse sono spiegate nella sezione Principi di Web Design Responsivo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi una proprietà `padding` all'elemento con la classe `red-box` e impostala a `1.5em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `red-box` dovrebbe avere una proprietà `padding`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.red-box').css('padding-top') != '0px' &&
|
||||
$('.red-box').css('padding-right') != '0px' &&
|
||||
$('.red-box').css('padding-bottom') != '0px' &&
|
||||
$('.red-box').css('padding-left') != '0px'
|
||||
);
|
||||
```
|
||||
|
||||
La classe `red-box` dovrebbe dare agli elementi 1.5em di `padding`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: red;
|
||||
margin: 20px 40px 20px 40px;
|
||||
|
||||
}
|
||||
|
||||
.green-box {
|
||||
background-color: green;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box green-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: red;
|
||||
margin: 20px 40px 20px 40px;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.green-box {
|
||||
background-color: green;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box green-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,142 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08806
|
||||
title: Usare una classe CSS per stilizzare un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvDtV'
|
||||
forumTopicId: 18337
|
||||
dashedName: use-a-css-class-to-style-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Le classi sono stili riutilizzabili che possono essere aggiunti agli elementi HTML.
|
||||
|
||||
Ecco un esempio di dichiarazione di classe CSS:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Puoi vedere che abbiamo creato una classe CSS chiamata `blue-text` all'interno del tag `<style>`. Puoi applicare una classe a un elemento HTML in questo modo: `<h2 class="blue-text">CatPhotoApp</h2>`. Nota che nel tuo elemento CSS `style`, i nomi delle classi iniziano con un punto. Nell'attributo di classe degli elementi HTML, il nome della classe non include il punto.
|
||||
|
||||
# --instructions--
|
||||
|
||||
All'interno del tuo elemento `style`, modifica il selettore `h2` in `.red-text` ed aggiorna il valore del colore da `blue` a `red`.
|
||||
|
||||
Dai al tuo elemento `h2` l'attributo `class` con un valore `red-text`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h2` dovrebbe essere rosso.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Il tuo elemento `h2` dovrebbe avere la classe `red-text`.
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
Il tuo foglio di stile dovrebbe dichiarare una classe `red-text` e avere il suo colore impostato su `red`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g));
|
||||
```
|
||||
|
||||
Non dovresti usare dichiarazioni di stile in linea come `style="color: red"` nel tuo elemento `h2`.
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style') === undefined);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,287 @@
|
||||
---
|
||||
id: 5a9d727a424fe3d0e10cad12
|
||||
title: Usare una variabile CSS personalizzata
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM989ck'
|
||||
forumTopicId: 301090
|
||||
dashedName: use-a-custom-css-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dopo aver creato la tua variabile, puoi assegnare il suo valore ad altre proprietà CSS facendo riferimento al nome che le hai dato.
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin);
|
||||
```
|
||||
|
||||
Questo cambierà lo sfondo di qualsiasi elemento tu stia selezionando in grigio perché questo è il valore della variabile `--penguin-skin`. Gli stili non saranno applicati a meno che i nomi delle variabili non abbiano una corrispondenza esatta.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Applica la variabile `--penguin-skin` alla proprietà `background` delle classi `penguin-top`, `penguin-bottom`, `right-hand` e `left-hand`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La variabile `--penguin-skin` dovrebbe essere applicata alla proprietà `background` della classe `penguin-top`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
La variabile `--penguin-skin` dovrebbe essere applicata alla proprietà `background` della classe `penguin-bottom`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
La variabile `--penguin-skin` dovrebbe essere applicata alla proprietà `background` della classe `right-hand`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
La variabile `--penguin-skin` dovrebbe essere applicata alla proprietà `background` della classe `left-hand`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
--penguin-skin: gray;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: black;
|
||||
/* Change code above this line */
|
||||
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: black;
|
||||
/* Change code above this line */
|
||||
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: black;
|
||||
/* Change code above this line */
|
||||
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: black;
|
||||
/* Change code above this line */
|
||||
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: white;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: orange;
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: orange;
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.penguin-top {background: var(--penguin-skin);} .penguin-bottom {background: var(--penguin-skin);} .right-hand {background: var(--penguin-skin);} .left-hand {background: var(--penguin-skin);}</style>
|
||||
```
|
||||
@ -0,0 +1,281 @@
|
||||
---
|
||||
id: 5a9d72ad424fe3d0e10cad16
|
||||
title: Usare una media query per cambiare una variabile
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmL8UP'
|
||||
forumTopicId: 301091
|
||||
dashedName: use-a-media-query-to-change-a-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Le variabili CSS possono semplificare l'utilizzo delle media query.
|
||||
|
||||
Ad esempio, quando lo schermo è più piccolo o più grande del breakpoint (punto di interruzione) della media query, è possibile modificare il valore di una variabile, e questa applicherà i suoi stili ovunque sia utilizzata.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Nel selettore `:root` della `media query`, fai in modo che `--penguin-size` venga ridefinito con un valore di `200px`. Inoltre, ridefinisci `--penguin-skin` e dagli un valore di `black`. Quindi ridimensiona l'anteprima per vedere questa modifica in azione.
|
||||
|
||||
# --hints--
|
||||
|
||||
`:root` dovrebbe riassegnare alla variabile `--penguin-size` il valore di `200px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`:root` dovrebbe riassegnare alla variabile `--penguin-skin` il valore `black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--penguin-size: 300px;
|
||||
--penguin-skin: gray;
|
||||
--penguin-belly: white;
|
||||
--penguin-beak: orange;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
:root {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
}
|
||||
|
||||
.penguin {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: var(--penguin-size, 300px);
|
||||
height: var(--penguin-size, 300px);
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 5%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(130deg);
|
||||
z-index: -1;
|
||||
animation-duration: 3s;
|
||||
animation-name: wave;
|
||||
animation-iteration-count: infinite;
|
||||
transform-origin:0% 0%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
10% {
|
||||
transform: rotate(110deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotate(110deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left:-23%;
|
||||
background: white;
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>@media (max-width: 350px) {:root {--penguin-size: 200px; --penguin-skin: black;}}</style>
|
||||
```
|
||||
@ -0,0 +1,128 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08719
|
||||
title: Usare codici Hex abbreviati
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpKAm'
|
||||
forumTopicId: 18338
|
||||
dashedName: use-abbreviated-hex-code
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Molte persone si sentono sopraffatte dalle possibilità offerte da più di 16 milioni di colori. Ed è difficile ricordare i codici esadecimali. Fortunatamente puoi abbreviarli.
|
||||
|
||||
Ad esempio, il codice esadecimale del rosso `#FF0000` può essere abbreviato in `#F00`. Questa forma abbreviata fornisce una cifra per il rosso, una cifra per il verde, e una cifra per il blu.
|
||||
|
||||
Questo riduce il numero totale di colori possibili a circa 4.000. Ma i browser interpreteranno `#FF0000` e `#F00` esattamente come lo stesso colore.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Vai avanti, prova a usare i codici esadecimali abbreviati per colorare gli elementi corretti.
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Colore</th><th>Codice Hex breve</th></tr><tr><td>Ciano</td><td><code>#0FF</code></td></tr><tr><td>Verde</td><td><code>#0F0</code></td></tr><tr><td>Rosso</td><td><code>#F00</code></td></tr><tr><td>Fucsia</td><td><code>#F0F</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h1` con il testo `I am red!` dovrebbe ricevere il `color` rosso.
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
L'`hex code` abbreviato per il colore rosso dovrebbe essere utilizzato al posto del codice hex `#FF0000`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Al tuo elemento `h1` con il testo `I am green!` dovrebbe essere assegnato il `color` verde.
|
||||
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
L'`hex code` abbreviato per il colore verde deve essere utilizzato al posto della parola `#00FF00`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` con il testo `I am cyan!` dovrebbe ricevere il `color` ciano.
|
||||
|
||||
```js
|
||||
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
L'`hex code` abbreviato per il colore ciano dovrebbe essere utilizzato al posto della parola `#00FFFF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` con il testo `I am fuchsia!` dovrebbe ricevere il `color` fucsia.
|
||||
|
||||
```js
|
||||
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
```
|
||||
|
||||
L'`hex code` abbreviato per il colore fucsia dovrebbe essere utilizzato al posto dell'hex code `#FF00FF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #000000;
|
||||
}
|
||||
.fuchsia-text {
|
||||
color: #000000;
|
||||
}
|
||||
.cyan-text {
|
||||
color: #000000;
|
||||
}
|
||||
.green-text {
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="fuchsia-text">I am fuchsia!</h1>
|
||||
|
||||
<h1 class="cyan-text">I am cyan!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #F00;
|
||||
}
|
||||
.fuchsia-text {
|
||||
color: #F0F;
|
||||
}
|
||||
.cyan-text {
|
||||
color: #0FF;
|
||||
}
|
||||
.green-text {
|
||||
color: #0F0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="fuchsia-text">I am fuchsia!</h1>
|
||||
|
||||
<h1 class="cyan-text">I am cyan!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
```
|
||||
@ -0,0 +1,197 @@
|
||||
---
|
||||
id: bad87dee1348bd9aede07836
|
||||
title: Usare un attributo id per stilizzare un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakyZfL'
|
||||
forumTopicId: 18339
|
||||
dashedName: use-an-id-attribute-to-style-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Una cosa interessante sugli attributi `id` è che, come le classi, è possibile stilizzarli utilizzando CSS.
|
||||
|
||||
Tuttavia, un `id` non è riutilizzabile e dovrebbe essere applicato solo a un elemento. Un `id` ha anche una alta specificità (importanza) rispetto a una classe, quindi se entrambi sono applicati allo stesso elemento e hanno stili in conflitto, vengono applicati gli stili dell'`id`.
|
||||
|
||||
Ecco un esempio di come puoi prendere il tuo elemento con l'attributo `id` di `cat-photo-element` e dargli il colore di sfondo verde. Nel tuo elemento `style`:
|
||||
|
||||
```css
|
||||
#cat-photo-element {
|
||||
background-color: green;
|
||||
}
|
||||
```
|
||||
|
||||
Nota che all'interno del tuo elemento `style`, fai sempre riferimento alle classi mettendo un `.` di fronte ai loro nomi. Fai sempre riferimento agli id mettendo un `#` di fronte ai loro nomi.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Prova a dare al tuo modulo, che ora ha l'attributo `id` di `cat-photo-form`, uno sfondo verde.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `form` dovrebbe avere l'id di `cat-photo-form`.
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
```
|
||||
|
||||
L'elemento `form` dovrebbe avere un `background-color` verde.
|
||||
|
||||
```js
|
||||
assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
Il tuo elemento `form` dovrebbe avere un attributo `id`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<form.*cat-photo-form.*>/gi) &&
|
||||
code.match(/<form.*cat-photo-form.*>/gi).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Non dovresti dare al tuo `form` alcun attributo `class` o `style`.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
|
||||
#cat-photo-form {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,210 @@
|
||||
---
|
||||
id: 58c383d33e2e3259241f3076
|
||||
title: Usare i selettori degli attributi per stilizzare gli elementi
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpymfJ'
|
||||
forumTopicId: 301092
|
||||
dashedName: use-attribute-selectors-to-style-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Hai aggiunto gli attributi `id` o `class` agli elementi che desideri stilizzare in modo specifico. Questi sono conosciuti come selettori di id e di classe. Ci sono altri selettori CSS che puoi usare per selezionare gruppi personalizzati di elementi da stilizzare.
|
||||
|
||||
Prendiamo di nuovo CatPhotoApp per fare pratica con i selettori CSS.
|
||||
|
||||
Per questa sfida, userai il selettore di attributi `[attr=value]` per stilizzare le caselle di spunta in CatPhotoApp. Questo selettore trova e stilizza gli elementi con un valore di attributo specifico. Ad esempio, il codice seguente cambia i margini di tutti gli elementi con l'attributo `type` e un valore corrispondente di `radio`:
|
||||
|
||||
```css
|
||||
[type='radio'] {
|
||||
margin: 20px 0px 20px 0px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Utilizzando il selettore di attributi `type`, prova a dare alle caselle di spunta in CatPhotoApp un margine superiore di 10px e un margine inferiore di 15px.
|
||||
|
||||
# --hints--
|
||||
|
||||
Per selezionare le caselle di spunta deve essere utilizzato il selettore di attributo `type`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/<style>[\s\S]*?\[\s*?type\s*?=\s*?("|')checkbox\1\s*?\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
I margini superiori delle caselle di spunta dovrebbero essere di 10px.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
var count = 0;
|
||||
$("[type='checkbox']").each(function () {
|
||||
if ($(this).css('marginTop') === '10px') {
|
||||
count++;
|
||||
}
|
||||
});
|
||||
return count === 3;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
I margini inferiori delle caselle di spunta dovrebbero essere di 15px.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
var count = 0;
|
||||
$("[type='checkbox']").each(function () {
|
||||
if ($(this).css('marginBottom') === '15px') {
|
||||
count++;
|
||||
}
|
||||
});
|
||||
return count === 3;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
[type='checkbox'] {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,143 @@
|
||||
---
|
||||
id: bad87fee1348bd9afdf08726
|
||||
title: Usare la notazione in senso orario per specificare il margine di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpybAd'
|
||||
forumTopicId: 18345
|
||||
dashedName: use-clockwise-notation-to-specify-the-margin-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Proviamo di nuovo, ma con `margin` questa volta.
|
||||
|
||||
Invece di specificare il `margin-top`, `margin-right`, `margin-bottom`, e `margin-left` di un elemento individualmente, è possibile specificarli tutti in una riga, come in questo esempio:
|
||||
|
||||
```css
|
||||
margin: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
Questi quattro valori funzionano come un orologio: in alto, a destra, in basso, a sinistra, e produrranno lo stesso risultato delle istruzioni specifiche per i singoli lati.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa la notazione in senso orario per dare all'elemento con la classe `blue-box` un margine di `40px` sul suo lato superiore e sinistro, ma di soli `20px` sul suo lato inferiore e destro.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte superiore degli elementi `40px` di `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte destra degli elementi `20px` di `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte inferiore degli elementi `20px` di `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte sinistra degli elementi `40px` di `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
```
|
||||
|
||||
Dovresti usare la notazione in senso orario per impostare il margine della classe `blue-box`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
|
||||
__helpers.removeCssComments($('style').text())
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
margin: 40px 20px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,141 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08826
|
||||
title: Usare la notazione in senso orario per specificare il padding di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mBS9'
|
||||
forumTopicId: 18346
|
||||
dashedName: use-clockwise-notation-to-specify-the-padding-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Invece di specificare il `padding-top`, `padding-right`, `padding-bottom`, e `padding-left` di un elemento individualmente, è possibile specificarli tutti in una riga come la seguente:
|
||||
|
||||
```css
|
||||
padding: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
Questi quattro valori funzionano come un orologio: in alto, a destra, in basso, a sinistra, e produrranno lo stesso risultato delle istruzioni di padding specifiche per i singoli lati.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa la notazione in senso orario per dare alla classe `.blue-box` un `padding` di `40px` nei suoi lati superiore e sinistro, ma di soli `20px` sul lato inferiore e destro.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte superiore degli elementi `40px` di `padding`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare al lato destro degli elementi `20px` di `padding`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte inferiore degli elementi `20px` di `padding`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte sinistra degli elementi `40px` di `padding`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
Dovresti usare la notazione in senso orario per impostare il padding della classe `blue-box`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
|
||||
__helpers.removeCssComments($('style').text())
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 40px 20px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,158 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08805
|
||||
title: Usare i selettori CSS per stilizzare gli elementi
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJKMBT2'
|
||||
forumTopicId: 18349
|
||||
dashedName: use-css-selectors-to-style-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Con i CSS, ci sono centinaia di proprietà CSS che puoi usare per cambiare l'aspetto di un elemento sulla tua pagina.
|
||||
|
||||
Quando hai inserito `<h2 style="color: red;">CatPhotoApp</h2>`, hai definito quel singolo elemento `h2` con CSS (Cascading Style Sheets, cioè Fogli di Stile a Cascata) in linea.
|
||||
|
||||
Questo è un modo per specificare lo stile di un elemento, ma c'è un modo migliore per applicare CSS.
|
||||
|
||||
Nella parte superiore del codice, crea un blocco `style` come questo:
|
||||
|
||||
```html
|
||||
<style>
|
||||
</style>
|
||||
```
|
||||
|
||||
All'interno di quel blocco di stile, puoi creare un <dfn>selettore CSS</dfn> per tutti gli elementi `h2`. Ad esempio, se desideri che tutti gli elementi `h2` siano rossi, dovresti aggiungere una regola di stile simile a questa:
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Nota che è importante avere sia le parentesi graffe di apertura che quelle di chiusura (`{` e `}`) attorno alle regole di stile di ogni elemento. Devi anche assicurarti che la definizione di stile del tuo elemento si trovi tra i tag di stile di apertura e chiusura. Infine, assicurati di aggiungere un punto e virgola alla fine di ciascuna delle regole di stile del tuo elemento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Elimina l'attributo di stile dell'elemento `h2` e crea invece un blocco `style`. Aggiungi il CSS necessario per trasformare tutti gli elementi `h2` in blu.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'attributo `style` dovrebbe essere rimosso dal tuo elemento `h2`.
|
||||
|
||||
```js
|
||||
assert(!$('h2').attr('style'));
|
||||
```
|
||||
|
||||
Dovresti creare un elemento `style`.
|
||||
|
||||
```js
|
||||
assert($('style') && $('style').length >= 1);
|
||||
```
|
||||
|
||||
Il tuo elemento `h2` dovrebbe essere blu.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
La dichiarazione `h2` del foglio di stile dovrebbe essere valida, con un punto e virgola e una parentesi graffa di chiusura.
|
||||
|
||||
```js
|
||||
assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
|
||||
```
|
||||
|
||||
Tutti i tuoi elementi `style` dovrebbero essere validi e avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/style>/g) &&
|
||||
code.match(/<\/style>/g).length ===
|
||||
(
|
||||
code.match(
|
||||
/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g
|
||||
) || []
|
||||
).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,257 @@
|
||||
---
|
||||
id: 5a9d725e424fe3d0e10cad10
|
||||
title: Usare le variabili CSS per cambiare diversi elementi alla volta
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDECm'
|
||||
forumTopicId: 301093
|
||||
dashedName: use-css-variables-to-change-several-elements-at-once
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Le <dfn>variabili CSS</dfn> sono un modo potente per cambiare molte proprietà di stile CSS in una sola volta, cambiando un solo valore.
|
||||
|
||||
Segui le istruzioni qui sotto per vedere come cambiando solo tre valori puoi cambiare lo stile di molti elementi.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Nella classe `penguin`, cambia il valore `black` in `gray`, il valore `gray` in `white`, e il valore `yellow` in `orange`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `penguin` dovrebbe dichiarare la variabile `--penguin-skin` e assegnarle il valore `gray`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
La classe `penguin` dovrebbe dichiarare la variabile `--penguin-belly` e assegnarle il valore `white`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
La classe `penguin` dovrebbe dichiarare la variabile `--penguin-beak` e assegnarle il valore `orange`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
|
||||
/* Only change code below this line */
|
||||
--penguin-skin: black;
|
||||
--penguin-belly: gray;
|
||||
--penguin-beak: yellow;
|
||||
/* Only change code above this line */
|
||||
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.penguin {--penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange;}</style>
|
||||
```
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08726
|
||||
title: Usare il codice esadecimale per colori specifici
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c8W9mHM'
|
||||
forumTopicId: 18350
|
||||
dashedName: use-hex-code-for-specific-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Lo sapevi che ci sono altri modi per rappresentare i colori in CSS? Uno di questi modi è chiamato codice esadecimale, o codice hex per brevità.
|
||||
|
||||
Di solito usiamo <dfn>i numeri decimali</dfn> (o numeri in base 10), che usano i simboli da 0 a 9 per ogni cifra. <dfn>Gli esadecimali</dfn> (o <dfn>hex</dfn>) sono numeri in base 16. Ciò significa che utilizzano sedici simboli distinti. Come per i i decimali, i simboli 0-9 rappresentano i valori da zero a nove. I successivi simboli A,B,C,D,E,F rappresentano i valori da dieci a quindici. Complessivamente, una cifra esadecimale può andare da 0 a F, dandoci 16 valori totali possibili. Qui puoi trovare ulteriori informazioni sui [numeri esadecimali](https://en.wikipedia.org/wiki/Hexadecimal).
|
||||
|
||||
In CSS, possiamo usare 6 cifre esadecimali per rappresentare i colori, due ciascuna per le componenti rossa (R), verde (G) e blu (B). Ad esempio, `#000000` è nero ed è anche il valore più basso possibile. Qui puoi trovare maggiori informazioni sul [sistema di colori RGB](https://en.wikipedia.org/wiki/RGB_color_model).
|
||||
|
||||
```css
|
||||
body {
|
||||
color: #000000;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Sostituisci la parola `black` nel colore di sfondo dell'elemento `body` con la sua rappresentazione esadecimale, `#000000`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `body` dovrebbe avere un colore di sfondo nero.
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
L'`hex code` per il colore nero dovrebbe essere utilizzato al posto della parola `black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,132 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08721
|
||||
title: Usare il codice esadecimale per mescolare i colori
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cK89PhP'
|
||||
forumTopicId: 18359
|
||||
dashedName: use-hex-code-to-mix-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per ripassare, i codici esadecimali utilizzano 6 cifre esadecimali per rappresentare i colori, due ciascuna per le componenti rossa (R), verde (G) e blu (B).
|
||||
|
||||
Da questi tre colori puri (rosso, verde e blu), possiamo variare la quantità di ciascuno per creare oltre 16 milioni di altri colori!
|
||||
|
||||
Ad esempio, l'arancione è rosso puro, mescolato con un po' di verde e niente blu. In codice esadecimale, questo si traduce in `#FFA500`.
|
||||
|
||||
La cifra `0` è il numero più basso in codice esadecimale e rappresenta una completa assenza di quel colore.
|
||||
|
||||
La cifra `F` è il numero più alto in codice esadecimale e rappresenta la massima luminosità possibile.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Sostituisci i nomi dei colori nel nostro elemento `style` con i codici esadecimali corretti.
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Colore</th><th>Codice esadecimale</th></tr><tr><td>Blu Dodger</td><td><code>#1E90FF</code></td></tr><tr><td>Verde</td><td><code>#00FF00</code></td></tr><tr><td>Arancione</td><td><code>#FFA500</code></td></tr><tr><td>Rosso</td><td><code>#FF0000</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h1` con il testo `I am red!` dovrebbe ricevere un `color` rosso.
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
L'`hex code` per il colore rosso dovrebbe essere utilizzato al posto della parola `red`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Al tuo elemento `h1` con il testo `I am green!` dovrebbe essere assegnato un `color` verde.
|
||||
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
L'`hex code` per il colore verde dovrebbe essere utilizzato al posto della parola `green`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Al tuo elemento `h1` con il testo `I am dodger blue!` dovrebbe essere assegnato un `color` dodger blue.
|
||||
|
||||
```js
|
||||
assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
```
|
||||
|
||||
L'`hex code` per il colore blu dodger dovrebbe essere usato al posto della parola `dodgerblue`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` con il testo `I am orange!` dovrebbe ricevere il `color` arancione.
|
||||
|
||||
```js
|
||||
assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
L'`hex code` per il colore arancione dovrebbe essere utilizzato al posto della parola `orange`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: black;
|
||||
}
|
||||
.green-text {
|
||||
color: black;
|
||||
}
|
||||
.dodger-blue-text {
|
||||
color: black;
|
||||
}
|
||||
.orange-text {
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
|
||||
<h1 class="dodger-blue-text">I am dodger blue!</h1>
|
||||
|
||||
<h1 class="orange-text">I am orange!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #FF0000;
|
||||
}
|
||||
.green-text {
|
||||
color: #00FF00;
|
||||
}
|
||||
.dodger-blue-text {
|
||||
color: #1E90FF;
|
||||
}
|
||||
.orange-text {
|
||||
color: #FFA500;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
|
||||
<h1 class="dodger-blue-text">I am dodger blue!</h1>
|
||||
|
||||
<h1 class="orange-text">I am orange!</h1>
|
||||
```
|
||||
@ -0,0 +1,140 @@
|
||||
---
|
||||
id: bad82fee1348bd9aedf08721
|
||||
title: Usare RGB per mescolare i colori
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24JU6'
|
||||
forumTopicId: 18368
|
||||
dashedName: use-rgb-to-mix-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Proprio come con il codice esadecimale, puoi mescolare i colori in RGB utilizzando combinazioni di valori diversi.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Sostituisci i codici esadecimali nel nostro elemento `style` con i loro valori RGB corretti.
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Colore</th><th>RGB</th></tr><tr><td>Blu</td><td><code>rgb(0, 0, 255)</code></td></tr><tr><td>Rosso</td><td><code>rgb(255, 0, 0)</code></td></tr><tr><td>Orchidea</td><td><code>rgb(218, 112, 214)</code></td></tr><tr><td>Siena</td><td><code>rgb(160, 82, 45)</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h1` con il testo `I am red!` dovrebbe avere un `color` rosso.
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Dovresti usare `rgb` per il colore rosso.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` con il testo `I am orchid!` dovrebbe avere un `color` orchidea.
|
||||
|
||||
```js
|
||||
assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
|
||||
```
|
||||
|
||||
Dovresti usare `rgb` per il colore orchidea.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` con il testo `I am blue!` dovrebbe avere un `color` blu.
|
||||
|
||||
```js
|
||||
assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
Dovresti usare `rgb` per il colore blu.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` con il testo `I am sienna!` dovrebbe avere un `color` siena.
|
||||
|
||||
```js
|
||||
assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
|
||||
```
|
||||
|
||||
Dovresti usare `rgb` per il colore siena.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #000000;
|
||||
}
|
||||
.orchid-text {
|
||||
color: #000000;
|
||||
}
|
||||
.sienna-text {
|
||||
color: #000000;
|
||||
}
|
||||
.blue-text {
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="orchid-text">I am orchid!</h1>
|
||||
|
||||
<h1 class="sienna-text">I am sienna!</h1>
|
||||
|
||||
<h1 class="blue-text">I am blue!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
.orchid-text {
|
||||
color: rgb(218, 112, 214);
|
||||
}
|
||||
.sienna-text {
|
||||
color: rgb(160, 82, 45);
|
||||
}
|
||||
.blue-text {
|
||||
color:rgb(0, 0, 255);
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="orchid-text">I am orchid!</h1>
|
||||
|
||||
<h1 class="sienna-text">I am sienna!</h1>
|
||||
|
||||
<h1 class="blue-text">I am blue!</h1>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08718
|
||||
title: Usare valori RGB per colorare gli elementi
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkp2fr'
|
||||
forumTopicId: 18369
|
||||
dashedName: use-rgb-values-to-color-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Un altro modo per rappresentare i colori in CSS è quello di usare i valori `RGB`.
|
||||
|
||||
Il valore `RGB` per il nero appare così:
|
||||
|
||||
```css
|
||||
rgb(0, 0, 0)
|
||||
```
|
||||
|
||||
Il valore `RGB` per il bianco è questo:
|
||||
|
||||
```css
|
||||
rgb(255, 255, 255)
|
||||
```
|
||||
|
||||
Invece di usare sei cifre esadecimali come si fa con il codice esadecimale, con `RGB` specifichi la luminosità di ogni colore con un numero compreso tra 0 e 255.
|
||||
|
||||
Se fai il calcolo, le due cifre di un colore equivalgono a 16 volte 16, che ci dà 256 valori totali. Quindi `RGB`, che inizia a contare da zero, ha esattamente lo stesso numero di valori possibili del codice esadecimale.
|
||||
|
||||
Ecco un esempio di come puoi cambiare lo sfondo del `body` in arancione usando il suo codice RGB.
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(255, 165, 0);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Sostituiamo il codice esadecimale nel colore di sfondo dell'elemento `body` con il valore RGB per il nero: `rgb(0, 0, 0)`
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `body` dovrebbe avere uno sfondo nero.
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Dovresti usare `rgb` per dare al tuo elemento `body` uno sfondo nero.
|
||||
|
||||
```js
|
||||
assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #F00;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
Reference in New Issue
Block a user