Menù Principale

Chiudi il Webmaster

Chiudi Latisana Journal Notice

Chiudi Passatempo

Chiudi Sezione Erotica per Adulti

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

Visites

   visitatori

   visitatori online

Guida ai Css - introduzione

guida ai Css

I CSS ovvero Cascading Style Sheets

Flash Gallery photo

sono ormai diventati molto comuni sul web, e servono per migliorare l'aspetto estetico e al tempo stesso facilitare la creazione e/o la manutenzione di siti , grandi o piccoli che possano essere ; se combinati con un linguaggio di Scripting, quale il JavaScript , danno vita all' HTML Dinamico conosciuto anche come DHTML, consentendo di superare quelli che erano considerati i limiti di html standard. W3C - HTML4.01 - Markup Validation Service .
In questa Breve ed esauriente, descrizione dedicata ai fogli di style o CSS. Non o certo la pretesa di insegnare le molteplici tecniche legate a questo nuovo modo di programmare le pagine web, tenuto conto che anch' io sono l'ultimo arrivato, ma vuole con tutta semplicità essere una piccola introduzione , per rendere meglio l'idea di cosa siano, come si adoperano e a cosa servono i CSS , visto poi che sempre più siti ne fanno uso. E poi di queste guide in rete ne troverete a pacchi.
E' persino possibile creare delle vere e proprie animazioni sfruttando l'elevata versatilità offerta dal Posizionamento degli oggetti sullo schermo , siano essi grafici o no, posizionamento che è possibile fare con accurata precisione.
Tanto per rendere un po' meglio l'idea , non si limitano a giustificare il testo o a stabilirne i rientri. Pensate alle dimensioni dei caratteri dove non esistono più limiti. Parlando di immagini queste possono essere sovrapposte come se si trattasse di piani, ad ognuno è possibile assegnare una diversa priorità di visualizzazione per cui le possibilità offerte sono davvero notevoli.
Non tutti i browser li supportano , non allo stesso modo almeno , fra alcuni di questi ci sono differenze a volte davvero sorprendenti tali da scoraggiare chi ha deciso di farne uso.
Per prima cosa hanno un loro elemento (tag) che viene specificato in html , si tratta dell'elemento: <style> e relativa chiusura </style> questo elemento serve ad informare il browser che si tratta di stili e che questi apporteranno le dovute modifiche ai vari elementi (tags) di HTML definiti al suo interno , comprese immagini e links , dipende soltanto dalle combinazioni che se ne vorrà fare.
Fondamentalmente sono tre i modi di usare i CSS , quale sia il migliore dipende soltanto da voi , e dalle vostre reali esigenze :

NB Tenete presente che non tutti i Browser interpretano i Css allo stesso Modo.

► - Nel collegamento ad un foglio di stile esterno : ..
► - Direttamente in Linea nella Pagina : ..
► - Ad inizio pagina a stile incorporato : ..
► -


in Linea nella Pagina

In linea  o meglio quando si ha la necessità che lo stile sia relativo al solo blocco 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.

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 e resi conto dell'importanza di fare uso dell'elemento (tag) di chiusura, in questo caso </p> che mentre per HTML non era indispensabile, 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 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. Ne consegue la facile possibilità di personalizzare tutti gli elementi di html, anche quelli che non piacciono o servono a poco e magari proprio per questo motivo non vengono mai adoperati. Con i CSS si adoperano di solito due elementi 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>

Per cui si poteva ottenere la stessa cosa nidificando un contenitore all'interno dell'elemento P a questo modo:


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


Stile incorporato nella Pagina
 

Con style incorporato Cioè quando allo stesso stile fanno riferimento diversi elementi (tags) html. Sarebbe molto dispersivo, e laborioso, definire lo stesso stile più volte all'interno della stessa pagina quando poi servirebbe sempre per lo stesso identico scopo. Molto meglio definirlo una sola volta, ad inizio pagina. Così facendo tutti gli elementi interessati seguiranno quello stesso stile.
In questo caso le istruzioni non saranno più inserite all'interno del singolo elemento (tag) , ma ad inizio pagina dichiarate dagli elementi (tags) <style> e </style> posti all'interno della sezione <head> </head>
Questo metodo non impedisce però di fare uso anche di eventuali definizioni di stile in linea, le quali avrebbero priorità sulle dichiarazioni di stile inserite ad inizio pagina.


