Sintesi della lezione
CSS
I FOGLI DI STILE
HTML serve ad informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici.
- I fogli di stile (Cascading Style Sheets) definiscono come i vari elementi che compongono un documento verranno mostrati su un media specifico (schermo, stampante, dispositivo mobile).
- CSS è il linguaggio che usa il web designer per realizzare un interfaccia.
- La prima fase di un design è la progettazione.
COME SI COLLEGA UN FOGLIO DI STILE A UNA PAGINA WEB
Un foglio di stile può essere esterno e interno:
- È esterno un foglio di stile definito in un file separato dal documento.
- Un foglio di stile si dice interno quando il suo codice è compreso in quello del documento.
FOGLI COLLEGATI
Uso dell'elemento <link>
- La dichiarazione va sempre collocata all'interno della sezione
<head>
del documento:
<html>
<head>
. . . .
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>
. . . .
- L'elemento
<link>
presenta una serie di attributi di cui è importante spiegare significato e funzione:
rel
descrive il tipo di relazione tra il documento e il file collegato. È sempre obbligatorio. Per i CSS due sono i valori possibili: stylesheet
e alternate stylesheet
.
href
serve a definire l'URL assoluto o relativo del foglio di stile. È obbligatorio.
type
identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css
.
media
con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale.
FOGLI INCORPORATI
I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite l'elemento <style>
. Anche in questo caso la dichiarazione va posta all'interno della sezione <head>
:
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<style type="text/css">
body {
background: #FFFFCC;
}
</style>
</head>
<body>
..........
STILI IN LINEA
- L'ultimo modo per formattare un elemento con un foglio di stile consiste nell'uso dell'attributo 'style'.
- Esso fa parte della collezione di attributi HTML definita Common: si tratta di quegli attributi applicabili a tutti gli elementi.
- La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea. La sintassi generica è la seguente:
<elemento style="regole_di_stile">
COME SONO COSTRUITE LE REGOLE
Un foglio di stile è costituito da una serie di regole che stabiliscono come un gruppo di elementi html (identificati da un selettore) viene reso su un media.
selettore {
proprietà1: valore;
proprietà2: valore;
}
}
selettore
: definisce a quali elementi si applicano le regole che seguono
{...}
Parentesi graffe: racchiudono l'elenco delle regole
- Regola: è composta dal nome di una proprietà e da un valore:
color:#333333;
proprietà
: indica l'elemento visuale che viene modificato
:
[due punti]: è l'operatore che collega la proprietà al valore che le viene assegnato.
valore
: determina quale sarà l'aspetto dell'elemento per quanto riguarda la caratteristica controllata dalla proprietà a cui è stato assegnato.
MPORTANZA DELLA SINTASSI
- Un linguaggio è l’insieme di regole (sintassi, ortografia, punteggiatura) che fa si che il codice (istruzioni) che scrivo siano correttamente interpretate dal computer
- In CSS l’elemento sintattico principale è la punteggiatura: h2
{
color:
#333333;
font-weight:
bold;
font-size:
40px;
}
- Se sbaglio il nome di una proprietà o un valore, semplicemente la regola verrà ignorata
- Se sbaglio o tralascio la punteggiatura potrebbe non essere interpretato l’intero codice. Se tralascio, ad esempio, la parentesi graffa chiusa, tutto il codice che segue non verrà interpretato.
Sintesi della lezione
PROPRIETÀ CSS
FONT E TESTO
font-family
- La famiglia di font di un testo viene impostato con la proprietà
font-family
- La proprietà font-family può contenere diversi nomi dei font. Se il browser non supporta la prima font, cercherà la successiva, e così via.
- Il tipo di carattere preferito sarà il promo della lista, e la famiglia generica, l'ultima e verrà utilizzata se nessun altra font è disponibile.
- Nota : Se il nome di una famiglia di font è più di una parola, deve essere tra virgolette, come: "Times New Roman".
- L'elenco delle font è separato da virgole:
body {
font-family: "Times New Roman", Times, serif;
}
font-style
- La proprietà
font-style
è principalmente utilizzato per specificare il testo corsivo.
- Tre valori possibili:
normal
- Il testo viene visualizzato normalmente
italic
- Il testo viene mostrato in corsivo
oblique
- Simile al corsivo
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
font-size
La proprietà font-size
è determina il corpo del font. Posso assegnare: •
- una misura –
16px
, 1.2em
- una percentuale –
100%
- una parola riservata –
small
, large
Le misure più utilizzate sono i pixel (suffisso px) e em (suffisso em). Nel primo caso viene indicata una misura assoluta (l'altezza che ha, in pixel, il carattere sullo schermo). L'unità di misura em è relativa alla dimensione di default che è stata assegnata al carattere.
p {
font-size: 18px;
}
h1 {
font-size: 2.4em; /* Equivalente a (2.4 * 18) 43px */
}
font-weight
La proprietà font-weight
è determina il peso del font. Posso assegnare:
- una misura da
100
a 900
- una parola riservata:
bold
, normal
, lighter
, bolder
p {
font-weight: normal;
}
strong {
font-weight: 900;
}
font-variant
La proprietà font-variant
è determina se il font è reso in maiuscoletto. Posso assegnare:
p {
font-variant: normal;
}
h1 {
font-variant : small-caps;
}
color
La proprietà color
è determina il colore del testo. Posso assegnare:
- Il nome di un colore come
red
- Un valore esadecimale (usando il prefisso #) come
#ff0000
- Le funzioni rgb e rgba come
rgb(255,0,0)
body {
color: #333333;
}
h1 {
color : darkblue;
}
text-align
La proprietà text-align
è determina l'allineamento del testo. Posso assegnare i valori left
, right
, center
e justified
.
h1 {
text-align: center;
}
h2 {
text-align: left;
}
text-decoration
La proprietà text-decoration
aggiunge o elimina la sottolineatura e altre decorazioni. Posso assegnare i valori none
, underline
, overline
e line-through
.
.errore {
text-decoration: line-through;
}
a {
text-decoration: none;
}
text-transform
La proprietà text-transform
determina se il testo viene reso in maiuscolo, minuscolo o normale. Posso assegnare i valori none
, lowercase
, uppercase
e capitalize
.
.h1 {
text-transform: upercase;
}
.lowercase {
text-transform: lowercase;
}
text-indentation
La proprietà text-indentation
determina l'ammontare del rientro della prima riga del testo. Posso assegnare una misura (px, em, % ecc).
p{
text-indentation: 30px;
}
letter-spacing
La proprietà letter-spacing
determina l'ammontare dello spazio tra i caratteri. Posso assegnare una misura (normalmente pixel) . 0 indica la distanza normale, una misura positiva aumenta, una negativa diminuisce.
h1{
letter-spacing: 3px;
}
line-height
La proprietà line-height
determina l'interlinea utilizzata per il testo Posso assegnare:
- una misura assoluta (es.
20px
)
- una misura relativa al corpo del carattere (es:
1.4
)
h1{
line-height: 1.1;
}
text-direction
La proprietà text-direction
determina la direzione di scrittura Posso assegnare rtl
(right to left) o ltr
(left to right):
body{
text-direction: rtl;
}
word-spacing
La proprietà word-spacing
determina l'ammontare dello spazio tra le parole. Posso assegnare una misura (normalmente pixel) . 0 indica la distanza normale, una misura positiva aumenta, una negativa diminuisce.
h1{
word-spacing: -2px;
}
text-shadow
La proprietà text-shadow
aggiunge un ombreggiatura al testo. Posso assegnare tre misure e un colore:
h1{
text-shadow: 2px 2px 5px red;
}
crea un ombra spostata a destra di 2px
, in basso di 2px
, sfumata per 5px
di colore red
.