PW - 04 - CSS 01

Lecture Info

  • Date: [2018-03-16 ven]

  • Lecturer: Pierpaolo Loreti

  • Slides: ()

  • Argomenti:

    • Intro al CSS

    • Come allegare il CSS all'HTML

    • Struttura regole CSS

    • Selettori CSS: selettore elemento, id e classe.

    • Proprietà dei font: font-family.

    • Problema fondamentale nella gestione dei font.

    • Web font e problemi legali nell'erogazione dei font.

    • Proprietà dei font: Font-size.

    • Unità di misura assolute e relative.

    • Best practises per settare font-family e font-size.

    • Proprietà dei font: Font-weight.

    • Proprietà dei font: Font-style.

    • Proprietà dei font: Font-variant.

    • Gestione dei colori: RGB e RGBa.

    • Proprietà del testo.

1 Why Use CSS?

CSS, che sta per Cascade Style Sheet è uno standard W3C e viene utilizzato per definire la presentazione del documento HTML (o in generale XML). CSS è un linguaggio indipendente da l'HTML e lo XML ed ha la sua sintassi.

L'utilizzo del CSS permette di avere un maggior controllo sui caratteri e sul layout degli elementi. Utilizzando CSS possiamo infatti separare il concenuto semantico (HTML) da quello di presentazione (CSS).

Oramai è supportato da tutti i browser (dalla versione 2).

Esempio di utilizzo CSS: http://www.csszengarden.com/

2 How to use CSS

Per utilizzare CSS dobbiamo:

  1. Scrivere documento HTML

  2. Scrivere regole CSS

  3. Allegare le regole CSS al documento HTML

Le regole CSS scritte permettono di modificare lo stile predefinito visualizzato dal browser.

2.1 Add CSS into HTML

Abbiamo tre modi:

  • External style sheet: il file CSS viene collegato tramite il tag <link> inserito nell'head del documento HTML. 

    <link rel="stylesheet" type="text/css" href="mystyle.css">

  • Internal style sheet: Regole nell'head tra i tag 

         <style> regole CSS </style>

  • Inline style: Dichiaro le regole per un particolare elemento direttamente nella dichiarazione dell'elemento stesso mediante l'attributo style nel tag di apertura. 

    <h1 style="color:blue:margin-left:30px;"> This is a heading. </h1>

Notiamo che l'ultimo modo, lo stile inline, non andrebbe mai usato in quanto va a mischiare la struttura del documento con la presentazione del documento. Nella realtà questo metodo viene utilizzato in casi molto particolari, ad esempio per fare override mirati di regole esterne.

2.2 CSS Rule Structure

Le regole contenute nel file CSS sono divisine in due parti: Selector e declaration.

  • Selector: Il selector (selettore) identifica l'elemento o gli elementi a cui applicare lo stile.

  • Declaration: La declaration (dichiarazione), costituita da una coppia proprietà valore separati dai :, fornisce l'istruzione di rendering. Ogni dichiarazione è limitata da un ;

Ad un selector posso associare più dichiarazioni.

3 CSS Selectors

Come abbiamo detto le regole CSS sono formate da due parti, un selettore e una dichiarazione. Il selettore può assumere vari valori, tra cui i seguenti:

  • elemento: Serve per selezionare tutti gli elementi di quel particolare tipo. Così facendo tutti gli elementi del tipo vengono renderizzati dal browser con le stesse regole. 

    p { color:red; text-align:center; }

  • id: Seleziono l'elemento con quel particolare id. Prima devo aver definito l'id come attributo nella definizione dell'elemento. Un id può essere utilizzato su un solo elemento. Per poter utilizzare devo come prima comsa inserire l'id nell'HTML 

    <p id="para1"> ... </p>

    e successivamente riferirmi a quel particolare id nel CSS 

    #para1 {text-align: center; color: red;}

  • classe: Seleziono l'elemento con quella particolare classe. Prima devo aver definito la classe come attributo nella definizione dell'elemento. Una classe può essere utilizzata su più elementi. Ovvero più elementi possono avere la stessa classe. Per poter utilizzare devo come prima comsa inserire la classe nell'HTML 

    <p class="center">..</p>

    e successivamente riferirmi a quella particolare classe nel CSS 

    .center{text-align: center; color:red ;}

    Un elemento può appartenere a più classi, in questo caso basta separare le varie classi tramite uno spazio nella definizione dell'elemento 

    <h1 class = "center red">...</h1>

