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 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 – 16px1.2em
  • una percentuale – 100%
  • una parola riservata – smalllarge

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: boldnormallighterbolder
p {
    font-weight: normal;
}
strong {
    font-weight: 900;
}

font-variant

La proprietà font-variant è determina se il font è reso in maiuscoletto. Posso assegnare:

  • normal
  • small-caps
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 leftrightcenter 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 noneunderlineoverline 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 nonelowercaseuppercase 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.

Torna all'inizio