CSS/Regole e sintassi: differenze tra le versioni

Wikibooks, manuali e libri di testo liberi.
< CSS
Contenuto cancellato Contenuto aggiunto
Shadd (discussione | contributi)
m →‎CSS esterni e interni: Inseriti i tag source
Riga 6: Riga 6:
*Gli '''stili interni''' vengono usati se le pagine sui cui operare sono veramente poche o se il sito è semplice (questo sistema è sconsigliato perché nasconde una delle potenzialità dei CSS, ovvero la possibilità di applicarli a più pagine contemporaneamente)
*Gli '''stili interni''' vengono usati se le pagine sui cui operare sono veramente poche o se il sito è semplice (questo sistema è sconsigliato perché nasconde una delle potenzialità dei CSS, ovvero la possibilità di applicarli a più pagine contemporaneamente)


Si noti che i CSS vengono validati dal W3C solamente se sono esterni.
Si noti che i CSS vengono validati dal [http://jigsaw.w3.org/css-validator/ validatore W3C] solamente se sono esterni.


=== Stili esterni ===
=== Stili esterni ===
&Egrave; il sistema più usato ed è compatibile con tutti i browser. Per inserire un collegamento ad uno stile esterno alla pagina, usiamo il tag <code>&lt;link /&gt;</code> nell'intestazione della nostra pagina:
È il sistema più usato ed è compatibile con tutti i browser. Per inserire un collegamento ad uno stile esterno alla pagina, usiamo il tag <code>&lt;link /&gt;</code> nell'intestazione della nostra pagina:
<source lang="html4strict">
<html>
<html>
<head>
<head>
<link rel="stylesheet" type="text/css" href="stile.css">
<title>Inserire i fogli di stile in un documento</title>
'''<link rel="stylesheet" type="text/css" href="stile.css">'''
</head>
</head>
<body>...
[...]
</source>


Il seguente sistema di importazione è invece più adatto a risolvere problemi di compatibilità tra vecchi e nuovi browser:
Il seguente sistema di importazione è invece più adatto a risolvere problemi di compatibilità tra vecchi e nuovi browser:
<source lang="html4strict">
'''<style>'''
[...]
''' @import url(stile.css);'''
'''</style>'''
<style>
@import url(stile.css);
</style>
[...]
</source>


=== Stili interni ===
=== Stili interni ===
Questo sistema permette di inserire dei CSS direttamente all'interno della pagina:
<html>
<source lang="html4strict">
<head>
[...]
<title>Inserire i fogli di stile in un documento</title>
'''<style type="text/css">'''
<style type="text/css">
'''''...codice...'''''
...codice...
'''</style>'''
</style>
[...]
</head>
</source>
<body>...
Si ricordi che questo sistema non permette la validazione da parte del [http://jigsaw.w3.org/css-validator/ W3C Validator]
Si ricordi che questo sistema non permette la validazione da parte del [http://jigsaw.w3.org/css-validator/ W3C Validator]



Versione delle 02:06, 31 mag 2008

Indice del libro

CSS esterni e interni

Gli stili di una pagina possono essere definiti sia all'interno del file nel quale devono operare, sia in un file a parte.

  • Gli stili esterni solitamente vengono usati se si hanno molte pagine a cui applicare il medesimo stile. Questo permette di non fare confusione nel lavoro di modifica e revisione.
  • Gli stili interni vengono usati se le pagine sui cui operare sono veramente poche o se il sito è semplice (questo sistema è sconsigliato perché nasconde una delle potenzialità dei CSS, ovvero la possibilità di applicarli a più pagine contemporaneamente)

Si noti che i CSS vengono validati dal validatore W3C solamente se sono esterni.

Stili esterni

È il sistema più usato ed è compatibile con tutti i browser. Per inserire un collegamento ad uno stile esterno alla pagina, usiamo il tag <link /> nell'intestazione della nostra pagina:

 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="stile.css">
  </head>
  [...]

Il seguente sistema di importazione è invece più adatto a risolvere problemi di compatibilità tra vecchi e nuovi browser:

 [...]
 <style>
  @import url(stile.css);
 </style>
 [...]

Stili interni

Questo sistema permette di inserire dei CSS direttamente all'interno della pagina:

 [...]
 <style type="text/css">
   ...codice...
 </style>
 [...]

Si ricordi che questo sistema non permette la validazione da parte del W3C Validator

Style

L'ultimo modo per formattare un elemento con un foglio di stile consiste nell'uso dell'attributo style applicabile ad ogni elemento HTML. Questo sistema è utilizzato all'interno degli elementi del codice HTML della pagina e può risultare utile se c'è bisogno di aggiungere uno stile unico per l'elemento.

<elemento style="regole_di_stile">

Se ad esempio si vuole formattare un elemento Fieldset in una pagina HTML, bisogna operare come segue:

<fieldset style="color:red;font-size:14px">

In questo caso questo elemento, solo questo nella pagina, avrà il testo al suo interno rosso e grande 14px. Si ricorda che questa modalità è fortemente deprecata dalle più recenti versioni dell'HTML

Sintassi fondamentale

Un foglio CSS è semplicemente un insieme di definizioni dello stile da applicare a determinati elementi della pagina. La loro sintassi è:

selettore { dichiarazioni }

Le dichiarazioni tra parentesi graffe racchiudono coppie di proprietà : valore separate da un punto e virgola. Ad esempio:

 <style>
  p { font-size: 12px; }
 </style>

è un foglio di stile con una sintassi valida. In particolare, il valore per la proprietà font-size sarà 12px.

Commenti

All'interno di un foglio di stile è possibile inserire dei commenti, ossia porzioni di testo che verranno ignorate dal browser, delimitati da /* e */, che si possono estendere su una o più righe.

Questo può risultare utile soprattutto nei casi di collaborazione a coloro che non hanno scritto di prima mano il codice; può però risultare utile anche all'autore stesso, ad esempio per poter riprendere il proprio codice tra le mani dopo un lungo periodo di tempo; inoltre può risultare comodo per eliminare temporaneamente porzioni di codice durante la fase di test delle proprie pagine web.

selettore {
 /* questo verrà ignorato*/
}

/* anche_questo_selettore {
   e_questa: proprietà
} */

/* *attenzione*: mai annidare i commenti
/* il browser farà come se questo testo non esistesse */ <-- qui si chiude il commento
   ma questo testo verrà letto
   */ <-- questo genera un errore