Home

Sei al primo accesso?

Ti piace l'idea? Registrati ora!

Vantaggi se ti iscrivi:

  • Puoi diventare un "Editore" per i contenuti Didattici
  • Partecipare al Forum
  • Accesso a tutti i file aggiunti dagli utenti stessi

Introduzione CSS

ritratto di kiuz
Gio, 2008/01/24 - 10:05 da kiuz

1 - Introduzione Css

Realizzare un layout tramite css omrai con i tempi che corrono è una cosa quasi scontata per coloro che ormai operano in questo campo da tempo. Mi accorgo però che ce sempre qualcuno che vuole avvicinarsi a questo linguaggio e non sa da cosa cominciare.

Con questo Tutorial voglio fare una breve introduzione ai css e di come si utilizzano all'interno di una semplice pagina web.

1.1 - Cos'è un Css:

Un foglio di stile css non è altro che un pezzo di codice che può essere parte integrante della pagina web o essere realmente scritto su un altro file che al caricamento della pagina web sarà anchesso scaricato e interpretato dal Broswer, nella pratica il risultato è identico dato che sarà come se fosse scritto insieme al codice della pagina web.

In questo codice sarà definito uno "stile" della pagina, cioè faremo in modo che contenuti dello stesso tipo appariranno tutti allo stesso modo(colori, spaziamento dimensione ect...) e tutto questo senza dover ridefinire tutti i parametri che in alcuni casi sono davvero tanti...

1.2 - Pagina Web:

Per iniziare osserviamo brevemente come è composta una semplice pagina web contente i più generici tag html, Esempio_1. Cliccate sul link e vi verrà visualizzata un semplicissima pagina web. Essa non è altro che un codice che è stato interpretato dal broswer che vi ha mostrato la pagina web con il testo formattato in un certo modo, colori ect... Se tramite il vostro broswer cliccate su "Visualizza -> Sorgente Pagina" (Firefox 1.x) o Visualizza -> HTML (Internet Explorer) potrete visualizzare il codice che il vostro broswer ha interpretato mostrandovi come risultato la pagina di esempio.

Possiamo scomporre il codice in diverse sezioni che qui semplifico senza i contenuti:

<html>
<head>
<meta ########## />
<title>Pagina web 1</title>
</head>
<body>
<h1> TITOLO </h1>
<p>Testo testo Testo testo Testo testo Testo testo </p>
</body>
</html>

1.3 - Come scritto Css:

Ora che sappiamo in linea di massima cos'è un css e com'è composto il codice di una semplice pagina web possiamo provare a capire come vanno definiti i parametri che andranno ad influenzare la pagina html.

Gli elementi principali di un css sono i DIV o più semplicemente riquadri, su cui possiamo definidere un infinità di parametri (sfondo, colore testo, dimensione testo, bordi ect.). Per il momento questi parametri li definiremo manualmente per capire meglio come funziona, ma in seguito potremo utilizzare programmi che ci semplificheranno la vita dato che ricordare tutti questi parametri e di come si utilizzano è davvero complicato.

#Nome_Div {
parametro_1: caratteristica1 caratteristica2 caratteristica2;
parametro_2: caratteristica1 caratteristica2 caratteristica2;
}

Ogni DIV è identificato dal suo nome ed è importante non dare mai lo stesso nome a DIV diversi, anche se alcune tecniche particolari permettono questa operazione, ma ora non ci addentreremo in tecniche di questo genere. Per il momento ci basta ricordare che DIV diversi non devono avere mai lo stesso nome.

Il nome del DIV è la parola senza spazi scritta appena dopo il cancelletto (# simbolo che indica un nuovo DIV) quindi ad esempio:

#content { ... }-> il nome del DIV sarà "content".
#titolo_1 { ... } -> il nome del DIVsarà "titolo_1".

Subito dopo il nome del DIV osserviamo una parentesi graffa aperta, ( {... ) , essa indica la fine del nome del DIV e l'inizio della definizione dei paramtri di quel DIV a cui abbiamo appena dato un nome. E come facile capire la parentesi graffa nel verso opposto indica la fine dei parametri del DIV ed indica anche la fine di tutto il DIV quindi dopo la parentesi graffa chiusa ( ... })possiamo procedere alla definizione di un nuovo DIV.

Il contenuto compreso tra le due parentesi graffe è la parte più importante del nostro DIV, qui saranno decise tutte le caratteristi che del DIV che abbiamo creato. Ogni parametro ha un nome identificativo che in genere evoca la caratteristica che defnisce come "background" che ci permette di definire le caratteristiche dello sfondo, oppure "text-align" che ci permette di definire l'allineamento del testo all'iterno del presente DIV... i parametri sono davvero tanti e per un elenco completo vi rimando ad una ricerca su Google.

background: #ffff00; -> sarà defnito lo sfondo del DIV
text-align: centre; -> sarà definito l'allineamento del testo all'interno del DIV

Ogni parametro va definito con il suo nome identificativo seguito senza spazio da due-punti e di seguito saranno scritte le caratteristiche del parametro, ovviamente ogni parametro va settato a dovere anche qui vi rimando ad altre guide più dettagliate dove potrete trovare la lista di tutti i parametri e di come si defiscono, per ora ci basta capire la struttura generale un codice CSS.

Riepilogando il ciò che abbiamo appena detto sul codice css possiamo defnire il nostro primo DIV.

#title{
background: #ffff00;
border: 2px solid #c20000;
text-align: center;
}

Caratteristiche del DIV:
Nome = title
Sfondo = colore giallo (#ffff00 - # R G B )
Bordo = spessore 2 pixel con lina continua di colore rosso scuro
Allinemaneto Testo: Centrato

Tags:
Partecia: