HTML e CSS. Introduzione

-

Studiare le sezioni del tutorial:

  • Introduction
  • Basic web pages
  • Link and Images

 4. Hello, CSS

Cascading Style Sheets (CSS). Puoi pensare ai CSS come alla definizione del 'design' di una pagina web. Determina la dimensione del carattere, i margini e i colori utilizzando un linguaggio completamente separato dall'HTML.

 5. CSS Box model

Il modello CSS box è un insieme di regole che definiscono il modo in cui viene resa ogni pagina web su Internet. I CSS trattano ogni elemento nel tuo documento HTML come una 'scatola' con una serie di proprietà diverse che determinano dove appare sulla pagina.

Il 'modello CSS box' è un insieme di regole che determinano le dimensioni di ogni elemento in una pagina web. Assegna a ciascuna casella (sia in linea che a blocco) quattro proprietà:

  1. Content: il testo, l'immagine o altri contenuti multimediali nell'elemento.
  2. Padding – Lo spazio tra il contenuto della scatola e il suo bordo.
  3. Border: la linea tra il riempimento e il margine della scatola.
  4. Margin – Lo spazio tra la scatola e le scatole circostanti.

Insieme, questo è tutto ciò di cui un browser ha bisogno per eseguire il rendering della casella di un elemento.

6. CSS Selector

I 'selettori CSS' invece di navigare tra interi file, ci consentono di mappare una singola regola CSS su un elemento HTML specifico. Ciò consente di applicare uno stile selettivo ai singoli elementi ignorandone gli altri. A meno che tu non voglia che ogni sezione del tuo sito web abbia lo stesso aspetto, questa è una funzionalità cruciale per noi. È così che diciamo cose come 'Voglio che questo paragrafo sia blu e che l'altro paragrafo sia giallo'.

Il valore dell'attributo della classe HTML può essere (quasi) qualsiasi cosa tu voglia purché corrisponda al selettore nel tuo CSS. La convenzione di denominazione standard per le classi consiste nell'utilizzare tutte le lettere minuscole e i trattini per gli spazi, proprio come i nomi di file e cartelle.

La stessa classe può essere applicata a più elementi in un singolo documento HTML. Ciò significa che ora possiamo riutilizzare dichiarazioni CSS arbitrarie dove vogliamo.

7. Floats

I 'float' ti consentono di posizionare gli elementi a livello di blocco uno accanto all'altro anziché uno sopra l'altro. Questo è un grosso problema. Ci consente di creare tutti i tipi di layout, incluse barre laterali, pagine a più colonne, griglie e articoli in stile rivista con testo che scorre attorno a un'immagine. È qui che finalmente iniziamo a creare vere pagine web.

'Cancellare' un float è quando diciamo a un blocco di ignorare qualsiasi float che appare prima di esso. Invece di scorrere intorno alla casella float, un elemento deselezionato appare sempre dopo qualsiasi float. È come forzare una casella di nuovo nel flusso verticale predefinito della pagina.

8. Flexbox

La modalità di layout 'Flexible Box' o 'Flexbox' offre un'alternativa ai Float per definire l'aspetto generale di una pagina web. Mentre i float ci consentono solo di posizionare orizzontalmente le nostre scatole, flexbox ci dà il controllo completo sull'allineamento, la direzione, l'ordine e le dimensioni delle nostre scatole.

Siamo finalmente arrivati a un punto in cui il supporto del browser ha raggiunto una massa critica e gli sviluppatori possono iniziare a creare siti Web completi con flexbox. Il nostro consiglio è di utilizzare flexbox per disporre le tue pagine web il più possibile, riservando float per quando hai bisogno che il testo scorra attorno a una casella (ad esempio un layout in stile rivista) o quando hai bisogno di supportare browser web legacy.

Flexbox utilizza due tipi di box che non abbiamo mai visto prima: 'contenitori flessibili' e 'articoli flessibili'. Il compito di un contenitore flessibile è raggruppare un gruppo di elementi flessibili e definire come sono posizionati.

Ogni elemento HTML che è un figlio diretto di un contenitore flessibile è un 'elemento'. Gli elementi flessibili possono essere manipolati individualmente, ma per la maggior parte spetta al contenitore determinarne il layout. Lo scopo principale degli articoli flessibili è far sapere al loro contenitore quante cose deve posizionare.

Flexbox è un'opzione più pulita per la creazione di siti Web moderni

  • display: flex; to create a flex container.
  • justify-content to define the horizontal alignment of items.
  • align-items to define the vertical alignment of items.
  • flex-direction if you need columns instead of rows.
  • row-reverse or column-reverse values to flip item order.
  • order to customize the order of individual elements.
  • align-self to vertically align individual items.
  • flex to create flexible boxes that can stretch and shrink.

Ricorda che queste proprietà flexbox sono solo un linguaggio che ti consente di dire ai browser come organizzare un gruppo di elementi HTML. La parte difficile non è in realtà scrivere il codice HTML e CSS, ma capire, concettualmente (su un pezzo di carta), il comportamento di tutte le caselle necessarie per creare un determinato layout.


 Fonte:

HTML & CSS Is Hard