HTML / CSS | Appunti di papà Goriot

HTML

Container =>
- Generic Container
  - <div> (block element)
  - <span> (inline element)
- Semantic Container
  - <article>
  - <figure>
  - <mark> (per sottolineare testo)
  - <time>
  - Semantic structure tag
    - <main> //per contenere l’elemento principale della pagina
    - <section> //per raggruppare elementi correlati
    - <header> //per contenere dati introduttivi a supporto di <section>/<article>…
    - <footer> //per contenere informazioni a supporto di <section>/<article.>.
    - <aside> //per contenere elementi non legati al principale
    - ```
    <header>
       <nav>
          <ul>
    <main>
       <section>
         <h2>Procucts</h2>
            <article>
            <article>
       <section>
         <h2>Testimonials</h2>
            <article>
            <article>
    <aside>
    <footer>
       <nav>
          <ul>
```

<video src="/videos/ocean.mp4" 
       controls //mostra i controlli per interagire con il video
       autoplay //il video parte automaticamente al caricamento della pagina
       loop //il video continua a luppare
>Your browser doesn't support video</video>

<audio src="/videos/my_song.mp3" 
       controls //mostra i controlli per interagire con il video
       autoplay //il video parte automaticamente al caricamento della pagina
       loop //il video continua a luppare
>Your browser doesn't support audio</video>

<img>
- ```
<a href="/about.html" download></a>
```

<dl> (Description List)

<dl> //description list
    <dt>HTML</dt>  //description term
    <dd>Hypertext markup</dd> //description detail
    <dt>CSS</dt>
    <dd>Cascading style sheet</dd>
</dl>

Tag deprecati =>
- <i>
- <b>
Html entities =>
-   (non blank space) => intrapposto tra due parole, evita che le stesse siano divise andando a capo.

Torna in cima alla pagina =>
- <a href=”#””>Jump to top</a>

CSS

Selettori base/diretti =>

Tipo
- ```
<p>Lorem Lorem Lorem</p>

p { .. }
```

<p id='paragrafo'>Lorem Lorem Lorem</p>

p#paragrafo { .. }

Classe

<p classe='para-verde'>Lorem Lorem Lorem</p>

p.para-verde { .. }

Attributo [meno utilizzato]

<a href="https://google.com" target="_blank">Apri il link</a>

a[target="_blank"] { .. }

//seleziono elementi <a> con l'attributo href che contiene "google"
a[href*="google"] { .. }

//seleziono elementi <a> con l'attributo href che comincia con "google"
a[href^="google"] { .. }

//seleziono elementi <a> con l'attributo href che termina con ".it"
a[href$=".it"] { .. }

Selettori relazionali [Di solito più lenti, per come funziona il rendering nel browser] =>

Figli (>)

<section id="products">
   <p>Primo paragrafo</p>
   <article>
      <p>Secondo paragrafo</p>
   </article>
   <p>Terzo paragrafo</p>
</section>

//seleziono i paragrafi figli diretti (il primo e il terzo) 
//della sezione di classe products
#products > p { .. }

Primo fratello (+)

<section id="products">
   <p>Primo paragrafo</p>
</section>
<p>Secondo paragrafo</p>
<p>Terzo paragrafo</p>
<p>Quarto paragrafo</p>

//seleziono il paragrafo fratello diretto (il secondo paragrafo) 
//della sezione di classe products
#products + p { .. }

Fratelli (~)

<section id="products">
   <p>Primo paragrafo</p>
</section>
<p>Secondo paragrafo</p>
<p>Terzo paragrafo</p>
<p>Quarto paragrafo</p>

//seleziono tutti i paragrafo che sono fratelli (siblings) della sezione di
//classe products (Secondo, Terzo e Quarto paragrafo)
#products ~ p { .. }

Selettori pseudo-class => Per selezionare gli elementi in uno stato/posizione particolare

:first-child / :last-child [è fragile, troppo sensibile a possibili cambiamento al DOM]

<article>
  <h2>Primo titolo</h2>
  <p>Primo paragrafo</p>
  <p>Secondo paragrafo</p>
</article>

//seleziono il primo (o ultimo) elemento figlio di <article>
//(Primo titolo)
article :first-child oppure article :last-child{ .. }

:first-of-type / :last-of-type

<article>
<h2>Primo titolo</h2>
<p>Primo paragrafo</p>
<p>Secondo paragrafo</p>
</article>

//seleziono il primo (o l'ultimo) elemento di ogni tipo figlio di <article>
//(Primo titolo e Primo paragrafo)
article :first-of-type oppure article :last-of-type { .. }

//seleziono il primo elemento (o l'ultimo) di tipo <p> figlio di <article> 
article p:first-of-type oppure article p:last-of-type { .. }

:nth-child

//seleziono gli elementi dispari di una lista non ordinata (<ul>)
ul li:nth-child(odd)

//seleziono gli elementi pari di una lista non ordinata (<ul>)
ul li:nth-child(even)

:visited , :link , :hover , :focus

//seleziono gli hyperlink che sono stati visitati
a:visited

//seleziono tutti gli hyperlink presenti nella pagina
a:link

//seleziono tutti gli hyperlink puntati dal mouse dell'utente
a:hover

Selettori pseudo-elements => Per selezionare una parte di un elemento

::first-letter , :first-line, ::selection

<p>
  Lorem Lorem ..
  Lorem Ipse Dixit Lorem ..
</p>

//seleziono la prima lettere (L) contenuta da tutti i <p> presenti nella pagina
p::first-letter { .. }

//seleziono la prima linea contenuta da tutti i <p> presenti nella pagina
p::first-line { .. }

//seleziono le parole che l'utente seleziona in un elemento <p>
p::selection { .. }

::before, ::after

//inserisco "..." prima (o dopo) ogni <p> presente nella pagina
p::before  oppure p::after {
   content: '...';
}