4 Font Properties

Le varie proprietà dei font possono essere specificate una dopo l'altra in una sola riga, nel seguente modo: 

font: italic small-caps bold 34px/100px "Times New Roman", Times, serif;

Tra queste proprietà troviamo

4.1 Font-Family

Link utile: font vs typeface

Le font-family sono gruppi di font che condividono un particolare stile. Alcune tra le più importanti famiglie sono:

  • Serif e Sans-serif.

  • Monospace, caratterizzata dal fatto che ogni carattere occupa la stessa larghezza.

  • Proportional font, caratterizzata dal fatto che ogni carattere occupa una larghezza proporzionale al carattere utilizzato.

La proprietà font-family permette di fornire una lista di "typeface" da applicare al testo.

Tutti i font cominciano con la lettera maiuscola, tranne i font generici. I vari font sono separati da virgole. Se il loro nome contiene spazi vanno fra virgolette.

4.1.1 Stack strategies

I font sono un qualcosa che viene installato nel sistema operativo. Questo crea il problema che non tutti i font sono disponibili nei browser.

Infatti quando inseriamo una font-family nel CSS, il browser chiede al sistema operativo se il font è installato e, se è disponibile, lo utilizza. Se invece non è disponibile il browser deve necessariamente utilizzare un altro font.

Si tende quindi a specificare il font desiderato e poi delle opzioni alternative simili. Questa strategie viene chiamata strategie di stack. In particolare il browser scorre la lista dei font da sinistra verso destra e applica il primo che riesce a trovare nel sistema operativo del client.

4.1.2 Web Fonts

Link Utili:

Si possono caricare dei font esterni con la regola @font-face . Normalmente i giornali utilizzano questa particolare regola. Questo metodo però non funziona allo stesso modo su tutti i browser.

È importante notare che non si possono distribuire i font via web se non si ha il permesso dalla licenza. Quindi se devo utilizzare un font mi devo assicurare che il sistema operativo che ospiterà la pagina del sito web ha quel particolare font, oppure che la licenza del font me lo permetta. I font di google possono essere utilizzati ma in generale bisogna vedere la licenza.

4.1.3 Example 

body {font-family: Arial; }
tt {font-family: Courier, monospace; }
p {font-family: "Duru Sans", Verdana, sans-serif; }

4.2 Font-Size

Specifica la dimensione del carattere.

I valori ammessi sono :

  • length unit, percentage

  • xx-small, x-small, small, medium, large, x-large, xx-large

  • smaller, larger

Nel mondo web moderno si utilizzano le misure relative e non assolute. Questo significa che quando applico una regola ad un elemento contenuto in un altro elemento, la regola fa riferimento al valore eventualmente scalato da regole applicate all'elemento contenitore.

4.2.1 Absolute measures

Non c'è certezza di rendering, non vanno usate a video.

  • px pixel, definito come 1/96 di un inch. Per CSS3 è una unità di misura assoluta.

  • pt points (1/72 inch in CSS2.1)

  • pc picas (1 pica = 12 points)

  • mm millimeters

  • cm centimers

  • in inches (2.54 cm)

4.2.2 Relative measures

Le più importanti unità di misura relative sono:

  • px pixel, considerata relativa in CSS2.1 perché varia a seconda della risoluzione del display.

  • em, unità di misura uguale a quella del font-size.

  • ex x-height, approssimatamente l'altezza di una lowercase "x" nel font.

  • vw viewport width unit, equal to 1/100 del viewport corrente. Utilizzato per sviluppare siti responsive.

