Buonanotte sono le ore 05:47:13 del 11/11/2024
Ranking-Hits - Benvenuto/a su Gratisfree.it il portale Italiano del freeware!!!

CORSI CSS
ESEMPI di BASE per Programmare in CSS

Intro
Benvenuto/a, su questa pagina web, dedicata ai fogli di style o CSS. Non ha certo la pretesa di insegnare le molteplici tecniche legate a questo nuovo modo di programmare le pagine web, vuole molto più semplicemente essere un'introduzione, che renda l'idea di cosa siano, come si adoperano, e a cosa servono i CSS. I più attenti avranno forse già notato l'impaginazione di questo documento, la giustificazione del testo, i suoi margini dai bordi e i vari rientri, bene, tutte cose definite una sola volta in un foglio di stile. Comodo no?:
I CSS

I CSS I CSS ovvero Cascading Style Sheets: Se ne sente parlare spesso e molti non sanno neppure cosa siano, servono per migliorare l'aspetto grafico di una pagina web, superando quelli che erano considerati i limiti di html 3.02. Tanto per fare un banale esempio è infatti possibile giustificare il testo, stabilirne i rientri e l' identizione, non ci sono più limiti alle dimensioni dei caratteri ed al loro posizionamento sullo schermo... insomma se non ci fossero andrebbero inventati. Non per ultimo l'enorme risparmio di tempo e di energie in fase di modifica, provate ad immaginare un sito, composto da decine di pagine web che fanno tutte riferimento ad un unico foglio di stile, sarà sufficiente una modifica all'interno di quel foglio per vedere immediatamente modificate tutte le altre pagine. A questo punto viene da chiedersi perchè una cosa così utile e pratica non riesce ad avere il successo che meriterebbe? Presto spiegato: non tutti i browser li supportano, e fra quelli che li supportano ci sono differenze non da poco, così c'è chi ancora preferisce mantenere i tradizionali metodi, quelli che evitano a qualche vecchio o incompatibile browser di poter visualizzare una pagina completamente diversa da quella voluta. Come si adoperano; sono tre i modi fondamentali di usare i css, dipende solo dalle esigenze: 1)In linea 2)In una pagina autonoma a stile incorporato 3)Nel collegamento ad un foglio di stile esterno.
CSS in linea

Quando si ha la necessità che lo stile sia relativo al solo blocco di testo che stiamo trattando, per esempio un paragrafo, che debba avere determinate caratteristiche senza però che queste possano influenzare in alcun modo gli altri paragrafi uguali all'interno dello stesso documento. Immaginiamo una leggera identizione con testo giustificato, il modo più comodo e rapido è quello di associare lo stile al al solo elemento (tag) interessato, in questo caso, + lo stile voluto. Un esempio chiarirà sicuramente meglio: <p style="text-align: justify; text-indent: 12px;"> Tutto ciò che sarà scritto tra l'elemento <p> (paragrafo) e fino alla sua chiusura avrà come stile: giustificato con una identizione di 12 pixel; inutile aggiungere che si possono combinare fra di loro tutti i vari stili, la sintassi è racchiudere fra doppi apici le istruzioni separandole da un punto e virgola.
CSS Incorporati

Quando allo stile fanno riferimento diversi elementi, sarebbe dispersivo, oltre che laborioso, definire lo stesso stile ad ognuno di essi; meglio dunque farlo ad inizio pagina, ed una sola volta per tutti, in modo che tutti gli elementi interssati possano seguire quello stile. In questo caso le istruzioni dovranno essere racchiuse dagli elementi (tags) <style> e </style> posti ad inizio pagina fra i tags <head> e </head> Da notare la novità delle parentesi graffe che delimitano il blocco di istruzioni relativo all'elemento interessato. Rifacendomi all'esempio precedente: <style type="text/css"> <!-- p {text-align: justify; text-indent: 12px;} --> </b>Adesso si potrà adoperare la consueta forma <p> e </p> tutto ciò che sarà scritto all'interno di quel paragrafo avrà lo stile impostato ad inizio documento. Per questo motivo è molto importante non dimenticare di chiudere l'elemento </p> non essendo infatti obbligatorio in html lo diventa invece quando si fa uso dei CSS, non fosse altro per evitare sgradite sorprese. La mancanza della chiusura stile potrebbe indurre il browser ad estendere i parametri a tutto il resto del documento. I due e elementi <!-- -->servono invece a far ignorare il blocco di istruzioni a quei browser che non li supportano. Nell'esempio ho adoperato il tag <p> ma voi potete mettere qualsiasi altro tag valido di html. Inutile dirvi che si potrebbero ridefinire i tags <h 1 2 3> ecc sarebbe come avere dei nuovi comandi, o meglio, dei nuovi tags a disposizione.
CSS esterni

