Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Colonne multiple CSS


Layout a più colonne CSS

Il layout a più colonne CSS consente di definire facilmente più colonne di testo, proprio come nei giornali:

Ping quotidiano

Il
dolore stesso è l'amore Ecco perché è il minimo a venire, che la nostra pratica normale sopporta per trarne vantaggio Il dolore dell'ufficio alle Olimpiadi, o il dolore dell'ufficio alle Olimpiadi, vuole essere un fastidio per le conseguenze, o soffre del dolore del sistema immunitario dell'UE in verità, l'eros e il consumatore, e l'odio regolare degli zzril. Per il tempo libero quando siamo liberati dai nostri adolescenti non c'è scelta


Proprietà a più colonne CSS

In questo capitolo imparerai le seguenti proprietà a più colonne:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

Supporto browser

I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.

Property
column-count 50.0 10.0 52.0 9.0 37.0
column-gap 50.0 10.0 52.0 9.0 37.0
column-rule 50.0 10.0 52.0 9.0 37.0
column-rule-color 50.0 10.0 52.0 9.0 37.0
column-rule-style 50.0 10.0 52.0 9.0 37.0
column-rule-width 50.0 10.0 52.0 9.0 37.0
column-span 50.0 10.0 71.0 9.0 37.0
column-width 50.0 10.0 52.0 9.0 37.0


CSS Crea più colonne

La column-countproprietà specifica il numero di colonne in cui deve essere suddiviso un elemento.

L'esempio seguente dividerà il testo nell'elemento <div> in 3 colonne: 

Esempio

div {
  column-count: 3;
}

CSS Specificare lo spazio tra le colonne

La column-gapproprietà specifica lo spazio tra le colonne.

L'esempio seguente specifica uno spazio di 40 pixel tra le colonne:

Esempio

div {
  column-gap: 40px;
}

Regole della colonna CSS

La column-rule-styleproprietà specifica lo stile della regola tra le colonne:

Esempio

div {
  column-rule-style: solid;
}

La column-rule-widthproprietà specifica la larghezza della regola tra le colonne:

Esempio

div {
  column-rule-width: 1px;
}

La column-rule-colorproprietà specifica il colore della regola tra le colonne:

Esempio

div {
  column-rule-color: lightblue;
}

La column-ruleproprietà è una proprietà abbreviata per impostare tutte le proprietà column-rule-* sopra.

L'esempio seguente imposta la larghezza, lo stile e il colore della regola tra le colonne:

Esempio

div {
  column-rule: 1px solid lightblue;
}

Specifica su quante colonne deve occupare un elemento

La column-spanproprietà specifica su quante colonne deve estendersi un elemento.

L'esempio seguente specifica che l'elemento <h2> deve estendersi su tutte le colonne:

Esempio

h2 {
  column-span: all;
}

Specificare la larghezza della colonna

La column-widthproprietà specifica una larghezza ottimale consigliata per le colonne.

L'esempio seguente specifica che la larghezza ottimale suggerita per le colonne dovrebbe essere 100px:

Esempio

div {
  column-width: 100px;
}

Proprietà a più colonne CSS

La tabella seguente elenca tutte le proprietà a più colonne: 

Property Description
column-count Specifies the number of columns an element should be divided into
column-fill Specifies how to fill columns
column-gap Specifies the gap between the columns
column-rule A shorthand property for setting all the column-rule-* properties
column-rule-color Specifies the color of the rule between columns
column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns
column-span Specifies how many columns an element should span across
column-width Specifies a suggested, optimal width for the columns
columns A shorthand property for setting column-width and column-count