fogli di stile css
TRANSCRIPT
Daniele Moraschi
Email: [email protected]
Accademia di Belle Arti LABA di Brescia
Computer Graphics
Fogli di stile CSS
Tipi di elementi
Elementi a livello di blocco (block level elements)Generalmente iniziano nuove righe
Visibilmente formano dei blocchi attorno al contenutoes. <p>, <h1>~<h6>, <ul>, <dl>, <address>, <table>, <div>
Elementi in linea (inline level elements)
Non creano nuovi blocchi di contenuti
Rimangono in linea con il contenuto testuale
es. <a>, <strong>, <em>, <span>
Elementi rimpiazzati
Elementi dei quali il browser ne conosce già le dimensioni
es. <img>, <input>, <texarea>, <select>
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!
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
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
I CSSovvero 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
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>
Regole CSS
<body> <h1>Hello World!</h1> <p> Paragrafo <em>italic<em> </p> <img .../></body>
body {background: #000;
width: 600px;margin: 0 auto;
}
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.
Le Classi
<dl> <dt>Prodotto</dt> <dd class=”imgProdotto”> <img ... /> <img ... /> </dd> <dd class=”descProdotto”> ... </dd> <dd class=”descProdotto”> ... </dd> <dd class=”priceProdotto”> ... </dd></dl>
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
Gli identificatori
<img id=”logoSito” ... />
<ul id=”leftMenu” class=”menu”> <li> ... </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
<a href=”...” ...> link </a>
<div class=”article”> <p> ... </p> <p> ... </p></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
I valoriA seconda della proprietà CSS, possono essere assegnati diversi tipi
di valori:
- Parola chiave inherit: il valore da assegnare viene ereditato dell'elemento padre
- Parola chiave auto: il browser utilizzerà il valore di default
- Lunghezze / dimensioni: 10px, 1em, 2pt, 2cm, 120%
- Percentuali: 80%
- URI: url('http://www...'), url('/file')
- Colori: #ff0043, #f00, black, rgb(0, 255, 255), rgb(0, 10%, 100%)
- Famiglie di caratteri: times, helvetica, arial sans-serif
- Parole chiave contestuali alla proprietà: block, none, hidden, visible, inline
Principali dichiarazioniLista 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
Principali dichiarazioniProprietà 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;
Principali dichiarazioniPosizionamento:
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")
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/