Unità CSS | Spiegato
I risultati di questo blog sono:
- Quali sono le unità CSS?
- Quali sono le unità di lunghezza assoluta in CSS?
- Come utilizzare le unità di lunghezza assoluta in CSS?
- Quali sono le unità di lunghezza relativa in CSS?
- Come utilizzare le unità di lunghezza relativa in CSS?
Quali sono le unità CSS?
Esistono varie unità in CSS che vengono utilizzate per indicare una lunghezza o per la misurazione della proprietà CSS. Ad esempio, in un file CSS, il "dimensione del font"Alla proprietà viene assegnato un valore di"25px", Che rappresenta il numero con l'unità"pixel"(PX). Inoltre, non dovrebbe esserci alcun spazio bianco tra il numero e l'unità di misurazione pertinente. Tuttavia, se il valore di lunghezza è 0, le unità possono essere escluse.
Le unità di lunghezza CSS sono di due tipi: relativo e assoluto.
Quali sono le unità di lunghezza assoluta in CSS?
Le unità di lunghezza assoluta dipendono da un'unità fisica reale. Normalmente hanno le stesse dimensioni su dispositivi diversi. Queste unità non sono consigliate per l'utilizzo sugli schermi perché la dimensione dello schermo varia. Tuttavia, vengono utilizzate le unità di lunghezza assoluta in cui è nota la dimensione dello schermo. Questi tipi di unità sono utili anche su compiti in cui la reattività non ha importanza.
Come utilizzare le unità di lunghezza assoluta in CSS?
Ci sono diverse unità assolute usate in CSS. Alcuni di loro sono mostrati di seguito:
| Unità | Descrizione |
| pt | Specifica la misurazione in punti. 1pt = 1/72 di 1 pollice. |
| In | Specifica la misurazione in pollici. 1in = 96px = 2.54 cm |
| Px | Specifica la misurazione nei pixel. 1px = 1/96th di un pollice. |
| cm | Specifica la misurazione in centimetri. |
Passiamo attraverso l'esempio in cui vengono utilizzate le unità di lunghezza assoluta.
Esempio: usando unità di lunghezza assoluta in CSS
In HTML, prima aggiungi un div con stile CSS in linea, usando "margine" E "imbottitura" proprietà. Poi il
Il tag viene posizionato per aggiungere un'intestazione alla pagina. Parecchi
I tag vengono aggiunti con il pertinente "dimensione del font"In numeri con unità diverse:
La proprietà "Size di carattere"
Font-Size: 20px
Font-Size: 20pt
Font-Size: 20in
Font-size: 20 cm
Font-Size: 20mm
Si può osservare che il testo con valori con lunghezze assolute CSS diverse è stato visualizzato nella pagina Web:
Quali sono le unità di lunghezza relativa in CSS?
In CSS, le unità di lunghezza relativa specificano la lunghezza rispetto alla proprietà di lunghezza corrispondente. Rispetto alle lunghezze assolute, le unità di lunghezza relativa sono molto migliori in quanto forniscono scala tra diversi mezzi di rendering.
Come utilizzare le unità di lunghezza relativa in CSS?
Qui, abbiamo arruolato alcune delle unità di lunghezza relativa principalmente utilizzate in CSS:
| Unità | Descrizione |
| VH | Visualizza altezza: relativo all'1% dell'altezza di visualizzazione |
| VW | Visualizza larghezza: relativo all'1% della larghezza di viewport |
| % | Percentuale: ha la dimensione in percentuale rispetto alla dimensione del genitore. |
| vmin | ViewPort Minimo: 1% delle dimensioni più piccole del Viewport. |
| vmax | Viewport Massimo: 1% delle dimensioni più grandi del Viewport. |
Esempio: usando le unità di lunghezza relativa in CSS
Usando lo stesso codice HTML, ora cambieremo solo il valore di "dimensione del font"Proprietà con le pertinenti unità di lunghezza relativa:
La proprietà "Size di carattere"
Font-Size: 3vh
Font-Size: 3ch
Font-Size: 3%
Font-Size: 3Rem
Font-size: 3vw
Produzione
Ecco come puoi utilizzare diverse unità CSS nei nostri file HTML.
Conclusione
Esistono due tipi di unità di lunghezza utilizzate in CSS: unità di lunghezza assoluta e unità di lunghezza relativa. Le lunghezze assolute non sono relative a nient'altro. Sono sempre gli stessi in ogni dimensione della finestra, ma le unità di lunghezza relativa sono sempre relative a qualcosa, come l'elemento genitore, il carattere o la dimensione. Questo articolo fornisce una guida completa sulle unità CSS, il tipo di unità di lunghezza CSS e come possono essere utilizzate.