La struttura dei css, la sintassi ed il loro inserimento.
ALLWEB free
Web Directory Script Linguaggi
Italiano Inglese Tutte
 
 22 Dec 2014
aggiungi in preferiti  
Home    Mappa directory    Script




Struttura dei CSS:

Tutti gli attributi di una pagina HTML possono essere inseriti con i CSS.
Gli stili o style sono i comandi che ci permettono di variare i tag con gli attributi che lo seguono.

Esempio:
<p style=" text-align:right; color:#239845; font-size:10pt;"> tutto quello inserito........</p>

Risultato:

Tutto quello inserito fra i tag <p> assumerà le caratteristiche descritte nel comando style.





sintassi:

Per iniziare descriviamo due degli errori più comuni che possiamo fare con i CSS:

  • Le unità di misura devono essere unite al numero che le precede.
    10px OK
    10 px ERRATO!
  • Con i CSS gli attributi non sono MAI inseriti con i doppi apici, unica eccezione per i nomi dei font con più parole.



Inserimenti nel corpo del documento:

In determinate occasioni è possibile utilizzare i css all'interno della pagina web e direttamente sull'oggetto. Questa tecnica limita le potenzialità dei css perchè non permette una rapida variazione degli stili come i fogli di style esterni.
Esempio:
<p style=" text-align:right; color:#239845; font-size:10pt; "> tutto quello....</p>
Come vediamo gli attributi sono compresi fra i doppi apici, ma all'interno sono separati l'uno dall'altro con il punto e virgola, mentre fra l'attributo ed il valore dai due punti.


Inserimenti in testa al documento:

Anche questa tecnica non permette di modificare gli styli di un sito tramite una sola modifica (fogli di style). Potremo raggiungere tale obiettivo solo se la parte dove inseriamo gli style è inclusa con un linguaggio dinamico (gli style sono sempre gli stessi), tuttavia il foglio risulterà appesntito da tale codice ed il tempo di caricamento risulterà maggiore rispetto ai fogli di style esterni.
Per l'inserimento in testa della pagina (ossia fra i tag head) il procedimento è simile a quello prima, ma vediamo un esempio che semplificherà la spiegazione:
<head>
<style type="text/css">
p { text-align:right; color:#239845; font-size:10pt; }
</style>
</head>
<body>
Come vediamo dobbiamo inserire tutto fra i tag <style>, poi diremo quale tag deve rispondere agli attributi (in questo caso <p>) e poi chiuderemo tutti gli attributi fra parentesi graffe { }.
Nell'esempio tutti i tag <p> della pagina web risponderanno agli style indicati.


Inserimenti in fogli esterni:

L'inserimento dei css tramite i fogli esterni è il metodo più indicato per gestire un sito. Questa tecnica permette di uniformare tutti gli style, di variare un solo foglio con il risultato di far variare tutto il sito, e consente di accellerare il tempo di caricamento pagina da parte del navigatore (il foglio di style sarà caricato solo la prima volta).

Il foglio di style è una pagina salvata con estensione .CSS ed al suo interno possiamo scrivere gli style senza nessuna riga iniziale o finale. Per questo non inseriremo nessun tag <style> ma soltanto gli elementi ed i valori che li cambieranno:
p { text-align:right; color:#239845; font-size:10pt; }