In linea quando si ha la necessità che lo stile sia relativo al solo blocco di codice che stiamo trattando, senza cioè che questo vada ad influire su altre parti dello stesso documento o pagina web.

Per esempio un paragrafo <p> che debba avere determinate caratteristiche ma con la certezza che queste non siano estese a tutti gli altri paragrafi <p> contenuti all'interno dello stesso documento.

Per riprendere lo stile dell'esempio precedente, abbiamo detto di volere una leggera indentazione con testo giustificato, volendo applicare questa scelta ad un solo paragrafo, il modo più comodo e rapido è quello di associare lo stile al solo elemento <p> interessato.

Questo esempio pratico chiarirà sicuramente meglio:

Tutto ciò che sarà scritto tra l'elemento di apertura <p style="... >(paragrafo) e fino al suo elemento di chiusura </p> avrà come stile: giustificato con una indentazione di 12 pixel;

Si possono combinare fra di loro più stili, la sintassi corretta prevede di racchiudere il tutto fra doppi apici separando i vari attributi di stile con il punto e virgola.

I più attenti si saranno accorti dell'importanza di fare uso dell'elemento (tag) di chiusura, in questo caso il </p> che mentre per HTML non era obbligatorio, lo diventa invece nel caso dei CSS. La chiusura di questo elemento determina infatti anche la chiusura (e quindi la fine) dello stile, per cui meglio prendere fin da subito la buona abitudine di chiudere sempre l'elemento (tag) aperto.

Si noti come lo stile sia stato associato all'elemento <p>, semplicemente avendo introdotto l'attributo style all'interno delle sue stesse parentesi angolari <>. Allo stesso identico modo avrebbe potuto essere associato a qualsiasi altro elemento valido di HTML (sono esclusi elementi come <br>) ne consegue una facile personalizzazione di tutti (o quasi) gli elementi di html, anche di quelli che non piacciono molto o servono a poco e magari proprio per questo non vengono mai usati.

Con i CSS si adoperano in particolare due elementi di html che non hanno altro scopo se non quello di fare da "contenitore", questi due elementi non producono alcun effetto se adoperati da soli ma ad essi è possibile associare tutti gli styli. Si tratta rispettivamente di:

<div></div> e <span></span>

Dove <div> si applica ad un blocco di codice e provoca un ritorno a capo con la sua chiusura </div> mentre <span> può essere applicato in qualsiasi punto del documento (anche all'interno di un <div>) senza che questo ne alteri la struttura, è praticamente trasparente al resto del codice e si limita semplicemente a cambiare gli stili ad esso associati.

Per il nostro esempio sopra, avrei potuto ottenere la stessa cosa usando un contenitore <div> in questo modo:

Tenete sempre bene in considerazione la differenza fra <div> e <span>, del fatto che div crea un ritorno a capo ed è quindi preferibile per interi paragrafi o immagini da posizionare sullo schermo, mentre span si lascia utilizzare all'interno dei paragrafi stessi, magari per modificare soltanto parti del testo che lo compongono senza provocare alterazioni come il ritorno a capo.

Da notare infine la possibilità di nidificare fra loro più contenitori all'interno di elementi o di altri contenitori:

Questo il risultato:

<div> assegna a tutto il blocco di testo, fino alla chiusura </div> un font di 10pt ed un colore verde, il <p> assegna al paragrafo un font più grande: 12 pt ed un allineamento del testo centrale, la chiusura di </p> mette fine al testo allineato al centro e alle dimensioni 12pt e tutto torna come definito dal div iniziale e resta valido fino alla sua chiusura </div>

Andrea Bianchi

Continua: Style incorporato nella pagina

  Potete fare domande e discutere l'argomento sul Forum