9 settembre 2008

Includere File Css nell'Html

Non sono qui con questo post a voler reinventare la "ruota" con lezioni su HTML o su tag deprecati che non dovremmo usare nel nostro codice(visto che nemmeno l'autorevole W3C e compatto su cosa dovremmo usare, es:HTML5 vs XHTML)per poterci fregiare dei tanto ambiti bannerini di codice standard compliance che vediamo a fondo pagina in tanti siti in giro per il web.

Per questo in rete ci sono siti che queste tematiche le insegnano nel più standard dei modi, a mio modestissimo parere uno su tutti ritengo sia HTML DOG di Patrick Griffiths.
Il mio post vuole essere un "inizio" di una specie di taccuino degli appunti su quanto riesco ad apprendere sul web design con layout css, e poterne condividere con chiunque lo voglia sia i lavori positivi(se qualcosa di positivo ci sarà)che le critiche, che se fatte in modo sincero sono le più costruttive per chi(come me) vuole imparare qualcosa di nuovo.
Siete i Benvenuti!


I css sono inseriti nel codice html o xhtml in vari modi. Il suo modo "naturale" di inserire delle regole css nell'html è di metterlo tra la coppia di tag <head> e </head>
come l'esempio sotto.

Questo metodo e detto foglio di stile incorporato



<html>
<head>
<title>css incorporato</title>
<style type="text/css">
{regole body }
{regole col-centrale }
{regole links }
{regole pie-di-pagina }
{altre regole }
</style>
</head>
</html>



un'altro metodo e quello detto in-line che viene chiamato in questo modo per il
fatto di essere inserito direttamente nei tag html in questa maniera che vedia mo qui sotto



<p style="color: red; background: yellow;">Io sono un testo rosso su sfondo giallo</p>



comunque e bene ricordare che il metodo in-linea viene sconsigliato perché più
che una regola css vera e propria è un attributo html simile al tanto odiato tag font.

Questi che state per vedere sono i metodi più apprezzati e consigliati nella maggior parte dei tutorials che trattano css sia nei libri che sul web.

Questo è il metodo css esterno un file .css linkato nel corpo html nel seguente modo



<html>
<head>
<title>css linkato</title>
<link rel="stylesheet" type="text/css" media="screen" href="file.css" />
</head>
</html>



e doveroso spiegare che qui c'è un nuovo attributo media="screen" che è "intercanbiabile" a secondo del media a cui il file .css è destinato.

Ecco un esempio completo dei media che css supporta

braille dispositivi braille(per ciechi)
embossed stampanti braille(per ciechi)
print stampanti
screen monitor dei computer
projection proiettori
aural lettori vocali
tv televisori
all tutti i tipi di media
tty dispositivi a caratteri(terminali) oramai in disuso

l'ultimo dei metodi di importazione di un file .css è la regola @import che va inserita sempre nei tag <head> e </head> all'interno dei suoi tag <style> e </style> ma che deve precedere qualsiasi altra regola linkata ai file .css esterni nel seguente modo che vediamo qui sotto




<html>
<head>
<title>regola @import</title>
@import url("file.css");
<link rel="stylesheet" type="text/css" media="screen" href="file.css" />
<link rel="stylesheet" type="text/css" media="print" href="file.css" />
</head>
</html>


è con questo ho concluso.
Spero di essere stato abbastanza chiaro e di non avervi annoiato.

2 commenti:

bellimbusto ha detto...

grazie mille, poco fa non riuscivo assolutamente a ricordare come includere un css in un file PHP :-D

@rchie malex ha detto...

Di niente, il mio problema è quello che do per scontato tante cose.

E di conseguenza non le scrivo nel blog. ;-)