HTML + CSS - Lezione 3
Download as PPTX, PDF1 like681 views
Il documento fornisce una panoramica sul linguaggio CSS, spiegando come formattare le pagine web tramite regole stilistiche associate a selettori. Vengono illustrate le strutture di base del codice HTML e le proprietà CSS più comunemente utilizzate, come colori, bordi e margini. Infine, il documento affronta l'uso di selettori unici e di classe per la formattazione degli elementi.
HTML + CSS - Lezione 3
- 1. HTML + CSSCSS: le proprietàprincipali e qualchetrucco.LEZIONE 31/23
- 2. CSS è un linguaggio che consente di formattare le pagine web2/22
- 3. 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
- 4. Un CSS (Cascade Style Sheet)è un file che contiene un elenco di regole come questa:p { color: red; font-size: 15px; }ValoreProprietàSelettore di tag4/22
- 5. <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
- 6. Struttura ad albero dell’HTML:<html><head> <body><title> <div> <h1> <p>6/22
- 7. 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
- 8. 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
- 9. Un file CSS si associa ad una pagina web così:<head> <link type="text/css" rel="stylesheet" href="pippo.css“ /></head>9/22
- 10. Le proprietà CSS più usate:IL TESTOcolorfont-familyfont-sizefont-weighttext-align10/22
- 11. 11/22
- 12. Le proprietà CSS più usate:BORDI E SFONDIbackground-colorbackground-imageborder-widthborder-styleborder-color12/22
- 13. div { background-image: url(' stelle.jpg'); }13/22
- 14. Le proprietà CSS più usate:ALLINEAMENTI, MARGINI E DIMENSIONIfloat,clearheight,widthmargin,paddingoverflow14/22
- 15. 15/22
- 16. div{ margin-top: 10px; margin-right: 5px; margin-bottom: 7px; margin-left: 6px; }=div { margin: 10px 5px 7px 6px; }16/22
- 17. Affiancare i <div> e/o gli <li>:17/22
- 18. Allineare i <div> al centro:18/22
- 19. I SELETTORI:<divid="blu">…</div>#blu { color: blue; }<divclass=“verde">…</div>.verde { color: green; }19/22
- 20. I SELETTORI:L’id è UNICOLa classe può essere condivisa da più tag20/22
- 21. I SELETTORI:#bluul.rosso li { … }seleziona tutti gli <li>che stanno dentro gli <ul> con class="rosso"che stanno dentro il tagcon id="blu"21/22
- 22. Grazie dell’attenzione ;-)Vincenzo Caicovincenzocaico@gmail.com