Scribd
Carica
16 visualizzazioni31 pagine

CSS (Cascading Style Sheet)

Caricato da

Estian2231
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
16 visualizzazioni31 pagine

CSS (Cascading Style Sheet)

Caricato da

Estian2231
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 31

CSS (Cascading Style

Sheet)
Introduzione
I fogli di stile permettono di definire lo stile con cui visualizzare i vari
elementi che compongono una pagina Web.
Per elemento si intende un qualsiasi oggetto HTML (<BODY>, <P>,
<H1>, ecc.) e con stile si intende l’insieme delle proprietà dell’elemento
(colore, forma, posizione, ecc.).
Usare i CSS consente di separare il contenuto di una pagina web
dall’aspetto.
Vantaggi: per apportare una modifica valida per tutte le pagine
dell’applicazione basterà fare una sola modifica nel CSS.
Sintassi CSS
SELETTORE { proprietà : valore}
Esempi
BODY { color : red}
H1, H2, H3, H4, H5, H6
{
P { font-family : ‘’sans serif ’’} color: green }

P { text-align: center; color : red }


P { font-family : ‘’sans serif ’’, courier, arial
}
P { text-align: center;
color: black;
font-family: arial
}
Inserimento dei fogli di stile
Quando un Browser legge un foglio di stile, formatta il documento in
accordo con esso.
I modi per inserire un foglio di stile sono tre:
• Fogli di stile esterni;
• Fogli di stile interni;
• Fogli di stile Inline;
Fogli di stile esterni
Questa soluzione è la migliore quando uno stile è applicato a più
pagine. Ogni pagina del sito web deve collegarsi con il foglio di stile
usando il tag <LINK> , che va inserito nella sezione HEAD secondo il
seguente schema:
<HEAD>
<LINK rel=‘’Stylesheet’’
type=‘’text/css’’
href=‘’mystyle.css’’ >
</HEAD>
Fogli di stile interni
Questa soluzione è adatta quando un singolo documento ha un unico stile. Gli stili
interni sono definiti nella sezione HEAD usando il tag <STYLE>
<HEAD>
<STYLE type=‘’text/css’’>
HR {border: 0;
border-bottom: 10px dashed red;
background-color: red}
P { margin-left: 20px}
BODY {background-image: url (‘’images/back40.gif’’)}
</STYLE>
</HEAD>
Fogli di stile Inline
Questo metodo va usato con parsimonia, per esempio, quando uno
stile deve essere applicato a un elemento per una sola volta.
Per usare gli stili Inline si usa l’attributo STYLE nel tag su cui si vuole
intervenire:
<P STYLE= ‘’color : red; margin-left : 20px’’>
Paragrafo di prova con Folio di stile Inline
</P>
Esempio 1
Realizzare una pagina web con collegamento a un foglio di stile esterno
che presente le seguenti regole di formattazione:
Sfondo della pagina giallo
Dimensione del titolo di primo livello 36 pt
Colore titolo secondo livello blu
Paragrafi con margine sinistra a 50px
Soluzione Esempio1
Pagina .html Foglio di stile .css

