Ultima modifica da un moderatore:
TEORIA
I CSS o se volete Cascading Style Sheets, o ancora più semplicemente foglio di stile, è l'insieme di tutti quei parametri che formano un linguaggio per la formattazione dei documenti HTML.
I CSS si occupano di tutto ciò che riguarda la parte esterica di un file HTML, come ad esempio il font, i colori, le grandezze di un determinato elemento, immagini di sfondo ecc...
I file CSS possono essere di due tipi:
- Esterni: Come dice la parola, è un documento di testo (con estensione .css) nel quale sono salvati tutti i parametri di un determinato file HTML.
- Interni: Questo altro tipo invece può essere implementato direttamente nel sorgente html.
Quindi la differenza sostanziale qual'è? Quella più "comoda" è sicuramente quella esterna poichè avremo un codice sorgente pulito collegato con il nostro file .css, però sostanzialmente non cambia nulla!
Dopo questa brevissima introduzione teorica passiamo a quella pratica!
PRATICA
CSS interno:
Per implementare il CSS in un file HTML basta usare questi comandi:
Codice:
<html>
<head>
<title>Guida CSS</title>
<style type="text/css">
I MIEI COMANDI
</style>
</head>Fatto ciò potremmo iniziare a scrivere i nostri comandi CSS al posto de "I MIEI COMANDI".
I parametri CSS che vogliamo impostare saranno quelli di cui necessitiamo nel codice HTML.
Se abbiamo bisogno, ad esempio, di fare un paragrafo di un colore diverso da quello di default scriveremo all'interno di <style></style>:
Codice:
p { color : red; }Analizziamo la seguente riga di codice:
p : sta per paragrafo nel linguaggio HTML.
{ } : nel linguaggio CSS bisogna sempre racchiudere i nostri comandi tra parentesi graffe.
color: red : indica il parametro che noi passiamo al tag scelto da noi, nel nostro caso il tag <p>
; : nel linguaggio CSS i parametri devono essere divisi dal punto e virgola.
Quindi riassumendo, possiamo implementare il nostro foglio di stile direttamente dentro al file HTML, all'interno dei tag <style> racchiudiamo i nostri parametri (Attenti alla sintassi!).
CSS esterno:
Il foglio di stile esterno, è quello più usato, viene creato a parte. Abbiamo il nostro documento HTML e un'altro documento CSS.
Per far si che questi due documenti si intendano uno con l'altro dobbiamo collegarli attraverso questa riga di codice:
Codice:
<link rel="stylesheet" type="text/css" href="esempio.css">In esso verranno scritti tutti i parametri necessari, come in quello interno. Ad esempio questo potrebbe essere un file css esterno:
Codice:
p {color: red;
font-size: 20px;
letter-spacing: 3px;
}
body {text-align:center;
background color:blue;
}
h2 {text-decoration: overline;
}La prima "lezione" finisce qui, abbiamo visto cos'è il CSS e iniziato a conoscere come si usa e quali tipi ci sono, nella prossima guida impareremo a settare il nostro documento css!
Se la guida vi è stata utile vi invito a lasciare un commento!
Guida creata da Mack141 su inforge.net per inforge.net, è vietata la distribuzione di questa guida su altri siti/forum senza il premesso dell'autore.
