I Fogli di Stile (CSS) di Web-Link: Tutto per la costruzione delle tue pagine web

Pubblicità

Sharing is caring!

Pubblicità

CSSVisita il sito di Web-Link

 
Menù Argomenti
Home Page Web-Link
Introduzione
Sintassi
In Linea
Nella Pagina
Nel Foglio Esterno
Le Classi
I Selettori ID
La Grafica
I Links
Attributi di Testo
Attrib. Carattere
Attrib. Colore Sfondo
Attrib. di Posizione
Parametri
Conclusioni
Forum di supporto

Valid CSS!

Valid HTML 4.01 Transitional

  Rev. 3.0 – Agosto 2005    Ver. 1.0 – Novembre 1999

In linea  o meglio 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, essendo questa scelta voluta per un solo paragrafo, il modo più comodo e rapido è quello di associare lo stile al solo elemento <p> interessato in quel punto preciso del documento.

Questo esempio pratico chiarirà sicuramente meglio:

<p style=”text-align: justify; text-indent: 12px;”>

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 infatti determina anche la chiusura (e quindi la fine) dello stile, per cui meglio prendere fin da subito la sana abitudine di chiudere sempre l’elemento (tag) aperto.

Si noti come lo stile sia stato associato all’elemento <p>, semplicemente avendo introdotto lo stile 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 la facile possibilità di personalizzare quasi tutti gli elementi di html, anche quelli che non piacciono o servono a poco e magari proprio per questo non vengono quasi mai adoperati.

Con i CSS si adoperano due elementi in particolare di html che non hanno altro scopo se non quello di fare da “contenitore”, questi due elementi infatti non producono alcun effetto se adoperati da soli ma ad essi è possibile associare tutti vari styli, e sono rispettivamente:

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

Avrei potuto ottenere la stessa cosa usando un contenitore <div> a questo modo:

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

La differenza fra <div> e <span> consiste nel fatto che DIV crea un ritorno a capo quindi è preferibile per interi paragrafi o immagini da posizionare sullo schermo mentre SPAN si lascia utilizzare all’interno dei paragrafi stessi e magari per modificare una parte del testo che lo compone senza causare un ritorno a capo.

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

<p>
<div style=”text-align: justify; text-indent: 12px;”> testo del paragrafo </div>
</p>

Continua: Style incorporato nella pagina

    Andrea Bianchi 
   

per stampare questa pagina


Potete fare domande e discutere l’argomento sul Forum gratuito di supporto.

© Andrea Bianchi 1997 ~ 2006

Valid CSS!

Valid HTML 4.01 Transitional

Pubblicità
shares