Html: style, span, div

I tags DIV e SPAN
LO STYLE DI UN TAG. IL PARAMETRO STYLE
I tag div e span sono entrambi dei contenitori generici; possono contenere immagini, testo
e altri oggetti. Sono simili ma con alcune differenze.
'Stile' è l'insieme delle caratteristiche di una pagina web.
In HTML si può definire lo stile di ogni tag HTML all'interno del tag stesso usando il
parametro style. (è possibile anche definire uno 'stile' all'inizio della pagina per uno o più
tag o in un file a parte, detto foglio di stile a cascata - cascade style sheet - con estensione
.css; ogni pagina che richiamerà questo file userà lo stile in esso definito).
Esempio1.
Il parametro style può essere inserito all'interno di qualsiasi tag HTML. Il tag <span> non
ha altro effetto che quello definito dal suo stile (è in pratica un contenitore per lo stile).
HTML
Questo è un testo di cui <span>una parte</span> è nel tag.
EFFETTO:
Questo è un testo di cui una parte è di un tag.
HTML
Questo è un testo di cui <div>una parte</div> è nel tag.
EFFETTO:
Questo è un testo di cui
una parte
è racchiusa all'interno di un tag.
É come se si fosse un ritorno a capo prima del tag 'div' e dopo la sua chiusura (è simile
cioè al tag 'p', il quale crea un distacco dal testo che lo segue).
In pratica: il tag 'span' è un elemento creato principalmente per contenere parte di testi
mentre il tag 'div' considera tutta la riga a cui appartiene.
Esempio2.
Questo codice (la proprietà background-color di CSS specifica il colore di sfondo di un
elemento, quindi "evidenzia" il tag):
HTML
<div style="background-color: red;">testo del tag <i>div</i></div><br>
<span style="background-color: yellow;">testo del span<i>div</i></span>
EFFETTO:
nel quale sono visibili le dimensioni occupate da ciascun tag.
Alcune proprietà comuni:
color: definisce il colore del testo; si possono usare alcune parole predefinite,
p.es. color: red; oppure i valori esadecimali; prime due cifre da 00 a ff danno la
dose di rosso, le seconde due cifre la dose di verde, le terze tre cifre la dose di blu
p.es. color: #ff0000; equivale a color: red;.
background-color: definisce il colore dello sfondo con la stessa sintassi di color.
font-size: definisce la dimensione del carattere usato; si può definire in modo
assoluto usando diverse unità di misura (p.es. mm cm px per pixel ...) p.es. fontsize: 16px;, oppure definire in modo relativo p.es. font-size: 120%;.
font-style: definisce lo stile del carattere; può essere normal, italic, oblique in
pratica corsivo leggero o più inclinato.
font-weight: definisce il peso del carattere usato; può essere normal, bold,
bolder, lighter oppure un numero da 100 (molto sottile) a 900 (grassetto forte).
border: definisce un bordo intorno all'oggetto HTML; si può definire lo spessore
(width) come thin, medium, thick oppure un numero da 1px in su; lo stile che può
essere solid, dotted, dashed, double ... il colore con la stessa sintassi di cui
sopra; p.es. border-width: 1px; - border-style: dotted; - border-color: red; o
anche in un colpo solo: border: 1px dotted red;
border-top, border-bottom, border-right, border-left: con la stessa sintassi di
cui sopra, è possibile definire un bordo solo su un lato del rettangolo di confine.