>Se gli stili definiti sono molti e molte sono anche le diverse pagine web che ne fanno uso, la cosa migliore è creare un foglio di style esterno collegato, che contenga tutte le definizioni degli stili associati e le varie classi. Tutte le pagine che incorporano quel foglio di stile ne faranno uso, assumendo quando questo e quando quello style. Adesso provate ad immaginare cosa accadrebbe nel caso in cui si decidesse di fare una modifica a tutto il sito... non fosse altro che per cambiare il font, o colore o qualsiasi altra cosa, sarà sufficiente apportare la modifica una sola volta al relativo foglio di style. Comodo no? Sono finiti i tempi in cui si passavano ore ed ore a rielaborare decine di pagine per non dire a volte centinaia. Per creare questo foglio esterno, è sufficiente un editor, lo stesso editor che adoperate per html, meglio ancora se uno specifico per css, ma anche il wordpad o notepad a corredo di windows andranno benissimo, l'importante è salvare il tutto in formato ascii. Notare che le varie voci si trovano racchiuse fra parentesi graffe e sono separate a fine riga da un ; punto e virgola in questo modo: p { text-align: justify; text-indent: 12px; } Le parentesi graffe, per le tastiere italiane, si ottengono con i codici ascii 123 e 125, quindi, tenendo premuto il tasto ALT sinistro, si digiti dal tastierino numerico il relativo numero, senza rilasciare il tasto ALT se non a fine digitazione... spero di essermi spiegato :-)) Salvare poi il tutto in un file, con nome a piacere, l'importante che abbia come estensione finale .css Richiamare il file così creato, dall'interno della pagina web con la seguente sintassi: <link rel=stylesheet href="nome_assegnato.css" type="text/css"> Avendo cura di posizionarlo fra i tags <head> e </head> del file html. Ovviamente nome_assegnato.css sarà il nome che avrete deciso di assegnare al file stesso.
Le classi

Se avete deciso per un foglio di style esterno, non è detto che dobbiate necessariamente rielaborare tutti i tags di Html, anzi; potete invece aggiungere delle le classi, molto più comode, potete aggiungere tutte quelle che vorrete, sfruttando così la vera potenzialità dei CSS. E' infatti possibile definire delle proprie classi di stile, personalizzandole come meglio non si potrebbe, per poi richiamarle dai vari elementi di html anche nel caso in cui si tratti dello stesso elemento, come dire: ottengo dallo stesso paragrafo risultati diversi a seconda della classe ad esso associata! Esempio: Definiamo una classe, per farlo è sufficiente richiamare il file esterno e creare al suo interno un nome preceduto da un punto, quale nome? decidetelo voi. Vediamo praticamente come fare, immaginiamo di volere qualcosa che sia fatto solo per la firma, quella che di solito è posta ad ogni fine pagina. Creiamo una classe che faccia uso di un font piccolo ma leggibile, con colore a piacere e magari in bella evidenza. Adoperate lo stesso editor usato in precedenza per creare il file .css Chiameremo la nostra classe firma, quindi assegneremo a questa i vari attributi: .firma { font-family : Verdana,Arial,Helvetica; color : #ff0000; font-size : 10pt; text-align : center; font-weight : lighter; font-style : italic; } Si noti che fra il punto iniziale e la scritta firma non ci sono spazi. Andiamo a vedere cosa fanno le singole voci inserite in questa classe firma:font-family : Verdana,Arial,Helvetica; La nostra firma adopererà il font verdana (il primo dichiarato), se questo non fosse installato sul PC del visitatore si cercherà Arial e così via; si possono specificare fino a tre fonts, nel caso in cui nessuno dei tre fosse installato, verrà visualizzato quello standard di default. color : #ff0000; Colore rosso, si possono esprimere i colori in formato esadecimale, facendoli precedere dal segno pound # cancelletto, oppure scrivendo il relativo nome in lingua inglese, anche red avrebbe dato lo stesso risultato. font-size : 10pt; Dimensioni del font 10 punti, potevamo esprimere il valore in pixel, centimetri ed altro ancora. In punti rende meglio e si adatta perfettamente alla risoluzione video, qualunque essa sia. Non ci sono limiti alle dimensioni. text-align : center; Allineamento del testo, in questo caso centrato, si poteva mettere destro, sinistro o giustificato; adoperando i relativi termini in lingua inglese: left, right, justify. font-weight: lighter; Consistenza del font, lighter; avremo potuto adoperare: normal, bolder, bold o anche numeri: 400, 500 ecc ecc. font-style: italic; Stile Italico, avremo potuto adoperare :normal, oblique.
Richiamare le classi 

