css (cascading style sheets)lioy/01nbe/css.pdf · css (cascading style sheets) antonio lioy <...

CSS(Cascading Style Sheets)

Antonio Lioy< [email protected] >

Politecnico di TorinoDip. Automatica e Informatica

HTML (Hyper Text Markup Language) linguaggio di descrizione della pagina descrizione testuale (file di testo) specifica tramite comandi (tag) interpretati dai browser i file HTML contengono tre tipi di informazioni:

il testo vero e proprio del documento da visualizzare una suddivisione logica del documento in parti (titolo, paragrafi,

...) indicazioni sulla presentazione grafica del documento

(formattazione, ovvero lo stile di visualizzazione)

© A.Lioy - Politecnico di Torino (2003-2020) 2

HTML: esempio

<html><head><meta name="Author" content="Giovanni Pautasso"><title>Titolo sulla barra</title>

</head><body text="#000000" bgcolor="#FFCC00"><h1>Titolo 1</h1><p>Testo normale... <i>o quasi</i></p></body></html>


HTML: stili i tag furono originariamente pensati per definire il contenuto

logico del documento e non la formattazione (che veniva lasciata al browser) <h1> vuol dire “questo è un titolo di primo livello” <p> vuol dire “qui inizia un paragrafo” e così via

sono stati aggiunti nuovi tag per la gestione della formattazione (ad es. <font>) indipendenti dai componenti logici (titolo, paragrafo, tabella, … )


HTML: problema sugli stili è diventato sempre più difficile creare siti Web dove il

contenuto dei documenti HTML è chiaramente separato dalle regole per la loro formattazione

i siti sono diventati insiemi molto complessi in cui si vuole mantenere un aspetto grafico omogeneo

le regole di formattazione applicate in maniera “selvaggia” rendono difficile la manutenzione del sito


La soluzione: CSS Cascading Style Sheets introdotti dal World Wide Web Consortium (W3C) nella

specifica HTML 4.0 ed ora usati anche per XHTML, XML e soprattutto HTML5

i fogli di stile descrivono come visualizzare i componenti logici di un documento: il titolo di primo livello lo sfondo della pagina …

in questo modo si separano nettamente il contenuto ed il formato di presentazione


CSS: definizione CSS1 (dicembre 1996)

http://www.w3.org/TR/CSS1 50 proprietà

CSS2 (maggio 1998) e CSS2.1 (giugno 2011) http://www.w3.org/TR/CSS21/ aggiunge altre 70 proprietà a CSS1 (media-specific style-sheet

– es. per stampanti e dispositivi audio – tabelle, posizionamento di elementi)

CSS3 in corso di sviluppo diviso in circa 50 sotto-specifiche già approvate Selector, Namespace, Color e Media Queries

(per conoscere le capacità di uno UA)


CSS: risorse CSS home page at W3C

http://www.w3.org/Style/CSS/ tutorial ed altre risorse

http://www.w3.org/Style/CSS/learning https://www.w3schools.com/css/

servizio automatico di validazione http://www.css-validator.org/


CSS descrizione normalmente salvata in file di testo esterni al

documento HTML file con estensione “.css”

file referenziato all’inizio del documento HTML lo stesso file CSS può essere incluso da molte pagine HTML

è possibile cambiare l’aspetto di un intero sito modificando un solo file!

possibile – ma sconsigliato – definire lo stile in-line: per un singolo file per singoli tag all’interno di uno specifico file


Sintassi dei commenti in CSS stessa sintassi del linguaggio C, ossia /* … */

/* questo e' un commento */p {text-align: center; /* questo e' un altro commento */color: red}


Sintassi CSS la sintassi CSS è costituita da 3 parti

un selettore, una proprietà ed un valore selector { property : value ; ... }

il selettore è il nome di un tag, di una classe o un identificatore unico tag_name [ tag_name ].class [ tag_name ]:pseudo-class #unique_id

il nome del tag può essere omesso (o si può usare *) per indicare qualunque tag per una classe


Sintassi CSS - esempi/* tag */body { background-color: gray }p { font-family: "sans serif" }

/* tag.classe */p.centrato { text-align: center; color: green }

/* classe */.warning { color: red }

/* lista di tag */h1, h2, h3 {color: green }

