Prof. Giuseppe ROMANO...Cascading Style Sheets (CSS) Molte proprietà usate nei Cascading Style...

Prof. Giuseppe ROMANO

Cascading Style Sheets (CSS)

CSS è l'acronimo di Cascading Style Sheets (in italiano

Fogli di stile)

I CSS formano un linguaggio per la definizione del layout

dei documenti HTML.

Per esempio, i CSS si occupano dei font, dei colori, dei

margini, delle linee, delle altezze, delle larghezze, delle

immagini di sfondo, del posizionamento e di molte altre

cose.


Che differenza c'è tra i CSS e l'HTML?

L'HTML viene usato per strutturare il contenuto.

I CSS vengono usati per formattare la struttura del

contenuto.


Inizialmente il linguaggio HTML veniva usato per

aggiungere struttura al testo.

Un autore poteva marcare il suo testo con la scritta

"questo è un titolo» o "questo è un paragrafo"

usando tag HTML del tipo di <h1> e <p>.


Con il passare del tempo, i web designer hanno

iniziato a cercare alternative per aggiungere layout ad

un documento online.

I CSS sono stati inventati per fornire opportunità

sofisticate per la progettazione del layout, supportate da

tutti i browser.

Allo stesso tempo la separazione dello stile di

presentazione di un documento dal contenuto del

documento, facilita molto la manutenzione dei siti web.


I benefici concreti dei CSS comprendono:

• il controllo del layout di molti documenti

contemporaneamente attraverso un unico foglio di

stile;

• un controllo più preciso del layout;

• l'applicazione di un layout diverso per ogni tipo di

media (schermo, stampa, ecc.);

• un gran numero di tecniche avanzate e sofisticate.


Molte proprietà usate nei Cascading Style Sheets (CSS)

sono simili a quelle dell'HTML.

Quindi, se hai usato l'HTML per il layout, molto

probabilmente riconoscerai facilmente la maggior parte

del codice.

Vediamo un esempio concreto.


Diciamo che vogliamo un bel colore rosso come

sfondo della pagina web:

Usando solo l' HTML avremmo fatto in questo

modo:

<body bgcolor="#FF0000">

Lo stesso risultato con i CSS si ottiene così:

