Start Home Hosting Forum Hosting Account Server gratuito Hosting Blog Hosting FAQ
 
 Contacts

Registrazione domini, hosting
Registrazione domini a soli 5.49 euro l'anno!
     http://www.


Registrazione domini e Hosting professionale
NewsHTMLCSSJAVASCRIPTHosting MysqlHosting PHPHosting BlogHosting CMSHosting Forum    
 
Adottare i fogli di stile
Venerdì, 4 Gennaio 2008

Quali tipi di fogli di stile esistono?
In che modo posso collegare un foglio di stile ad una pagina?

Domande abbastanza comuni a chi si avvicina alle specifiche W3C ed ai CSS. Vediamo di chiarirle con precisione.
Esistono due tipi fondamentali di fogli di stile: interni ed esterni; ci si riferisce ai primi quando il codice del CSS è compreso in quello del documento, mentre si fa riferimento ai secondi quando il codice del CSS è ospitato da un file differente da quello del documento di riferimento.
Che si ricorra ai CSS interni o a quelli esterni, esistono comunque tre metodi per associare un foglio di stile ad un documento (X)HTML: collegarlo, incorporarlo o aggiungerlo in-line.

Collegarlo significa necessariamente usare un CSS esterno a cui fare riferimento nelle nostre pagine, esattamente tramite l’uso del tag <LINK> all’interno della sezione <HEAD> del documento (X)HTML.

Codice d’esempio:

<html>
<head>
<title>Titolo pagina</title>
<link rel=”stylesheet” type=”text/css” href=”main.css”>
</head>
<body>…

Dove rel identifica la relazione tra documento e file collegato e può assumere solo i due valori stylesheet o alternate stylesheet, type identifica il tipo di dati e consente, per i CSS, la sola scelta di text/css ed href indica l’URL assoluto o relativo, come nell’esempio, del foglio di stile.
Tutto gli attributi indicati si intendono obbligatori per l’associazione del CSS al documento. Se si sbaglia nella formattazione o nella definizione di uno di essi, il contenuto del CSS non sarà applicato alla pagina.

Un modo più semplice per raggiungere lo scopo appena espresso, cross-browser perfettamente retrocompatibile è rappresentato nel seguente codice:

<style>
@import url(stile.css);
</style>

La sintassi è da rispettare in tutto e per tutto, punto e virgola compreso alla fine del comando @import e l’elemento <STYLE> è da racchiudere nella sezione <HEAD> del documento (X)HTML.

E se, invece, non volessimo usare un file esterno ma avere tutto il codice nel file (X)HTML che pubblicheremo?

In tal caso possiamo incorporar le definizioni degli stili nel nostro documento, attraverso un codice del tutto simile al seguente:

<html>
<head>
<title>Titolo pagina</title>
<style type=”text/css”>
body {
background: #FFFFFF;
}
#footer {
width: 600px;
}
.header {
border: 1px #000000 solid;
}
</style>
</head>
<body>…

Per questo codice valgono le raccomandazioni fatte in precedenza.
Esiste anche un secondo metodo, l’ultimo che analizzeremo in questo blog, per inserire un CSS all’interno di un documento (X)HTML e consiste nel definire le regole CSS direttamente all’interno del tag. Tale metodo, detto in-line, può essere esemplificato tramite il seguente codice:

<h1 style=”color: red; background: black;”>…</h1>

Come si può notare, in questo caso sparisce del tutto l’adozione di parentesi graffe e la definizione di stile viene implementata attraverso una lista di voci divise da punti e virgola, all’interno dell’attributo style.

Tags:
Pubblicato in CSS | Nessun Commento »
Cosa sono i CSS?
Venerdì, 21 Dicembre 2007

CSS sta per Cascading Style Sheet, cioè Foglio di Stile a Cascata.

Sono uno strumento di formattazione dei documenti per il web attraverso i quali è possibile manipolare e definire ogni aspetto della presentazione di una pagina.

Il primo vantaggio che introducono i CSS è quello di separare completamente contenuto e presenzione.

Il secondo grande vantaggio è l’ accessibilità: con i CSS si possono definire presentazioni differenti per ogni tipo di lettore, dai browser testuali agli smartphone.

Essendo il foglio di stile messo in cache dai browser, ed essendo per sua natura separato dal contenuto della pagina, si accorciano i tempi di caricamento.

Per ultima cosa, ma non in ordine di importanza, facilitano il posizionamento nei motori di ricerca.

Tags:
Pubblicato in CSS | Nessun Commento »