logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

Fogli di stile interni e esterni

Quando si crea un documento web, ci sono diversi modi per inserire al suo interno i fogli di stile CSS. Gli stili di una pagina possono essere definiti sia da un CSS interno alla pagina stessa, oppure da un CSS esterno, quindi un file a parte, e questi ultimi si possono creare con qualsiasi editor di testo, tipo il classico blocco note di Windows, oppure con Notepad + + per es. o anche Text Edit, e una volta creati si devono salvare con l'estensione finale .css. Rispetto a queste due tipologie di fogli di stile, avremo di conseguenza: Css collegati, incorporati, o in linea.

1- Ricapitolando, un foglio di stile si dice interno quando il suo codice è compreso all'interno del documento su cui stiamo lavorando. Generalmente vengono usati se le pagine del sito su cui si stà operarando sono veramente poche o se il sito è semplice (questo sistema è sconsigliato perchè nasconde una delle grandi potenzialità dei CSS, ovvero la possibilità di applicarli a più pagine contemporaneamente).

2- I fogli di stile esterni solitamente vengono usati se si hanno molte pagine a cui applicare il medesimo stile. Questo permette di non fare confusione nel lavoro di modifica e revisione. Creare un CSS esterno è molto semplice: apriamo il blocco note di windows, e creiamo un file con estensione .css, che verrà richiamato in ogni pagina. Una volta salvato, questo file lo inseriamo nella cartella principale del nostro sito, dove ci saranno altre cartelle. Una che conterrà per es. il nostro css, una che conterrà le immagini di tutto il sito, un'altra che conterrà i documenti riguardanti il sito stesso, e così via.

Fogli di stile collegati

Prima abbiamo accennato al fatto che i fogli di stile esterni (che sono i più usati e compatibili con tutti i browser) si possono definire anche fogli di stile collegati, perchè se dobbiamo caricare, quindi "collegare" un CSS esterno in un documento possiamo farlo in due modi: o usando il tag <link> inserendolo all'interno della sezione <head> della nostra pagina Html, oppure usando la proprietà @import all'interno dell'elemento <style>.

<html>
  <head>
    <title>Per inserire i fogli di stile in un documento si usa:</title>
    <link rel="stylesheet" type="text/css" href="mio_css.css">
  </head>
<body>...

Come potete notare l'elemento <link> contiene tutta una serie di attributi, che è importante conoscere:

Usare l'attributo @import

Oltre al tag <link>, per collegare un Css esterno si può usare la proprietà @import. Le cosiddette @-rules sono quei termini che hanno una caratteristica comune: sono tutti preceduti dal simbolo della chiocciola. La pronuncia è identica a quella che si usa per gli indirizzi e-mail, cioè at-import, at-media, etc. Le loro funzioni, rappresentano vie alternative, molto flessibili e potenti, per realizzare cose attuabili in altri modi e abbiamo già visto come @import sia una valida alternativa all'elemento <link>.

Abbiamo detto prima che la direttiva @import và inserita all'interno dell'elemento <style>, e deve essere la prima regola definita e inoltre si deve collegare il CSS definendo sempre un URL assoluto o relativo, da racchiudere tra parentesi tonde e con il punto e virgola finale, in questo modo:

<head>
    <style type="text/css">
    @import url (il_mio_foglio_di_stile.css);
    </style>
</head>

Fogli incorporati

I fogli incorporati sono quelli inseriti direttamente all'interno del documento (X)html che stiamo creando e anche in questo caso và inserito nella sezione <head>, tramite l'elemento <style>

<html>
  <head>
    <title>CSS incorporato all'interno del documento</title>
    <style type="text/css">
      body {
      background: #FFFF99;
      margin: 0;
      padding: 0;
      text-align: center;
      }
    </style>
  </head>

Come potete notare, l'elemento <style> presenta l'attributo type, che è sempre obbligatorio inserire. Nello schema quà sopra, il testo che è evidenziato in rosso è il CSS. Dopo body, l'insieme degli attributi è racchiuso tra due parentesi graffe "{ }" e per separare ogni attributo dal suo corrispettivo valore, sono usati i due punti ":" e ogni dichiarazione termina sempre con il punto e virgola ";". Quando invece la sintassi richiede degli attributi che hanno più termini (tipo font-size o text-align), questi sono seperati da un trattino "-". Vedremo in seguito meglio questi concetti.

Fogli in linea

I fogli di stile in linea, rappresentano una soluzione ottimale per chi volesse attribuire dello stile a uno solo o comunque a pochi tags Html. Non rappresentano però, la tanto descritta divisione tra stile e contenuti, di cui stiamo parlando in questa guida. Nell'esempio che verrà mostrato qui sotto, verrà mostrato un tipico esempio di foglio di stile in linea:

  <font style="font-family: Arial; font-size: 14px; color: red">Questo testo   è scritto grazie ai Css</font>

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice