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

La sintassi Abbiamo detto che hanno un loro elemento (tag) che viene specificato in html, si tratta dell’elemento: <style> con relativa chiusura </style>. Questo elemento serve per informare il browser che si tratta di stili che apporteranno le dovute modifiche agli elementi di html in esso definiti. La dichiarazione di style deve essere collocata all’interno dei tags <head> e </head> della pagina web, unica eccezione per le definizioni direttamente in linea dove basta il solo style come parametro del tag utilizzato (lo vedremo più avanti).

Abbiamo detto che fondamentalmente sono tre i modi di usare i css, quale sia il migliore lo lascio decidere a voi, sappiate che l’uso di un modo non esclude gli altri due, al contrario si combinano a perfezione, dipende esclusivamente da voi stessi e dal vostro modo di organizzarvi oltre che dalle reali esigenze:

1.   Direttamente In linea
2.   Ad inizio pagina a stile incorporato
3.   Nel collegamento ad un foglio di stile esterno

Ognuno di questi tre possibili modi differisce leggermente dall’altro, lo vedremo più avanti quando li analizzeremo uno per uno dettagliatamente.

Le regole comuni sono invece quelle che gli attributi devono essere inseriti all’interno di parentesi graffe { } laddove in HTML verrebbe usato un “=” (uguale) viene invece usato “:” (due punti). Argomenti consecutivi sono separati da “;” (punto e virgola) invece che da “,” (virgola).

Inoltre molti argomenti sono divisi da – (trattino) che è parte integrante del nome stesso.

Vediamo un possibile style. Immaginiamo di volere assegnare al nostro testo una leggera indentazione (12 pixel) con allineamento giustificato che tradotto significa avere un leggero rientro del testo ad inizio paragrafo con allineamento poi su entrambi i lati, esattamente come quello che state vedendo adesso in questo paragrafo.

<style>
P {text-align: justify; text-indent: 12px}
<style>

Abbiamo adoperato il tag <P> di html associandogli l’attributo text-align con il parametro justify per il testo giustificato, mentre l’attributo text-indent con il parametro 12px per l’indentazione ad inizio paragrafo.

Da notare in questa fase di apprendimento soltanto la sintassi: Elemento, apri parentesi graffa, attributo, due punti, parametro, punto e virgola, attributo, due punti, parametro, chiudi parentesi graffa.

Le parentesi graffe non sono presenti nelle tastiere italiane, si possono ottenere con i codici ascii 123 e 125, praticamente tenendo premuto il tasto ALT sinistro, si digiti dal tastierino numerico (abilitato) il relativo numero, senza rilasciare il tasto ALT se non a fine digitazione… spero di essermi spiegato, oppure tenendo premuto il tasto Alt Gr (a destra) contemporaneamente al tasto shift (maiuscole) premere uno dei due tasti delle parentesi quadrate [ ] che si ottengono con ALT Gr ma che se combinati con l’aggiunta del tasto Shift sono tradotte invece in parentesi graffe {}.

Per conoscere quali siano gli attributi e i relativi parametri possibili, vi rimando alle voci del menù laterale gli attributi di stile e i parametri dove è possibile vedere un’ampia panoramica più o meno completa di quelli che sono i più comuni e di conseguenza i più adoperati.

Abbiamo detto che uno stile può essere associato ad un elemento valido di html, per cui se associamo il nostro stile all’elemento <body> sarà come aver definito uno style per tutta la pagina web, essendo infatti body in html l’elemento che comprende tutto il corpo della pagina (nell’esempio precedente ci eravamo limitati al solo tag P di paragrafo). Alcuni esempi di possibili stili:

<style>
body {font-size: 10pt; color: Blue;} strong {font-size: 12pt; color: Red;} em {font-size: 8pt; font-style: italic; color: Green;} </style>

Vediamo i tre esempi sopra, il primo: body ha un font formato da 10 punti e di colore blu scuro, sarebbe stato valido anche una specificazione del colore con notazione esadecimale: #000099 (personalmente lo preferisco) che corrisponde al blu per cui tutto il testo all’interno di quella pagina seguirà questo stile perché l’elemento di html body si riferisce a tutto il documento, praticamente quello che ho fatto io con questa pagina.

strong (bold in html) aumenta il font di 2 punti rispetto a quello definito in body così da evidenziarlo maggiormente ed in più ne cambia anche il colore passando dal blu al rosso.

em (Italic in html) mantiene lo stile Italic ma ne riduce il font di due punti (8) rispetto a quello standard definito nel body (10) e gli cambia colore passando al verde (Green).

E’ anche possibile associare le stesse definizioni a più elementi:

<style>
h1,h2,h3,h4,h5,h6 {font-size: 10pt; color: Blue;} </style>

In questo caso l’utilizzo di uno qualunque dei tag: h1, h2, h3, h4, h5, h6 produrrà lo stesso identico effetto: font di colore blu dimensione 10 punti.

Bene, se avete capito il meccanismo, se vi risulta tutto quanto chiaro, non resta che passare alle varie tecniche per associare lo stile ai diversi elementi html e per fare questo vi ricordo che i modi possibili sono tre.
Iniziamo da quello di sicuro il più semplice ed immediato, lo stile in linea.

Continua: Style in linea

    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
%d blogger hanno fatto clic su Mi Piace per questo: