Piano triennale regionale 2016-2018 Rete Politecnica PO FSE 2014/2020 Regione Emilia Romagna - Obiettivo Tematico 10 - Asse III Istruzione e formazione Priorità di Investimento 10.4 Obiettivo specifico 10 Operazione Rif. PA 2017-7570/RER intitolata Tecnico della Produzione Multimediale per la Valorizzazione della Cultura e dell'arte approvata con DGR n. 953 del 28/06/2017 e cofinanziata con risorse del Fondo sociale europeo PO 2014-2020 e della Regione Emilia-Romagna Soggetto attuatore titolare: SIDA GROUP S.R.L. Anno di produzione: 2017/2018 Unità formativa n. 10 Principali linguaggi per creare applicativi web e progettazione e sviluppo siti web Lezioni dal 22/02/2018 al 28/02/2018 Docente: Bruno Migliaretti
CSS
I FOGLI DI STILE HTML serve 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).
I FOGLI DI STILE CSS è il linguaggio che usa il web designer per realizzare un interfaccia. La prima fase di un design è la progettazione.
PROGETTAZIONE Progettazione WEB e concetto di accessibilità
ACCESSIBILITÀ Consentire l accesso a tutti gli utenti indipendentemente dal dispositivo che usano. Consentire l accesso a tutti gli utenti indipendentemente dalla loro abilità. Tenere conto dei dispositivi che supportano gli utenti diversamente abili.
ACCESSIBILITÀ Con legge 9 gennaio 2004 n.4 e i successivi decreti attuativi è obbligatorio per i siti Web della Pubblica Amministrazione e della aziende private che lavorano con la Pubblica Amministrazione seguire precise regole di accessibilità. http://www.webaccessibile.org/
TECNICHE RESPONSIVE Progettare interfacce diverse che consentano di mostrare con efficienza le stesse informazioni su dispositivi diversi. Utilizzare specifiche tecniche CSS per mostrare lo stesso contenuto HTML in maniera diversa sui diversi dispositivi sulla base di quanto progettato.
ESEMPIO Se visualizzo la pagina di facebook su uno schermo desk top di 1920 per 1080 pixel ottengo:
Su uno smartphone 1920x1080 (ad esempio un Samsung Note) otterrei:
Invece ottengo questo:
TECNICA RESPONSIVE 1. Uso una diversa pixel ratio per i dispositivi mobili 2. Faccio in modo che i contenuti della pagina HTML sia visualizzati diversamente sui vari dispositivi per consentire all'utente la miglior esperienza possibile.
DEVICE PIXEL RATIO La device pixel ratio è il rapporto tra le dimensioni fisiche (in pixel) dello schermo di un dispositivo e le sue dimensioni logiche, le dimensioni usate, cioè, per visualizzare gli oggetti sullo schermo.
DEVICE PIXEL RATIO Perché utilizzo le dimensioni logiche. In altri termini. Su un desktop da 23 pollici uso 96 pixel per ogni pollice Su un samsung Note uso circa 400 pixel per ogni pollice.
ESEMPI DI PIXEL RATIO
APPLE IPAD Dimensioni fisiche: 1536 x 2048 Dimensioni logiche: 768 x 1024 Pixel ratio: 2.0
APPLE IPHONE 6 Dimensioni fisiche: 750 x 1254 Dimensioni logiche: 375 x 627 Pixel ratio: 2.0
NOKIA LUMIA 520 Dimensioni fisiche: 448 x 746 Dimensioni logiche: 320 x 533 Pixel ratio: 1.4
SAMSUNG GALAXY NOTE III Dimensioni fisiche: 1080 x 1920 Dimensioni logiche: 360 x 640 Pixel ratio: 3.0
LG G4 Dimensioni fisiche: 1440 x 2560 Dimensioni logiche: 360 x 640 Pixel ratio: 4.0
COME SI COLLEGA UN FOGLIO DI STILE A UNA PAGINA WEB
STILE IN LINEA Un modo per formattare un elemento con una regola 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">
INSERIMENTO 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>....
FOGLI COLLEGATI L'elemento <link> presenta una serie di attributi di cui è importante spiegare significato e funzione: Attributo Descrizione rel href type media 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. serve a definire l'url assoluto o relativo del foglio di stile. È obbligatorio identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale.
<html> <head> <title>inserire i fogli di stile in un documento</title> <style type="text/css"> body { background: #FFFFCC; </style> 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>...
COME SONO COSTRUITE LE REGOLE
REGOLE Una regola di stile è costituita da due elementi: Il nome di una proprietà che stabilisce quale aspetto verrà influenzato dalla regola. Un valore che determina come verrà reso quel particolare aspetto. proprietà : ; valore
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
REGOLE.grande-strong{ color:#333333; font-weight: bold; font-size: 40px;
Selettore: definisce a quali elementi si applicano le regole che seguono.grande-strong{ color:#333333; REGOLE font-weight: bold; font-size: 40px;
Parentesi graffe: racchiudono l'elenco delle regole REGOLE.grande-strong{ color:#333333; font-weight: bold; Parentesi graffe: racchiudono l'elenco delle regole font-size: 40px;
.grande-strong{ color:#333333; REGOLE font-weight: bold; font-size: 40px; Regola: è composta dal nome di una proprietà e da un valore
Proprietà: indica l'elemento visuale che viene modificato REGOLE.grande-strong{ color:#333333; font-weight: bold; font-size: 40px;
.grande-strong{ [due punti]: è l'operatore che collega la proprietà al valore che le viene assegnato. color:#333333; REGOLE font-weight: bold; font-size: 40px;
.grande-strong{ color:#333333; REGOLE font-weight: bold; font-size: 40px; valore: determina quale sarà l'aspetto dell'elemento per quanto riguarda la caratteristica controllata dalla proprietà a cui è stato assegnato.
IMPORTANZA 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. scrittura codice interpretazione
In CSS l elemento sintattico principale è la punteggiatura:.grande-strong{ color:#333333; font-weight: bold; font-size: 40px;
Se sbaglio il nome di una proprietà o un valore, semplicemente la regola verrà ignorata:.grande-strong{ calor:#333333; I'errore di ortografia fa sì che la regola sia ignorata font-weight: bold; font-size: 40px;
Se sbaglio o tralascio la punteggiatura potrebbe non essere interpretato l intero codice:.grande-strong{ color:#333333; font-weight: bold; font-size: 40px; Se tralascio la parentesi graffa chiusa, tutto il codice che segue non verrà interpretato.
SELETTORI
SELETTORI I selettori sono pattern (criteri di selezione) usati per individuare l'elemento (o gli elementi) a cui si desidera attribuire lo stile. Prova il codice
ELEMENTO Inserendo un selettore senza prefisso si identifica un elemento HTML. Se si inseriscono più selettori separati da virgola il gruppo di regole viene attribuito ad ogni selettore Prova il codice
ELEMENTO body, html { height: 100%; body { font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 300; color: #333333; background-color: #ffffff; h1, h2, h3, h4, h5, h6 { font-weight:700;
CLASSE Un selettore preceduto da un punto identifica una classe. Una classe è un nome che identifica un gruppo di regole di stile. Gli elementi della pagina che contengono quel nome nell attributo class seguono le regole di stile che la classe identifica Prova il codice
.red { color: #dd0000;.text-center { text-align:center;.text-right { text-align:right; CLASSE
ATTRIBUTO Un selettore compreso tra parentesi quadre rappresenta un attributo. Esistono varie sintassi. [attributo] [target] Seleziona tutti gli elementi con un attributo target [attributo="valore"] [target="_blank"] Seleziona tutti gli elementi con target="_blank" [attributo~="valore"] [title~="flower"] Seleziona tutti gli elementi con un attributo title che continene la parola "flower" Prova il codice
ATTRIBUTO [attribute ="value"] [lang ="en"] Seleziona tutti gli elementi con un attributo lang che inizia con "en" [attribute^="value"] a[href^="https"] Seleziona tutti gli elementi <a> il cui attributo href inizia con "https" [attribute$="value"] a[href$=".pdf"] Seleziona tutti gli elementi <a> il cui attributo href termina con ".pdf" [attribute*="value"] a[href*="w3schools"] Seleziona tutti gli elementi <a> il cui attributo href contiene la stringa "w3schools" Prova il codice
ATTRIBUTO /* Seleziona tutti gli elementi che hanno l'attributo title*/ [title]{ background-color:#ffffdd; /* Seleziona tutti gli elementi a in cui l'attributo href inizia con #*/ a[href^="#"]{ text-decoration: underline; color: darkmagenta;
ID Un selettore preceduto da # identifica una elemento con un determinato id. /* Seleziona l'elemento con attributo id="main" */ #main { font-family:'times New Roman', Times, serif; font-size: 20px; Prova il codice
PSEUDO SELETTORI
PSEUDO CLASSI La pseudo classe è un specifica del selettore. La sintassi è: selettore:pseudo-classe Usando le pseudo-classi posso attribuire un particolare aspetto ad un elemento quando si trova in un determinato stato. Esempi: :hover indica lo stato di un elemento quando il puntatore del mouse passa sopra all elemento stesso :focus indica lo stato di un elemento quando ha il «il focus» :nth-child(n) indica un elemento quando è l ennesimo figlio del suo parent. Prova il codice
PSEUDO CLASSI /* Seleziona ogni elemento a contenuto in un elemento li a sua volta cont enuto in un elemento ul che sta dentro un nav con classe indice quando il cursore del mouse e sopra l'elemento*/ nav.indice ul li a:hover { color: #dd0000; /* Vengono selezionati il secondo e il terzo figlio ci ogni elemento con classe header-col ccontenuto in un elemento con classe header-main*/.header-main.header-col:nth-child(2),.header-main.header-col:nth-child(3) { height:40%; text-align: right;
PSEUDO ELEMENTI LO pseudo ELEMENTO è un specifica del selettore. La sintassi è: selettore::pseudo-elemento Usando gli pseudo-elementi posso attribuire un particolare aspetto ad un parte dell'elemento senza che la struttura HTML la differenzi. Esempi: ::after e ::before consentono di inserire contenuto dopo o prima l'elemento identificato dal selettore ::first-line consente di modificare l'aspetto della prima riga di testo di un elemento ::first-letter consente di modificare l'aspetto della prima lettera di un elemento ::selection determina l'aspetto della porzione di testo selezionata dell'utente Prova il codice
PSEUDO ELEMENTI Nota bene Tutti i maggiori browser, per il momento, supportano si la sintassi con doppi due punti selettore::pseudo-elemento che la sintassi con i due punti singoli selettore:pseudo-elemento mentre Microsoft Internet Explorer 8 non supporta la sintassi con i doppi due punti Prova il codice
SELETTORI COMPOSTI
UNIONE DI SELETTORI Quando viene seguito senza separatori da un selettore di classe, di id, di attributo o di pseudoclasse, vengono selezionati solo gli elementi che soddisfano ad entrambi i criteri. Esempi: nav.indice: gli elementi nav il cui attributo class contiene indice div#main: la div con id uguale a main input[type= text ]: tutti gli elementi input con l attributo type uguale a text
UNIONE DI SELETTORI nav.indice { width:95%; position:static; text-align: left; transform: translate(0,0); margin: 40px auto 10px;
SELEZIONARE UN ELEMENTO CHE È DENTRO UN ALTRO ELEMENTO nav.indice ol li a { color: #000; Seleziona tutti gli elementi <a> che sono dentro un elemento <li> che a suo volta è dentro un elemento <ol> che è dentro un elemento <nav> con classe indice.
nav.indice ol li a { color: #000; SELEZIONARE UN ELEMENTO CHE È FIGLIO DI UN ALTRO ELEMENTO nav.indice > ul > li a { color: #000; Seleziona tutti gli elementi <a> che sono dentro un elemento <li> che è figlio di un elemento <ul> che è figlio di un elemento <nav> con classe indice. In questo modo viene stilizzata solo la lista di primo livello, le sottoliste annidate dentro gli elementi <li> sono escluse.
SELETTORI Il link qui sotto vi rimanda alla w3school. È una pagina interattiva in cui potete provare tutti i selettori. Prova il codice
ELENCO COMPLETO DEI SELETTORI
SELETTORI Selettore Es. Descrizione CSS.class.intro Seleziona tutti gli elementi con class="intro" 1 #id #firstname Seleziona tutti gli elementi con id="firstname" 1 * * Seleziona tutti gli elementi 2 elemento p Seleziona tutti gli elementi <p> 1 elemento, elemento div, p Seleziona tutti gli elementi <div> e tutti gli elementi <p> 1 elemento elemento div p Seleziona tutti gli elementi <p> contenuti in un elemento <div> 1
SELETTORI Selettore Es. Descrizione CSS elemento > elemento div > p Seleziona tutti gli elementi <p> figli di un elemento <div> 2 elemento + elemento div + p Seleziona tutti gli elementi <p> che sono posizionati subito dopo ad un elemento <div> elemento ~ elemento p ~ ul Seleziona tutti gli elementi <p> che sono preceduti da un elemento <ul> 2 3 [attribute] [target] Seleziona tutti gli elementi con un attributo target 2 [attribute="value"] [target=_blank] Seleziona tutti gli elementi con target="_blank" 2 [attribute~="value"] [title~=flower] Seleziona tutti gli elementi con un attributo title che continene la parola "flower" 2
SELETTORI Selettore Es. Descrizione CSS [attribute ="value"] [lang =en] Seleziona tutti gli elementi con un attributo lang che inizia con "en" [attribute^="value"] a[href^="https"] Seleziona tutti gli elementi <a> il cui attributo href inizia con "https" [attribute$="value"] a[href$=".pdf"] Seleziona tutti gli elementi <a> il cui attributo href termina con ".pdf" 2 3 3 [attribute*="value"] a[href*="w3school s"] Seleziona tutti gli elementi <a> il cui attributo href contiene la stringa "w3schools" 3 :active a:active Stato active di tutti gli elementi <a>. 1 ::after p::after Inserisce testo dopo ogni elemento <p> 2
SELETTORI Selettore Es. Descrizione CSS ::before p::before Inserisce testo prima di ogni elemento <p> 2 :checked input:checked Seleziona tutti gli elementi <input> selezionati 3 :disabled input:disabled Seleziona tutti gli elementi <input> disabilitati 3 :empty p:empty Seleziona tutti gli elementi <p> che non hanno figli 3 :enabled input:enabled Seleziona tutti gli elementi <input> abilitati 3 :first-child p:first-child Seleziona tutti gli elementi <p> che sono I primi figli del loro parent
SELETTORI Selettore Es. Descrizione CSS ::first-letter p::first-letter Seleziona la prima lettera di ogni elemento <p> 1 ::first-line p::first-line Seleziona la prima riga di ogni elemento <p> 1 :first-of-type p:first-of-type Seleziona ogni elemento <p> che è il primo <p> del suo parent. 3 :focus input:focus Seleziona l'elemento input che ha il focus 2 :hover a:hover Stato mouse hover di tutti gli elementi <a> 1 :invalid input:invlid Selezione gli elementi input con un valore no valido 3
SELETTORI Selettore Es. Descrizione CSS :lang(language) p:lang(it) Seleziona ogni elemento <p> con l'attributo lang uguale a "it" (Italian) :last-child p:last-child Seleziona ogni elemento <p> che è ultimo figlio del suo parent :last-of-type p:last-of-type Seleziona ogni elemento <p> che è ultimo elemento p del suo parent 2 3 3 :link a:link Tutti i link non visitati 1 :not(selector) p:not(.red) Seleziona tutti gli elementi <p> che non hanno la classe.red. :nth-child(n) p:nth-child(2) Seleziona ogni elemento <p> che è il secondo figlio del suo parent 3 3
SELETTORI Selettore Es. Descrizione CSS :nth-last-child(n) p:nth-last-child(2) Seleziona ogni elemento <p> che è il secondo figlio del suo parent contando dalla fine. :nth-last-of-type(n) p:nth-last-of-type(2) Seleziona ogni elemento <p> che è il secondo elemento p del suo parent contando dalla fine. :nth-of-type(n) p:nth-of-type(2) Seleziona ogni elemento <p> che è il secondo elemento p del suo parent. :only-of-type p:only-of-type Seleziona ogni elemento <p> che è l'unico elemento p del suo parent. :only-child p:only-child Seleziona ogni elemento <p> che è l'unico figlio del suo parent. :optional input:optional Seleziona ogni elemento input che non ha l'attributo "required". 3 3 3 3 3 3
SELETTORI Selettore Es. Descrizione CSS :read-only input:read-only Seleziona ogni elemento input che ha l'attributo "readonly". :read-write input:read-write Seleziona ogni elemento input che NON ha l'attributo "read-only". :required input:required Seleziona ogni elemento input che ha l'attributo "required". 3 3 3 ::selection ::selection Porzione di un elemento selezionata dall'utente. :valid input:valid Seleziona ogni elemento input con un valore non "invalid" 3 :visited a:visited Tutti I link già visitati 3
DETTAGLI http://www.w3schools.com/cssref/css_selectors.asp
PROPRIETÀ CSS
VALORI Valore parola riservata Esempio display: none; margin-left: auto; numero line-height: 1.3; font-weight: 300; misura margin-top: 20px; line-height: 24px; percentuale width: 80%; margin-top: 2%; url colore più valori attr() calc() background-image: url(img/sfondo.jpg); nome-colore, #RRGGBB, #RRGGBBAA, rgb(rrr,ggg,bbb), rgba(rrr,ggg,bbb,aaa), hsl(hhh,sss,lll), hsla(hhh,sss,lll,aaa) background: url(img/sfondo.jpg) no-repeat center; margin: o auto; Restituisce il valore dell'attributo inserita tra parentesi Consente di inserire una misura come risultato di un calcolo
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, ma meno supportato 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 100-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: 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 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: uppercase;.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.
LISTE
REGOLE DI STILE PER LE LISTE In HTML, ci sono due tipi principali di liste: liste non ordinate (<ul>) (gli elementi della lista sono contrassegnati con bullets) liste ordinate (<ol>) (gli elementi della lista sono contrassegnati da numeri o lettere) Con i fogli di stile però posso modificarne completamente l'apparenza. In particolare: Personalizzare il modo in cui vengono presentati gli elenchi ordinati Personalizzare i bullets delle liste non ordinate Sostituire gli indicatori con un immagine personalizzata
list- style- type La proprietà list-style-type definisce l aspetto del marcatore di lista. ul.a { list-style-type: circle; ul.b { list-style-type: square; ol.c { list-style-type: upper-roman; ol.d { list-style-type: lower-alpha; La scelta dei valori possibili è lunghissima. La tabelle che segue illustra i principali Prova il codice
Valori per list-style-type Valore disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek Descrizione un cerchietto pieno colorato; il colore può essere modificato per tutti i tipi con la proprietà color un cerchietto vuoto un quadratino sistema di conteggio decimale 1, 2, 3, sistema di conteggio decimale ma con la prima cifra preceduta da 0 (01, 02, ) cifre romane in minuscolo (i, ii, iii, iv, ) cifre romane in maiuscolo (I, II, III, IV, ) lettere ASCII minuscole (a, b, c, ) lettere ASCII maiuscole (A, B, C, ) Lettere minuscole dell'alfabeto greco
list- style- type Impostando la proprietà list-style-type a none vene eliminata l'impostazione di default. ul.unstyled { list-style-type: none; padding: none; margin: 0; Prova il codice
list- style- image La proprietà list-style-image consente di utilizzare un'immagine personalizzata al posto del marcatore. ul { list-style-image: url(square.gif); Prova il codice
DISPLAY
display La proprietà display determina come viene visualizzato un elemento nel flusso di elementi che compongono la pagina HTML. nav ul li { display: inline-block;.hidden { display: none; Prova il codice
radius DISPLAY Valore inline block flex inline-block inline-flex inline-table list-item table Descrizione Valore predefinito. Visualizza un elemento come elemento inline (esempio: <span>) Visualizza un elemento come un elemento block (e.: <p>) Visualizza un elemento come un contenitore secondo il modello box-flex. Nuovo in CSS3 Visualizza un elemento come un contenitore di tipo inline block. Gli elementi contenuti all'interno si comportano come in un blocco, ma l'elemento stesso si comporta come elemento inline Visualizza un elemento Ma che si posiziona come inline come un contenitore secondo il modello boxflex. L'elemento viene visualizzato come una tabella inline L'elemento si comporta come un elemento<li>. L'elemento si comporta come un elemento<table>.
DISPLAY Valore table-caption table-column-group table-header-group Descrizione L'elemento si comporta come un elemento <caption>. L'elemento si comporta come un elemento<colgroup>. L'elemento si comporta come un elemento<thead>. table-footer-group L'elemento si comporta come un elemento <tfoot>. table-row-group table-cell table-column table-row none L'elemento si comporta come un elemento <tbody>. L'elemento si comporta come un elemento <td>. L'elemento si comporta come un elemento <col>. L'elemento si comporta come un elemento <tr>. L'elemento non viene visualizzato.
Valori per display Valore block inline inline-block none list-item table inline-table table-cell table-row table-row-group table-column table-columngroup table-header-group table-footer-group table-caption Descrizione l elemento viene reso come un elemento blocco l elemento a cui viene applicata assume le caratteristiche degli elementi inline l elemento può assumere, come gli elementi blocco, dimensioni esplicite (larghezza e altezza), margini e padding, ma come tutti gli elementi inline, si disporrà orizzontalmente e non verticalmente, potendo essere circondato dal testo ed essendo sensibile all allineamento verticale l elemento non viene mostrato; o meglio: è come se non fosse nemmeno presente nel documento, in quanto non genera alcun box; l uso del valore none è uno dei mezzi con cui, nei CSS, si può nascondere un elemento consente di impostare per un elemento una presentazione equivalente a quella degli item di una lista display degli elementi come elementi di una tabella.
BOX MODEL
BOX MODEL Tutti gli elementi HTML possono essere considerati come scatole, riquadri che occupano un certo spazio sulla schermo. In CSS, il termine "box model" viene usato quando si parla di design e il layout. Il box model si compone di: margini, bordi, margini interni (padding), e contenuto effettivo. Content - Il contenuto dell'elemento, dove compaiono testo e immagini Padding Margine interno attorno al contenuto. Border Il bordo Margine Distanza tra l'elemento e gli elementi che lo circondano
BOX MODEL (content-box) default Margine esterno (margin) Bordo (border) Margine interno (padding) width height Contenuto (content)
BOX MODEL (border-box) Margine esterno (margin) Bordo (border) Margine interno (padding) width height Contenuto (content)
BOX MODEL (background) Margine esterno (margin) Bordo (border) Margine interno (padding) width height Contenuto (content)
BOX- SIZING Le proprietà box-sizing viene utilizzato per indicare al browser quali componenti del box model devono essere inclusi nel calcolo di larghezza e altezza. Il valore di box-sizing deve essere: content-box (default): il calcolo comprende solo il contenuto. border-box: il calcolo comprende anche margine interno (padding) e border ma non margin. * { box-sizing : border-box;
BACKGROUND background-color Definisce il colore di sfondo di un elemento. body { background-color: #FFFFFF; div.main { background-color: transparent; background-image Definisce l'url di un'immagine da usare come sfondo di un elemento. body { background-image: url(sfondo-scuro.jpg); div.main { background-image: none;
BACKGROUND background-repeat Consente di definire la direzione in cui l'immagine di sfondo viene ripetuta. Valori: repeat, repeat-x, repeat-y, no-repeat body { background-repeat: repeat-x; background-attachment Valori: scroll, fixed. div.main { background-attachment: fixed;
BACKGROUND background-position Definisce il punto in cui verrà piazzata un'immagine di sfondo. body { background-position: top center; Valori: valori in percentuale, valori espressi con unità di misura, parole chiave top, left, bottom, right, center. background Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo. body { background: url(pattern.png) repeat-x scroll;
BACKGROUND background-clip Definisce l'are dello sfondo. Valori: border-box padding-box content-box initial inherit div.main { background-clip: padding-box; background-origin A cosa è relativa la posizione dell'immagine. Valore: border-box padding-box content-box initial inherit div.main { background-origin: border-box;
background-size BACKGROUND Consente di definire come l'immagine di sfondo riempirà il contenitore. auto larghezza altezza cover contain initial inherit div.main { background-size: cover;
BORDER Stile del bordo La proprietà border-style specifica quale tipo di bordo visualizzare. Valori sono consentiti: dotted - Definisce un bordo punteggiato dashed - Definisce un bordo tratteggiato solid - Definisce un bordo solido double - Definisce un doppio bordo groove- Definisce un bordo 3D scanalato. L'effetto dipende dal valore border-color ridge- Definisce un bordo 3D increspato. L'effetto dipende dal valore border-color inset- Definisce un bordo 3D inserto. L'effetto dipende dal valore border-color outset- Definisce un bordo in 3D. L'effetto dipende dal valore border-color none - Definisce nessun bordo hidden - Definisce un bordo nascosto La proprietà border-style può avere da uno a quattro valori (superiore, destro, inferiore, sinistro).
BORDER- STYLE p.dotted { border-style: dotted; p.dashed { border-style: dashed; p.solid { border-style: solid; p.double { border-style: double; p.groove { border-style: groove; p.ridge { border-style: ridge; p.inset { border-style: inset; p.outset { border-style: outset; p.none { border-style: none; p.hidden { border-style: hidden; p.mix { border-style: dotted dashed solid double;
LARGHEZZA DEL BORDO Larghezza del bordo La proprietà border-width specifica la larghezza dei quattro bordi. La larghezza può essere impostata come una dimensione specifica (in px, pt, cm, em, ecc.) o utilizzando uno dei tre valori predefiniti: thin, medium, o thick. La proprietà border-width può avere da uno a quattro valori (superiore, destro, inferiore, sinistro). p.two { border-style: solid; border-width: medium; p.three { border-style: solid; border-width: 2px 10px 4px 20px;
COLORE DEL BORDO Larghezza del bordo La proprietà border-color specifica la larghezza dei quattro bordi. Il colore deve essere specificato con uno dei valori legali La proprietà border-color può avere da uno a quattro valori (superiore, destro, inferiore, sinistro). p.one { border-style: solid; border-color: red; p.two { border-style: solid; border-color: red green #0000FF rgb(255,255,0);
p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; SINGOLI LATI Per ognuna delle proprietà elencate esiste la versione che consente di stilizzare un singolo lato; p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid;
VERSIONE COMPATTA Con la proprietà border è possibile settare tutte le proprietà di tutti i quattro bordi con un'unica regola; p { border: 5px solid blue; Con le proprietà border-top, border-right, border-bottom, border-left settare tutte le proprietà dei singoli bordi.
BORDER RADIUS Con la proprietà border-radius è possibile impostare dei bordi arrotondati; p { border: 2px solid darkred; border-radius: 5px;
OUTLINE L'outline è un bordo esterno che serve ad evidenziare un elemento e non influisce in alcun modo sulle dimensioni dell'elemento. Per default un outline tratteggiato circonda gli elementi che hanno il focus. La proprietà è la stesse caratteristiche di border La proprietà outline-style specifica lo stile. Valori sono consentiti: dotted - Definisce un bordo punteggiato dashed - Definisce un bordo tratteggiato solid - Definisce un bordo solido double - Definisce un doppio bordo groove- Definisce un bordo 3D scanalato. L'effetto dipende dal valore border-color ridge- Definisce un bordo 3D increspato. L'effetto dipende dal valore border-color inset- Definisce un bordo 3D inserto. L'effetto dipende dal valore border-color outset- Definisce un bordo in 3D. L'effetto dipende dal valore border-color none - Definisce nessun bordo hidden - Definisce un bordo nascosto La proprietà outline-style può avere da uno a quattro valori (superiore, destro, inferiore, sinistro).
OUTLINE- STYLE p.dotted {outline-style : dotted; p.dashed {outline-style : dashed; p.solid {outline-style : solid; p.double {outline-style : double; p.groove {outline-style : groove; p.ridge {outline-style : ridge; p.inset {outline-style : inset; p.outset {outline-style : outset; p.none {outline-style : none; p.hidden {outline-style : hidden; p.mix {outline-style : dotted dashed solid double;
LARGHEZZA DEL OUTLINE Larghezza del bordo La proprietà outline-width specifica la larghezza dei quattro bordi esterni. La larghezza può essere impostata come una dimensione specifica (in px, pt, cm, em, ecc.) o utilizzando uno dei tre valori predefiniti: thin, medium, o thick. La proprietà outline-width può avere da uno a quattro valori (superiore, destro, inferiore, sinistro). p.two { outline-width : solid; outline-width : medium; p.three { outline-width : solid; outline-width : 2px 10px 4px 20px;
COLORE DEL OUTLINE Larghezza del bordo La proprietà outline-color specifica la larghezza dei quattro bordi esterni. Il colore deve essere specificato con uno dei valori legali La proprietà outline-color può avere da uno a quattro valori (superiore, destro, inferiore, sinistro). p.one { outline-color : solid; outline-color : red; p.two { outline-color : solid; outline-color : red green #0000FF rgb(255,255,0);
VERSIONE COMPATTA Con la proprietà outline è possibile settare tutte le proprietà di tutti i quattro bordi con un'unica regola; p { outline : 5px solid blue; Con le proprietà outline-top, outline-right, outline-bottom, outline-left settare tutte le proprietà dei singoli bordi.
MARGINI CSS ha proprietà per specificare il margine per ogni lato di un elemento: margin-top margin-right margin-bottom margin-left Tutte le proprietà dei margini possono avere i seguenti valori: auto, misura (px, em, ecc.), percentuale Sono consentiti valori negativi. Esempi p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; p { margin: 100px 150px 100px 80px;
MARGINE INTERNO CSS ha proprietà per specificare il margine interno (padding) per ogni lato di un elemento: padding-top padding-right padding-bottom padding-left Tutte le proprietà possono avere i seguenti valori: auto, misura (px, em, ecc.), percentuale Esempi p { padding-top: 100px; padding-bottom: 100px; padding-right: 150px; padding-left: 80px; p { padding: 100px 150px 100px 80px;
ALTEZZA E LARGHEZZA Le proprietà height e width sono utilizzati per impostare l'altezza e la larghezza di un elemento. height e width possono essere impostate su auto (impostazione predefinita), e sarà il browser a calcolare l'altezza e la larghezza), o essere specificato con una misura, come px, cm, em, ecc., o in percentuale (%) del blocco che contiene l'elemento. div { height: 200px; width: 50%; background-color: powderblue;
MAX- HEIGHT E MAX- WIDTH Le proprietà max-height e max-width sono utilizzati per impostare l'altezza e la larghezza massima di un elemento. max-height e max-width possono essere una misura, come px, cm, em, ecc., una percentuale (%) del blocco che contiene l'elemento o none. div { max-height: 200px; max-width: 50%; background-color: powderblue;
MIN- HEIGHT E MAX- WIDTH Le proprietà min-height e min-width sono utilizzati per impostare l'altezza e la larghezza minima di un elemento. min-height e min-width possono essere una misura, come px, cm, em, ecc., una percentuale (%) del blocco che contiene l'elemento. Per eliminare il limite vanno impostate su 0. div { min-height : 200px; min-width : 50%; background-color: powderblue;
POSITION
POSITION La proprietà position specifica il metodo di posizionamento utilizzato per un elemento. position può assumere quattro diversi valori: static relative fixed absolute La posizione degli elementi è determinata dalle proprietà top, right, bottom e left. Modificare i valori di queste proprietà ha effetto solo se position è diversa da static. L'effetto sulla posizione cambia a secondo dell'impostazione di position.
STATIC Gli elementi HTML sono posizionati così per impostazione predefinita. Un elemento con position:static non è posizionato in modo speciale, ma secondo il normale flusso della pagina La posizione non è influenzata dalle proprietà top, right, bottom e left. div.normale { position: static; border: 3px solid #73AD21;
RELATIVE La posizione di un elemento con position:realtive è calcolata in maniera relativa rispetto alla sua posizione naturale secondo il normale flusso della pagina Le proprietà top, right, bottom e left causeranno uno scostamento dell'elemento rispetto alla sua posizione naturale. div.relativa { position: relative; left: 50px;
FIXED La posizione di un elemento con position:fixed è calcolata in relazione alla finestra del browser il che significa che rimane sempre nello stesso posto, anche se la pagina viene fatto scorrere. Le proprietà top, right, bottom e left determinano la posizione dell'elemento. div.fissa { position: fixed; top: 0; left: 0; width: 100%;
ABSOLUTE La posizione di un elemento con position:absolute è calcolata in relazione all'elemento che lo contiene se questo non è position:static, altrimenti in relazione al documento. Le proprietà top, right, bottom e left determinano la posizione dell'elemento. L'elemento position:absolute quando la pagina scrolla, scrolla insieme all'elemento relativamente al quale è posizionato.
ABSOLUTE div.relativa { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; div.assoluta { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21;
FLOAT
FLOAT Un elemento di tipo blocco (display:block) interrompe il flusso naturale della pagina anche se non ne occupa tutta la larghezza. Le proprietà float consente agli elementi che seguono l'elemento blocco di affiancarsi all'elemento stesso, a destra o a sinistra se lo spazio rimanente nella pagina lo consente. Il valore di float può essere: left: L'elemento si colloca a sinistra nella pagina e gli elementi che seguono lo affiancano a destra. right: L'elemento si colloca a destra nella pagina e gli elementi che seguono lo affiancano a sinistra. none: (valore di default) l'elemento non consente il float. img { float : right; margin: 0 0 15px 15px;
CLEAR Le proprietà clear consente di interrompere il flusso float Il valore di clear può essere: left: Interrompe il float a sinistra. right: Interrompe il float a destra. both: Interrompe il float sia sinistra che a destra. div.clear { float : none; clear: both;
margin border padding FLOAT height width margin border padding float:none height width margin border padding float:none height width
FLOAT margin border padding margin border padding margin border padding width height width height height width float:left float:left
FLOAT margin border padding margin border padding margin border padding width height width height width height margin border padding height width float:left float:none
CLEARFIX Spesso è un problema interrompere correttamente il flusso float se gli elementi non sono della stessa altezza. In rete si trova questo trucco. Assegnando la classe clearfix ad un elemento che contiene elementi float il flusso si chiude correttamente..clearfix::after { content: ""; clear: both; display: table;
margin border padding margin border padding margin border padding width height width height width height <div class="clearfix"> margin border padding float:left height width float:none;
FLEXBOX
ITRODUZIONE Il tipo di Layout Flexbox Layout (Flexible Box) mira a fornire un modo più efficiente di disporre, allineare e distribuire lo spazio tra gli oggetti in un contenitore, anche quando la loro dimensione è sconosciuta e/o dinamica (da cui la parola "flex"). L'idea principale alla base del layout flessibile è quella di dare al contenitore la possibilità di modificare la larghezza / altezza (e l'ordine) dei suoi oggetti per riempire al meglio lo spazio disponibile (con l'obiettivo di adattarsi a tutti i tipi di dispositivi e dimensioni dello schermo). Un contenitore flessibile espande gli oggetti per riempire lo spazio disponibile, o li riduce per evitare che escano dal contenitore.
TERMINOLOGIA
FLEX CONTAINER L'elemento principale in cui sono contenuti i flex-item. Un contenitore flex viene definito utilizzando i valori di flex o inline-flex della proprietà display.
FLEX ITEM Ciascun figlio di un contenitore flessibile diventa un flex-item. Se nel flex-container è presente del testo questo si comporta come se fosse inserito in un flex-item.
AXES Ogni flex-box segue due assi. L'asse principale è l'asse lungo il quale gli elementi flessibili susseguono. L'asse trasversale è l'asse perpendicolare all'asse principale. La proprietà flex-direction che stabilisce qual'è l'asse principale. justify-content definisce come gli elementi flessibili siano allineati disposti lungo l'asse principale. align-items definisce di default come i flex-items sono disposti lungo l'asse trasversale (cross-axixs). align-self definisce come un singolo flex-item sia allineato sull'asse trasversale, è sostituisce il valore definito da align-items.
TERMINOLOGIA main axis: L'asse principale di un contenitore flessibile è l'asse principale lungo il quale sono disposti gli elementi flessibili. Non è necessariamente orizzontale; dipende dalla proprietà flex-direction main-start main-end: Gli elementi flessibili sono posizionati all'interno del contenitore partendo da mainstart e andando a main-end. main size: la larghezza o l'altezza del flex-item, a seconda che la dimensione principale (determinata dalla proprietà flex-direction) sia orizzontale o verticale. cross axis: L'asse perpendicolare all'asse principale è chiamato cross axis. La sua direzione dipende dalla direzione dell'asse principale. cross-start cross-end: I flex-item sono collocati nel contenitore flex secondo la direzione stabilita dal mainaxis iniziando da cross-start fino a cross-end. cross size: la larghezza o l'altezza del flex-item, a seconda che la dimensione principale (determinata dalla proprietà flex-direction) sia orizzontale o verticale..
CONTENITORE E CONTENUTO flex-container flex-items Flexbox è un intero layout e coinvolge un set di proprietà. Alcune sono destinate a essere impostate sul contenitore (elemento padre, noto come flex-container), mentre le altre sono pensate per essere impostati sugli elementi contenuti (detti flex-items).
FLEX CONTAINER
FLEX CONTANER display Può definisce un contenitore come flex o inline-flex. Impostata questa proprietà il contenitore ei suoi diretti discendenti consitutiscono un layout di tipo flex. Se display è flex il contenitore si comporta nei riguardi di ciò che lo circonda nella pagina come elemento block, altrimento come elemento inline-block..container { display: flex; /* or inline-flex */
flex- direction Stabilisce l'asse principale, definendo in che modo i flex-item sono posizionati nel contenitore flex..container { flex-direction: row row-reverse column column-reverse;
flex- direction row (predefinito): da sinistra a destra in ltr; da destra a sinistra in rtl row-reverse: da destra a sinistra in ltr; da sinistra a destra in rtl column: dall'alto verso il basso column-reverse : dal basso verso l'alto
flex- wrap Per default, i flex-item cercheranno di adattarsi su una sola riga. con questa proprietà posso modificarne il comportamento..container { flex-wrap: nowrap wrap wrap-reverse;
flex- wrap nowrap (predefinito): tutti gli elementi flessibili si troveranno su una riga wrap: gli oggetti flessibili si dividono su più linee, dall'alto verso il basso. wrap-reverse: gli elementi flessibili si dividino su più righe dal basso verso l'alto...container { flex-wrap: nowrap wrap wrap-reverse;
flex- flow Consente di impostare insieme le proprietà flex-direction e flex-wrap. Il default è: row nowrap.container { flex-flow: row wrap;
flex- wrap nowrap (predefinito): tutti gli elementi flessibili si troveranno su una riga wrap: gli oggetti flessibili si dividono su più linee, dall'alto verso il basso. wrap-reverse: gli elementi flessibili si dividino su più righe dal basso verso l'alto...container { flex-wrap: nowrap wrap wrap-reverse;
justify- content Definisce l'allineamento lungo l'asse principale. Serve a distribuire lo spazio libero extra rimasto quando tutti gli elementi flessibili su una riga hanno raggiunto la loro dimensione massima..container { justify-content: flex-start flex-end center space-between space-around space-evenly;
justify- content flex-start (impostazione predefinita): i flex-item vengono affiancati l'uno all'altro a partire da main start. flex-end: i flex-item vengono affiancati l'uno all'altro a partire da main end. center: gli oggetti sono centrati lungo la linea space-between: gli oggetti sono distribuiti uniformemente sulla riga; il primo elemento è su main start, l'ultimo elemento su main end space-around: gli oggetti sono equamente distribuiti nella linea con lo stesso spazio attorno a loro. Si noti che visivamente gli spazi non sono uguali, poiché tutti gli elementi hanno lo stesso spazio su entrambi i lati. Il primo elemento avrà un'unità di spazio contro il bordo del contenitore, ma due unità di spazio tra l'elemento successivo perché l'elemento successivo ha la propria spaziatura che si applica. space-evenly: gli elementi sono distribuiti in modo che la spaziatura tra due elementi (e lo spazio sui bordi) sia uguale. flex-start flex-end center space-between space-around space-evenly
align- items Definisce il comportamento predefinito per la disposizione degli elementi flessibili lungo il cross axis. È la versione di justify-content per l'asse trasversale (perpendicolare all'asse principale). Puoi modificare il comportamento di un singolo flex-item utilizzando align-self..container { align-items: flex-start flex-end center baseline stretch;
align- items nota bene: la figura e la descrizione per semplicità descivono l'allineamento con flex-direction = row. Quando si parliamo di margine superiore e inferiore in realtà parliamo di cross-start e cross-end che dipendono dal senso dell'asse principale. flex-start: il margine superiore dei flex-item è collocato su cross-start flex-start center flex-end stretch flex-end: il margine inferiore dei flex-item è collocato su cross-end center: gli oggetti sono centrati sull'asse trasversale baseline: gli elementi sono allineati prendendo come riferimento la base del testo. stretch (predefinito): i flex-item riempiono l'intero contenitore. baseline text text text text text text text text
align- content Allinea le righe di items di un contenitore flessibile quando lo spazio sull'asse trasversale non è completamente occupato. Funziona in modo simile a come il justify-content allinea i singoli elementi sull'asse principale..container { align-content: flex-start flex-end center space-between space-around stretch;
FLEX ITEM
order Per impostazione predefinita, i flex-item sono disposti nell'ordine in cui appaiono nella pagina. La proprietà order può modificare questo comportamento di default. 1 1 1 2 3-1 1 2 5 2 2 99.item { order: <integer>; /* default is 0 */
flex- grow Definisce la capacità di un flex-item di crescere dinamicamente. Accetta un valore senza unità di misura che serve come riferimento proporzionale. Se tutti gli elementi hanno una flex-grow impostata su 1, aumentando lo spazio disponibile tutti i flex item cresceranno nella stesso modo. Se uno degli elementi ha un valore di 2, occuperà il doppio di spazio. 1 1 1 1 2 1.item { flex-grow: <number>; /* default 0 */
flex- shrink Definisce la capacità di un flex-item di adattarsi a dimensioni più piccole dinamicamente. Accetta un valore senza unità di misura che serve come riferimento proporzionale. Se tutti gli elementi hanno una flex-shrink impostata su 1, diminuendo lo spazio disponibile tutti i flex item diminueranno nella stesso modo. Se uno degli elementi ha un valore di 2, uccuperà metà dello spazio degli altri..item { flex-shrink: <number>; /* default 0 */
flex- basis Definisce la dimensione base di un flex item prima che lo spazio sia distribuito agli altri elementi. Può essere una misura, una percentuale o la parola riservata auto..item { flex-basis: <lenght> auto; /* default auto */
flex Consente di impostare insieme flex-grow, flex-shrink e flex-basis. Non è semplicemente una scorciatoia. Flex è una proprietà intelligente che elabora i valori delle tre proprietà evitando che sia in contraddizione..item { flex: none <flex-grow> [<flex-shrink> <flex-basis>];
align- self Consente di sostituire l'allineamento predefinito (o quello specificato da align-items per il contenitore) per singoli flex item. flex-start flex-end.item { align-self: auto flex-start flex-end center baseline stretch;