Un  Esempio semplice.

<head>
<style type="text/css">
<!--
p {
text-align : justify; 
text-indent : 12px;
}
-->
</style>
</head>

Ora tutto ciò che si troverà all'interno di qualsiasi paragrafo definito con il "tag   <p></p> subirà lo stile impostato a inizio pagina, a meno che non ne venga creato uno in linea il quale , avrebbe la priorità rispetto all'altro.
E importantissimo non dimenticare mai di chiudere il "tag che si era aperto, anche nei casi in cui si trattasse di "Tag come <p> che in html non necessitano della relativa chiusura </p>.
In questo contesto sono proprio loro, i tags chiusi, a decretare la fine dello style oltre che quella del paragrafo.
I due elementi <!-- e -->
posti ad inizio e fine blocco, sono gli stessi adoperati in html e servono a far ignorare lo style a tutti quei browser che non dovessero supportarli. Questi elementi infatti così come in html hanno significato di commento, servono cioè soltanto come note, etichette, senza influenzare in alcun modo il browser.
Nell'esempio è stato adoperato il (tag) <p> ma potevamo usare qualsiasi altro elemento valido di html.
Molti usano i "Tag - <h1>, <h2>, <h3>, ecc. ecc. che di solito non vengono mai adoperati? (anch' io li uso poco).  Inoltre si possono usare anche le "classi" .
Non esistono limiti al numero di elementi definibili dall'utente

 


► - Per chi non avesse tempo di creare un Foglio di stile di sana pianta manualmente,
        esistono anche degli appositi programmi che potete trovare in rete, molti anche a gratis.

Collegamento ad un Foglio di style esterno

Abbiamo visto come definire uno stile in linea quando magari serve una veloce particolarità delimitata ad una sola zona del nostro documento.

Abbiamo visto anche come definire invece uno
stile ad inizio pagina al quale tutto il documento poteva fare riferimento ed uso.

Vediamo adesso quello che secondo me è il più comodo e pratico dei sistemi, quello in cui esiste un foglio di stile esterno separato dal documento html, e nel quale scrivere tutti gli stili che necessitano, comprese le "classi" e gli eventuali "id".

Anche nel caso in cui decidessimo di fare uso di un foglio di style esterno, sarà possibile definire all'occorrenza stili ad inizio pagina e/o stili in linea e questi avrebbero la precedenza sul nostro foglio esterno.

Cosa significa foglio di stile esterno ?

Significa che se gli stili definiti sono molti, o molte sono le pagine web che ne faranno uso, la cosa migliore, non fosse altro per praticità d'uso, sarà quella di creare una struttura esterna alla quale tutte le pagine possano fare riferimento, questa struttura altro non sarebbe che il nostro foglio di style, un documento di testo normalissimo ma con estensione finale .css dove al suo interno saranno contenute tutte le dichiarazioni valide per un foglio di style, adoperando le stesse regole sintattiche viste per il foglio incorporato a inizio pagina.

Proviamo ad immaginare i vantaggi: pensate di dover fare una modifica all'intero sito, magari semplicemente per cambiare un tipo di font che non vi piace più, o sostituire un colore con un altro, sarà sufficiente apportare la modifica una sola volta a quel singolo foglio esterno per vedere poi immediatamente su tutte le pagine il risultato della modifica.

Comodo no? Sono finiti (finalmente) i tempi in cui si passavano ore ed ore a rielaborare tutte le pagine dove poi immancabilmente si finiva col dimenticarne sempre qualcuna.

lo stesso che adoperate per html, meglio ancora se uno
specifico per css, vi ricordo comunque che il wordpad o notepad a corredo di windows andranno benissimo, l'importante sarà salvare sempre in formato ascii cioè testo puro privo di particolari formattazioni, avendo cura di fare in modo che il file così salvato sia di tipo css e non txt come normalmente avviene. Se qualcuno avesse difficoltà con questo tipo di operazione (rinomina del file), potrà leggere come fare a questo link.

