CSS Stil Font
Proprietatea font-style setează stilul textului. Poate avea una dintre aceste valori:
normal— textul este afișat normal.italic— textul este afișat cursiv.oblique— textul este înclinat (foarte asemănător cu italic).
Exemplu
Trei paragrafe arată text normal, cursiv și oblic.
Prompt
O pagină HTML care arată proprietatea font-style.
Într-un bloc
<style> intern, creați trei clase de paragraf: normal, italic și oblique. Adăugați un paragraf pentru fiecare clasă.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This text is shown normally.</p>
<p class="italic">This text is shown in italics.</p>
<p class="oblique">This text is leaning (oblique).</p>
</body>
</html>
CSS Grosimea Fontului
Proprietatea font-weight setează cât de gros sau subțire sunt caracterele. Poate avea una dintre aceste valori:
normal— valoarea implicită.bold— caractere groase.bolder— caractere mai groase.lighter— caractere mai subțiri.100–900— de la subțire la gros. 400 este echivalent cu normal, iar 700 este echivalent cu bold.
Exemplu
Patru paragrafe arată text normal, mai subțire, îngroșat și cu grosimea 900.
Prompt
O pagină HTML care arată proprietatea font-weight.
Într-un bloc
<style> intern, creați patru clase de paragraf: normal, lighter, bold și 900. Adăugați un paragraf pentru fiecare clasă.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">Normal weight text.</p>
<p class="light">Lighter weight text.</p>
<p class="thick">Bold text.</p>
<p class="thicker">Weight 900 text.</p>
</body>
</html>
CSS Variantă Font
Proprietatea font-variant setează dacă textul este afișat cu un font small-caps.
Într-un font small-caps, toate literele minuscule devin majuscule, dar literele convertite sunt mai mici decât literele majuscule originale.
Exemplu
Un paragraf este normal, iar celălalt folosește small-caps.
Prompt
O pagină HTML care arată proprietatea font-variant.
Într-un bloc
<style> intern, creați două clase de paragraf: normal și small-caps. Adăugați un paragraf pentru fiecare clasă cu text cu majuscule și minuscule mixte, astfel încât efectul small-caps să fie vizibil.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
</body>
</html>