| Il futuro è già iniziato!!! | Gratisfree.it |
Corso di CSS - A cura di WebLink
| WEBFORM |
 |
 |
||||||||||||||||||||||||||||||
lll
lll
|
I CSS
Benvenuto/a, 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. 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 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 . 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. 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. 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.
****************** Copyright© 2000 GratisFree. E' vietata qualsiasi riproduzione di queste pagine. Tutti i contenuti e i marchi citati in queste pagine sono copyrights dei rispettivi proprietari.Tali materiali vengono utilizzati ai soli fini di informazione e documentazione. Cercheremo di inserire per quanto possibile informazioni aggiornate, ma non garantiamo circa la loro accuratezza o completezza. In nessun caso potremmo essere ritenuti responsabili circa eventuali danni causati dalle notizie in generale riportate nel sito. GratisFree non è collegato ai siti recensiti e non è responsabile in nessun caso del loro contenuto. Se pensate che sia stato violato qualche copyright avvertite mandando una e-mail, verranno immediatamente eliminate le parti indicate. |
lll
|
|||||||||||||||||||||||||||||
| . |  |
DISCLAIMER |  |
. | |||||||||||||||||||||||||||
| Copyright 1998-2000 by Mario C. - Fiumicino ROMA. All Rights Reserved. |