4.2.3 Example

Specifico il size rispetto al valore ereditato. Ad esempio, se metto 

body {font-size: 100%; }

allora sto dicendo che il font-size degli elementi del body deve essere quello di default, che solitamente è 16 px. Successivamente se ho un h1 all'interno del body e metto 

h1 {font-size: 150%; }

allora il font-size di h1 sarà il 150% del font-size del body, che era 16 px. Quindi h1 avrà un font-size di 1.5 * 16 = 24 . Invece, se p è sempre dentro al body e metto 

p {font-size: 0.875 em; }

allora p avrà un font-size di 0.875 * 16 = 14 .

4.3 Font-Weight

Utilizzata per impostare il grassetto al carattere. Il bolder di un carattere è relativo ad un altro font che si deve trovare nella macchina.

I valori possono essere:

  • normal, bold

  • bolder, igher

  • 100, 200, 300, 400, 500, 600, 700, 800, 900

4.4 Font-Style

Imposta il carattere a italico o obliquo.

I valori sono:

  • normal, italic, oblique

Normalmente italic rappresenta un font separato.

4.5 Font-Variant

Cambia il carattere in maiuscoletto.

I valori sono:

  • normal, small-caps

5 Colors

Link utili:

Specifico il colore con la proprietà color . Il colore è specificato da tre byte: rosso verde e blu. Questo modo viene chiamato RGB . C'è un RGBa in cui ho un canale alfa aggiunto per specificare la trasparenza.

Posso esprimere un colore in vari modi, tra cui:

  1. Tramite il nome. Alcuni colori hanno dei nomi.

  2. Tramite i valori RGB (3 numeri da 0 a 255).

  3. Tramite il valore in esadecimale.

I valori per colore possono essere in percentuale del colore oppure con il valore numerico, che è da 0 a 255 se lo voglio esprimere in decimale oppure da 0x00 a 0xFF se lo voglio esprimere in esadecimale.

Quando realizziamo un sito generalmente ci vengono dati una serie di codici. Alcuni di questi rappresentano il colore altri il font.

5.1 Example 

h1 {color: rgba(0, 0, 0, .1); }

h1 {color: rgba(0, 0, 0, 1); }
     
body {background-color: rgb(0, 0, 255); }

body {background-color: #FF0000; }

body {background-color: Red; }

6 Text Properties

Per quanto riguarda la gestione dello stile del testo, abbiamo le seguenti proprietà utili.

6.1 line-height

Permette di impostare la spaziature delle righe. Può essere specificata o in pixel o in funzione del testo stesso. 

p {line-height: 2em;}
p {line-height: 2; }
p {line-height: 200%; }

Il rapporto fra l'altezza del rigo e il font è importante per la leggibilità.

6.2 text-indent

Indentazione del primo rigo

I valori sono:

  • length measurement

  • percentage 

   p#1 {text-indent: 2em; }
   p#1 {text-indent: 25%; }
   p#1 {text-indent: -35px; }

6.3 text-align

Allineamento orizzontale del testo

I valori sono:

  • left, right, center, justify.

6.4 text-decoration

Decorazioni del testo.

I valori sono:

  • none, underline, overline, line-through, blink.

6.5 text-transform

Permette di cambiare maiuscole e minuscole. Viene utilzizato per sistemare il testo scritto dagli utenti.

I valori sono:

  • none, capitalize, lowercase, uppercase

6.6 letter-spacing e word-spacing

I valori sono:

  • length measurement, normal 

p {letter-spacing: 8px; }
p {word-spacing: 1.5em; }

6.7 text-shadow

Ombra sul testo.

I valori sono:

  • horizontal offset, vertical offset, blu radius, color 

text-shadow: .2em .2em silver.