Altre informazioni su CSS
Analizziamo altri modi in cui CSS può semplificare la gestione dei contenuti e renderli più interessanti per i lettori.
Commenti
Come per qualsiasi linguaggio di programmazione, CSS supporta i commenti. Per commentare in una sezione di CSS, usare /* comment */.
/* identifica l'inizio del commento e */ contrassegna la fine. Un commento CSS può coprire più righe di testo. I commenti sono un ottimo modo per lasciare note per sé o per altri sviluppatori o per prendere appunti durante l'apprendimento del linguaggio.
Importante
I commenti CSS sono pubblici e accessibili sia dal browser che dagli utenti del sito Web. Non archiviare informazioni sensibili nei commenti.
I commenti CSS vengono formattati in modo diverso dai commenti HTML. I commenti in HTML usano la sintassi <!--comment-->.
Impostazione dei caratteri
Per indicare al browser quale tipo di carattere si vuole usare per un testo specifico, è possibile usare CSS. A volte si preferisce usare il carattere Arial per una maggiore leggibilità o un altro carattere per rendere lo stile più elegante. La seguente immagine presenta del testo in Arial e altro testo in un tipo di carattere chiamato "Impact".
L'opzione più comune per impostare il tipo di carattere da usare in una pagina è font-family. In genere, font-family viene impostato per un elenco di caratteri, consentendo al browser di usare il primo tipo di carattere elencato che può supportare. Ad esempio, un'impostazione di tentativi di Tahoma, Verdana, sans-serif utilizzare Tahoma, seguito da Verdana e infine un font sans serif generico.
È anche possibile usare altre opzioni, ad esempio style, weight e decoration. L’opzione font-style viene usata per rendere il testo in corsivo impostando il valore su italic.
font-weight supporta diverse impostazioni di grassetto e l’opzione bold è la più comune. Infine, l’opzione text-decoration viene usata per applicare underline, overline, line-through al testo.
| CSS | Risultato |
|---|---|
font-weight: bold; |
Demo |
font-style: italic; |
Demo |
text-decoration: line-through; |
|
L’opzione text-decoration può differire dalle altre utilizzate per modificare la visualizzazione di un tipo di carattere. La differenza principale consiste nel fatto che l’opzione text-decoration viene usata per applicare lo stile intorno al testo o sul testo, ma non modifica il tipo di carattere. Il grassetto e il corsivo modificano il tipo di carattere.
Nota
L'uso della sottolineatura su una pagina Web dovrebbe in genere essere evitato perché il testo può sembrare un collegamento ipertestuale.
Ridimensionamento dei caratteri
font-size consente di indicare le dimensioni del carattere da usare. CSS offre la possibilità di usare il ridimensionamento assoluto o relativo. Il ridimensionamento assoluto è in genere impostato in pixel e utilizza sempre la dimensione specificata. Il ridimensionamento relativo può dipendere dalle dimensioni standard del browser, misurato in percentuale o dalle dimensioni dell'elemento di riferimento.
Nota
Per molti browser, le dimensioni del carattere sono di 16 pixel.
Il ridimensionamento assoluto può essere misurato in pixel ed è indicato in CSS usando px. Per impostare un tipo di carattere su 14 pixel, è possibile usare la direttiva font-size: 14px;.
In genere, il ridimensionamento relativo per i tipi di carattere viene misurato usando em o rem.
em è l’abbreviazione di elemento ed è relativo all’elemento padre (em) o alla radice (rem). La radice è l'elemento html.
1em o 1rem corrisponde alla dimensione dell'elemento padre o radice, mentre 2em o 2em corrisponde al doppio della dimensione. Poiché le dimensioni dello schermo possono variare, in genere è consigliabile usare il ridimensionamento relativo quando possibile.
Prendiamo come esempio il seguente codice HTML e CSS:
<html>
<body>
<div>Sample text</div>
</body>
</html>
html {
font-size: 18px;
}
div {
font-size: 14px;
}
Se l'elemento div è di 14 pixel perché l'elemento 1em padre è div e impostato su 14px, mentre 1rem sarebbe 18 pixel perché la html radice è impostata su 18px.
1.5em per l’elemento div equivale a 21 pixel (14 * 1.5 = 21), e 1.5rem equivale a 27 pixel (18 * 1.5 = 27). È possibile usare em e rem per assicurarsi che il resto della pagina venga ridimensionato quando si aggiornano le dimensioni dell’elemento padre o della radice.
Colori
Il colore del carattere può essere impostato usando la proprietà color.
color può essere impostato su valori RGB (rosso, verde, blu) o su un colore come black o lightgray.
I valori RGB in CSS possono essere valori esadecimali preceduti da # oppure valori da 0 a 255 all'interno della funzione rgb. Per impostare il colore sulla tonalità predefinita di marrone, è necessario usare color: brown;. Per una tonalità personalizzata di viola, è possibile usare color: #7462e0.
/* named value */
div {
color: brown;
}
/* RGB hex value */
h1 {
color: #7462e0;
}
/* RGB function */
h2 {
color: rgb(105, 6, 19);
}
Importante
Quando si selezionano i colori, è fondamentale considerare chi ha problemi di percezione cromatica. È possibile usare strumenti come Color Safe possono assistere nella scelta di colori contrastanti, assicurando l'accessibilità del sito a tutti gli utenti.
Come si può immaginare, ci sono decine di colori disponibili e i valori RGB offrono un set infinito di opzioni. Gli editor come vscode.dev o Visual Studio Code possono aiutare a identificare i valori di colore disponibili. Entrambi gli editor mostrano un'anteprima del campione di colore nel CSS. Se passi il mouse sopra il campione, ti viene presentato un selettore di colore che puoi utilizzare per impostare il colore che desideri.
