Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

un nuovo modo di scrivere pagine html

5 giugno 2011, Scritto da , category css

Questo codice:

<h1>Super sito web!</h1>
<p>Benvenuti nel mio super sito!</p>
<p>Questa paginetta è il fan club della mia squadra del cuore</p>

risulta semplice, chiaro e leggibile. Questo codice:

<body text="#000" bgcolor="#cdcdcd" font="arial" size="12">
<div align="center"><h1><font color="red">Super sito web!</font></h1> </div>
<p align="center"><font size="4">Benvenuti nel mio super sito!</font></p>
<p align="center"><font size="4">Questa paginetta &egrave; il fan club della mia squadra del cuore</font></p>

lo sembra molto meno, eppure vengono visualizzati alla stessa maniera! Com’è possibile? Il segreto sta tutto nei css! Nel primo esempio, infatti, si sono scorporate le informazioni relative alla formattazione del testo e si sono messe al di fuori dell’html, in un file css:

body {
background-color: #cdcdcd;
font-family: arial;
font-size: 14px;
color: #000;
text-align:center
}
h1 {
font-size: 30px;
color: red;
}
p {
font-size: 17px;
}

Quanto scritto sopra è in linguaggio css e impone che il colore di sfondo del body della pagina sia di colore grigio chiaro, il testo sia allineato al centro, in arial di dimensioni 14 e di colore nero. L’intestazione dev’essere di dimensione 30 px e rossa mentre il testo contenuto all’interno di un paragrafo deve avere dimensione 17. Le definizioni di stile sopra riportate vengono chiamate regole. Un insieme di regole determina un foglio di stile. I fogli di stile possono essere contenuti:

  • all’interno del tag <style> nell’<head> della pagina
  • in un file .css esterno
  • in linea tramite l’attributo style

Le regole sono formate da due parti: selettore e dichiarazione. Nell’esempio precedente p è il selettore mentre font-size:17px è la dichiarazione.

  • Il selettore indica l’elemento a cui applicare la regola
  • La dichiarazione indica la proprietà e la specifica (il valore) della regola

La proprietà specifica una caratteristica tipo:

  • font
  • posizione
  • dimensione
  • bordo
  • colore
  • etc

Il valore esprime la specifica che la proprietà deve avere. Es: 10px = 10 pixel. In questo esempio:

div {margin:10px;}

la proprietà è margin ed il valore è 10 pixel.

Come detto il css può esser dichiarato all’interno del tag <style> nell’head del documento HTML. In tal caso la corretta sintassi è la seguente:

<head>...
<style type="text/css">
...
</style>
</head>

Nel caso in cui, invece, si voglia utilizzare un foglio di stile in un file esterno .css, la sintassi da usare, sempre all’interno del tag <head>, è:

<link href="mystyle.css" rel="stylesheet">

In questo caso il browser riconosce il path del file (occhio alle maiuscole/minuscole!) e lo include nella pagina.

Quando si sposta il codice in un file css non serve includere il tag <style>. Non solo non serve, è proprio sbagliato! 🙂