PW - 05 - CSS 02

Lecture Info

  • Date: [2018-03-20 mar]

  • Lecturer: Pierpaolo Loreti

  • Slides: ()

  • Argomenti:

    • Elementi generici div e span

    • Identificatori id e class

    • Box model: margin, border, padding, content area

    • Proprietà box-sizing

    • Proprietà overflow per controllo overflow del contenuto

    • Controllo del padding

    • Controllo del margin

    • Collasso dei margini

    • Margini degli elementi inline

    • Esempio "ogre.html"

    • Proprietà display

    • Margini negativi

    • Bordo

1 Generic Elements

In HTML sono presenti degli elementi generici. Questi elementi non hanno una semantica ben definita ma assumono significato insieme agli attributi id e class . Vengono utilizzati per motivi grafici o per legare azioni tramite l'utilizzo di javascript.

Tra gli elementi generici troviamo anche:

  • <div> block element generic. Serve per dividere il contenuto e creare layout complessi.

  • <span> inline element generic. Serve ad identificare all'interno di un testo un insieme di parole o frasi.

2 ID and Class

Sono attributi che possono essere applicati a ogni elemento HTML e hanno le seguenti funzioni:

  • id : serve ad assegnare un identificare unico ad un elemento. Il valore assegnato va utilizzato una sola volta nel documento.

  • class : classifica gli elementi in gruppi concettuali. Spesso usato per assegnare stili css comuni a vari elementi.

I valori assegnati all'attributo (id o class) sono case sensitive e devono rispettare i seguenti vincoli:

  • Iniziare con una lettera A-Z o a-z o un underscore.

  • Non può contenere spazi.

  • Può contenere lettere, numeri, trattini, underscore, due punti, puni.

3 Box Model

Ogni elemento html, sia di tipo block che di tipo inline, è contenuto in un box rettangolare. Alcune proprietà css, tra cui troviamo width , height , padding , borders e margins sono applicate al box. Per visualizzare i box è possibile utilizzare la proprietà border. 

border: 1px solid black.

Il box dell'elemento definito da CSS è diviso in quattro aree logiche. Graficamente,

che sono, partendo dalla più esterna alla più interna:

  • Margine: Il margine rappresenta l'area più esterna che c'è tra il bordo del box e il confine esterno dell'elemento.

  • Bordo: Separa la padding area dalla margin area.

  • Padding: Il padding separata la content area dal bordo.

  • Content area: Lo spazio in cui è presente il contenuto da visualizzare.

Di default la proprietà width permette di specificare la grandezza della content area. Per specificare la grandezza totale del box devo pure tenere conto del padding , del bordo , e del margin . In particolare l'occupazione complessiva, di default, è data da: 

left-margin + border-left + padding-left + width + padding-right + border-right + margin-right

L'area visibile è l'unica parte dell'elemento che possiamo modificare con css, ed è formata dalla content area, dal padding, e dal bordo. Il margine quindi, anche se occupa spazio nella pagina, non è visibile, ovvero non lo posso gestire dal punto di vista grafico (ad esempio non lo posso colorare).

3.0.1 box-sizing

In CSS-3 è stata aggiunta la proprietà box-sizing per risolvere problemi relativi all'utilizzo di dimensioni in percentuali. La proprietà box-sizing permette di cambiare come si comportano le proprietà width e height. Se non viene specificata, box-sizing assume il valore default di content-box , altrimenti può essere imposta a border-box .

Se box-sizing è content-box , allora la width e la height vengono applicate solamente alla content area (default). Se però box-sizing è impostata a border-box, allora la width e la height vengono applicate a tutta l'area visibile, quindi anche al contenuto visibile, padding e border.

Questa proprietà fu aggiunta storicamente per risolvere dei problemi che venivano fuori quando definivo div con dimensioni in percentuale. Prima infatti succedeva che se avevo un div che come width aveva il 25% di un rettangolo (div) in cui era contenuto, la sua dimensione effettiva era un qualcosa del tipo 25% + 12px, in quanto si dovevano contare anche il padding e il border. In altre parole veniva difficile capire esattamente quanto spazio avevo a disposizione.

