Post on 29-Nov-2014
description
HTML + CSSCSS: le proprietà principali e qualche trucco.
LEZIONE 3
1/23
CSS è un linguaggio che consente di formattare le pagine
web
2/22
Formattare:definire le dimensioni, il
posizionamento, il colore, i bordi, lo sfondo, i margini
esterni ed interni, etc.degli elementi
di una pagina web3/22
Un CSS (Cascade Style Sheet)è un file che contiene un elenco
di regole come questa:
p { color: red; font-size: 15px; }
Selettore di tagProprietà
Valore
4/22
<html><head>
<title>Prima pagina</title></head><body>
<div><h1>Benvenuti!</h1><p>La prima pagina web di Giuseppe Rossi</p>
</div></body>
</html>5/22
Struttura ad albero dell’HTML:<html>
<head> <body>
<title> <div>
<h1> <p>6/22
CSS = fogli di stile a cascata:assegnata una regola a un
selettore, la regola si propaga a tutti i tag discendenti.
A meno che non definiamo altre regole per essi.
7/22
Esempio:body { color: red; }p { color: yellow; }
Il testo del body (e dei suoi discendenti) sarà rosso.Ma per i p sarà giallo.
8/22
<head><link type="text/css" rel="stylesheet"
href="pippo.css“ /></head>
Un file CSS si associa ad una pagina web così:
9/22
colorfont-family
font-sizefont-weighttext-align
Le proprietà CSS più usate:IL TESTO
10/22
11/22
background-colorbackground-image
border-widthborder-styleborder-color
Le proprietà CSS più usate:BORDI E SFONDI
12/22
13/22
div { background-image: url(' stelle.jpg'); }
float, clear height, width
margin, paddingoverflow
14/22
Le proprietà CSS più usate:ALLINEAMENTI, MARGINI E DIMENSIONI
15/22
div { margin-top: 10px; margin-right: 5px;
margin-bottom: 7px; margin-left: 6px; }
=
div { margin: 10px 5px 7px 6px; }
16/22
Affiancare i <div> e/o gli <li>:
17/22
Allineare i <div> al centro:
18/22
I SELETTORI:
19/22
<div id="blu">…</div>#blu { color: blue; }
<div class=“verde">…</div>.verde { color: green; }
I SELETTORI:
20/22
L’id è UNICOLa classe può essere condivisa da più tag
I SELETTORI:
21/22
#blu ul.rosso li { … }
seleziona tutti gli <li> che stanno dentro gli <ul>
con class="rosso" che stanno dentro il tag
con id="blu"
Grazie dell’attenzione ;-)
Vincenzo Caicovincenzocaico@gmail.com