Fogli di stile CSS

Daniele Moraschi

Email: [email protected]

Accademia di Belle Arti LABA di Brescia

Computer Graphics

Fogli di stile CSS

mailto:[email protected]

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

http://www/

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;

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/

http://www.w3schools.com/css/css_reference.asp

Fogli di stile CSS

Design

Transcript of Fogli di stile CSS