Menù Principale

Chiudi il Webmaster

Chiudi Politica a Latisana

Chiudi Links e Banners

Chiudi Pubblicità Amici

WebTools - Scripts

Chiudi Dossier Antivirus

Chiudi Grafica & Design

Chiudi Guida PHP

Chiudi Guida ai Css

Chiudi Guide al Javascript

Chiudi HTML - XHTML - XML

Chiudi Software Programmi Utili

Chiudi Tools Webmaster

Chiudi Utilità Varie

Chiudi Utilità e Script in Flash

Chiudi Video Guide Manuali

Altri Miei Siti

Pubblicità Amici !
LegaNord Latisana anclignano pertegada calcio yorkshire susy


Don.Severino Valvason
il vostro Webmaster
Webmaster - Infos
Mini Tchat
Entra in Chat
Photo Gallery

Guida ai Css - Css. in Linea

CSS in linea

quando si ha la necessità di applicare lo stile al solo blocco o parte di codice che stiamo trattando, senza cioè che questo stile vada ad influire su altre parti della stessa 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 della stessa pagina web.

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:

<p style="text-align: justify; text-indent: 12px;">... </p>

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 nell'uso 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 tutti gli elementi (tags) aperti.

Si noti come lo stile in linea sia stato associato all'elemento <p>, semplicemente avendo introdotto l'attributo style all'interno delle stesse parentesi angolari <> senza bisogno di specificare type css/txt visto in precedenza.
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 quelli che non piacciono molto o servono a poco e magari proprio per questo non vengono quasi mai adoperati.

Con i CSS si adoperano in modo particolare due elementi di html: div e span che altrimenti non avrebbero molta ragione per essere utilizzati visto che fanno solo da "contenitore", questi due elementi non producono alcun effetto se adoperati da soli ma ad essi è possibile associare tutti i vari styli. Vediamoli nel dettaglio, si tratta rispettivamente di:

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

<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 visto che non provoca alcun ritorno a capo limitandosi praticamente a cambiare soltanto la parte di testo ad esso associata.

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

<div style="text-align: justify; text-indent: 12px;"> testo </div>

Tenete sempre bene in considerazione la differenza fra <div> e <span>, del fatto che div può essere usato come piccolo o grande contenitore, la sua chiusura provoca un ritorno a capo ed è quindi usato per interi blocchi di codice, siano essi paragrafi di testo o >immagini< da posizionare sullo schermo, mentre span si utilizza all'interno dei paragrafi stessi e magari per modificare soltanto parti di testo che lo compongono senza provocare alterazioni alla struttura come il ritorno a capo. Mettere span dentro a div è corretto, mettere div dentro span è sbagliatissimo.

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

<div style="font-size: 10pt; color:#006600;">testo
di prova con stile div
<p style=font-size: 12pt; text-align: center;">testo

del paragrafo con stile div + stile p
testo allineato al centro 12 pt</p>
testo di prova stile div senza lo stile di p
</div>

Questo il risultato:

testo di prova stile div = 10pt colore verde

testo del paragrafo con stile div + stile p
testo allineato al centro 12 pt

testo di prova stile div senza lo stile di p

<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 centrato, 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>

Volendo scrivere in rosso solo alcune parole senza alterare la struttura, si userà span che abbiamo detto è un contenitore in linea che non provoca alterazioni se non per quello che viene dichiarato al suo interno.


<div style="font-size: 10pt; color:#006600;">
testo di prova con stile div
<p style="font-size: 12pt; text-align: center;">testo

del paragrafo con stile div + stile p testo allineato al centro 12 pt e
<span style="color:#ff0000;">scritta
in rosso</span></p>
testo di prova stile div senza gli stili di p e di span
</div>

Questo il risultato:

testo di prova stile div = 10pt colore verde testo del paragrafo con stile div + stile p testo allineato al centro 12 pt e scritta in rosso testo di prova stile div senza gli stili di p e di span<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 centrato, al suo interno con <span> si definisce una parte di testo in rosso, la chiusura di </span>mette fine al testo rosso, quella di </p> mette fine allineato al centro con dimensioni 12pt e tutto torna come definito dal div precedente e resta valido fino alla sua chiusura </div>


Data creazione : 27/11/2021 @ 12:44
Ultima modifica : 27/11/2021 @ 12:44
Categoria : Guida ai Css
Pagina letta 88 volte


Stampa pagina Stampa pagina

 
Opinioni su questo articolo

Nessuno ha lasciato un commento.
Diventa il primo a farlo!

 
Comunicazioni del Webmaster !
 
Slideshow notice
  • tesseramento-online.jpg

    Tesseramento 2015 Lega Nord online

  • enea-codotto.jpg
 
Contatteci
Connessione...
 Lista utenti registrati Utenti : 117

Username:

Password:

[ Registrazione ]


Utente online:  Utente online:
Anonimi online:  Anonimi online: 5

Visite totali Visite totali: 1771671  

Webmaster - Infos

Ip: 54.175.165.101

NewsLetters
Per ricevere informazioni sulle novità di questo sito, puoi iscriverti alla nostra Newsletter.
Captcha
Ricopia il codice :
Traduction Site
Eventi Calendario
Sondaggio
cosa pensi del Sito ?
 
Eccellente !
Ottimo
nella Media
Boh.....
C'è di Meglio
Risultati
Visites

   visitatori

   visitatori online

^ Torna in alto ^