Css

Introduzione

CSS (Cascading Style Sheets) linguaggio per la formattazione.

http://www.csszengarden.com/tr/italiano/

CSS esterni

Link:

<link rel=”stylesheet” type=”text/css” href=”nomeFile.css”/>

CSS embedded

Solo se ci sono regole specifiche per una sola pagina all’interno dell’head.

<style type=”text/css”>

</style>

CSS inline

Regole contenute nell’attributo “style” dell’elemento che si vuole modificare(body).

Solo per test e prove rapide

<p style=”font-size:2em;”
contenuto
</p>

Ordine di applicazione

CSS default del browser
       CSS esterno
       CSS embedded
       CSS inline

CSS Sintassi

Le regole CSS

Una regola CSS è composta da due parti:

Selettore che definisce la parte del documento a cui verrà applicata la regola (h1,title,a…).

Blocco delle dichiarazioni con coppie proprietà-valore.

h1{color: blue; fontsize:12px;}

Per ogni dichiarazione non è possibile specificare più proprietà ma solo più valori.

Selettori id

Nei CSS si fa riferimento all’attributo di tipo id con il selettore:

#nome_id à #unito {font: blue; }

Selettori class

Nei CSS si fa riferimento all’attributo di tipo class con il selettore:

.nome_class à .matricola {font: blue; }

Si può restringere il campo di applicazione di un selettore di classe ad un solo tipo di tag accodandolo al selettore HTML corrispondente.

p.matricola {font: blue; }
Sarà applicato a tutti gli elementi p il cui attributo “class” ha valore “matricola”.

Selettori raggruppati

Si possono associare le stesse  dichiarazioni a piu selettori separandoli con una virgola.

.matricola, #unito, h1 {fontsize:10 px;}

Si possono applicare delle regole css a degli elementi annidati indicando, prima dell’elemento prescelto, una sequenza di elementi genitore separati da spazi. Selettore diventa più specifico!

. #unito p a {color: red;}
La dichiarazione viene applicata agli elementi di tipo “a” contenuti in un elemento “p” contenuto a sua volta in un elemento con identificativo “unito”.

Non è necessario indicare tutti gli elementi genitore!

Ordine di applicazione delle regole

Nel caso di più regole con lo stesso selettore, prevale quella che compare per ultima nel CSS.

Nel caso di più dichiarazioni con selettori diversi applicate allo stesso elemento, prevale quella con il selettore più specifico (l’id prevale sulla classe).

Commenti

/*testo del commento*/

Dare stile al testo con i CSS

Tipo di Font

Proprietà “font-family”. Viene generalmente definito per l’elemento body e utilizzato per tutto il documento.

body {font-family: Verdana;}

I nomi di font composti vanno inseriti tra virgolette: “Times new Roman”.

Font più utilizzati: “Times New Roman”, Arial, Helvetica (per Mac), Century Gothic, Avant Garde (per Mac), Verdana.

Se si indicano più nomi di font separati da virgola, il browser visualizzerà il primo disponibile.

font-family {Arial, Helvetica, sans-serif;}
serif, sans-serif o monospace sono font generici che è bene indicare.

Colore

Proprietà “color” permette di controllare il colore.

Proprietà “background-color” permette di definire il colore di sfondo.

body { color: #666; background-color: #DBFFDB;}

Valori RGB: costituiti da tre valori.
p {color: rgb(0,0,255);}

Valori esadecimali: in base 16 costituiti dal simbolo #.
p {color:#0000ff;}

Nomi di colori: esistono 17 valori standard, oltre a transparent: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow.

Colori Web Safe: sono 216 colori che si vedono nello stesso modo, indipendentemente dal browser in cui appaiono.

Dimensione Font

Proprietà “font-size”.

Unità di misura da utilizzare sono di due tipi:
Assolute: pixel (px).
Relative: percentuali (%), em (si basa sulla dimensione del carattere M maiuscolo del font dell’elemento contenitore.)

Si consiglia di usare % per il body, e in em per gli altri elementi.

body {font-size: 80%;}
h1 {font-size: 3em;}
l’unità di misura senza spazi dopo il numero.

Proprietà “font-weight” definisce lo spessore di un font. Valori piu comuni sono “bold”(grassetto) e “normal”.
h1{font-weight:bold;}

Proprietà “font-style” definisce l’inclinazione del testo. I piu comuni sono “italic”(corsivo) e “normal”.

Proprietà “text-decoration” può avere 4 valori:
“underline” sottolineato.
“overline” riga sopra al testo.
“line-trought” testo barrato.
“none” nessuna sottolineatura.

Proprietà “text-align” si gestisce l’allineamento del testo all’interno di un blocco:
left, right, center, justify
p{ text-align=“left”}
Sul web il left è più leggibile.

Box  Model

Introduzione

Ciascun elemento è inserito in un contenitore a strati le ui caratteristiche possono essere manipolate.

  Fonte immagine: http://www.w3schools.com/css/box-model.gif

Padding

Le dimensioni di ogni singolo lato possono essere definite con le proprietà:
“padding-top”
“padding-right”
“padding-bottom”
“padding-left”

H1{padding: 2em;}

Quando si definisce uno sfondo per un elemento, con il colore o immagine questo occupa l’area definita da contenuto e padding.

Border

La proprietà “border-width”
(“border-top-width” etc…)
Permette di definire le dimensioni del bordo.

La proprietà “border-color”
(“border-top-color”etc…)
Permette di definire il colore

La proprietà “border-style”
(“border-top-style” etc….)
Permette di definire lo stile del bordo:
solid , dashed e dotted.

E obbligatorio definire lo stile del bordo perché le dichiarazioni relative a colore e dimensione abbiano un effetto visibile.

Modalità sintetica: border: dimensione stile colore;
border: 1px dashed silver;

Margin

Rappresenta l’involucro esterno del box
margin-top etc..