Esaminiamo più attentamente il nostro foglio esterno:
 
p {
text-align: justify;
text-indent: 12px;
}
 

Si noterà che praticamente è lo stesso usato nello "style incorporato" con la sola differenza che non ha più gli elementi iniziali che ne dichiaravano lo stile, questo perché essendo un foglio esterno la dichiarazione viene messa nel documento HTML che lo richiama, facendo uso delle seguente sintassi:

link type="text/css" href="nome_assegnato.css" rel="stylesheet" 
Avendo cura di posizionare questa riga di richiamo fra gli elementi (tags) : e del file html, dove nome_assegnato.css sarà il nome esatto che avrete deciso di assegnare al file stesso.in questo modo:

Ovviamente questa riga deve essere inserita poi in tutte le pagine web che fanno riferimento al foglio di style così creato.

Un foglio di style esterno tipo potrebbe essere questo:
BODY{
margin-left : .5cm;
margin-right : .5cm;
color : #000099;
font-family : Verdana,Arial,Helvetica;
}
A:LINK{
text-decoration : none;
color : #009900 ;
}
A:VISITED{
text-decoration : none;
color : Gray;
}
A:HOVER{
Color : #ffff00;
text-decoration : none;
}
TD{
font-family : "MS Sans Serif";
font-size : 12pt;
}
p{
text-align: justify;
text-indent: 12px;
}

Vediamo cosa ridefinisce, tanto per capire meglio e cominciare a familiarizzare con le varie sigle:

body tutto quello dichiarato all'interno di questo elemento sarà esteso a tutto il documento, per cui tutta la pagina web farà uso del font verdana, nel caso in cui questo non fosse installato nel PC del visitatore si cercherà di fare uso di Arial, se anche questo dovesse mancare allora Helvetica, dopo di che sarà assunto il

font di default =
font-family : Verdana,Arial,Helvetica;

Margine laterale dai bordi destro e sinistro: 0,5cm =
margin-left : .5cm; margin-right : .5cm;

Colore del testo: blu scuro =
color : #000099;

Dimensione del font: 10 punti =
font-size : 10pt;

Link da visitare: non sottolineati di colore verde =
a:link{text-decoration : none; color : #009900;}

Link visitati: non sottolineati di colore grigio =
a:visited{text-decoration : none; color : Gray;}

Cambio colore al passaggio del mouse: non sottolineati di colore grigio =
a:hover{text-decoration :none; Color : #ffff00;}

Tabelle: font Ms Sans Serif dimensione 12 punti =
TD{font-family : "MS Sans Serif";font-size : 12pt;}

Paragrafo: allineamento giustificato, indentizione 12 pixel =
p{text-align: justify;text-indent: 12px;}

 



Layout di Pagine WEB in Css, senza Tabelle. (alcuni esempi)



html.it sourceforge net dynamicdrive Css play alsacreations


Data creazione : 03/01/2011 @ 15:17
Ultima modifica : 26/07/2011 @ 23:17
Categoria : Guida ai Css
Pagina letta 4454 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

  • pontida-settembre-2017.jpg

    Pontida - Referendum e libertà domenica 17 settembre 2017

 
Contatteci
Connessione...
 Lista utenti registrati Utenti : 104

Username:

Password:

[ Registrazione ]


Utente online:  Utente online:
Anonimi online:  Anonimi online: 6

Visite totali Visite totali: 1661255  

Webmaster - Infos

Ip: 54.90.159.192

NewsLetters
Per ricevere informazioni sulle novità di questo sito, puoi iscriverti alla nostra Newsletter.
Captcha
Ricopia il codice :
Traduction Site
Lega Nord Latisana
Lega Nord Latisana

Eventi Calendario
Sondaggio
cosa pensi del Sito ?
 
Eccellente !
Ottimo
nella Media
Boh.....
C'è di Meglio
Risultati
^ Torna in alto ^