HTML + CSS - Lezione 3
-
Upload
vincenzo-caico -
Category
Education
-
view
828 -
download
2
description
Transcript of HTML + CSS - Lezione 3
![Page 1: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/1.jpg)
HTML + CSSCSS: le proprietà principali e qualche trucco.
LEZIONE 3
1/23
![Page 2: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/2.jpg)
CSS è un linguaggio che consente di formattare le pagine
web
2/22
![Page 3: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/3.jpg)
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
![Page 4: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/4.jpg)
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
![Page 5: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/5.jpg)
<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
![Page 6: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/6.jpg)
Struttura ad albero dell’HTML:<html>
<head> <body>
<title> <div>
<h1> <p>6/22
![Page 7: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/7.jpg)
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
![Page 8: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/8.jpg)
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
![Page 9: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/9.jpg)
<head><link type="text/css" rel="stylesheet"
href="pippo.css“ /></head>
Un file CSS si associa ad una pagina web così:
9/22
![Page 10: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/10.jpg)
colorfont-family
font-sizefont-weighttext-align
Le proprietà CSS più usate:IL TESTO
10/22
![Page 11: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/11.jpg)
11/22
![Page 12: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/12.jpg)
background-colorbackground-image
border-widthborder-styleborder-color
Le proprietà CSS più usate:BORDI E SFONDI
12/22
![Page 13: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/13.jpg)
13/22
div { background-image: url(' stelle.jpg'); }
![Page 14: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/14.jpg)
float, clear height, width
margin, paddingoverflow
14/22
Le proprietà CSS più usate:ALLINEAMENTI, MARGINI E DIMENSIONI
![Page 15: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/15.jpg)
15/22
![Page 16: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/16.jpg)
div { margin-top: 10px; margin-right: 5px;
margin-bottom: 7px; margin-left: 6px; }
=
div { margin: 10px 5px 7px 6px; }
16/22
![Page 17: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/17.jpg)
Affiancare i <div> e/o gli <li>:
17/22
![Page 18: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/18.jpg)
Allineare i <div> al centro:
18/22
![Page 19: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/19.jpg)
I SELETTORI:
19/22
<div id="blu">…</div>#blu { color: blue; }
<div class=“verde">…</div>.verde { color: green; }
![Page 20: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/20.jpg)
I SELETTORI:
20/22
L’id è UNICOLa classe può essere condivisa da più tag
![Page 21: HTML + CSS - Lezione 3](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8bf9b379597b2b8b4da0/html5/thumbnails/21.jpg)
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"