body {background-color: #FF0000;}

Cascading Style Sheets (CSS) Come potrai notare, i codici dell'HTML e del CSS sono

più o meno identici. L'esempio sopra ti mostra anche il

modello fondamentale dei CSS:

Cascading Style Sheets (CSS) Ci sono tre modi con cui puoi applicare i CSS ad un documento HTML

Method 1: In-line (l'attributo style)

Un modo per applicare i CSS all'HTML è quello di usare

l'attributo style dell'HTML.

Rimanendo sull'esempio riportato sopra con lo sfondo rosso,

possiamo scrivere come segue:

<html>

<head>

<title>Esempio</title>

</head>

<body style="background-color: #FF0000;">

<p>Questa è una pagina rossa</p>

</body>

</html>


Method 2: Interno (il tag style)

Un altro modo per includere il codice CSS è quello

di usare il tag HTML <style>.

Per esempio in questo modo:

<html>

<head>

<title>Esempio</title>

<style type="text/css">

body {background-color: #FF0000;}

</style>

</head>

<body>

<p>Questa è una pagina rossa</p>

</body>

</html>


Method 3: Esterno (link ad un foglio di stile)

Il metodo raccomandato è quello di fare un link

a quello che viene chiamato un foglio di stile

esterno.

Un foglio di stile esterno è semplicemente un file di

testo con estensione .css.

Come con tutti gli altri file, puoi mettere il tuo foglio

di stile sul server web o sul disco fisso.


Per esempio, supponiamo che il tuo foglio di stile si chiami style.css ed è

stato salvato in una cartella chiamata style.

La situazione potrebbe essere illustrata come segue:

Cascading Style Sheets (CSS) Il trucco è creare un link al foglio di stile (style.css)

dal documento HTML (default.htm).

Questo link potrebbe essere creato con una linea di

codice HTML:

<link rel="stylesheet" type="text/css" href="style/style.css" />

Nota come il percorso per arrivare al tuo foglio di

stile viene indicato usando l'attributo href.


La linea di codice deve essere inserita nella

sezione header del codice HTML, cioè tra i

tag <head> e </head>, in questo modo:

<html>

<head>

<title>Il mio documento</title>

<link rel="stylesheet" type="text/css"

href="style/style.css" />

</head>

<body>

...

Cascading Style Sheets (CSS) Questo link dice al browser che per visualizzare il file HTML,

dovrebbe usare il layout come descritto nel file CSS.

La cosa realmente intelligente è che più documenti HTML

possono essere linkati allo stesso foglio di stile. In altre parole, un

file CSS può essere usato per controllare il layout di più

documenti HTML contemporaneamente.


Questa tecnica ti permette di guadagnare un sacco di

lavoro.

Se per esempio vuoi cambiare il colore di sfondo di un

sito web di 100 pagine, un foglio di stile ti può salvare

dal farlo manualmente per tutti i 100 documenti

HTML.

Usando i CSS il cambiamento può essere fatto in

pochi secondi solo cambiando un codice nel foglio di

stile.

Cascading Style Sheets (CSS) Iniziamo con il primo esercizio

Apri Notepad (o qualsiasi altro editor di testo) e

crea due file - un file HTML e un file CSS - con

questi contenuti:

default.htm<html>

<head>

<title>Il mio documento</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<h1>Il mio primo foglio di stile</h1>

</body>

</html>


style.css

body

{

background-color: #FF0000;

}


Adesso metti i due file nella stessa cartella.

Ricordati di salvare i file con la giusta estensione

(rispettivamente ".htm" e ".css")

Dal tuo browser apri default.htm e osserva la tua pagina

con lo sfondo rosso.

Colori e sfondi

Colori e sfondi

In questa lezione imparerai come applicare i colori e gli

sfondi al tuo sito web.

Vedremo anche alcuni metodi avanzati per posizionare e

controllare le immagini di sfondo. Spiegheremo quindi le

seguenti proprietà CSS:

color

background-color

background-image

background-repeat

background-attachment

background-position

background

Colori e sfondi

La proprietà color descrive il colore di primo piano di un elemento.

Per esempio, immagina di volere tutti i titoli del documento di colore rosso

scuro.

I titoli sono tutti marcati con l'elemento HTML <h1>.

Il codice sotto definisce il colore rosso dell'elemento <h1>.

h1 {

color: #ff0000;

}

Colori e sfondi

La proprietà background-color descrive il colore di

sfondo degli elementi.

L'elemento <body> contiene tutto il contenuto di un

documento HTML.

Per questo motivo, per cambiare il colore di sfondo di tutta

la pagina, dovremmo applicare la proprietà background-

color all'elemento <body>.

Il colore di sfondo può essere applicato anche ad altri

elementi compresi i titoli e il testo.

Colori e sfondi

Nell'esempio sotto sono stati applicati diversi colori

di sfondo agli elementi <body> e <h1>.

body {

background-color: #FFCC66;

}

h1 {

color: #990000;

background-color: #FC9804;

}

Colori e sfondi

Colori e sfondi

Nell'esempio sotto sono stati applicati diversi

colori di sfondo agli elementi <body> e <h1>.

body {


}

h1 {

color: #990000;


}

Colori e sfondi

Colori e sfondi

La proprietà CSS background-image viene usata per

inserire una immagine di sfondo.

Come esempio di immagine di

sfondo abbiamo usato la farfalla

sotto.

Colori e sfondi

Per inserire l'immagine della farfalla come immagine di

sfondo di una pagina web applica semplicemente la

proprietà background-image al <body> e specifica la

posizione dell'immagine.

body {


background-image: url("butterfly.gif");

}

h1 {

color: #990000;


}

Colori e sfondi

Colori e sfondi

NB: Nota come abbiamo specificato l'indirizzo

dell'immagine come url("butterfly.gif").

Questo significa che l'immagine è posizionata nella stessa

cartella del foglio di stile.

Puoi riferti anche ad immagini in altre cartelle

usando url("../images/butterfly.gif") o anche su Internet

indicando l'indirizzo completo del

file: url("http://www.html.net/butterfly.gif").

Colori e sfondiNell'esempio sopra hai notato che per default la farfalla viene

ripetuta sia orizzontalmente che verticalmente in modo da coprire

tutto lo schermo?

La proprietà background-repeat controlla questo comportamento.

Valore Descrizione

Background-repeat: repeat-xL'immagine viene ripetuta

orizzontalmente

background-repeat: repeat-yL'immagine viene ripetuta

verticalmente

background-repeat: repeatL'imagine viene ripetuta sia

orizzontalmente che verticalmente

background-repeat: no-repeat L'immagine non viene ripetuta

Colori e sfondi

Per esempio, per evitare ripetizione di un'immagine di

sfondo il codice dovrebbe apparire come questo:

body {


background-image:

url("butterfly.gif");

background-repeat: no-repeat;

}

h1 {

color: #990000;


}

Colori e sfondi

Colori e sfondi

La proprietà background-attachment specifica se

una figura di sfondo è fissa o si muove insieme

all'elemento che la contiene.

Una immagine di sfondo fissa non si muoverà con il

testo quando il lettore scorrerà la pagina, mentre una

immagine di sfondo non bloccata si muoverà insieme al

testo della pagina web.

Colori e sfondi

La tabella sotto sottolina i due valori che può

avere background-attachment.

Valore Descrizione Esempio

Background-

attachment: scroll

L'immagine si

muove con la pagina

- non bloccata

Visualizza

l'esempio

Background-

attachment: fixed

L'immagine è

bloccata

Visualizza

l'esempio

http://it.html.net/tutorials/css/lesson3_ex8.php


Colori e sfondiIl codice sotto, per esempio, blocca l'immagine di sfondo.

body {




background-attachment: fixed;

}

h1 {

color: #990000;


}

Visualizza l'esempio


Colori e sfondiPer default una immagine di sfondo verrà posizionata

nell'angolo in alto a sinistra dello schermo.

La proprietà background-position ti permette di cambiare il

default e posizionare l'immagine di sfondo in qualsiasi altro posto

dello schermo che preferisci.

Ci sono molti modi per stabilire i valori di background-position.

Tutti comunque stabiliscono un insieme di coordinate.

Per esempio, il valore '100px 200px' posiziona l'immagine a 100px

dal lato sinistro e a 200px dal bordo superiore della finestra del

browser.

Le coordinate possono essere indicate come percentuale delle

dimensioni dello schermo, unità fisse (pixel, centimetri, ecc.) o puoi

usare le parole inglesi top, bottom, center, left e right.

Il modello sotto illustra meglio il sistema:

Colori e sfondi

Colori e sfondi

La tabella ti da qualche esempio

Valore Descrizione Esempio

background-position:

2cm 2cm

L'immagine è

posizionata a 2 cm

dalla sinistra e a 2 cm

dal basso della pagina



50% 25%

L'immagine è centrata

ad un quarto della

pagina dal basso



top right

L'immagine è

posizionata nell'angolo

in alto a destra della

pagina





Colori e sfondiIl codice di esempio sotto posiziona l'immagine

di sfondo nell'angolo in basso a destra:

body {





background-position: right bottom;

}

h1 {

color: #990000;


}

Colori e sfondi

Colori e sfondi

La proprietà background è una scorciatoia per tutte le

proprietà di sfondo che abbiamo elencato in questa lezione.

Con la proprietà background puoi raggruppare molte proprietà

insieme e scrivere così il tuo foglio di stile in una maniera

ancora più corta e più facile da leggere.

Guarda per esempio queste cinque linee:





background-position: right bottom;

Colori e sfondi

Usando background puoi ottenere lo stesso risultato con

solo una linea di codice:

background: #FFCC66 url("butterfly.gif") no-repeat fixed

right bottom;

Di seguito l'ordine con cui devono essere inserite le

proprietà:

[background-color] | [background-image] | [background-

repeat] | [background-attachment] | [background-position]

Colori e sfondi

Se una proprietà non viene definita verrà

automaticamente posta al suo valore di default.

Per esempio, background-attachment e background-

position non vengono definite nell'esempio:

background: #FFCC66 url("butterfly.gif") no-repeat;

Queste due proprietà, che non sono state specificate,

verranno soltanto definite con il loro valore di default che,

come abbiamo visto, è scroll e top left.

FontIn questa lezione imparerai qualcosa sui font e

su come applicarli utilizzando i CSS.

Verranno quindi descritte le seguenti proprietà

CSS:

font-family

font-style

font-variant

font-weight

font-size

font

Font

La proprietà font-family viene usata per definire le priorità

per la lista dei caratteri da usare per visualizzare un elemento

o una pagina web.

Se il primo font della lista non è stato istallato sul computer

che accede al sito, allora verrà provato il secondo font della

lista e così via finchè non verrà trovato un fonte disponibile.

Font

Ci sono due tipi di nomi per catalogare i font:

i nomi della famiglia e le famiglie generiche.

I due termini vengono spiegati sotto.

Nome della famiglia

Esempi di nomi della famiglia (conosciuto spesso con il termine

"font") possono essere per esempio "Arial", "Times New

Roman" o "Tahoma".

Famiglia generica

Le famiglie generiche possono essere descritte meglio come

gruppi di nomi di famiglie con caratteristiche uniformi.

Un esempio è il sans-serif (in italiano, senza grazie), che è la

collezione dei font senza le cosiddette grazie, o "piedi".

FontUn esempio di lista di priorità dei font potrebbe essere

fatta così:

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}

I titoli marcati con <h1> verranno visualizzati con il font

"Arial".

Se questo font non è stato istallato sul computer dell'utente,

allora verrà utilizzato al suo posto il font "Verdana".

Se entrambi questi font non sono disponibili, i titoli verranno

visualizzati utilizzando un font della famiglia sans-serif.

Nota come il nome del font "Times New Roman" contiene

degli spazi e per questo motivo viene messo tra doppi apici.

Font

La proprietà font-style definisce lo

stile normale, italico o obliquo del font scelto.

Nell'esempio sotto tutti i titoli marcati

con <h2> verranno visualizzati in italico.

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;

font-style: italic;}

Font

La proprietà font-variant viene usata per scegliere

tra le varianti normal o small-caps di un font.

Un font small-caps è un font che usa tutte lettere

maiuscole di dimensioni leggermente più piccole, al

posto delle lettere minuscole.

FontSe viene assegnato a font-variant il valore small-caps e

non è disponibile nessun font small-caps il browser

molto probabilmente mostrerà il testo tutto maiuscolo.

h1 {font-variant: small-caps;}

h2 {font-variant: normal;}

FontLa proprietà font-weight descrive il grado di neretto,

o "di pesantezza", che dovrebbe avere il font.

Un font può essere sia normal che bold.

Alcuni browser supportano anche l'uso di una serie di

numeri tra 100 e 900 (in centinaia) per descrivere la

pesantezza di un font.

p {font-family: arial, verdana, sans-serif;}

td {font-family: arial, verdana, sans-serif; font-

weight: bold;}

FontLa dimensione di un font viene definita con la proprietà font-size.

Per descrivere le dimensioni di un font si può scegliere tra diverse unità

di misura (per esempio, pixel e percentuali).

In questo tutorial ci focalizzeremo sulle unità più utilizzate comunemente

e più appropriate, mostrate negli esempi:

h1 {font-size: 30px;}

h2 {font-size: 12pt;}

h3 {font-size: 120%;}

p {font-size: 1em;}

Le unità 'px' e 'pt' indicano dimensioni assolute per il

font, mentre '%' e 'em' permettono all'utente di

ridimensionare il font come preferiscono.

FontIn linea di massima possiamo dire che ogni unità di misura ammessa

nei CSS ha una destinazione d'uso precisa:

pt

I punti (pt) sono l'unità di misura utilizzata nei processi di stampa e

nei software (come ad esempio Microsoft Word) destinati alla

creazione di documenti stampabili.

Le stampanti, infatti, non "ragionano" in pixel ma in punti.

Se mandiamo in stampa un testo formattato in pixel la stampante

provvederà autonomamente a convertire i pixel in punti. Se state

predisponendo un foglio di stile per la stampa, quindi, il

suggerimento è di utilizzare pt per avere un risultato più preciso.

px

I pixel (px) sono, ovviamente, l'unità di misura dei monitor o,

più in generale, dei display (la cui risoluzione è data dal

numero di pixel della linea orizzontale per quella verticale).

Font

Em

L'em, a differenza di pt e px, è un'unità di misura

relativa (cioè non fissa).

Per utilizzare questa unità di misura si definisce nel

body del documento la dimensione di default dei

caratteri utilizzando i pixel.

Dopodiché, mediante em, vengono definiti i singoli

elementi della pagina.

L'unità di misura così definita (in "em") sarà relativa

alla dimensione dei caratteri di default.

In sostanza l'em è una specie di moltiplicatore della

dimensione di default.

Font

font-size: 1.5 em

avrà, in pratica, un font di 15 pixel sulla base

di questo semplice calcolo:

10px * 1.5 = 15px

facciamo un esempio: se la dimensione dei caratteri di

default è 10 pixel, un paragrafo avente

FontUsando la proprietà font è possibile raggruppare tutte le diverse

proprietà dei font in una sola.

Per esempio immagina queste quattro linee di codice usate per

descrivere le proprietà del font per il tag <p>:

p { font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

}

Usando la proprietà per il raggruppamento il codice sarà

semplificato:

p { font: italic bold 30px arial, sans-serif;

}

L'ordine dei valori per font è:

font-style | font-variant | font-weight | font-size | font-family

Prof. Giuseppe ROMANO...Cascading Style Sheets (CSS) Molte proprietà usate nei Cascading Style...

Documents

Transcript of Prof. Giuseppe ROMANO...Cascading Style Sheets (CSS) Molte proprietà usate nei Cascading Style...