<!DOCTYPE HTML>
<html> BODY { background-color: yellow}
<head> H1 {font-size: 36pt}
<meta charset="UTF-8" /> H2 {color : blue}
<title> Esercitazione1 con CSS </title> P {margin-left: 50px}
<LINK rel="stylesheet"
type="text/css"
href="Esercizio1.css">
</head>
<body>
<H1> Intestazione con 36 pt </H1>
<H2> Intestazione in blu </H2>
<P> Paragrafo con margine di 50 pixel </P>
</body>
</html>
Regole di priorità
1. Stile Inline: interno alla pagina HTML
2. Pagina di stile interna: definita nel tag <HEAD>
3. Pagina di stile esterna: file .css
4. Default del Browser
Valori
Tutti i valori possono essere descritti da:
Un segno
Un numero (intero o reale)
L’unità di misura (pixel, punti, cm, ecc.)
SIGLA NOME VALORE
pt punti 1 punto vale circa 0,35 mm
Px pixel
Proprietà
• Sfondo
background-color imposta il colore di sfondo.
Valori ammessi Descrizione
color Il colore può essere indicato dal nome (red), da un
valore rgb (rgb (255, 0, 0) ) o da un numero
esadecimale (#ff0000)
tranparent Il colore di sfondo è trasparente
Proprietà
• Sfondo
background-image imposta un’immagine come sfondo.
Valori ammessi Descrizione
url Indirizzo dell’immagine
none Nessuna immagine
Proprietà
• Sfondo
background-repeat indica come deve essere ripetuta un’immagine di
sfondo.
Valori ammessi Descrizione
repeat l’immagine di sfondo viene ripetuta in senso sia
orizzontale che verticale
repeat-x l’immagine di sfondo viene ripetuta in senso
orizzontale
repeat-y l’immagine di sfondo viene ripetuta in senso verticale
No-repeat l’immagine di sfondo non viene ripetuta
Proprietà
• Sfondo
background-position imposta la posizione di un’immagine di sfondo.
Valori ammessi Descrizione
Top left In alto a sinistra
Top center In alto al centro
Top right In alto a destra
Center left A metà pagina sul bordo sinistro
Center center Al centro della pagina
Center right A metà pagina sul bordo destro
Bottom left In basso a sinistra
Bottom center In basso al centro
Bottom right In basso a destra
X-% Y-% Il primo valore è la posizione orizzontale, il secondo quella verticale.
L’angolo in alto a sinistra è indicato dai valori 0% 0%; l’angolo in basso a
destra è indicato dai valori 100% 100%
Proprietà
• Sfondo
background-attachment indica se l’immagine di sfondo è fissa o si
muove con la pagina.

Valori ammessi Descrizione


scroll L’immagine di sfondo si muove con il resto della pagina
fixed L’immagine di sfondo resta fissa anche se si agisce sulle
barre di scorrimento
Propriet Riassumendo background è la proprietà di sintesi per impostare
à tutte le proprietà di background in un’unica dichiarazione

Valori ammessi Descrizione


Background-color Si possono specificare da una a cinque proprietà
Background-image
Background-repeat
Background-attachment
Background-position
Proprietà: Testo
Le proprietà di testo permettono di controllare l’aspetto del testo. È
possibile cambiare il colore di un testo, decorarlo, indentare la prima
riga e altro ancora. ESEMPIO
<HTML>
<HEAD>
Color imposta il colore di un testo <TITLE> Esempio CSS colore testo
</TITLE>
Valori Descrizione <STYLE type=‘’text/css’’>
ammessi BODY { color: rgb (255, 0,255) }
<STYLE>
Colore Il colore può essere indicato dal </HEAD>
nome (red), da un valore <BODY>
rgb( rgb(255,0,0)) o da un Questo testo ha colore viola!
numero esadecimale (#ff0000)
</BODY>
</HTML>
Proprietà: Testo
letter-spacing modifica lo spazio tra i caratteri e il suo valore può essere
anche negativo ESEMPIO
Valori Descrizione <HTML>
ammessi <HEAD>
normal Definisce lo spazio normale tra <TITLE> Esempio CSS spazio tra caratteri </TITLE>
i caratteri <STYLE type=‘’text/css’’>
P { letter-spacing: -1px}
Valore Indica lo spazio tra i caratteri <STYLE>
</HEAD>
<BODY>
<P>I caratteri sono ravvicinati </P>
</BODY>
</HTML>
Proprietà: Testo
text-align allinea il testo
Valori Descrizione ESEMPIO
ammessi <HTML>
left A sinistra <HEAD>
<TITLE> Esempio CSS testo allineato</TITLE>
right A destra <STYLE type=‘’text/css’’>
P { text-align: right}
center Centrato <STYLE>
</HEAD>
justify giustificato
<BODY>
<P> Il testo è allineato a destra </P>
</BODY>
</HTML>
Proprietà: Testo
text-decoration aggiunge decorazioni
Valori Descrizione ESEMPIO
ammessi <HTML>
none Nessuna decorazione <HEAD>
<TITLE> Esempio CSS testo decorato</TITLE>
underline Sottolineato <STYLE type=‘’text/css’’>
P { text-decoration : overline}
overline Soprassegnato <STYLE>
</HEAD>
line-through Barrato
<BODY>
blink Intermittente <P> Il testo è soprassegnato</P>
</BODY>
</HTML>
Proprietà: Testo
text-indent indenta la prima riga di un testo
ESEMPIO
Valori Descrizione <HTML>
ammessi <HEAD>
Valore Definisce un’indentazione fissa <TITLE> Esempio CSS testo indentato</TITLE>
<STYLE type=‘’text/css’’>
% Definisce un’indentazione
espressa in percentuale P { text-indent : 30px}
rispetto alla larghezza <STYLE>
dell’elemento che contiene il </HEAD>
testo <BODY>
<P> La prima riga del testo è rientrata a destra di 30 pixel.
La prima riga del testo è rientrata a destra di 30 pixel. La prima
riga del testo è rientrata a destra di 30 pixel </P>
</BODY>
</HTML>
Proprietà: Testo
text-transform controlla il maiuscolo e il minuscolo.
Valori Descrizione ESEMPIO
ammessi <HTML>
none Testo normale <HEAD>
<TITLE> Esempio CSS testo Maiuscolo_Minuscolo</TITLE>
capitalize Ogni parola del tetso inizia con <STYLE type=‘’text/css’’>
la maiuscola P { text-transform : capitalize}
uppercase Tutto maiuscolo <STYLE>
</HEAD>
lowercase Tutto minuscolo <BODY>
<P> Ogni parola del testo inizia con la maiuscola</P>
</BODY>
</HTML>
Proprietà: FONT
Le proprietà del carattere consentono di cambiare la forma del
carattere, il grado di ‘’grassetto’’ e lo stile del testo
Esempi di font
Serif o graziato Times New Roman, Bodoni, Garamond,
Minion Web, ITC Stone Serif, MS Georgia,
Bitstream Cyberbit
Sans-serif o elvetica Trebuchet, Avant Garde Gothic, Arial,
Verdana, Univers, Futura, Stone Sans, Gill
Sans, Helvetica
Monospace o monospaziato Courier, MS Courier New, Pretige, Everson
Mono
Proprietà: FONT
Font-family definisce la forma del carattere

Valori ammessi Descrizione


Serif graziato
Sans-serif Elvetica
Monospace Monospaziato
Cursive Corsivo
Fantasy Dipende dal browser
font Qualsiasi nome di font
Proprietà: FONT
Font-size imposta l’altezza del carattere
Valori Descrizione ESEMPIO
ammessi <HTML>
Xx-small Impostano la dimensione del font <HEAD>
X-small <TITLE> Esempio CSS altezza Carattere</TITLE>
Small <STYLE type=‘’text/css’’>
Large H1 { font-size : xx-large}
X-large P { font-size: 10px }
Smaller Diminuisce il font rispetto a quello <STYLE>
corrente </HEAD>
Larger Aumenta il font rispetto a quello corrente <BODY>
Valore Fissa l’altezza del carattere <H1>Titolo con dimensione extra large </H1>
<P> testo con dimensione 10 pixel </P>
% Altezza espressa in percentuale risetto </BODY>
all’altezza dell’elemento che contiene il
testo </HTML>
Proprietà: FONT
Font-style sceglie tra normale o obliquo
ESEMPIO
Valori ammessi Descrizione <HTML>
Normal Normale <HEAD>
Italic Corsivo <TITLE> Esempio CSS testo corsivo</TITLE>
<STYLE type=‘’text/css’’>
oblique obliquo
P { font-style : italic}
<STYLE>
</HEAD>
<BODY>
<P> testo in corsivo</P>
</BODY>
</HTML>
Proprietà: FONT
Font-variant imposta il maiuscoletto
ESEMPIO
Valori ammessi Descrizione <HTML>
Normal Normale <HEAD>
Small-caps Maiuscoletto <TITLE> Esempio CSS testo in maiuscoletto</TITLE>
<STYLE type=‘’text/css’’>
P { font-variant : small-caps}
<STYLE>
</HEAD>
<BODY>
<P> testo in maiuscoletto</P>
</BODY>
</HTML>
Proprietà: FONT
Font-weight imposta il grado di grassetto
Valori Descrizione ESEMPIO
ammessi <HTML>
Normal Normale <HEAD>
<TITLE> Esempio CSS testo grassetto</TITLE>
Bold Grassetto <STYLE type=‘’text/css’’>
Bolder Più nero rispetto al carattere corrente P { font-weight: bold }
Lighter più chiaro rispetto al carattere corrente <STYLE>
</HEAD>
100 Indicazioni del ‘’peso’’ del carattere; 400: <BODY>
200 normale; 700: grassetto <P> testo con carattere in grassetto</P>
300
…… </BODY>
900 </HTML>
Propriet Riassumendo font è la proprietà di sintesi per impostare tutte
le proprietà di font in un’unica dichiarazione
à:
Valori ammessi Demenuscrizione
Font-style Si possono specificare da una a cinque proprietà
Font-variant
Font-weight
Font-size / line-height
Font-family
Caption Definisce i font utilizzati per i controlli che hanno
un’intestazione all’interno di un form
Icon Definisce i controlli utilizzati per le etichette con icona
menu Definisce i font usati per i menu a cascata
Message-box Definisce i font usati per le finestre di dialogo
Status-bar Definisce i font usati per le barre di stato dei form
Esempio
ESEMPIO
<HTML>
<HEAD>
<TITLE> Esempio CSS font unica dichiarazione</TITLE>
<STYLE type=‘’text/css’’>
P { font:
small-caps
oblique
bold 18px/36px
arial }
<STYLE>
</HEAD>
<BODY>
<P> testo in maiuscoletto, font obliquo alto 18 pixel con altezza della riga di 36 pixel, carattere arial </P>
</BODY>
</HTML>

Potrebbero piacerti anche