Adesso la classe è pronta, non resta che richiamarla ogni volta che serve, come ? Semplice, ogni tag di HTML supporta l'attributo class, quindi dovendo scrivere una parte di testo, con gli attributi appena inseriti nella classe firma, sarà sufficiente assegnare questa "firma" al tag prescelto, nel nostro caso <p>
. Tutto ciò che verrà scritto in questo paragrafo, rispetterà i parametri della classe, fino alla relativa chiusura del tag </p> Avrete capito che anche adoperando sempre lo stesso elemento <p> si possono avere paragrafi completamente diversi, da qui la vera potenza svolta dai fogli di style. Un esempio chiarirà ultriormente tutto quanto: <p class="firma">questo testo rispetta gli attributi della classe firma </b>Questo il risultato: questo testo rispetta gli attributi della classe firma. Non è poi così difficile vero? Potete creare tutte le classi che vorrete ed assegnare a loro i parametri più svariati. Se all'interno del vostro sito, fatto di decine di pagine html, vi fosse anche una sola piccole parte di testo che non vi convince, sarà sufficiente assegnargli una classe o crearne una nuova.
Conclusione  

Non ho altro da dire, non vi resta che provare, ho voluto rendere gli esempi estremamente semplici, in quanto lo scopo di questo mio breve corso è solo quello di far capire cosa siano e come farne uso. Nessuno, neppure io che li adopero molto, può ricordare a memoria tutte le varie combinazioni possibili, dal momento poi che sono davvero tante. Per questo motivo ci aiutano gli editors CSS che con la loro interfaccia grafica, ne permettono una facile creazione e modifica; basta spuntare semplicemente la casella relativa al tags da modificare per vedere creato uno stile. Anche se solo in lingua inglese, date un'occhiata alle specifiche del W3C, lì troverete tutti gii attributi supportati. Se siete rimasti affascinati da questa tecnica, non perdetevi le specifiche per i nuovi CSS2. Se poi avete intenzione di fare uso di DHTML (Html dynamico), dovete necessariamente conoscere i fogli di style, sono loro che insieme a linguaggi di scriptin danno vita a questo linguaggio. Per il momento mi fermerei qui, sperando di aver soddisfatto molte delle richieste che ricevo anche privatamente su questo argomento. Non escludo la possibilità di tornarci sopra ampliando l'argomento. Prima di concludere, vorrei spiegarvi come fare per eliminare la sottolineatura dei links e come questi possano cambiare di colore al passaggio del puntatore del mouse. Posizionate questa definizione di stile fra i tags <head> e </head> in modo che tutto il documento ne subisca l'effetto <style type="text/css"> <!-- A:LINK {text-decoration : none} A:VISITED {text-decoration : none; Color : green} A:HOVER {Color: red} --> </b>Risultato: sono un link non sottolineato. Dimenticavo di dirvi che HOVER, quello che cambia colore, non è riconosciuto da tutti i browser, Netscape è uno di quelli. Solo gli utenti Microsoft Internet Explorer potranno vederlo. Non vi piace il colore rosso? Sostituite red con qualsiasi altro nome valido per i colori, oppure, allo stesso modo divertitevi a cambiare il colore dei link visitati.



DISCLAIMER
Tutto il materiale pubblicato in questo sito � dei rispettivi proprietari o � stato reperito in rete sprovvisto di copyright. Se ritenete che vi siano state delle violazioni in tal senso, segnalatelo scrivendo al WEBMASTER lasciando inalterato l'oggetto. Il materiale segnalato verr� immediatamente tolto.

Page loaded in 1731300433.902077 seconds.