3.0.2 overflow

Quando il contenuto visibile è troppo grande rispetto alle dimensioni specificate (width, height), può succedere un overflow di contenuto. CSS ci permette di utilizzare la proprietà overflow per gestire queste situazioni, andandoa definire politiche di overflow a piacere.

I valori possibili sono: 

visibile, hidden, scroll, auto, inherit

il valore di default è visible, e generalmente si tende ad utilizzare hidden in caso di overflow.

3.0.3 padding

La proprietà padding mi permette di controllare tutte e quattro le zone di padding, in modo separato oppure tutte insieme. 

padding-top, padding-right, padding-bottom, padding-left.
padding: <top>em <right>em <bottom>em <left>em;

3.0.4 margin

La proprietà margin mi permette di controllare lo spazio presente tra il bordo interno dell'area visibile e il bordo esterno. Viene dunque utilizzato per spaziare l'elemento dagli altri elementi della pagina.

Analogamente alla proprietà padding, la proprietà margin può essere definita come segue: 

margin-top, margin-right, margin-bottom, margin-left
margin: <top>em <right>em <bottom>em <left>em;

Normalmente siamo in grado di definire, per un dato elemento, tutti e quattro i margini (top, right, bottom, left).

Quando due elementi di tipo blocco sono posti uno sopra l'altro, il margine tra di loro non è pari alla somma dei margini ma è pari al massimo margine tra i due. Quindi un margine viene collassato e si mantiene il margine più grande. Questo fenomeno viene chiamato collasso dei margini.

Per gli elementi inline è possibile applicare solamente i margini left e right. I margini top e bottom vengono quindi non applicati, anche se gli andiamo a definire.

3.0.5 negative margins

Formalmente i margini servono per spostare l'elemento.

Questo vuol dire che posso utilizzare margini negativi. Con i margini negativi l'elemento viene spostato, rispetto alla sua posizione naturale, di un certo numero di pixel.

Questa tecnicha può essere utilizzata per sovrapporre elementi oppure per nasconderli e in particolare viene utilizzata nei layout a colonna.

3.0.6 border

Posso modificare il bordo con le seguenti proprietà:

  • border-style: Posso modificare lo stile sempre utilizzando le proprietà separate oppure la proprietà singola: 

    border-top-style, border-right-style, border-bottom-style,
border-left-style.

border-style

    Le varie proprietà possono assumere i seguenti valori: 

    none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit

  • border-width: Mi permette di specificare la grandezza del bordo. 

    border-top-width, border-right-width, border-bottom-width,
border-left-width.

    Le varie proprietà possono assumere i seguenti valori: 

    length units,  thin,  medium,  thick,  inherit

  • border-color: Mi permette di specificare il colore del bordo. 

    border-top-color, border-right-color, border-bottom-color,
border-left-color.

border-color

    Le varie proprietà possono assumere i seguenti valori: 

    color name or RGB value, transparent, inherit

4 Example

Esempio modifica file "The Ogre Courting.html". Esempio di border, padding e margin. Esempio di margin collision

5 Display

In HTML abbiamo una svariata tipologia di elementi. Noi, approssimando, consideriamo solo due elementi: gli elementi inline e quelli in blocco. La proprietà display ci permette di modificare il "tipo" di appartenenza di un elemento.

Quando definisco un elemento HTML, a questo elemento viene assegnato un tipo di display di default. Ad esempio,

  • All'elemento <strong></strong> viene assegnato il valore inline alla proprietà display.

  • All'elemento <div></div> viene assegnato il valore block alla proprietà display.

Notiamo che si può cambiare la proprietà display degli elementi. Posso quindi prendere un elemento inline e trasformalo in un elemento block, e viceversa. Questa proprietà è molto importante e ci permette di sviluppare menu e altri oggetti grafici complessi.