CSS/Regole e sintassi: differenze tra le versioni

Naviga nella cronologia in modo interattivo

← Differenza precedente Differenza successiva →

Contenuto cancellato Contenuto aggiunto

In linea

Versione delle 19:57, 15 mag 2007

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)

Si noti che i CSS vengono validati dal 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 /&gt nell'intestazione della nostra pagina:

<html>
 <head>
  <title>Inserire i fogli di stile in un documento</title>
 <link rel="stylesheet" type="text/css" href="stile.css">
 </head>
<body>...

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

<html>
 <head>
  <title>Inserire i fogli di stile in un documento</title>
   <style type="text/css">
    ...codice...
   </style>
  </head>
<body>...

Ricordo che questo sistema non permette la validazione da parte del W3C

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 l'elemento Fieldset, 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

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.

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.

@@ Riga 1: / Riga 1: @@
 {{Linguaggio CSS}}
 ==CSS esterni e interni==
-Gli sitli di una pagina possono essere definiti sia all'interno del file dove devono operare, sia in un file a parte.
+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)
+Si noti che i CSS vengono validati dal W3C solamente se sono esterni.
-*Gli '''stili esterni''' solitamente vengono usati se si hanno molte pagine su cui operare, per non creare troppa confusione nel lavoro di modifica.
+=== Stili esterni ===
-*Gli '''stili interni''' vengono usati se le pagine sui cui operare sono veramente poche e se il sito è semplice (questo sistema è sconsigliato perché nasconde una delle potenzialità dei CSS)
+&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:
-Ricordo che i CSS vengono validati dal [http://www.w3.org W3C] solamente se sono esterni.
-===Stili esterni===
-Sistema più usato e più compatibile con tutti i browser:
  <html>
   <head>
@@ Riga 19: / Riga 16: @@
  <body>...
-Questo sistema di importazione è il 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:
- <style>
+ '''<style>'''
-  @import url(stile.css);
+ ''' @import url(stile.css);'''
- </style>
+ '''</style>'''
-===Stili interni===
+=== Stili interni ===
  <html>
   <head>
    <title>Inserire i fogli di stile in un documento</title>
-    <style type="text/css">
+    '''<style type="text/css">'''
+     '''''...codice...'''''
-     body {
+    '''</style>'''
-     background: #FFFFCC;
-          }
-    </style>
    </head>
  <body>...
 Ricordo che questo sistema non permette la validazione da parte del [http://w3.org W3C]
-==Style==
+== Style ==
-L'ultimo modo per formattare un elemento con un foglio di stile consiste nell'uso dell'attributo style.
+L'ultimo modo per formattare un elemento con un foglio di stile consiste nell'uso dell'attributo <code>style</code> applicabile ad ogni elemento HTML.
-Questo sistema si utilizza all'interno degli elementi del codice, utile se c'è da aggiungere uno stile veloce per un unico elemento diverso dagli altri.
+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">
+ <elemento '''style="''regole_di_stile''"'''>
 Se ad esempio si vuole formattare l'elemento Fieldset, bisogna operare come segue: