html e css - 4 | webmaster & webdesigner

of 21/21
HTML e CSS [4] Synergia – Matteo Magni

Post on 24-May-2015

867 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

Quarta lezione modulo HTML e CSS del corso per WebMaster & WebDesigner

TRANSCRIPT

  • 1. HTML e CSS [4]Synergia Matteo Magni

2. CssStruttura delle regole Selettore Indica su quale elemento del documento vogliamo agire. Blocco delledichiarazioni Propriet Valore 3. Selettori Come selettori di base ho gli elementi deldocumento (i tag)

p{color:white;backgroundcolor:green;}span{color:blue;backgroundcolor:black;}strong{color:blue;backgroundcolor:red;} 4. Raggruppare i selettorih1{color:purple}h2{color:purple}h3{color:purple} h1,h2,h3,h4,h5,h6h4{color:purple} {color:purple}h5{color:purple}h6{color:purple} 5. Selettore Universale*{color:red}Introdotto dai css2 lequivalente di unselettoreraggruppato con tuttigli elementi deldocumento 6. Selettore id - Attributo id Consente di attribuire gli #pippo{color:stili con modalit purple}indipendente dagli

elementi oppure in pippocombinazione con i

selettori di elemento. oppure Nel documento ci deve div#pippoessere un solo elemento {color:yellow}per ogni id 7. Selettore class - Attributo class Funziona come lid ma.pippo{color:purple}consente di selezionare

pi elementi.pippo Possono esserci n

elementi con la stessa

pluto

Possono esserci elementi oppurecon pi classi div.pippo{color:yellow}

8. Pseudoclassi Le pseudoclassia:link{}identificano a:hover{}elementi in base a:visited{}alle loro propriet. 9. Giochiamo un po con le propriet background. Definisce lo sfondo font. Definisce le propriet deldi un elemento. una scorciatoia carattere. una scorciatoia(shorthand properties) per(shorthand properties) per font-background-attachment,family, font-size e font-weight.background-color, background- margin e padding. Definiscono loimage, background-position espazio circostante gli elementi. Labackground-repeat.prima lo spazio esterno ai bordi, la border. Definisce il bordo di unseconda quello interno.elemento. una scorciatoia text-align. Definisce(shorthand properties) per border- lallineamento degli elementi, tracolor, border-style e border-width. cui il testo. color. Definisce il colore del testo(wikipedia) di un elemento. Per definire losfondo si utilizza la proprietbackground. 10. Giochiamo un po con i valoriColori: Font:#ff6600 fontfamily:"Arial",#f60"Verdana",serif;rgb(255,102,0)Rgb(100%,40%,0%)Url:url(http://esempio.it/file.html)url("http://esempio.it/file.html") 11. Elementi Float Questa propriet definisce un bloccoflottante, ovvero che permette ladisposizione di altri elementi ai suoi lati.float:left float:right clear:bothclear:rightclear:left 12. Liste Menu [dejavu]

    • Home title="Home">Home
    • Contattititle="Contatti">Contatti
    • aziendatitle="azienda">azienda

Lo formatteremo tramite i css 13. Menu liste e floatdiv#navigation_1{text div#navigation_2{textalign:center} align:center}li{display:inline} div#navigation_2/*rendoglielementiul{width:375px;liinline*/margin:0auto;list styletype:none;} div#navigation_2 li{float:left;width: 75px}/*Rendogli elemntilifloat*/ 14. Layout with TableMainTitleofWebPageContentgoeshereCopyrightW3Schools.com 15. Layout Table Less

MainTitleof WebPage
Contentgoeshere
CopyrightW3Schools.com
16. Esempihttp://blog.html.it/layoutgala/indexIta.html 17. CssZenGardenhttp://www.csszengarden.com/ evidente la necessit che gli artisti delle grafica prendano in seria considerazione i CSS. Il Giardino Zen si prefigge di stimolare, ispirare ed incoraggiare la partecipazione. Come punto di partenza, si osservino alcuni dei progetti in elenco. Cliccando su ciascuno di essi il relativo foglio di stile verr caricato in questa stessa pagina. Il codice esattamente identico, lunica cosa che viene modificata il file .css esterno. Si, e proprio cos! 18. CssZenGardenhttp://www.csszengarden.com/tr/italiano/CSS consentono un controllo totale ecompleto sullo stile di un documentoipertestuale. Lunico modo per spiegarlo,in modo da stimolare linteresse nellepersone, mostrare cosa tutto questopu effettivamente implicare, una voltache le redini sono messe nelle mani dicoloro i quali sono in grado di crearebellezza dalla struttura. Fino ad oggi,gran parte degli esempi dei trucchi ehacks pi interessanti sono stati illustratida specialisti di struttura e codice. Idesigner devono ancora fare la loroparte. Questo stato di cose devecambiare. 19. Validare il codice http://jigsaw.w3.org/css-validator/Il w3c ci osserva 20. BibliografiaAnche in italiano 21. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cyphermail:[email protected]