Proprietà CSS più utilizzate
Proprietà CSS più utilizzate
Proprietà CSS più utilizzate è una lezione HTML for Kids gratuita su CoddyKit. Questa è la lezione 1 di 1. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML for Kids, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML for Kids include 1 lezioni in totale.
Introduzione
Salve,
In questa sezione impareremo a conoscere le proprietà CSS più comuni.
Finora abbiamo solitamente realizzato esempi con proprietà semplici come color e font-size.
Larghezza e altezza
Altezza - Larghezza
Utilizzeremo le proprietà width e height per impostare i valori di larghezza e altezza dei nostri elementi.
In questo caso occorre prestare attenzione a due aspetti.
- Non possiamo assegnare larghezza e altezza agli elementi di tipo inline.
- Le proprietà width e height che assegniamo sono, per impostazione predefinita, indipendenti da altre proprietà come margin, padding e border. Vengono applicate solo all'area interna dell'elemento.
Forniremo ulteriori informazioni sulle eccezioni sopra indicate più avanti.
<!DOCTYPE html>
<html>
<head>
<style>
.my-box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="my-box">My Box</div>
</body>
</html>
Larghezza e altezza 2
Nel nostro esempio precedente abbiamo assegnato valori statici a width e height. Tuttavia, i valori assegnabili non si limitano a numeri fissi.
Vediamo ora come assegnare la larghezza utilizzando una percentuale nel nostro esempio.
<style>
.box1 {
height: 200px;
width: 200px;
background-color: #1cac84;
}
.box2 {
height: 200px;
width: 70%;
background-color: powderblue;
}
.box3 {
background-color: #c974af;
}
</style>
<div class="box1">First Box</div>
<div class="box2">Second Box</div>
<div class="box3">This box takes
the auto value for the width and height
properties by default.</div>
Content-box e border-box
La proprietà box-sizing utilizza il valore content-box per impostazione predefinita.
Inoltre, per impostazione predefinita, i valori di width e height fanno riferimento al contenuto.
I valori di border e padding vengono aggiunti ai valori di width e height.
Supponiamo che la larghezza di un riquadro sia 100px.
Quando aggiungiamo a questo riquadro 10px di padding e 20px di border, la larghezza totale dell'elemento sarà 100px + 10px + 20px = 130px.
Larghezza massima
Con la proprietà max-width, possiamo assegnare la larghezza massima che un elemento può avere.
Nell'esempio seguente, poiché il valore di max-width è 100px, sebbene il valore predefinito di width sia auto (l'elemento dovrebbe occupare il 100% del genitore), l'elemento occupa 100px e il contenuto fuoriesce dal riquadro.
<style>
.box {
height: 200px;
max-width: 100px;
background-color: #1cac84;
}
</style>
<div class="box">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>
Decorazione del testo
Possiamo definire la decorazione dei testi con la proprietà text-decoration.
Credo che sia più utile esaminare questa proprietà nell'esempio. Osservi l'output del nostro codice di esempio nell'anteprima.
<style>
.head1 {
text-decoration: overline;
}
.head2 {
text-decoration: line-through;
}
.head3 {
text-decoration: underline;
}
.head4 {
text-decoration: underline overline;
}
</style>
<h1 class="head1">
Text-decoration is overline
</h1>
<h1 class="head2">
Text-decoration is line-through
</h1>
<h1 class="head3">
Text-decoration is underline
</h1>
<h1 class="head4">
Text-decoration is both underline
and overline
</h1>text-indent
Potremmo voler inserire uno spazio all'inizio di un testo. A questo scopo utilizziamo la proprietà text-indent.
<style>
.indent-txt{
text-indent: 20px;
}
</style>
<p class="indent-txt">Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat
</p>text-align
La proprietà text-align consente di definire l'allineamento orizzontale di un testo.
Definiamo un esempio di codice HTML.
<style>
.h1-center {
text-align: center;
}
.h1-left {
text-align: left;
}
.h1-right {
text-align: right;
}
</style>
<h1 class="h1-center">
Lorem ipsum (center)
</h1>
<h1 class="h1-left">
Lorem ipsum (left)
</h1>
<h1 class="h1-right">
Lorem ipsum (right)
</h1>font-family
Definiamo lo stile font-family per utilizzare il tipo di carattere desiderato per i testi.
È importante conoscere alcuni aspetti.
- Il carattere che abbiamo definito deve essere installato nel sistema dell'utente. A questo scopo, dobbiamo utilizzare uno dei caratteri indicati come carattere web-safe.
- Se intendiamo utilizzare un carattere personalizzato, dovremo aggiungere il carattere da utilizzare come dipendenza di terze parti tra i tag head. Quando aggiungiamo font-family, dovremmo definire le nostre preferenze per il carattere principale e quello secondario.
- Se il browser non riesce a trovare nel sistema il carattere preferito, mostrerà all'utente quello secondario.
font-family 2
Nell'esempio seguente, alla classe principale è stato assegnato il carattere Times New Roman.
Times e serif sono assegnati rispettivamente come caratteri secondari e terziari.
Il browser prova innanzitutto a utilizzare il carattere Times New Roman; se questo carattere non è presente nel sistema, vengono utilizzate le altre preferenze.
Se i caratteri assegnati non sono disponibili, il browser utilizza il carattere predefinito.
<style>
.header {
font-family: "Times New Roman", Times, serif;
}
</style>
<h1 class="header">
Hello Font Family
</h1>font-style
Come si può intuire dal nome, specifica lo stile del carattere per il testo che utilizziamo.
Vediamo ora la proprietà font-style con un esempio.
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
<p class="normal">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum
dolor sit amet. consectetur
adipiscing elit
</p>Congratulazioni
Congratulazioni 🎉
In questa sezione abbiamo imparato le proprietà CSS più utilizzate.
Nella sezione successiva impareremo il margine CSS.
Domande Frequenti
La lezione «Proprietà CSS più utilizzate» è gratuita?
Sì — il testo completo di «Proprietà CSS più utilizzate» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML for Kids, passa a CoddyKit PRO. Il corso HTML for Kids include 1 lezioni in totale.
Cosa imparerò in «Proprietà CSS più utilizzate»?
Proprietà CSS più utilizzate Eserciti HTML for Kids con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML for Kids?
Non è richiesta alcuna esperienza precedente. HTML for Kids su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 1.
Quanto tempo richiede la lezione «Proprietà CSS più utilizzate»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML for Kids?
Sì. Ogni lezione HTML for Kids include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.