Tag style HTML: come gestire l’aspetto degli elementi
La redazione di IONOS4 mins
Con il tag HTML “style” definite l’aspetto dei singoli elementi di un sito web. Nell’HTML, il tag style viene inserito nell’intestazione e prima di eventuali script, integrando gli stili CSS globali. A questo scopo, è compatibile con diversi attributi HTML.
Per cosa viene utilizzato il tag style HTML?
Il tag style HTML vi consente di creare fogli di stile per un intero documento. Lo scopo del tag style HTML è, da un lato, quello di definire con precisione l’aspetto dei singoli elementi di un sito web e quindi di renderli uniformi. Dall’altro, il metodo può venire utilizzato in combinazione con gli attributi HTML allo scopo di ottimizzare il sito web per determinati dispositivi. Inoltre, il tag style viene utilizzato per collegare CSS nei documenti HTML. All’interno dell’elemento è anche possibile specificare come deve essere reso il contenuto del sito web. La ricostruzione della pagina nel browser avviene quindi molto più velocemente, poiché non è necessario caricare prima l’intero file CSS.
Com’è strutturato il tag style HTML?
Il tag style nell’HTML viene visualizzato all’interno dell’elemento head. Diversi elementi possono essere inseriti nel tag style HTML di un sito web. Per una struttura più veloce possibile e per facilitare la visualizzazione da parte dei rispettivi browser, il tag style viene inserito nell’HTML prima di qualsiasi script del sito web. Dall’introduzione di HTML 5, non è più obbligatorio utilizzare l’attributo <style type="text/css">. Tuttavia, il contenuto è sempre collocato tra il tag <style> iniziale e il tag <style> finale. Di seguito un esempio:
<!DOCTYPE html>
<html>
<head>
<title>Un esempio di utilizzo del tag style HTML</title>
<style>
h1 { color: #000000; }
p { color: #0A06EF; }
</style>
</head>
<body>
<h1>Un esempio di intestazione per il vostro sito web</h1>
<p>Un esempio di testo per il primo paragrafo</p>
</body>
</html>In questo caso, il tag style HTML fa sì che, nel documento corrispondente, l’intestazione “Un esempio di intestazione per il vostro sito web” venga visualizzata in nero e il primo paragrafo (“Un esempio di testo per il primo paragrafo”) venga visualizzato in blu scuro. Oltre al colore, è possibile specificare anche la dimensione o il carattere.
Quali attributi sono compatibili con il tag style HTML?
Alcuni attributi possono essere utilizzati in combinazione con il tag style HTML. Questi includono tutti gli attributi globali e tutti gli attributi event. Gli attributi più comuni per il tag style HTML sono i seguenti:
| Attributo | Valore | Descrizione |
| dir | auto, rtl, ltr | L’attributo universale dir indica la direzione di scrittura del testo. |
| height | Pixel | L’attributo height specifica l’altezza di un elemento. |
| id | Una stringa che non deve essere vuota e non deve contenere spazi | Tramite id viene definito un ID univoco per un elemento HTML. |
| lang | Abbreviazione linguistica | L’attributo universale lang definisce la lingua all’interno del documento o dell’elemento. |
| media | all, aural, braille, handheld, projection, print, screen, tty, tv | L’attributo media definisce per quale dispositivo deve essere ottimizzato il documento corrispondente. |
| width | Pixel | L’attributo width definisce la larghezza di un elemento. |
| xml:space | preserve, default | L’attributo xml:space definisce come devono essere interpretati gli spazi nel testo di partenza. |
Gli attributi scoped e type non vengono più utilizzati.
Qui trovate un esempio di collegamento del tag style HTML con un attributo:
<style media="screen">
h1 { color: #000000; }
p { color: #0A06EF; }
body { background-color: #FFFFFF; }
</style>Questo codice definisce che per tutti gli schermi il titolo è nero, il testo del paragrafo è blu scuro e lo sfondo è bianco.
Tag style HTML: uno strumento utile per tutti i siti web
Sia che creiate siti web da molto tempo sia che abbiate appena cominciato a imparare il CSS, il tag style HTML è uno strumento semplice e utile per definire l’aspetto di un documento e dei suoi singoli elementi. Alla fine, vi risulterà più semplice costruire un sito web in modo ordinato e ben strutturato. Se desiderate usare anche file CCS esterni, utilizzate il tag link.
Il vostro sito web proprio come lo desiderate? È facile! Con le soluzioni web come MyWebsite Now, IONOS vi offre tutto ciò di cui avete bisogno. Progettate il vostro sito web personalmente, senza bisogno di grandi conoscenze preliminari, oppure lasciatevi aiutare dal nostro team di esperte ed esperti.
