CSS

CSS sta per “Cascate Style Sheet” (foglio di stile a cascata in italiano). Tramite questo linguaggio spono definite le regole di presentazione di una pagina HTML.

Struttura base di una regola CSS:

selettore {proprietà1: valore1 ; proprietà2: valore 2 , valore3 ;}

Esempio:

body {color:black; background: white;}

Definisce che il corpo della pagina web (tag <body>) presenta sfondo bianco e scritte in caratteri neri.

Elenco proprietà:

color: colore del carattere

background: colore dello sfondo

font: definisce il tipo di carattere

margin-top,margin-right,margin-left e margin-bottom definiscono la grandezza dei margini di un elemento, utilizzando “margin” come regola si può definire tutti i margini in modo più sintetico

esempio:

div {
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-botton: 10px;
}

equivale a:

div { margin: 10px 10px 10px 10px;}

Commenti al codice:
/*questo è un commento*/

Unità di misura:

possono essere numeri, percentuali, colori, stringhe di testo o URL. L’unità di misura dei valori numerici ed il simbolo% non devono avere spazi con il valore numerico, le virgolette si usano solo per definire stringhe di testo con spazi mentre gli URL possono essere assoluti o relativi (vedi guida HTML).

Unità di misura per dimensioni:

  • in: pollici
  • cm: centimetri
  • mm: millimetri
  • pt: punti (utilizzati nella stampa)
  • pc: picas (vale 12 punti)
  • em: em-height, unità di misura relativa per la grandezza dei font
  • ex: ex-height, stessa cosa di em, ma per la lettera x
  • px: pixel (è l’unità più usata)

Variabili URL:

Iniziano con la parola url. Il link va messo fra parentesi tonde con o senza virgolette.

Esempio:

body{background-image: url(sfondo.jpg);}

Inserire i CSS in un documento:

CSS esterni:

Tag <link> da inserire nell’header del file HTML

<link href="stile.css" rel="stylesheet" type="text/css" media="attrib dispositivo">

l’attributo media definisce su quale dispositivo il css deve venir letto. Può avere i seguenti valori:

  • all : tutti i dispositivi
  • screen: schermo del PC
  • print: pagina stampata
  • projection: presentazioni di slides
  • speech: sintesi vocale
  • braille: periferiche per scrittura per ciechi
  • embossed: stampanti braille
  • handheld: piccoli dispositivi mobili
  • tty: console di terminale
  • tv : televisori

E’ possibile utilizzare anche @import per importare un foglio di stile dentro il tag <style> oppure scrivere il codice del CSS direttamente dentro il file HTML (tag <style>) ma non sono soluzioni consigliate.

Selettore universale:

Assegna una certa proprietà a tutti gli elementi di un documento, si dichiara come gli altri selettori con un *:

esempio:

* {color: blue;}

Raggruppamento di selettori.

E’ possibile raggruppare diversi selettori a cui assegnare lo stesso valore per la stessa proprietà:

p, h1, h2 {background: blue;}

Classe CSS ed ID:

Mediante le classi CSS è possibile assegnare ad un elemento specifico di un file HTML caratteristiche precise prese da un foglio di stile.

Esempio file HTML:

<p class="sfondonero">testo</p>

Esempio concomitante file CSS

.sfondonero {background: black;}

Gli ID CSS si assegnano sempre mediante l’attributo class ma sono attivi solo nell’attributo dove vengono dichiarati (si possono usare su un solo attributo) . Hanno una dichiarazione leggermente diversa nel foglio CSS:

#sfondonero {background: black;}

E’ possibile anche specificare classi specifiche per un solo tipo di elemento.

Esempio

p.sfondonero {background: black;}

Oppure definire più nomi assieme per la medesima classe, che possono essere anche scambiati in fase di assegnazione::

.sfondonero.testogiallo{background: black; color: yellow;}

funziona anche se si scrive

<p class="testogiallo sfondonero">testo</p>