/* tag:pseudo-classe */a:hover { background: aqua }

/* #id */#footer { font-style: italic }


...<body><h1>I Re di Roma</h1><p>I primi tre Re di Roma:</p><ul><li>Romolo</li><li>Numa Pompilio</li><li>Tullo Ostilio</li>

</ul></body>

Visione gerarchica di HTML

body

h1 p ul

li li li

gerarchiadegli

oggetti

primo figlio

fratelli


Ereditarietà gerarchica proprietà assegnate ad un elemento ereditate

automaticamente da tutti i suoi discendenti possibile però fornire stile specifico per un discendente si applica sempre la regola più specifica esempio: per impostare il tipo di font di una pagina HTML è

meglio specificare lo stile del BODY invece che di tutti gli elementi specifici

eccezione: lo sfondo (background) … ma funziona ugualmente perché lo sfondo di default è

“transparent”


Selettori gerarchici possibile specificare selettori in modo gerarchico per

condizionare l’applicazione delle proprietà solo a casi specifici

E1 E2 { … } elemento E2 quando discende da E1

E1 > E2 { … } elemento E2 quando è figlio di E1

E1 + E2 { … } elemento E2 quando immediatamente preceduto da un fratello

E1 E:first-child / E:last-child { … }

elemento E quando è il primo/ultimo figlio del genitore


Selettori condizionali E [ A ]

elemento E con un valore assegnato all'attributo A E [ A="Val"]

elemento E con valore Val assegnato all'attributo A E:lang(L)

elemento E nella lingua L (es. "it", "de", "fr", "en-uk") E:focus

elemento E quando ha il "focus" (es. è attivo un campo per inserire testo)

molti altri selettori …

https://www.w3schools.com/cssref/css_selectors.asp


Selettori ":first-letter" e ":first-line" E:first-line, E:first-letter

prima riga o carattere dell'elemento E

[CSS]p:first-letter { font-size: "200%" }

[HTML]<p>Nel mezzo del cammin di nostra vita ...</p>

[browser]

Nel mezzo del cammin di nostra vita …


Selettori "::after" e "::before" operano subito dopo o prima di un tag nota: si può inserire solo testo, non tag esempio:

[CSS]p::after { content: "!!!"}

[HTML]<p>Buon Natale</p><p> ... e Buona Pasqua</p>

[browser]Buon Natale!!!... e Buona Pasqua!!!


Proprietà "content:" permette di inserire contenuto HTML

normal, none, counter(c), attr(attribute), "string", open-quote, close-quote, no-open-quote, no-close-quote, url(url), initial, inherit

esempio:

[CSS]a::after { content: "(" attr(href) ")" }

[HTML]<a href="http://www.polito.it">POLITO</a>

