CSS/Regole e sintassi: differenze tra le versioni

Wikibooks, manuali e libri di testo liberi.
< CSS
Contenuto cancellato Contenuto aggiunto
Ramac (discussione | contributi)
Ramac (discussione | contributi)
Riga 62: Riga 62:


=== Definire i valori ===
=== Definire i valori ===
In alcuni casi, una proprietà accetta solo valori definiti tra una serie di parole chiave; negli altri casi il CSS accetta diversi di valori.
==== Numeri interi e reali ====
==== Numeri interi e reali ====
I '''numeri''' devono essere indicati senza separatori per le migliaia, usando un punto (.) come separatore decimale. &Egrave; possibile inoltre specificare il segno del numero (+ o -) anche se la maggior parte delle volte non serve in quanto molte proprietà accettano solo valori positivi.
I '''numeri''' devono essere indicati senza separatori per le migliaia, usando un punto (.) come separatore decimale. &Egrave; possibile inoltre specificare il segno del numero (+ o -) anche se la maggior parte delle volte non serve in quanto molte proprietà accettano solo valori positivi.
Riga 79: Riga 80:
**'''pc''': [[w:Pica (unità di misura)|pica]] — 1 pica vale 12 punti
**'''pc''': [[w:Pica (unità di misura)|pica]] — 1 pica vale 12 punti
==== Percentuale ====
==== Percentuale ====
I valori in percentuale servono per esprimere percentuali del valore che assume la proprietà stessa dell'elemento padre e vanno espresse con un numero seguito dal simbolo di percentuale (%)
I valori in '''percentuale''' servono per esprimere percentuali del valore che assume la proprietà stessa dell'elemento padre e vanno espresse con un numero seguito dal simbolo di percentuale (%)
==== URI ====
==== URI ====
I valori '''[[w:Uniform_Resource_Identifier|uri]]''' specificano un percorso assoluto (es. <nowiki>http://esempio/dir/file</nowiki>) oppure uno relativo (nell'esempio di prima, dir/file).<br/>
I valori '''[[w:Uniform_Resource_Identifier|uri]]''' specificano un percorso assoluto (es. <nowiki>http://esempio/dir/file</nowiki>) oppure uno relativo (nell'esempio di prima, dir/file).<br/>
I valori URI vanno usati tramite la notazione <code>url(percorso)</code>. <code>percorso</code> può essere delimitato da apici (').
I valori URI vanno usati tramite la notazione <code>url(percorso)</code>. <code>percorso</code> può essere delimitato da apici (').


==== Stringhe ====
Le '''strighe''' sono delle sequenze alfanumeriche di caratteri, ovvero del testo.
<br/>In CSS vanno delimitate da una coppia di virgolette singole o doppie, finendo con lo stesso apice con cui si è iniziato. Ad esempio:
'questa è una stringa'
"questa anche"
'questa no (è chiusa in modo scorretto)"
Nel caso si voglia inserire in una stringa delimitata, ad esempio, da apici un apice è necessario usare il carattere di commutazione \ (barra retroversa). Ad esempio:
'questa non è una 'stringa'
'questa invece è una \'stringa'
==== Colori ====
==== Colori ====
Un colore può essere identificato con tre metodi differenti:
Un '''colore''' può essere identificato con tre metodi differenti:
*tramite un numero esadecimale che indica le componenenti [[w:RGB|RGB]]. Per una lista completa dei colori esadecimali, vedi [[Aiuto:Colori|la tavolozza dei colori]]
*tramite un numero esadecimale che indica le componenenti [[w:RGB|RGB]]. Per una lista completa dei colori esadecimali, vedi [[Aiuto:Colori|la tavolozza dei colori]]
*tramite la funzione
*tramite la funzione

Versione delle 15:00, 28 apr 2007

Template: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 esterni solitamente vengono usati se si hanno molte pagine su cui operare, per non creare troppa confusione nel lavoro di modifica.
  • 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)

Ricordo che i CSS vengono validati dal W3C solamente se sono esterni.


Stili esterni

Sistema più usato e più compatibile con tutti i browser:

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

Questo sistema di importazione è il 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">
    body {
    background: #FFFFCC;
         }
   </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. 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.

<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.

Definire i valori

In alcuni casi, una proprietà accetta solo valori definiti tra una serie di parole chiave; negli altri casi il CSS accetta diversi di valori.

Numeri interi e reali

I numeri devono essere indicati senza separatori per le migliaia, usando un punto (.) come separatore decimale. È possibile inoltre specificare il segno del numero (+ o -) anche se la maggior parte delle volte non serve in quanto molte proprietà accettano solo valori positivi.

Grandezze

Le grandezze sono usate per definire lunghezze orizzontali e verticali. e sono espresse da un numero (intero o reale) seguito da una unità di misura.

Le principali unità di misura si dividono in:

  • relative: specificano una grandezza che dipende da un'altra grandezza. Sono:
    • em: è relativa all'altezza font in uso. Se, ad esempio, il font è alto 12pt, 1em varrà 12pt, 2em varranno 24pt.
    • ex: funziona come em, ma è relativa all'altezza della lettera x nel set di caratteri in uso.
    • px: pixel, sono relativi al dispositivo di output (solitamente lo schermo) e alle impostazioni del computer dell'utente
  • assolute: le unità di misura assolute sono equivalenti a quelle usate nella realtà. Sono:

Percentuale

I valori in percentuale servono per esprimere percentuali del valore che assume la proprietà stessa dell'elemento padre e vanno espresse con un numero seguito dal simbolo di percentuale (%)

URI

I valori uri specificano un percorso assoluto (es. http://esempio/dir/file) oppure uno relativo (nell'esempio di prima, dir/file).
I valori URI vanno usati tramite la notazione url(percorso). percorso può essere delimitato da apici (').

Stringhe

Le strighe sono delle sequenze alfanumeriche di caratteri, ovvero del testo.
In CSS vanno delimitate da una coppia di virgolette singole o doppie, finendo con lo stesso apice con cui si è iniziato. Ad esempio:

'questa è una stringa'
"questa anche"
'questa no (è chiusa in modo scorretto)"

Nel caso si voglia inserire in una stringa delimitata, ad esempio, da apici un apice è necessario usare il carattere di commutazione \ (barra retroversa). Ad esempio:

'questa non è una 'stringa'
'questa invece è una \'stringa'

Colori

Un colore può essere identificato con tre metodi differenti:

  • tramite un numero esadecimale che indica le componenenti RGB. Per una lista completa dei colori esadecimali, vedi la tavolozza dei colori
  • tramite la funzione
rgb (<rosso>, <verde>, <blu>)

dove <rosso>, <verde> e <blu> sono le componenti RGB del colore espresse con un valore intero da 0 a 255.

  • tramite una delle parole chiave predefinite, che sono:
  •     black
  •     silver
  •     gray
  •     white
  •     maroon
  •     red
  •     purple
  •     fuchsia
  •     green
  •     lime
  •     olive
  •     yellow
  •     navy
  •     blue
  •     teal
  •     aqua