Priorità di selezione =>
- Specificità => Nel caso più stili siano applicati allo stesso elemento, il motore di rendering applicherà lo stile in base secificità dei differenti stili applicati all’elemento. L’ordine di priorità è il seguente:
  - ```
  //regola di specificità
  ID > Classi & Attributi > Type
```
- Posizione nel file CSS => Nel caso di specificità equivalente, verrà applicata l’ultima regola definita nel CSS.
- Sovrascrivere regole di priorità
  - !important
    - ```
    //la parola chiave !important impone l'utilizzo di questo stile rispetto ad
    //altri più specifici eventualmente definiti sullo stesso elemento.
    h2 {
      color:red !important;
    }
```
- Selector specificity(0,0,0) => 2Ogni elemento del nostro file CSS ha una selettore di specificità che prende in considerazione in prima posizione l’ID, poi classi e attributi infine i tipi. Gli elementi ID pesano per 100, Gli elementi classi pesano per 10 e i tipo per 1. Alla fine applicando questa regola ogni elemento ha un peso.
  - ```
  <article class="featured">
     <h1 id="products" class="highlight">Heading<h1>
  <article>
  
  //Selector specificity(1,0,1) => peso 101
  h1#products {
     color:black;
  } 
  
  //Selector specificity(1,1,0) => peso 110
  //Questo è la regole di stile che sarà applicata al testo Heading
  .featured #products {
     color:brown;
  }
```

Ereditarietà => Ci sono alcune proprietà che elementi figli ereditano dagli stili definiti sugli elementi padri.

Initial => Annullare ereditarietà

//la parola "dixit" avrà il colore di default, e non red
//perchè nel file CSS abbiamo sovrascritto quando definito per <p> con un'altra
//regola per <strong> e usato la parola chiave initial
<p>Lorem ipse <strong>dixit</strong> ad hoc</p>
p {
   color: red;
}

strong {
  color: initial;
}

Inherit => Forzare ereditarietà

//a differenza della proprità color, la proprietà border normalmente
//non è ereditata dai figli
//per forzare l'ereditarietà di tale proprietà è sufficiente definire uno stile
//per l'elemento figlio e usare la parola chiave sulla proprietà che si vuol //fare ereditare.
//La parole "dixit" avrà un bordo. Mentre normalmente non l'avrebbe
<p>Lorem ipse <strong>dixit</strong> ad hoc</p>

p {
   border: 1px solid red;
}

strong {
  color: inherit;
}

Color =>

Notazione Esadecimale

Notazione RGB (Read, Green, Blue)

color: rgb(80, 2, 4);
color: rgba(80, 2, 4, 0.5); //con opacità alpha

Notazione HSL (Hue=tonalità, Saturation, Brightness)

color: hsl(80, 20%, 40%);
color: hsl(80, 20%, 40%, 0.5); //con opacità alpha

Gradiente lineare

background: linear-gradient(<color1>, <color2>);
background: linear-gradient(<color1>, <color2> 30%);
background: linear-gradient(to bottom right, <color1>, <color2>);
background: linear-gradient(45deg, <color1>, <color2>);
background: linear-gradient(<color1>, <color2>, <color3>);

Gradiente radiale

background: radial-gradient(<color1>, <color2>);
background: radial-gradient(circle at top left, <color1>, <color2>);

Shadows =>