[browser]POLITO (http://www.polito.it)


Contatori counter-reset: , counter-increment: , counter(cnt)

per azzerare, incrementare ed usare un contatore esempio:

[CSS]body {counter-reset: h1cnt; }

h1::before {counter-increment: h1cnt;content: "Sezione " counter(h1cnt) ". "; }

css_counter.html


Richiamare un foglio di stile (link) ciascuna pagina HTML che si basa su un certo file di stile

deve includerne il nome nella sezione <head> mediante il tag<link rel="stylesheet" …>

il browser leggerà le definizioni nel file (dopo averlo scaricato) e formatterà opportunamente la pagina da visualizzare

esempio:<head><link rel="stylesheet"type="text/css"href="polito.css">

<title> . . .</head>


Foglio di stile interno si può definire uno stile direttamente nella sezione <head>

mediante il tag <style> opzione sconsigliata perché si perdono i vantaggi della

condivisione dello stile tra più pagine utile solo per fare prove rapide (migrare poi lo stile ad un CSS

esterno)

<head><style type="text/css">body { background-color : gray }

</style>. . .

</head>


Stile per singoli tag (in-line style) quando usare un CSS sarebbe troppo complesso si consiglia

comunque di usare la sintassi del CSS tramite l’attributo STYLE nei singoli tag

esempio (attenzione! segue la forma ma non la ratio del CSS):



Prof. Antonio<b>Lioy</b>



Prof. Antonio<span style="font-weight:bold">Lioy</span>

Esempio (corretto) identificare la classe con un nome logico (che giustifichi la

formattazione applicata) definire il formato della classe in un CSS esterno

[ file HTML ]

Prof. Antonio <span class="surname">Lioy</span>

[ file CSS ]

.surname { font-weight : bold }


Definizioni multiple nel caso di definizione multipla dello stile di un elemento, il

browser decide lo stile di tale elemento considerando “in cascata” tutte le definizioni con la seguente priorità: impostazioni sul tag (alta priorità) fogli di stile interni / esterni, secondo l'ordine in cui sono

dichiarati nella sezione <head> (vince l'ultima definizione della sequenza)


Definizioni multiple: esempio un foglio di stile esterno collegato alla pagina contiene la

seguente definizione h1 {color: red; text-align: left}

mentre un foglio di stile interno alla pagina (dichiarato dopo lo stile esterno) contiene: h1 {text-align: right}

la definizione risultante di <h1> per il browser sarà

color: redtext-align: right


CSS: definizione dell’attributo class è possibile definire stili differenti per uno stesso elemento di

HTML usando l’attributo “class” esempi:

un paragrafo “normale” allineato a sinistra un paragrafo “citazione” centrato e corsivo una classe “centrato” da usarsi al posto di <center>

p.normale { text-align: left }p.citazione {text-align: center; font-style: italic }

/* sconsigliato: non e' una classe "logica" */.centrato { text-align: center }


HTML: uso dell’attributo class

<p class="normale">Il poeta ha scritto:</p><p class="citazione">Nel mezzo del cammin di nostra vita ...</p>

Il poeta ha scritto:

Nel mezzo del cammin di nostra vita ...


CSS: unità di lunghezza relative (consigliate):

"em" = altezza della lettera "M" nel font corrente "ex" = altezza della lettera "x" nel font corrente

N.B. "em" ed "ex" sono riferite al font del genitore se usate per definire la dimensione di un font

assolute (sconsigliate tranne che per output su media a dimensione fissa, es. stampante A4) "in" (inch, ossia 25.4 mm), "cm", "mm" "pt" = punto tipografico (1/72 di inch) "pc" = pica (12 pt) "px" = pixel reale o virtuale (1/96 di inch)


Dispositivi di output e DPI/PPI DPI = Dot-Per-Inch PPI = Pixel-Per-Inch su dispositivi a basso DPI/PPI (≤ 96 DPI):

1 px rappresenta il pixel fisico (!!!) altre unità definite in proporzione 1 in = 96 px, poi da inch si derivano cm, mm, pt, pc quindi unità assolute errate (es. 100 cm ≠ 1 m)

su dispositivi ad alto DPI/PPI (>96 DPI): unità di lunghezza corrette (es. 100 cm = 1 m) … ma 1 px diventa "virtuale" e corrisponde ad 1/96 in, quindi

includerà più pixel fisici


Problema con dimensione dei fontbody { font-size: 10pt; } /* solo per esempio */h1 { font-size: 2.4em; } /* =24pt */p { font-size: 1.2em; } /* =12pt */li { font-size: 1.2em; } /* =12pt? */

<ul><li> Giovanni Pautasso <!– 12 pt --> <ul><li>18 - Analisi I</li> <!– 14 pt !!! --><li>19 - Analisi II</li> <!– 14 pt !!! --></ul>

</li>


Nuove unità relative CSS3 offre nuove unità relative: REM, VW, VH, VMIN e VMAX rem = root em

em dell'elemento root (ossia <html>) 1rem = altezza della lettera M nel font base

vw, vh = viewport width, viewport height larghezza ed altezza della viewport 1vw / vh = 1/100 larghezza / altezza della viewport 100vw / vh = larghezza / altezza della viewport

vmin = min ( vw, vh ) vmax = max ( vw, vh )


Esempio con REMhtml{ font-size: 10pt; } /* solo per esempio */h1 { font-size: 2.4rem; } /* =24pt */p { font-size: 1.2rem; } /* =12pt */li { font-size: 1.2rem; } /* =12pt */

<ul><li> Giovanni Pautasso <!– 12 pt --> <ul><li>18 - Analisi I</li> <!– 12 pt --><li>19 - Analisi II</li> <!– 12 pt --></ul>

</li>


Esempio con VH, VW[ CSS ]/* classe per font variabile in base allalarghezza della pagina */.fontvarr {font-size: 5vw}

[HTML]<p class=fontvar>Testo a dimensione variabile (scala in base alladimensione orizzontale della viewport).</p><p>Testo a dimensione fissa.</p>

css_vw.html


CSS: colori alcuni colori predefiniti ed accessibili per nome:

i 16 colori base del webBlack, White, Gray, Silver,

Yellow, Red, Purple, Fuchsia, Maroon,Green, Lime, Olive, Aqua, Teal, Blue, Navy

i 140 colori riconosciuti da tutti i browser: https://www.w3schools.com/colors/colors_names.asp

altri colori specificabili mediante il loro codice numerico secondo varie codifiche: RGB, RGBA (=RGB con alfa channel) HSL, HSLA (=HSL con alfa channel) HWB e CMYK, entrambi proposti per CSS4


Colori CSS: rappresentazioni esempi (equivalenti a "red"):

rgb (255, 0, 0) rgb (100%, 0%, 0%) #ff0000 /* uguale a HTML */ #f00 /* abbreviazione per due cifre hex uguali */ hsl (0, 100%, 50%)


CSS: background (I) background-color: colore | inherit | transparent

"transparent" è il default background-image: url("image_URI")

URL dell’immagine si suggerisce di specificare anche un colore da usarsi: se non si riesce a caricare l'immagine per contornare l'immagine visibile nelle trasparenze dell'immagine


CSS: background (II) background-repeat: repeat | repeat-x | repeat-y |

no-repeat | inherit copie multiple dell'immagine per coprire tutto lo sfondo oppure

solo in orizzontale o verticale background-position: posizione_h posizione_v

ogni posizione può essere una keyword, una lunghezza (distanza da angolo in alto a sinistra) o una percentuale (della dimensione del contenitore)

keyword (orizzontale): left, center, right keyword (verticale): top, center, bottom se c'è una sola keyword la seconda si assume essere "center"


CSS: background (III) background-attachment: fixed | scroll | inherit

immagine in posizione fissa o segue l'eventuale scorrimento del contenuto

background: color image_URI repeat attachment position | inherit formato sintetico per tutte le varie specifiche non importa l'ordine perché ogni elemento ha una sintassi

diversa (possibile anche omettere elementi) esempio (sfondo grigio, immagine centrata, segue il contenuto)

background: gray url("polito_logo.jpg")scroll center center no-repeat


CSS: text properties (II) line-height: normal | fattore | lunghezza | percentuale

il valore del fattore moltiplicativo viene ereditato tale e quale mentre per la percentuale si eredita il valore numerico risultante

esempi: { line-height: 1.2; font-size: 10pt } = i figli ereditano per

l'altezza delle loro righe un fattore 1.2 da applicarsi alla dimensione del loro font

{ line-height: 120%; font-size: 10pt } = i figli ereditano per l'altezza delle loro righe un valore fisso di 12pt


CSS: font properties (II) font-size: dimensione_del_font

unità assoluta (pt, mm, …) o relativa (em, ex, …) percentuale xx-small x-small small medium large x-large xx-large “medium” è il default dell’utente la scala non è definita (suggerito step di 1.2)

“larger” o “smaller” note:

i valori relativi e le percentuali sono riferite al font dell'elemento genitore (può essere il default dell'UA)

preferire valori relativi o percentuali, evitare valori assoluti (eccezione: media a dimensione fissa/nota)


CSS: font properties (III) font-family: lista_di_nomi_di_font

lista ordinata (Courier, “Courier New”, …) UA sceglie first match coi font disponibili localmente utile specificare un font “generico” in ultima posizione occhio alla compatibilità tra i font alternativi elencati

font generici (e compatibilità): serif (times, “times new roman”, palatino, ...) sans-serif (arial, helvetica, verdana, ...) monospace (courier, “courier new”, fixed, …) cursive (“comic sans MS”, florence, ...) fantasy (impact, oldtown, ...)


Dimensioni dei font “pt” è un’unità di misura tipografica

non usarla per video ma solo per stampa differenza tra i vari sistemi (es. 10pt sono pari a 10px su Mac

ma 13px su Win) se si ha a cuore la leggibilità (che varia in base alle preferenze

e capacità fisiche dell’utente), usare “em”, "rem" o percentuale (tutto relativo al default)

se si vuole avere controllo assoluto della grafica, usare “px” … ma attenzione a DPI/PPI consigliabile solo quando è nota molto bene la risoluzione

video del dispositivo utente (es. app per specifico modello di smartphone)


CSS: font properties (IV) font: font-style font-variant font-weight

font-size / line-height font-family | font-ref font-ref chiede lo stesso font di un’altra area:

caption = font dei controlli con nome (es. pulsanti) icon = font delle etichette delle icone menu = font dei menu (es. dropdown menu) message-box = font dei campi di testo small-caption = font dei controlli con nome (piccoli) status-bar = font della barra di stato della finestra

p { font: bold italic 12px / 14px Palatino, serif }


Immagini opacity

valori 0 ... 1 (es. 0.3 per 30%) valori bassi rendono l'immagine più trasparente

width, height dimensioni es. per immagine che si adatta alla larghezza: width:100%; height:auto

… ma così l'immagine potrebbe essere ingrandita (rispetto alla dimensione originale), se si vuole evitarlo: max-width:100%; height:auto


CSS: proprietà dei link per definire lo stile dei link nei vari stati si usano pseudo-

classi: :link (link non visitato) :visited (link visitato) :active (link su cui viene fatto click) :hover (link puntato dal mouse)

oppure si possono associare classi / stili al tag A (indipendenti dallo stato)

esempi:a:link { color: blue }a:hover { background: aqua }a.semplice { text-decoration: none }


CSS: proprietà Display none

elemento invisibile e che non occupa spazio default per gli script

block elemento visibile, inizia una nuova riga, occupa tutta la

larghezza disponibile (se non specificato altrimenti) default per i tag div, h, header, footer, p, …

inline elemento visibile, segue elemento precedente (senza iniziare

una nuova riga), occupa solo la larghezza necessaria (se non specificato altrimenti)

default per i tag span, a, img, …


CSS: proprietà Visibility visibility: visible | hidden | collapse | initial | inherit visible

elemento visibile ed occupa spazio hidden

invisibile ma occupa spazio collapse

solo per righe o colonne di una tabella "collassa" l'elemento rendendo il relativo spazio disponibile per

altri elementi

css_visibility.html


Media-type possibile specificare che un foglio di stile si applica solo se la

pagina è visualizzata su uno specifico supporto multimediale (o "media-type"): parametro "media=…" del tag LINK possibile elencare più media-type, separati da virgola

esempio:<head><link rel="stylesheet" type="text/css"href="polito_stampa_A4.css" media="print">. . .

</head>


Media-type noti definiti in CSS-2.1

all (è il default) braille (= dispositivo tattile Braille) embossed (= stampante Braille a pagina) handheld (= piccolo schermo, banda limitata) print (stampante a pagina, pre-print view) projection screen speech (in CSS2 era "aural") tty (stampante a spaziatura fissa; vietato usare "px") tv (=bassa risoluzione + audio)


Media-type e media-groupmedia-type media group

paged, continuous

visual, audio,speech, tactile

grid, bitmap

static, interactive

braille continuous tactile grid bothembossed paged tactile grid statichandheld both visual, audio,

speechgrid,

bitmapboth

print paged visual bitmap staticprojection paged visual bitmap interactivescreen continuous visual, audio bitmap bothspeech continuous speech N/A bothtty continuous visual grid bothtv both visual, audio bitmap both


@media possibile condizionare una parte del CSS ad un determinato

media disponibile da CSS2 esempio:

body { text-align: justify; }@media screen {body {font-family: Arial, sans-serif; }

}@media print {body { font-family: Times, serif; }

}. . .


Media query CSS3 aggiunge la possibilità di condizionare una parte del

CSS non solo ad un determinato tipo di media ma anche a specifiche proprietà del media

... perché spesso la formattazione dipende da specifici parametri (es. orientamento, dimensione)

CSS3 riduce il numero di media type a soli quattro: all print screen speech


Includere un foglio di stile (@import) un CSS può importare le regole di altri CSS in modo assoluto

o condizionato al media-type sintassi

@import: url ("URI_CSS") [ media1 , media2 , ... ] ; da inserirsi prima di qualunque regola di formattazione esempio (all'interno di un file/sezione CSS):

@import url("poli_general.css");@import url("poli_stampa.css") print;body { color: blue }. . .


border

margin (trasparente)

CSS: modello di formattazione ogni blocco è visto come un contenitore (box)

padding

larg. elemento

contenuto

larghezza contenitore© A.Lioy - Politecnico di Torino (2003-2020) 58

CSS: dimensioni margini e padding margin-left, margin-right, margin-top, margin-bottom: auto |

lunghezza | percentuale la percentuale è riferita alla larghezza del genitore

margin: m_top_bottom_left_rightmargin: m_top_bottom m_left_rightmargin: m_top m_right_left m_bottommargin: m_top m_right m_bottom m_left formato sintetico (in quattro versioni) per le dimensioni dei

margini corrispondenza tra numero parametri e margini seguita anche

per i bordi padding-left, padding-right, padding-top, padding-bottom,

padding: auto | lunghezza | percentuale


CSS: formati sintetici per i bordi border-top, border-right, border-bottom, border-left, border: [

width ] [ style ] [ color ] nella forma sintetica "border" si può specificare un unico valore

uguale per tutti i bordi esempio:

border: medium ridge red


CSS: proprietà Position (I) tutti (tranne static) usano top, right, bottom, e left per indicare

gli spostamenti static

è il default obbedisce alla sequenza specificata in HTML si sposta insieme al contenuto

relative spostamento rispetto alla posizione normale lascia un "buco" nella sua posizione di default si sposta insieme al contenuto


CSS: proprietà Position (II) fixed

posizionamento assoluto rispetto alla viewport non si sposta anche quando si fa scroll non lascia un buco

absolute posizionamento assoluto rispetto all'ultimo predecessore

posizionato (ossia non static) … oppure rispetto al body (in questo caso si muove con la

pagina)


CSS: sovrapposizione di elementi z-index

numero intero (positivo o negativo), default è zero indica l'ordine dello stack con cui visualizzare elementi che si

sovrappongono con stesso z-index si segue l'ordine in HTML

es. figura sul bordo superiore, con testo sopra

img {position: absolute;left: 0px; top: 0px;width: 100%; height: auto;z-index: -1;

}


CSS: contenitori mobili float: left | right | none

contenitore mobile posizionamento orizzontale rispetto al genitore sino a toccare il

suo bordo o quello di un altro float clear: left | right | both | none

quali lati di un contenitore NON possono essere adiacenti a contenitori float precedenti


Impaginazione tipico esempio: pagina con header (in testa), footer (al fondo),

menù e contenuto (affiancati) ma nel caso di pagina "stretta" (es. smartphone) la si

vorrebbe "responsive" ossia che si adatta facendo "scivolare" il contenuto sotto il menù

header

footer

menù contenutoheader

footer

menùcontenuto


Impaginazione con tabelle usa tabella con numero adeguato di righe e colonne soluzione vecchia:

non rispetta la semantica non è responsive

<table><tr> <td colspan=2> ... header ...</td> </tr><tr><td>... menu ...</td><td>... content ...</td>

</tr><tr> <td colspan=2> ... footer ...</td> </tr></table>

css_layout_table.html


Impaginazione con blocchi flottanti usa DIV e FLOAT soluzione più moderna ma:

richiede ordine dei DIV in HTML

#header { clear: both; }#navigation { float: left; width: 10ex; }#navigation ul {list-style: none;margin: 0 0 0 0; padding: 0 0 0 0; }

#content { float: left; }#footer { clear: both; }

css_layout_div_float_v2.html

css_layout_div_float.html


Responsive design sito usabile su tutti i dispositivi:

desktop, laptop tablet smartphone

usa solo HTML e CSS (no JS) dimensionare il contenuto per scroll verticale (ma non

orizzontale!) no elementi troppo larghi non assumere una larghezza specifica eventualmente usare CSS media query per caricare regole

diverse per schermi di dimensioni diverse


Grid layout posizionare gli elementi pensando ad una griglia

colonne tutte della stessa dimensione elementi sulle righe possono occupare più colonne tipicamente si usano 12 colonne, ognuna width:1/12

header

footer

aside(right)main

nav1 nav2 nav3 nav4

aside(left)


Grid layout 12 colonne (I)/* include borders in size computation */* { box-sizing: border-box; }/* define width of columns */.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;}


Grid layout 12 colonne (II)/* set parameters for all columns */[class*="col-"] {float:left; padding:1vw; border: 1px solid red; }

/* cols inside a row, clear formatting after it */.row::after {

content:""; clear:both; display:table; }

/* use like this (total cols in a row must be 12):<div class=row><div class=col-3> ... </div><div class=col-6> ... </div><div class=col-3> ... </div>

</div>*/ css_layout_col12.html


Adattamento a schermi piccoli usare media query per ridefinire le colonne quando la pagina

è visualizzata su schermi piccoli impostazioni importanti:

<meta name="viewport"content="width=device-width, initial-scale=1.0">

/* for small screen */@media only screen and (max-width: 768px) {[class*="col-"] { width: 100%; }

}

css_layout_col12_mobile.html


Adattamento delle immagini su schermi a bassa risoluzione non ha senso caricare

immagini ad alta risoluzione: usare media query per caricare immagine a basso PPI

rimpicciolire un'immagine è OK ma ingrandirla può "sgranarla" se è a bassa risoluzione immagine larga quanto la viewport width: 100%; height: auto;

immagine larga al massimo quanto la dimensione originale max-width: 100%; height: auto;


CSS grid layout l'importanza del layout di tipo a griglia ha portato alla

definizione di una modalità CSS specifica svincola da float e posizionamento sequenziale in HTML:

permette di piazzare i blocchi tramite CSS (e quindi cambiare più facilmente il layout agendo solo su CSS)

un "grid container" è un elemento che può contenere altri elementi disposti a griglia si ottiene con "display: grid" (block-level) oppure con "display: inline-grid" (inline)


CSS grid layout: righe e colonne numero e dimensione di righe e colonne:

grid-template-columns: dim_col1 dim_col2 … grid-template-rows: dim_row1 dim_row2 … usando dimensioni fisse, percentuali o "auto"

spaziatura tra righe e colonne: grid-column-gap: gap grid-row-gap: gap grid-gap: col-gap row-gap


CSS grid layout: posizionamento posizionamento di elementi all'interno della griglia indicando

righe e colonne o area: grid-column: col-start / [ col-end | col-span ] ; grid-row-start: row-start / [ row-end | row-span ] ; grid-area: row-start / col-start / row-end / col-end grid-area: row-start / col-start / row-span / col-span

il formato span richiede di indicare "span" col numero di righe o colonne

allineamento orizzontale tramite "justify-content" e verticaletramite "align-content": space-evenly, space-around, space between, center, start, end


CSS grid layout: aree con nomi invece di indicare righe e colonne si può dare un nome ad

un'area: grid-area: nome_dell_area

… e poi usare questi nomi nella definizione di righe e colonne: grid-template-areas: 'nome_area1 nome_area2' …

esempio:

.theHeader { grid-area: header; }

.theMenu { grid-area: menu; }

.theMain { grid-area: main; }

.grid-container { /* 3 columns and 2 rows */grid-template-areas: 'header header header'

'menu main main' }


CSS grid layout: esempio (I)/* define the areas */

.theHeader { grid-area: header; text-align: center }

.menu1 { grid-area: menu-1; }





.theMain { grid-area: main; }

.theLeft { grid-area: left; }

.theRight { grid-area: right; }

.theFooter { grid-area: footer; }


CSS grid layout: esempio (II)/* define the grid */

.grid-container {display: grid;grid-template-areas:'header header header header header''menu-1 menu-2 menu-3 menu-4 menu-5''left main main main right''footer footer footer footer footer';grid-gap: 10px;background-color: blue;padding: 10px;

}


CSS grid layout: esempio (III)

<body><div class="grid-container"><div class="theHeader"> ... </div><div class="theFooter"> ... </div>

<div class="menu1"> ... </div>. . .<div class="menu5"> ... </div><div class="theLeft"> ... </div><div class="theRight"> ... </div><div class="theMain"> ... </div>

</div> </body>

css_layout_grid.html

css (cascading style sheets)lioy/01nbe/css.pdf · css (cascading style sheets) antonio lioy <...

Documents