freeCodeCamp/curriculum/challenges/italian/01-responsive-web-design/basic-css/set-the-font-family-of-an-e...

133 lines
3.1 KiB
Markdown
Raw Normal View History

---
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>
```