1. Daniele Moraschi Email: [email_address] Accademia di Belle Arti LABA di Brescia Computer Graphics Fogli di stile CSS
2.
3. Il Box Model Gli elementi di blocco prendono il 100% della lunghezza dell'elemento padre. Occupando tutto lo spazio disponibile posizionano l'elemento che segue sulla riga successiva. Gli elementi in linea occupano solo la dimensione dei contenuti , quindi due o più elementi in linea possano apparire uno di seguito all'altro. N.B. Gli attributi di lunghezza (width) e altezza (height) applicati agli elementi in linea non causano alcuna modifica di dimensioni all'oggetto!
4. Elementi di blocco Principali elementi di blocco: <div> Box semplice <h1> … <h6> Titoli <p> paragrafi <ul> , <ol> , <dl> Liste (non ordinate, numerate, di definizione) <li> , <dt> , <dd> Elementi delle liste <table> Tabelle <address> Indirizzi <form> Moduli di inserimento dati
5. Elementi in linea Principali elementi in linea: <span> Contenitore semplice <a> Ancora, usata per i link <strong> Visualizzato generalmente in bold <em> Enfasi, generamente visualizzato in italic <img ... /> Immagini <cite> Citazioni <br /> Pur generando una nuova linea non è da considerarsi un elemento di blocco
6. I CSS ovvero Cascading Style Sheet (fogli di stile a cascata) Definiscono la formattazione dei documenti HTML, XHTML Necessari per mantenere una separazione tra contenuto e aspetto grafico. L'HTML gestisce solo i contenuti, e attraverso i tag definisce i ruoli che ogni elemento deve avere all'interno della pagina. Il CSS descrive come questi elementi dovranno apparire nel browser, attraverso un codice totalmente separato. Il foglio di stile può essere applicato a più pagine HTML , consente di definire il “ tema ” dell'intero sito internet Sono detti fogli di stile a cascata in quanto una regola definita a livello di contenitore esterno è, in cascata, ereditata anche all'interno, a meno che non si decida di modificarla o cancellarla. Riguardo l'accessibilità e i suoi requisiti delineati nella legge 4/2004 (Legge Stanca), i CSS sono necessari e obbligatori (requisiti 3 - 11 – 13) http://www.pubbliaccesso.it/biblioteca/documentazione/studio_lineeguida/3_requisiti_tecnica.htm
7. Associare i CSS ai documenti HTML Fogli di stile incorporati Le regole CSS possono anche essere inserite direttamente nel codice del documento <head> <title>Titolo</title> <style type=”text/css”> h1{...} </style> </head> <body> ... </body> Fogli di stile esterni Costituiti da un file separati al documento HTML Il foglio di stile ha estensione .css <head> <title>Titolo</title> <link rel=”stylesheet” href=”stile.css” type=”text/css” /> </head> <body> ... </body>
8.
9.
10.
11.
12.
13. Principali dichiarazioni Lista delle proprietà per la specifica del font: font-style : italic | normal oblique; font-weight : normal | bold; font-size : 90% | 12px | 2em; line-height : 2em | 12px; font-family : arial, helvetica, sans-serif; font : italic bold 12px arial, helvetica, sans-serif; E’ possibile raggruppare parte delle proprietà con la sola dichiarazione font Per inserire immagini di sfondo e colore di sfondo: background-color : #FFCC99; background-image : url (../immagini/sfondo.jpg); background-repeat : repeat | repeat-x | repeat-y | no-repeat; background-position : 20% 25% | top left; background-attachment : fixed; background : #ff0000 url (../immagini/sfondo.jpg) no-repeat; E’ possibile raggruppare gran parte delle proprietà nella dichiarazione background
14. Principali dichiarazioni Proprietà del testo: color : #ff0000 | red | rgb(); text-align : center | left | right | justify; line-height : 20px | 10% | 2em; text-decoration : none | underline | overline Margin e Padding (seguno la stessa sintassi) margin-top : 5px; margin-right : 10px; margin-bottom : 15px; margin-left : 20px; margin : 5px 10px 15px 20px; E’ possibile raggruppare le proprietà nella sola dichiarazione margin / padding Bordi border : 20px solid red;
15. Principali dichiarazioni Posizionamento : display : block | inline | none; visibility : visible | hidden; float : left | right; clear : left | right | both; top | right | bottom | left : 10px; position : absolute | relative | fixed; Proprietà delle liste: list-style-image : url("immagini/arrow.gif") list-style-type : none | circle | square | disc | decimal ... list-style : circle url("immagini/arrow.gif")
![Daniele Moraschi Email: [email_address] Accademia di Belle Arti LABA di Brescia Computer Graphics Fogli di stile CSS](https://image.slidesharecdn.com/less4-111124054340-phpapp01/85/Fogli-di-stile-CSS-1-320.jpg)
![Tipi di elementi ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)