Il Sito per imparare gratuitamente a fare pagine Web

Oggi: Giovedì 26 Novembre 2009   Ore: 03:14
 
Home · XHTML con Style · Primi Passi · Guida HTML · Guida CSS · Guida PHP · F.A.Q. · Scripting · Applets · Grafica Web · Forum · Comunicazioni Scrivimi
 
  Web-Link


Libera Donazione
  Guida C.S.S.
web-link
·Introduzione
·Sintassi
·in linea
·nella pagina
·nel foglio esterno
·le classi
·gli ID
·Grafica
·Il Box Model
·Posizionare il Box
·Il Box liquido
·Il Layout
·Links
·Gli Attributi
·Attributi Testo
.  " Carattere
.  " Colore e Sfondo
.  " Posizionamento
·Parametri
·Conclusioni
web-link
web-link
  Fare Web
web-link
·Applets
·Banners
·Blog
·Chat
·Contatori
·DHTML
·E-Commerce
·Editors CSS
·Editors HTML
·Flash
·Forum
·F.T.P.
·Guestbooks
·Grafica
·Iscriz.Mot.Ricerca
·Java Applets
·Java Script
·Mailling List
·Mappe Cliccabili
·Meta Tags
·Mot.ricerca interno
·Scripting
·Sondaggi on-line
·Spazi Web
·Tag Boards
·URL forwarding
·Validatori HTML
·W3C Specifiche
·Web Designer
·Web Master
web-link
web-link
Guida CSS - Ver. 4.1.3 - Ottobre 2008 - By Web-Link
web-link
 

CSS



A style incorporato Cioè quando allo stesso stile fanno riferimento più elementi (tags) html uguali nella stessa pagina. Sarebbe estremamente dispersivo, oltre che laborioso, definire lo stesso stile più volte all'interno della stessa pagina visto che servirebbe sempre per lo stesso identico scopo. Molto meglio definirlo una sola volta, ad inizio pagina. Così facendo tutti gli elementi della pagina interessati seguiranno lo stesso stile.

In questo caso le istruzioni non saranno più inserite all'interno di uno specifico elemento come abbiamo visto nella spiegazione in linea ma saranno dichiarate ad inizio pagina, usando il tag (tags) <style> e </style> posto all'interno della sezione <head> </head>

Questo metodo non impedisce di fare uso anche di eventuali definizioni di stile in linea, definizioni che avrebbero priorità sulle dichiarazioni di stile inserite ad inizio pagina.

Da notare che in questo modo si renderanno necessarie le parentesi graffe che delimitano il blocco di istruzioni relativo all'elemento interessato, cosa che non serviva per gli styli in linea.

Facendo riferimento ancora all'esempio precedente:

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

Adesso tutto ciò che si troverà all'interno di qualsiasi paragrafo <p> definito con la consueta forma html <p> ... </p> subirà lo stile impostato ad inizio pagina, a meno che non ne venga creato uno in linea, il quale, come ho detto sopra, avrebbe la priorità rispetto all'altro.

Ripeto ancora una volta l'importanza della chiusura degli elemento aperti, anche nei casi in cui si trattasse di elementi come <p> che in html non necessiterebbero della relativa chiusura </p> Non chiudere un elemento significa non porre fine allo stile ad esso associato ed estenderlo a tutto il documento, cosa sbagliata e spesso non voluta.

In questo contesto infatti sono proprio loro, i tags chiusi, a decretare la fine dello style oltre che quella del paragrafo. Dimenticarli potrebbe voler dire indurre il browser ad estendere i parametri dello style a tutto il resto del documento.

Spiegando il codice dell'esempio: 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 supportarlo. Da non usare nel caso in cui si volessero lasciare commenti all'interno della dichiarazione di stile, non è come con HTML, se serve commentare si adoperano /* (barra e asterisco) per inizio commento e */ (asterisco barra) per la sua fine.

<style type="text/css">
<!--
p {
text-align: justify; /*  allineamento giustificato */
color: #ff0000; /*  colore rosso */
}
-->
</style>

La stesura del codice io l'ho scritta così solo per dare un certo ordine ma nessuno vieta che possa essere scritta tutta su una riga, l'importante è rispettare i simboli, parentesi, due punti, spazi, punti e virgola:

<style type="text/css">
<!--
p {text-align: justify; color: #ff0000;}
-->
</style>

Nell'esempio è stato adoperato l'elemento (tag) <p> senza le sue parentesi angolari, avrete sicuramente capito che potevamo usare qualsiasi altro elemento valido di html.

Vista questa possibilità, perché non ridefinire elementi che non si adoperano perchè non piacciono o personalizzare quelli più adoperati per rendere il tutto più gradevole?

Così facendo sarebbe come avere a disposizione dei nuovi comandi html, o meglio dei nuovi elementi, con in più il fatto di averli personalizzati a proprio piacere, se non è versatilità questa.

Personalmente faccio poco uso di elementi ridefiniti, preferisco molto di più usare delle "classi" (le vedremo più avanti) che creo sul momento e alle quali associo nomi molto più significativi, per me, che mi facciano capire meglio cosa fanno. Non esistono limiti al numero di classi definibili dall'utente, per cui viva la fantasia di ognuno di noi.

Andrea Bianchi



Continua: Stile nel file esterno










  Potete fare domande e discutere l'argomento sul Forum



  Risorse
· Forum
· F.A.Q.
· Frames
· Scripting
· Applets
· Grafica Web
· Banner Exchange
· Novitànews
weblink
  Servizi
· Sondaggio
· I Files Scaricati
· Segnala il sito
· Leggi Guestbook
· Firma Guestbook
· Banners
weblink
  Linguaggi
· A.J.A.X.
· A.S.P.
· C.G.I.
· C.S.S.
· Flash
· H.T.M.L.
· X.H.T.M.L.
· Java
· JavaScript
· P.E.R.L.
· P.H.P.
· X.M.L.
weblink
  Download
· Primi Passi
· Guida HTML
· Guida CSS
· Guida XHTML
weblink
 
· Home Page Home Page · Aggiungi ai preferiti Aggiungi ai preferiti · Segnala ad un amico Segnala il sito ai tuoi amici ·
 

Valid CSS!
Valid HTML 4.01!

Questa pagina è esclusiva proprietà di © Web-Link © Andrea Bianchi 1997 ~ 2009
Vietata la copia e la distribuzione, anche parziale, senza la previa autorizzazione scritta di Web-Link