box-shadow: <distanza-orizzontale-dall'oggetto>, 
            <distanza-verticale-dall'oggetto>,
            [<sfuocmaneto-dell'ombra>]
            [<colore_dell'ombra>]
//ombra grigia verso destra e sotto
box-shadow: 10px 10px grey
//ombra grigia verso sinitra e sopra
box-shadow: -10px -10px grey
//ombra grigia sfuocata in tutto il perimetro dell'oggetto
//è possibile sfuocare più o meno, aumentando o diminuendo 
//il valore in pixel del terzo elemento
box-shadow: 0 0 30px grey

text-shadow: <distanza-orizzontale-dal-testo>, 
             <distanza-verticale-dal-testo>,
             [<sfuocmaneto-dell'ombra>]
             [<colore_dell'ombra>]
//invece di specificare un colore, uso la notazione rgba
//per passare un nero opaco al 20%. Rende l'ombra indipendente
//dal colore di sfondo del contenitore del nostro testo
text-shadow: 3px 3px 5px rgba(0,0,0,0.2);

Box model =>
- Ogni elemento del DOM è contenuto in BOX (dipendente dall’elemento padre). Tale BOX ha un margin che lo distanzia degli altri elementi del DOM. Ha eventualmente un BORDER. Dopodiché ha un PADDING che distanzia il contenuto vero e propria del bordo. Infine ci sarà appunto il contenuto.
  - ```
  Elemento padre => Margin => Border => Padding => Content dell'elemento
```
- Margin => Servono per separare gli elementi del DOM.
- Margin collapse => Avviene quando 2 elementi del DOM sono verticalmente adiacenti e i margini dei elementi collidono per creare un margine complessivo.
- Padding => Serve per allontanare il contenuto del bordo del contenitore.

Dimensioni =>

Elementi block =>

Larghezza => di default un elemento di tipo block prende il 100% della larghezza disponibile.

Altezza => di default un elemento di tipo block prende l'altezza che si adatta al contenuto.

Box-sizing: content-box =>

//Di default quando si indicano la larghezza e altezza di un elemento, tali
//valori si riferiscono al contenuto. Qundi per conoscere la vera dimensione
//dell'elemento bisognerà aggiungere il padding e i border
DIV {
  widht:200px;
  heigh:200px;
  padding:5px;
  border: 10px solid red;
  box-sizing: content-box;
}

Dimensioni CSS = Dimensioni del contenuto
Dimensione elemento = Dimensioni CSS + padding + border

Box-sizing: border-box =>

//E' possibile sovrascrivere il comportamento di default e decidere che le
//dimensioni indicate nel CSS per tale elemento sono relative al bordo
//dell'elemento e non al contenuto. IN tale caso per sapere l dimensioni
//del contenitore tale elemento è necessario sottrarre alle dimensioni indicate 
DIV {
   widht:200px;
   heigh:200px;
   padding:5px;
   border: 10px solid red;
   box-sizing: border-box;
}

Dimensione CSS = Dimensione elemento
Dimensione contenitore = Dimensioni CSS - padding - border

Applico tale impostazione a tutti gli elementi della pagina usando il selettore universale (*)

*, *::berofe, *::after {  
   box-sizing: border-box;
}

Display:inline-block =>

Di default non è possibile applicare a elementi inline delle dimensioni perchè il
loro comportamento naturale è quello di essere posizionati tra l'elemento che li
predece e quello che li segue senza la nozione di dimensione propria. Per poter
applicare ad un elemento inline delle dimensioni è necessario impostare la proprietà
display:inline-block
 
SPAN {
   width:300px;
   height:200px;
   display: inline-block;
}

Percentuale rispetto al Viewport (vw, vh) => L’oggetto si adatta alle dimensioni dello schermo che il nostro utente sta usando:

//vw, vh
E' possibile indicare le dimensioni di un elemento del DOM in percentuale del
viewport orrizontale e vertiale. Tale tecnica permette di adattare il layout alla
dimensione dello schermo.
.box {
   width: 50vw;  //larghezza 50% dello schermo
   height: 100vh; //altezza 100% dello schermo
}

Percentuale rispetto al font-size (em, rem) => L’oggetto si adatta alla modifica delle impostazioni di visualizzazione del font che l’utente fa nel suo browser:

//em
E' possibile indicare le dimensioni di un elemento del DOM in percentuale del font
dell'elemento stesso. Se l'elemento non ha un'impostazione esplicita per il font
-size eredita quello dei padri. Se non si imposta nessun font-size si usa quello di 
default (16px)

.box {
    // 15 volte la dimensione del font-size definito nel box, oppure nei padri oppure 
    // 16px se nessun font-size è definito  
    font-size: 12px;
    width: 15em; //larghezza = 15*12px = 180px
}

//rem
E' possibile indicare le dimensioni di un elemento del DOM in percentuale del font
size di default per una pagina HTML = 16px.
E' possibile modificare questo valore di riferimento esplicitamente nella pagina

.html {
   font-size: 62.5%;   // 62.5% di 16px = 10px
}

.box {
    // 15 volte 10px = 150px oppure 15 volte 16px se non si definisce un font-size 
    width: 15rem; // larghezza = 15 * 62.5% di 16px = 15 * 10px = 150px
}

Position => . By setting the position to fixed, we can position the element relative to the viewport.
- static [default] => L’elemento non ha alcuna posizione esplicita e la sua posizione dipende dal suo posizionamento nel DOM.
- fixed => L’elemento si posiziona in relazione al viewport.
- relative =>
  - Settando la posizione a relative, è possibile posizionare un elemento relativamente alla sua normale posizione.
  - Un tale posizionamento non avrà alcun effetto sugli altri elementi del DOM.
- absolute =>
  - Settando la posizione a absolute, è possibile posizionare un elemento relativamente alla posizione dell’elemento padre. Quest’ultimo deve essere un elemento con posizionamento relative.
  - Un tale posizionamento avrà effetto sugli altri elementi del DOM. Dal punto di vista dell’oggetto padre, un elemento con posizionamento absolute non esiste. Quindi gli altri eventuali elementi si riposizionano come se l’oggetto non esistesse.
Float =>
- Parent collapsing => L’elemento padre non riconosce più gli elementi figli a cui è stato applicato il float. E’ quindi necessario fare il clear
- Clear => Ogni volta che si usa float è opportuno fare aggiungere al padre una classe che fa il clear aggiungendo un elemento in ultima posizione:
  - ```
  .clearfix:after {
     content: '';
     display: block;
     clear: both;
  }
```

Overflow =>

Quando indico esplicitamente le dimensioni di un oggetto del DOM è possibile che il suo
contenuto ecceda tale dimensione e avvenga il fenomeno dell'overflow è possibile allora
gestire il comportamento modificando la proprietà overflow

overflow: visible (il contenuto che eccede il contenitore viene visualizzato comunque)
overflow: hidden (il contenuto che eccede il contenitore non viene visualizzato)
overflow: scroll (le scrollbar rendono visibile anche il contenuto che eccede le dimensioni del contenitore)
overflow: auto (come scroll ma solo se il contenuto eccede il contenitore)
overflow: <orizontal> <vertical> (è possibile indicare come gestire l'overflow
distintamente per le due dimensioni orizzontale e verticale)

Media queries => E’ possibile applicare delle versioni specifiche delle classi che abbiamo definito nel css in funzione di alcuni breakpoint così da adattare il nostro layout a più schermi o al cambiamento di layout verticale/orizzontale

@media screen and (min-width: 600px) {
  .container {
      flex-direction: row;
  }
}

@media screen and (min-width: 600px) and (max-width: 900px) {
  .container {
     flex-direction: row;
  }
}

@media print {
   body {
      font-size: 12pt;
   }

   .box {
      padding: 0.5cm;
   }

}

FlexBox => Allineamento orizzontalmente o verticalmente (senza usare float e gestire il clear e il parent collapsing)
- display: flex => Per contenere un flexbox è necessario impostare un container con display:flex
  - ```
  .container {
     display: flex;
  }
```
- flex-direction =>
  - L’asse main o cross dipendono dalla direzione che è stata scelta per i nostro container di tipo flex.
    - ```
    flex-direction: row | row-reverse | column | column-reverse ;
```
- justify-content => Gestisce l’allineamento lungo l’asse main.
  - ```
  justify-content: flex-start (posiziona all'inizio dell'asse) [default] | 
                   center | 
                   space-envenly (gli elementi sono spaziati equilibratamente) |
                   space-between (il primo elemento andrà tutto a destra, il 
                                  secondo tutto a sinistra, gli altri spaziati
                                 regolarmente) |
                   space-aroung |
                   flex-end (alla fine dell'asse);
```
- align-items => Gestisce l’allinamento lungo l’asse cross.
  - ```
  align-items: flex-start (posiziona all'inizio dell'asse) [default] |
               center
               flex-end (posiziona alla fine dell'asse)
```
- align-self =>
  - Imposta l’allineamento di un elemento del flexbox.
  - E’ applicato al singolo alimento.
    - ```
    align-self: flex-start | flex-end;
```
- flex-basis =>
  - Imposta la dimensione iniziale dell’elemento.
  - Nel caso di direzione row setta la larghezza.
  - Nel caso di direzione column setta l’altezza.
  - Può essere applicato al contenitore o al singolo elemento.
    - ```
    flex-basis: auto [default] (non setta alcuna particolare dimensione)
```
- flex-grow =>
  - Serve per decidere se uno o più elementi devono crescere più degli altri nel caso di resizing in positivo della pagina o di visualizzazione in uno schermo più grande.
  - Imposta il fattore di crescita. Dice di quanto gli elementi o il singolo elemento possono crescere nel caso ci sia spazio per riempire tutto il contenitore.
  - Ad ogni elemento può essere dato un peso diverso. La visualizzazione di ogni singolo elemento dipenderà dal rapporto tra il proprio peso e la somma totale dei pesi di tutti gli elementi contenuti nel flexbox.
  - Può essere applicato al contenitore o al singolo elemento.
    - ```
    flex-grow: <grow_factor> [0..n, 0:default]
```
- flex-shrink =>
  - E’ l’opposto di flex-grow.
  - Serve per decidere se uno o più elementi devono decrescere più degli altri nel caso di resizing in negativo della pagina o di visualizzazione in uno schermo più piccolo.
  - Imposta il fattore di decrescita. Dice di quanto gli elementi o il singolo elemento possono decrescere nel caso non ci sia spazio nel contenitore.
  - Ad ogni elemento può essere dato un peso diverso. La visualizzazione di ogni singolo elemento dipenderà dal rapporto tra il proprio peso e la somma totale dei pesi di tutti gli elementi contenuti nel flexbox.
  - Può essere applicato al contenitore o al singolo elemento.
    - ```
    flex-shrink: <shrink_factor> [0..n, 0:default]
```
- flex => Imposta le 3 proprietà precedenti contemporaneamente.
  - ```
  flex: <flew-grow> <flex-shrink> <flex-basis>
```
- Gestire più righe =>
  - flex-wrap => Imposta la regola nel caso il contenuto ecceda la dimensione del contenitore
    - ```
    flex-wrap: nowrap (Ridimensiona il contenuto affinché resti nel contenitore) |
               wrap (Il contenuto mantiene le dimensione impostate e eccede il
                     contenitore. Si possono creare più righe)
```
- align-content => Gestisce il posizionamento nel caso di più righe
  - ```
  align-content: center;
```

Grid => Allineamento a griglia (layout 2D)

Utile per photogallery
Layout delle pagine web
display: grid => Per contenere un grid è necessario impostare un container con display:grid
- ```
.container {
   display: grid;
}
```

grid-template-rows => Definisco il numero e le dimensioni delle righe dalla griglia

grid-template-rows: <row_1_size> .. <row_N_size> |
                    100px, 100px | 
                    repeat(2, 100px) |
                    40% 60% (percentuale della dimensione del padre) |
                    40fr 60fr (percentuale dello spazio a disposizione)
                    100px auto ;

grid-template-columns => Definisco il numero e le dimensioni delle colonne della griglia

grid-template-columns: <column_1_size> .. <column_N_size> |
                       150px, 150px, 150px | 
                       repeat(3, 150px) |
                       20% 20% 60%;  
                       20% 20% 60% (percentuale della dimensione del padre) |
                       20fr 20fr 60fr (percentuale dello spazio a disposizione)

grid-template => Definisco righe e colonne contemporaneamente

grid-template <grid-template-rows> / <grid-template-columns>;
              repeat(2, 100px) / repeat(3, 150px);

justify-content => Gestisco allineamento orizzontale della griglia rispetto al suo contenitore.
align-content => Gestisco allineamento verticale della griglia rispetto al suo contenitore.

justify-items => Gestisco allineamento degli elementi lungo l’asse orizzontale.

justity-items: stretch (l'elemento si streccia orizzontalmente in tutto lo spazio
                        possibile [default] |

align-items => Gestisco allineamento degli elementi lungo l’asse verticale.

align-items: stretch (l'elemento si streccia verticalmente in tutto lo spazio
                      possibile [default] |

row-gap => imposto una distanza tra le righe.
column-gap => imposto una distanza tra le colonne.
gap => imposto il gap per le righe e le colonne contemporaneamente.
- ```
gap <row_gap> <column_gap>
```

Gestire gli elementi =>

grid-row

grid-row <start_row> / <end_row>
grid-row <start_row> / span <number_of_rows>

grid-column

grid-column <start_column> / <end_column>
            <start_column> / span <number_of_columns>

grid-area => permette di definire grid-row e grid-column contemporaneamente.

//definisco la posizione indicando i numeri delle celle
grid-area <start_row> / <start_column> / <end_row> / <end_column>;
//definisco la posizione indicando il nome dell'area 
//devo aver definito la proprietà grid-template-areas
grid-area "header";

grid-template-areas => è possibile dare un nome ad ogni cella della griglia

//grid 3*2
//Definisco 2 aree per la prima riga: colonna1 = "header", colonna2="header"
//Definisco 2 aree per la seconda riga: colonna1="sidebar", colonna2="main"
//Definisco 2 aree per la terza riga: colonna1="footer", colonna2="footer"
grid-template-areas "header  header"  //celle (1:1 - 1:2)
                    "sidebar main"    //celle (2:1 - 2:2)
                    "footer  footer"; //celle (3:1 - 3:2)

//E' possibile definire celle vuote con il punto (.)
grid-template-areas "header header"   //celle (1:1 - 1:2)
                    "sidebar main"    //celle (2:1 - 2:2)
                    ".       footer"; //celle (vuota - 3:2)

Font =>

Web safe font => Sono font normalmente disponibili sul quasi tutti i computer

Embedded font =>

Extensioni
- .ttf
- .woff (formato compresso adatto al web)
- .woff 2.0 (formato compresso al web)
Importare il file del font con estensione .woff o woff2
Se necessario convertire i file .ttf in .woff tramite il sito https://www.fontsquirrel.com/tools/webfont-generator

Inserire le dichiarazioni dei nuovi font in cima al nostro file css e modificarlo indicando i giusti path e scegliendo i nomi e le impostazioni desiderate.

//da inserire in cima al nostro file css
@font-face {
  font-family: 'opensans';
  src: url('fonts/open-sans/opensans-bold-webfont.woff2') format('woff2'),
       url('fonts/open-sans/opensans-bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  //decide come gestire la visualizzazione del testo in attesa che i file 
  //del nostro font customizzato siano caricati sul browser dell'utente
  //No flash of unstyled text (FOUT)
  font-display: optional | swap | block; 
}

Font-services per scaricare Embedded Font =>

Google Web Fonts Free (https://fonts.google.com)

Usando questo servizio non devo aggiungere le sezioni @font-face al mio css ma i seguenti link nella sezione <head> prima di caricare i css

<head>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2
         family=Roboto:wght@300&display=swap" rel="stylesheet">
   //I 3 link sono da inserire sopra il link ai miei css
   <link rel="stylesheet" ...... >
</head>

Fonts.com
Adobe fonts (https://fonts.adobe.com)

System Font Stack (vs Web safe font) => E’ possibile usare il font di default del sistema operativo in cui il browser del nostro utente gira.
- ```
font-family: -apple-system
```

Font-size =>

Best practice è usare rem

//Tra tutte le unità di misura relative (%, vw, vh, em, rem)
//la migliore per il font-size è rem
// 1,5 x font size dell'elemento root (HTML) = 1,5 * 16 = 24px 
font-size: 1.5rem;

Font-size dell’ elemento root => Se non esplicitamente impostato, allora il size dell’elemento root sarà in relazione alle impostazioni che l’utente ha nel suo browser. Per Crhome di norma è medium (16px).

//E' possibile impostare che il font-size root sia il 62.5 % del valore di
//default che è 16px e cioè 10px. In questo modo i calcoli saranno più facili
html {
   // 62,5 % dui 16px = 10px
   font-size:62.5 %

    oppure è possibile lasciare l'impostazione di default
    // 100 % dui 16px = 16px
    font-size:100%
}
// 1,5 x font size dell'elemento root impostato al 62,5% => 1,5 * 10 = 15px 
font-size: 1.5rem; //15px

oppure

// 1,5 x font size dell'elemento root impostato al 100% => 1,5 * 10 = 24px 
font-size: 1.5rem; //24px

Per aiutare la scelta di quale font-size usare è possibile fare riferimento al sito
- https://type-scale.com

Esempio di impostazione dei font nel nostro css

//<my_style>.css
html {
   font-size:62.5%;
}

body {
   line-height:1.5;
} 

h1, h2, h3, h4, h5, h6 {
    font-family: <scegliere_i_font_family_desiderati>;
}

h1 {
   font-size: 4.6em;
   margin: 3rem 0 1rem; //applico la law of proximity
}

h2 {
font-size: 3.8em;
}

h3 {
font-size: 2.4em;
}

...
...

Vertical spacing =>

margin:

//nel settare i margini implemento la legge di prossimità
//un titolo deve essere vicino al testo che lo dettaglia e lontano da
//altri testi o titoli con non lo riguardano
h1 {
   margin: 3rem 0 1rem; //applico la law of proximity
}

line-height:

//IMPORTANTE
//se non si indica l'unità di misura, il browser usa la misura impostata per il //font-size, così facendo un eventuale cambiamento di tale misura non rovina il 
//layout dei testi nella nostra pagina web
body {
  line-height:1.5; //non uso nessuna unità di misura
}

Horizontal spacing =>

letter-spacing (controlla lo spazio tra le lettere in una parola)
- ```
body {
   letter-spacing: 1px; //!!usare px e non rem
}
```
word-spacing

width

//IMPORTANTE//
//Per rispettare la regola che vuole non più di 50-70 caratteri su una linea di
//testo posso usare l'unità ch ccioè usare la lettera zero
width:50ch;  //imposto la larghezza a 50 volte la lettera 0

Formatting-text =>

text-align => controlla l’allineamento orizzontale del testo.

p {
   width:50ch;
   text-align: left [default] | right | center | justify; //il migliore è <left>
}

text-indent => controlla l’indentazione della prima linea di un testo.

//Indento la prima linea del secondo paragrafo che incontro
p + p {
   text-indent: 1rem;
}

text-decoration

text-decoration: line-through | underline;

text-transform

text-transform: lowercase | uppercase | capitalize;

white-space

//visualizzo solo i primi 50 caratteri del mio paragrafo seguiti da ..
p {
   //imposto la larghezza di <p> a 50 volte la lettera 0
   width: 50ch;
   //tutto il testo in <p> è visualizzato su una sola linea
   white-space: nowrap; 
   //nascondo il testo che eccede la lunghezza impostata per <p>   
   overflow: hidden;
   //aggiungo .. alla fine del testo
   text-overflow: ellipsis; 
   [line-clamp: 3]
}

column-*

//divido il mio paragrafo in 2 colonne e decido lo spazio bianco tra le due
p {
   width: 50ch;
   //decido di dividere in 2 colonne il mio paragrafo
   column-count: 2;
   //decido quanto spazio bianco c'è tra una colonna e l'altra del paragrafo
   column-gap: 1rem;
   //aggiungo una linea tra le 2 colonne in cui ho diviso il paragrafo
   column-rule: 3px dotted grey;
}

direction
- ```
direction: ltr | rtl;
```

Image =>
- Immagini raster (fatte di pixel) => foto
  - JPG (no trasparency e animation), 16milioni di colori
  - GIF, 256 colori
  - PNG, 16 milioni di colori
  - WebP, 16 milioni di colori
- Immagini vettoriali (fatte impostando vettori matematici) => loghi, grafiche
  - SVG (scaleble vector graphic)
- Immagini di sfondo
  - ```
  body {
     background: url(/images/bg-sanfrancisco.jpg);
     background-repeat: no-repeat;
     background-size: cover; /*100% 100% */
     background-attachment: fixed;
     height: 100vh;
  }
```

- Css sprites =>
  - E’ possibile raggruppare più immagini facendo in modo che il browser le scarichi tutte insieme senza dover inviare al server richieste separate.
  - Per falro usare degli “Sprites generator tool” in Internet o usare dei command tool così da creare un solo file con tutte le immagini che si vogliono combinare. Usare poi css per visualizzare ogni singola immagine:
    - ```
    .bg-immagine_1 {
       background:url(<combined_imaga_path>) 0px -0px;
       width: <immagine_1_larghezza>;
       height: <immagine_2_altezza>;
       display:inline-block; //usaremo <span>
    }
    
    .bg-immagine_2 {
       background:url(<combined_imaga_path>) <immagine_1_larghezza> -0px;
       width: <immagine_2_larghezza>;
       height: <immagine_2_altezza>;
       display:inline-block; //usaremo <span>
    }
    
    //Nel DOM al posto di usare <img> uso <span> la giusta classe
    //che si riferisce alla parte di immagine che corrisponde all'immagine
    //che voglio visualizzare in quello <span>
    <body>
      <span class="bg_immagine_1"></span>
      <span class="bg_immagine_2"></span>
    </body>
```
- Immagini Embedded =>
  - E’ possibile inserire la mia immagine direttamente nell’elemento <img> senza fornire un path ma direttamente i dati binari che la formano tramite DataURL
  - In questo caso il browser non invia una richiesta al server per scaricare l’immagine ma l’immagine è presente nella pagine html caricata.
  - Uso Data URI generator per passare dal file al DataUrl
  - Vantaggi =>
    - Si ridice il numero delle richieste http al server
  - Problemi =>
    - La dimensione delle immagini Data Url sono normalmente più grandi del formato originale
    - Maggiore complessita
    - Lentezza nel mobile
- Immagini Clipped
  - E’ possibile tramite dei generatori (Css clip generator) clippare un’immagine e darle la forma che si desidere (Freccia, Poligono). Questi generatori creano il css da usare per ottenere tale risultato
    - ```
    .img_clipped {
       clip-path: polygon (0% 20%, 60% 20%....);
    }
```
- Applicare filtri => Cercando in goolge ‘Css filter functions’ si trova una lista dei possibili filtri che si posso applicare ad una immagine.
  - ```
  .img_filtered:hover {
     filter:grayscale(70%) blur(3px) sepia(60%);
  }
```
- Monitor High-density
  - Risoluzione fisica => E’ la risoluzione nativa del nostro schermo
  - Risoluzione logica
  - DRP (Device Pixel Ratio) => E’ il rapporto tra la risoluzione fisica e logica dello schermo
    - ```
    Risoluzione fisica => 960x640
    Risoluzione logica => 480x320
    DRP=2
```
- High-density =>
  - DPR > 1
  - Sono schermi dove ci sono più pixel fisici che logici
- Per gestire diverse densità è possibile fornire diverse versioni dell’immagine. L’immagine deve avere una classe con una dimensione impostata (fissa).
  - ```
  <img
      src="images/meal.jpg" 
      alt=""
      class="meal"
      srcset="images/meal.jpg 1x,
              images/meal@2.jpg 2x,
              images/meal@3.jpg 3x
  />;
  
  .meal {
     width:400px;
  }
```
- Adattare l’immagine allo schermo =>
  - Usare siti per generare differenti versioni di un’immagine secondo dati punti di rottura e rendere tale immagine responsiva.
  - Attributo img.srcset => Dare al browser la possibilità di scegliere quale immagine scaricare (delle 3 o 4 fornite) in base alla loro larghezza
  - Attributo img.sizes => Indicare quale porzione dello schermo occupare in rapporto alla larghezza disponibile dello schermo
    - ```
    <img
       src="images/meal.jpg" 
       alt=""
       class="meal"
       srcset="images/meal.jpg 400w,
               images/meal@2.jpg 800w,
               images/meal@3.jpg 1200w
        sizes=" (max-width: 500px) 100vw,
                (max-width: 700px) 50vw,
                33vw" 
    />;
```
- Usare il formato .webp =>
  - ```
  //Microsoft Internet Explorer non supporta il nuovo formato .webp
  //Dobbiamo fornirgli una versione dell'immagine nei formati classici
  <picture>
     <source type="image/webp" srcset="..." />
     <source type="image/jpg"  srcset="..." />
     <img src="<my_image>.jpg" alt="image description" />
  </picture>
```
- Art direction => E’ possibile usare una versione cropped o zoomed di una stessa immagine in funzione di quale schermo aprira la nostra pagina web:
  - ```
  <picture>
     <source media="(max-width:500px)" srcset="<use_cropped_version>" />
     <source media="(min-width:501px)" srcset="<use_normal_version>" />
     <img src="<my_image>.jpg" alt="image description" />
  </picture>
```
- Font icons =>
  - Per visualizzare delle icone è possibile usare immagini .svg oppure usare dei font specifici in icone.

LAVORARE CON I FORM

Suggestion list => Per suggerire all’utente dei valori mentre riempie un input box.

<div>
   <input type="text" list="countries" autocomplete="off" list="" />
   <datalist id="countries">
      <option data-value="39">Italia</option>
      <option data-value="33">Francia</option>
   </datalist>
</div>

Dropdown list =>

 <select id="countries" [multiple]>
    <optgroup label="Europa">
       <option value="39" [selected] >Italia</option>
       <option value="33">Francia</option>
    </optgroup>
     <optgroup label="Asia">
        ...
     </optgroup>
 </select>

Checkbox =>

<div>
   <input type="checkbox" id="front-End" [checked] [disabled] />
   <label for="rront-End">Front-End</label>
</div>

Radiobutton =>

<div>
   <input type="radio" name="membership" id="silver" [checked] [disabled] />
   <label for="silver">Silver</label>
</div>
<div>
   <input type="radio" name="membership" id="gold" [checked] [disabled] />
   <label for="gold">Gold</label>
</div>

Sliders =>

<input type="range" min="0" max="100" value="90" />

File =>

<input type="file" [multiple] [accept=".jpg .png image/*"] />

Grouping related field =>

<form>
   <fieldset>
      <legend>Indirizzo di spedizione</legend>
      <input type="text" id="spe-comune">
      <input type="text" id="spe-cap">
   </fieldset>
   <fieldset>
      <legend>Indirizzo di fatturazione</legend>
      <input type="text" id="fat-comune"> 
      <input type="text" id="fat-cap">
   </fieldset>
</form>

oppure

<form>
   <section>
      <h2>Indirizzo di spedizione</h2>
      <input type="text" id="spe-comune">
      <input type="text" id="spe-cap">
    </section>
</form

HTML native validation

<input 
  required
  minlength="3"
  maxlength="255"

<input 
   type="numbers"
   required
   min="3"
   max="255"

ANIMATION

Transformation 2D =>

transformation: rotate(15deg);
transformation: scale(2.5); //rendere l'elemento più grande di 2.5 volte
transformation: scale(0.5); //rendere l'elemento grande 0.5 volte
transformation: skew(15deg); //per inclinare l'elemento
translate(10px, 20px); //muove l'oggetto 10px a destra e 20 in basso, usa hw acceleration
translateX(10px);
translateY(20px);

Transformation 3D =>

//muove l'elemento 100px verso l'utente 
//perspective: fissa la distanza immaginaria tra noi e l'ogetto
transform:perspective(200px) translateZ(100px);
//muove l'elemento 100px lontano dall'utente;
transform:perspective(200px) translateZ(-100px);
//ruota intorno all'asse verticale
transform:perspective(200px) translateY(-100px); 
//serve per spostare il punto pivotale della rotazione
transform-origin: 0 50%;

Transictions =>

//posso gestire il tempo dell'esecuzione delle principali animazioni
transiction: transform 0.5s //durata dell'animazione
                       linear|ease-in|ease-out|cubic-bezier(<param_animazione> // tipo
                       1s //ritardo di partenza dell'animazione);

@keyframes animation => Posso creare delle animazioni customizzare

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

.animation_mymove {
    //short syntax    
    //animation: <name> <duration> <timing-function> <delay> <iteration-count> 
                 <direction> <fill-mode>;
    animation: mymove 4s ease-out ...;
     
    oppure
    
    //long syntax
    animation-name: mymove;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear | ease-in | ease-out;
    animation-direction: normal // da 0% a 100% | reverse // da 100% a 0% | alternate;
}

BEST PRACTICES

Suddividere il file CSS in sezioni (o più file)

1- Stili di base
* {
  box-sizing: border-box;
}

html {... }
body { ... }

2-Topografia
h1, h2, h3...

3-Forms
4-Navigation bars

Ordinare alfabeticamente le proprietà presenti in uno stile

Variabili

:root {
  --my-color: #3d00ff;
  --my-border-size: 12px;
}

.my-class {
   background: var(--my-color);
}

Object oriented CSS => Riusare il proprio codice
- Separare il contenitore dal contenuto => Non fare dispendere la classe di un oggetto dalla classe del suo contenitore. Altrimenti non sarà possibile riusare tale classe in altri contenitori.
- Separare la struttura dalla pelle => Normalmente quando si definisce uno stile per un elemento è meglio separare gli stili riguardanti la struttura dell’elemento dagli stile che ne determinano l’apparenza. E’ meglio creare 2 classi.
BEM (Block Element Modifier) =>
- Block =>
  - Un blocco può essere costituito da altri blocchi + elementi specifici del blocco
  - Le classi avranno due underscore (__) => Ai blocchi che potrebbero essere usati al di fuori di questo blocco è meglio dare nomi generici
- Elementi =>
  - Le classi avranno nomi generici (senza underscore o trattino) => Agli elementi tipici del blocco è possibile dare una classe più specifica
- Modifier =>
  - E’ possibile dover poter apportare delle modifiche di stile ad un blocco usato più volte
  - Le classi avranno due trattini (–) => Se si voglio applicare delle modifiche tra un blocco e l’altro, aggiungere una classe con trattino (es: card–popular) dove si applicheranno le modifiche necessarie.
- ```
//Blocco chiamato "Card"
//A cui applico delle modifiche di stile rispetto al atlri blocchi di tipo Card nella //classe card--popular
//Tale blocco contiene elementi con classi con doppio underscore
<div class="card card--popular">
   <header class="card__header">
     <span class="card__price>$ 15</span>
   </header>
   <div class="card__body">
       <button class="btn">Register</button>
   </div>
</div>
```

ZEN CODING

esempio 1 =>
ul>li*3{Item $}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

esempio 2 =>
.container

<div class="container"></div>

esempio 3 =>
!

<!Doctype html>
<html lang="en">
<head>
   ...
</head>
<body>
   ...
</body>
</html>

esempio 4 =>
Lorem5

Lorem ipsum dolor sit amet

esempio 5 =>
h$ {Heading $}*2

<h1>Heading 1</h1>
<h2>Heading 2</h2>

SNIPPETS

Adattare l’immagine al contenitore => object-fit:cover

//permette di ridimensionare rispettando le proporzioni originali dell'immagine
//all'interno del box quadrato (200px x 200px) che contiene l'immagine 
img {
   widht:200px;
   heigh:200px;
   object-fit:cover;
}

Immagine rotonda

//se imposto il border-radius alla metà della larghezza
//l'immagine apparirà rotonda
img {
   width: 100px;
   border-radius: 50px;
}

Ombreggiare il testo (indipendentemente dal colore di sfondo)

//invece di specificare un colore, uso la notazione rgba
//per passare un nero opaco al 20%. Rende l'ombra indipendente
//dal colore di sfondo del contenitore del nostro testo
text-shadow: 3px 3px 5px rgba(0,0,0,0.2);

Esempio di box con ombra

<div id="box-ombra"></div>

#box-ombra {
  background:tomato;
  width: 300px;
  height: 300px;
  box-shadow: 10px 10px lightgray;
  border-radius: 10px;
}

Esempio di table

body {
  margin: 10px;
}

table, td, th {
  /* I've set all the borders using the border property
  and then removed the left and right border. */
  border: 1px solid #c4dcf3;
  border-left: 0;
  border-right: 0;
  border-collapse: collapse;
}

td, th {
  padding: 10px;
}

//set colore di sfondo dell'intestazione e footer 
th {
  background-color: #427fef;
  color: white;
}

//set colore di sfondo per le righe della tabella dispari 
tr:nth-child(odd) {
  background-color: #eef7ff;
}

Navigation bar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navigation bar</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <style>
    html {
       font-size: 62.5%;
    }

    body {
       font-size: 1.6rem;
    }

    nav {
      background: #000;
      padding: 0.7rem;
    }

    nav ul {
       display: flex;
       flex-direction: column;
       list-style: none;
       padding-left: 0;
       text-align: center;
    }

    nav li {
       margin: 0.5rem 0;
    }

    nav a {
      color: #ccc;
      text-decoration: none;
    }

    nav a:hover {
       color: #fff;
    }
   
    @media screen and (min-width: 768px) {
       nav ul {
          flex-direction: row;
          justify-content: flex-end;
       }

       nav li {
         margin: 0 1rem;  
       }
   }
   </style>
</head>
<body>
   <nav>
     <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Courses</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Learning Paths</a></li>
        <li><a href="#">Contact</a></li>
     </ul>
   </nav>
</body>
</html>

Gallery

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .gallery {
        display: grid;
        gap: 10px;
      }

      .gallery img {
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
      }

      @media screen and (min-width: 768px) {
        .gallery {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media screen and (min-width: 1024px) {
        .gallery {
          grid-template-columns: repeat(3, 1fr);
        }

        .gallery img:nth-of-type(3) {
          grid-column: 2 / span 2;
          grid-row: 1 / span 2;
        }
      }

    </style>
  </head>
  <body>
    <div class="gallery">
      <img src="https://source.unsplash.com/collection/190727/800x600?1" />
      <img src="https://source.unsplash.com/collection/190727/800x600?2" />
      <img src="https://source.unsplash.com/collection/190727/800x600?3" />
      <img src="https://source.unsplash.com/collection/190727/800x600?4" />
      <img src="https://source.unsplash.com/collection/190727/800x600?5" />
      <img src="https://source.unsplash.com/collection/190727/800x600?6" />
      <img src="https://source.unsplash.com/collection/190727/800x600?7" />
      <img src="https://source.unsplash.com/collection/190727/800x600?8" />
      <img src="https://source.unsplash.com/collection/190727/800x600?9" />
    </div>
  </body>
</html>

Div centrale e form

html {
   font-size: 62.5%;
}

body {
   color: #222;
   font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
   [oppure font-family: -apple-system => uso fonts nativi del computer dell'utente]
   font-size: 1.8rem;
   line-height: 1.5;
   padding: 2rem;
}

h1, h2, h3, h4, h5, h6 {
   color: #000;
   font-family: Lato, Arial, Helvetica, sans-serif;
   font-weight: 900; 
   line-height: 1.1;
}

h1 { font-size: 5.61rem; }
h2 { font-size: 4.209rem; }
h3 { font-size: 3.157rem; }
h4 { font-size: 2.369rem; }
h5 { font-size: 1.777rem; }
h6 { font-size: 1.333rem; }

img {
  width: 100%;
}

label {
  display:block;
}

ol li {
  margin-bottom: 2rem;
}

.container {
   max-width: 1140px;
   margin: 0 auto;
}

.form-group {
   margin-bottom: 1rem;
}

input[type='text'], input[type='email'] {
   border:1px solid #ccc;
   border-radius: 5px;
   padding: 0.5rem 0.7rem;
   transiction: border-color 0.15s,  box-shadow 0.15s
}

input[type='text']:focus, input[type='email']:focus {
   border-color: #7db0fb;
   outline: 0;
   box-shadow: 0 0 0 4px rgba(24, 117, 255, 0.25); 
}

button {
   background: blue;
   color: #fff;
   border:0;
   padding: 0.5rem 0.7rem;
   border-radious: 5px;
   outline: 0;
}

Standard form con bootstrap

https://getbootstrap.com/docs/5.1/forms/form-control

<form class="w-50" /> //50% della larghezza del padre
<label class="form-label" />
<input class="form-control" />
<div class="mb-3" /> //margin bottom 3px
<button class="btn btn-primary btn-warning" />
componens: badge, card

RISORSE

Visual Studio Code
- Estensioni
  - Prettier – Code Formatter (E’ un beautifier per migliorare la formattazione del codice).
    - Impostare il beautifier (Prettier) ad ogni salvataggio del file
      - File -> Preferences -> Setting -> Type ‘format on save’ -> ceccare l’opzione ‘Format on Save’
  - Live server => Lancia il web server direttamente dall’IDE.
  - HTML CCS Support => Riconosce tutti i css prsenti nel progetto e permette l’intellisense
- Pagina HTML di partenza => “!” + TAB
- Dummy text => “Lorem” + <numero_di_parole_desiderate> + TAB
- CSS Peek => Permette di aprire le classi CSS direttamente dalla pagina HTML
- Highlight matching tab
- Todo highlight
Validare il codice HTML
- validator.w3.org
Validare il codice CSS
- https://jigsaw.w3.org/css-validator/
Compatibilità browser
- https://caniuse.com/
CSS Frameworks
- Bootstrap
  - https://getbootstrap.com
  - Per includere bootstrap è possibile usare => Content delivery network (CND) via jsDelivr
- Milligram
  - https://milligram.io
  - Per includere bootstrap è possibile usare => Content delivery network
Lista delle entities HTML
- https://dev.w3.org/html5/html-author/charref
Donwload immagini/video gratis
- unsplash.com
- https://www.pexels.com/fr-fr/
Normalizzare CSS
- https://necolas.github.io/normalize.css
- Fare il download
Color picker Chrome
SVG Sprite
- https://svgsprit.es
Gradient generator
- https://cssgradient.io
Css pronti per disegnare forme
- https://css-tricks.com/the-shapes-of-css
Font
- fontsquirrel.com
- fonts.com
- myfont.com
Download icon
- https://www.flaticon.com
Css clip generator
- https://bennettfeely.com/clippy
Responsive Image Breakpoints generator
- https://www.responsivebreakpoints.com
Convert files
- https://cloudconvert.com
SVG Background
- https://www.svgbackgrounds.com
Font icon
- https://fontawesome.com
- https://ionic.io/ionicons
- https://materialdesignicons.com
Back-end dummy
- https://formspree.io
Animation generator
- https://cubic-bezier.com/#.17,.67,.83,.67
Resuable animation for free
- https://animate.style
Preprocessor CSS (Sass, Less, Stylus)
Image editor
- https://www.getpaint.net/download.html

Home » Approfondimenti » Computer Science » HTML / CSS [09/04/2022]

Home » Approfondimenti » Computer Science » HTML / CSS
[09/04/2022]