Fogli di stile CSS

1,253 views
1,142 views

Published on

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,253
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Fogli di stile CSS

  1. 1. Daniele Moraschi Email: [email_address] Accademia di Belle Arti LABA di Brescia Computer Graphics Fogli di stile CSS
  2. 2. Tipi di elementi <ul><li>Elementi a livello di blocco (block level elements) </li></ul><ul><ul><li>Generalmente iniziano nuove righe </li></ul></ul><ul><ul><li>Visibilmente formano dei blocchi attorno al contenuto </li></ul></ul><ul><li>es. <p> , <h1>~<h6> , <ul> , <dl> , <address> , <table> , <div> </li></ul><ul><li>Elementi in linea (inline level elements) </li></ul><ul><ul><li>Non creano nuovi blocchi di contenuti </li></ul></ul><ul><ul><li>Rimangono in linea con il contenuto testuale </li></ul></ul><ul><ul><li>es. <a> , <strong> , <em> , <span> </li></ul></ul><ul><li>Elementi rimpiazzati </li></ul><ul><ul><li>Elementi dei quali il browser ne conosce già le dimensioni </li></ul></ul><ul><ul><li>es. <img> , <input> , <texarea> , <select> </li></ul></ul>
  3. 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. 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. 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. 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. 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. 8. Regole CSS <ul><li><body> </li></ul><ul><li><h1> Hello World! </h1> </li></ul><ul><li><p> </li></ul><ul><li>Paragrafo </li></ul><ul><li><em> italic <em> </li></ul><ul><li></p> </li></ul><ul><li><img ... /> </li></ul><ul><li></body> </li></ul><ul><li>body { </li></ul><ul><li>background: #000; </li></ul><ul><li>width: 600px; </li></ul><ul><li>margin: 0 auto; </li></ul><ul><li>} </li></ul>body { background: #000; width: 600px; margin: 0 auto; } selettore proprietà valore h1 { color: #f00; font: arial, helvetica sans-serif; } p { padding: 20px; font-size: 12px; line-height: 14px } Il selettore indica a quali oggetti del documento deve essere assegnata la proprietà. Le proprietà indicano i vari aspetti su cui si vuole agire: il margine, lo sfondo di un oggetto, lo stile del testo... I valori indicano le caratteristiche che la singola proprietà deve assumere.
  9. 9. Le Classi <ul><li><dl> </li></ul><ul><li><dt> Prodotto </dt> </li></ul><ul><li><dd class =” imgProdotto ” > </li></ul><ul><li><img ... /> </li></ul><ul><li><img ... /> </li></ul><ul><li></dd> </li></ul><ul><li><dd class =” descProdotto ” > </li></ul><ul><li>... </li></ul><ul><li></dd> </li></ul><ul><li><dd class =” descProdotto ” > </li></ul><ul><li>... </li></ul><ul><li></dd> </li></ul><ul><li><dd class =” priceProdotto ” > </li></ul><ul><li>... </li></ul><ul><li></dd> </li></ul><ul><li></dl> </li></ul>dt { ... } .imgProdotto img { ... } .descProdotto { ... } .priceProdotto { ... } Una classe serve a selezionare oggetti in un qualche modo omogenei tra loro. Si assegna tramite l'attributo class =” nome-classe ” <h2 class =” notizia ” > ... </h2> <p class =” notizia ” > ... </p> .notizia { ... } h2.notizia { ... } p.notizia { ... } selettore in cascata
  10. 10. Gli identificatori <ul><li><img id =” logoSito ” ... /> </li></ul><ul><li><ul id =” leftMenu ” class=” menu ” > </li></ul><ul><li><li> ... </li> </li></ul><ul><li>... </li></ul><ul><li></ul> </li></ul>ul.menu { ... } #logoSito { ... } img#logoSito { ... } #leftMenu { ... } Si utilizzano quando è necessario individuare un UNICO oggetto nel documento HTML. Si assegna tramite l'attributo id =” nome ” A differenza delle classi, il selettore id non serve a raggruppare più oggetti omogenei tra loro, ma bensì a distinguere dagli altri un oggetto che sia unico all'interno del documento e non ripetibile . Gli identificatori
  11. 11. <ul><li><a href=”...” ... > link </a> </li></ul><ul><li><div class=” article ” > </li></ul><ul><li><p> ... </p> </li></ul><ul><li><p> ... </p> </li></ul><ul><li></ul> </li></ul>a { color: yellow; } a:hover { color: red; } .article:first-child { ... } p:first-letter { ... } Una pseudo-classe non definisce un elemento, ma un particolare stato di quest'ultimo, impostandone lo stile al verificarsi di certe condizioni. A livello sintattico le pseudo-classi non possono essere mai dichiarate da sole, ma devono, per loro stessa natura, appoggiarsi sempre ad un selettore. Le pseudoclassi a:link { ... } a:visited { ... } a:active { ... } a:link si applica a tutti i link non visitati a:visited si applica a tutti i collegamenti già visitati a:hover si applica al passaggio del mouse a:active si applica in fase di click sul link
  12. 12. I valori <ul><li>A seconda della proprietà CSS, possono essere assegnati diversi tipi di valori: </li></ul><ul><ul><li>- Parola chiave inherit : il valore da assegnare viene ereditato dell'elemento padre </li></ul></ul><ul><ul><li>- Parola chiave auto : il browser utilizzerà il valore di default </li></ul></ul><ul><ul><li>- Lunghezze / dimensioni: 10px , 1em , 2pt , 2cm , 120% </li></ul></ul><ul><ul><li>- Percentuali: 80% </li></ul></ul><ul><li>- URI: url(' http://www ... ') , url(' /file ') </li></ul><ul><ul><li>- Colori: #ff0043 , #f00 , black , rgb(0, 255, 255) , rgb(0, 10%, 100%) </li></ul></ul><ul><ul><li>- Famiglie di caratteri: times , helvetica , arial sans-serif </li></ul></ul><ul><ul><li>- Parole chiave contestuali alla proprietà: block , none , hidden , visible , inline </li></ul></ul>
  13. 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. 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. 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(&quot;immagini/arrow.gif&quot;) list-style-type : none | circle | square | disc | decimal ... list-style : circle url(&quot;immagini/arrow.gif&quot;)
  16. 16. Reference CSS http://www.w3schools.com/css/css_reference.asp Guida HTML.it http://css.html.it/guide/leggi/2/guida-css-di-base/ W3C Validation service: http://jigsaw.w3.org/css-validator/

×