Uno dei più proprietà più utili nuova specifica. Ricorda come devi tormentarti per masturbarti per creare un'area di 3, 4 o 5 colonne della stessa larghezza in un design in gomma e allo stesso tempo non usare tabelle. Esatto, inferno infernale. Ora questo può essere fatto con pochi linee di CSS... È vero, c'è ancora un piccolo neo, ma ne parleremo più avanti.
Quindi, quali strumenti abbiamo per creare un blocco a più colonne.
|
Proprietà |
Descrizione |
|
|---|---|---|
| conteggio colonne | numero di colonne | conteggio colonne: 3; |
| gap di colonna | spaziatura delle colonne | gap di colonna: 2em; |
| larghezza della colonna | larghezza della colonna | larghezza della colonna: 200 px; |
| regola-colonna |
linea di demarcazione tra le colonne (il formato è simile alla proprietà border) |
regola-colonna: 1px solido # 000; |
| larghezza-regola-colonna | larghezza linea di divisione | larghezza-regola-colonna: 5px; |
| stile regola-colonna | stile della linea di demarcazione | stile regola-colonna: punteggiato; |
| colonna-regola-colore | colore della linea di demarcazione | colore-regola-colonna: #fff; |
Non dimenticare che per i browser mozilla e webkit è necessario duplicare le proprietà con i prefissi -webkit- e -moz-.
Penso che come lavorare con queste proprietà sia così chiaro. Tuttavia, vorrei sottolineare quanto segue. Per impostazione predefinita, il conteggio delle colonne è automatico. Ciò significa che se imposti la larghezza delle colonne, il numero di colonne verrà calcolato automaticamente.
Ora qualche parola su a cosa serve, dove può essere applicato e quali sono i limiti.
In linea di principio, il conteggio delle colonne ci rimanda ai giornali e, per dirla in modo più completo, all'industria della stampa. Perché è stato fatto? Innanzitutto è la facilità di lettura, perché l'occhio umano è il migliore nel cogliere righe di testo con una lunghezza media di 10 parole. Inoltre, la suddivisione del testo in colonne consente di organizzare meglio i contenuti e ridurne la quantità spazio libero Sulla pagina.
Applicazione
Per cosa può essere utilizzata questa proprietà? credo che uso ottimale possiamo considerare quanto segue: nei siti con un grande campo centrale, puoi dividere il testo in colonne. Il vantaggio è che se non si divide, non ci sarà nulla di terribile da questo.
Come secondo posto da usare, suggerirei alcuni enormi menu verticale dove sono necessari blocchi della stessa larghezza. Ma se il conteggio delle colonne non funziona, verrà fuori uno stipite.
Restrizioni
Non è possibile impostare le proprietà di una colonna separata, come lo sfondo e la larghezza, quindi la proprietà non è ancora applicata per il layout del sito.
Se imposti l'altezza della colonna, se c'è molto testo, verranno aggiunte colonne aggiuntive. per adattarlo. Ma fortunatamente viene trattata attraverso l'overflow: nascosta.
Se il blocco è diviso in colonne e la regola-colonna è impostata, nel caso in cui il testo sia posizionato in una colonna, i browser webkit mostreranno una linea di demarcazione, ma i browser simili a Mozilla no.
Ci sono altre due proprietà che sono nelle specifiche ma non sono supportate da nessun browser. Questa è un'interruzione di colonna che può essere utilizzata per indicare quando iniziare la colonna successiva ( .container h3 (column-break-before: sempre;)). La seconda proprietà, column-span, consente di visualizzare l'elemento in tutte le colonne, ad esempio il titolo ( .contenitore h1 (colonna: tutto;)).
Le proprietà disponibili non sono affatto supportate dall'asino, per non parlare di alcune altre varietà e versioni del browser (sembra che ci siano problemi con l'opera). Anche se, per un asino, c'è un tentativo di scrivere un plugin, ma lo chiamerei in caso migliore beta. Tuttavia, l'autore non lo nasconde ().
È tutto per oggi. Peccato che la proprietà non sia supportata da tutti e non ci siano hack. Anche se soprattutto è un peccato che la funzionalità non sia ancora completamente disponibile e finora questo metodo non può essere considerato un altro della serie per la creazione di layout a più colonne. Resta da sperare che il consorzio ci pensi adeguatamente.
V questa lezione ti guideremo attraverso l'utilizzo delle proprietà CSS3 per creare un modello a più colonne. Poiché si tratta di CSS3, l'uso delle sue proprietà richiede un'attenta verifica preventiva.
Utilizzo di più colonne
Per creare più colonne, puoi utilizzare le proprietà:
- conteggio colonne
- larghezza della colonna
Il primo imposta il numero esatto di colonne da visualizzare e il secondo imposta la larghezza di ciascuna colonna. Tutti gli altri parametri di colonna saranno determinati dalla larghezza disponibile.
Usiamo il markup HTML:
Il codice CSS sarebbe così:
Div (conteggio colonne: 3)
o così:
Div (larghezza colonna: 15em) / * Puoi anche usare px * /
È disponibile anche una breve voce:
Div (colonne: 3 20em)
In una breve notazione, puoi specificare sia il numero di colonne che la loro larghezza. In pratica, tuttavia, di solito ne basta uno solo.
La definizione di colonne utilizzando la proprietà conteggio colonne è più adatta per i layout fluidi, poiché la larghezza delle colonne si adatterà al variare della larghezza dello schermo del browser.
Contenitori a colonna
L'uso delle proprietà conteggio colonne o larghezza colonne crea un nuovo contenitore tra elemento esterno e contenuto. Si chiama contenitore di colonne, sebbene non sia possibile modificarne le proprietà.
Le colonne sono allineate in linea. Tutti i contenitori di colonne in una riga avranno la stessa altezza anche se il loro contenuto può variare in modo significativo.
Se fai galleggiare un elemento in un contenitore di colonne, sarà limitato dal contenitore di colonne e non dal contenitore esterno. Funzionerà anche l'impostazione della larghezza dell'elemento della colonna in%: la larghezza verrà calcolata dalla larghezza del contenitore della colonna, non dal contenitore esterno.
Spaziatura delle colonne e separatori
C'è poco controllo sugli altoparlanti. Possiamo impostare la spaziatura tra le colonne usando la proprietà column-gap. Per impostazione predefinita, la proprietà del gap di colonna è impostata su 1em.
Div (spazio di colonna: 2em)
Puoi anche impostare il separatore verticale usando la proprietà della regola di colonna:
Div (regola della colonna: sottile solido #ccc)
Una breve notazione può essere rappresentata da 3 proprietà, che agiscono allo stesso modo di quando si definiscono i frame degli elementi:
- larghezza-regola-colonna
- stile regola-colonna
- colonna-regola-colore
La spaziatura ha la stessa altezza del riquadro della colonna e il separatore è posizionato al centro della spaziatura. La spaziatura e il separatore hanno la stessa altezza. Se una colonna non ha contenuto, non verrà visualizzato alcun separatore tra essa e le colonne adiacenti.
Imbottitura e span della colonna
Probabilmente non utilizzerai spesso la proprietà di riempimento delle colonne per specificare il riempimento delle colonne. Questo è un modo per indicare ai browser la quantità di contenuto da inserire in ciascuna colonna.
Puoi usare auto (predefinito) o balance per forzare il browser a provare a riempire le colonne in modo uniforme. In pratica, non c'è molta differenza tra i risultati dell'utilizzo di questi valori.
Lo span impostato usando la proprietà Column-span è significativamente più grande impostazione utile... Permette elemento HTML si estendono su più colonne. Nella figura sopra, il titolo utilizza questa proprietà.
H2 (colonna: tutto)
Ci sono solo due valori possibili: tutto (tutto) o nessuno (niente). Non è possibile utilizzare 2 colonne su 3.
Interruzione delle colonne
Esistono tre proprietà simili che è possibile utilizzare per interrompere il contenuto della colonna attorno a un elemento.
- Prima dell'elemento - pausa prima:
- Nell'elemento - irruzione: auto | sempre | evitare | sinistra | a destra | pagina | colonna | evitare-pagina | evitare-colonna
- Dopo l'elemento - pausa dopo: auto | evitare | evitare-pagina | evitare-colonna
Definizioni dei valori utilizzati:
- auto- La generazione o la disabilitazione delle interruzioni di pagina/colonna è disabilitata.
- sempre
- evitare- Prevenire interruzioni di pagina/colonna.
- sinistra- Genera una o due interruzioni di pagina in modo che Pagina successiva formattata come la pagina a sinistra.
- Giusto- Genera una o due interruzioni di pagina in modo che la pagina successiva sia formattata come le pagine a destra.
- pagina- Genera sempre un'interruzione di pagina.
- colonna- Genera sempre un'interruzione di colonna.
- evitare-pagina- Prevenire interruzioni di pagina.
- evitare-colonna- Disabilita l'interruzione di colonna.
Il punto di tutte queste proprietà e valori è che determinati contenuti inizino in una nuova colonna.
Se un'immagine o una parola continua supera la larghezza della colonna, verrà ritagliata a metà dell'intervallo in cui è posizionato il separatore.
È possibile vincolare le colonne in modo che un elemento abbia più altoparlanti rispetto ai luoghi di output:
- La limitazione dell'altezza di un altoparlante può comportare altoparlanti aggiuntivi anziché uno spazio di uscita sufficiente.
- La limitazione delle dimensioni della pagina può causare lo spostamento di colonne aggiuntive alla pagina successiva.
- L'impostazione di un'interruzione di colonna può causare colonna aggiuntiva sarà portato fuori spazio disponibile per l'output o nella pagina successiva.
Conclusione
Le proprietà CSS3 per la creazione di un layout a più colonne possono essere un ottimo strumento. Ma applicarli richiede un'attenta verifica del supporto su diversi browser.
Con il loro aiuto, puoi cambiare aspetto esteriore un progetto esistente senza rielaborazione globale della struttura.
Colonne CSS3- il concetto di layout a più colonne, che consente di suddividere il contenuto in colonne. Le colonne possono contenere titoli, testo, tabelle, immagini e qualsiasi altro elemento in linea.
Creazione di markup a più colonne con il modello a colonne CSS3
Supporto browser
CIOÈ: 10.0
Firefox: 9.0 -moz-
Cromo: 4.0 -webkit-
Safari: 3.0 -webkit-
Musica lirica: 11.1, 15.0 -webkit-
Safari iOS: 9, 7.1 -webkit-
Opera Mini: 8
Navigatore Android: 2.1 -webkit-
Cromo per Android: 44 -webkit-
1. Numero di colonne conteggio colonne
La proprietà consente di impostare in modo esplicito il numero di colonne richiesto e la loro larghezza verrà calcolata in base alla larghezza dello spazio disponibile. Per impostazione predefinita, il browser aggiunge 1 em di spaziatura orizzontale tra le colonne. Se l'immagine è più larga della colonna, verrà ritagliata. Se la larghezza della colonna viene specificata contemporaneamente al conteggio delle colonne, verrà considerato il valore del conteggio delle colonne numero massimo colonne (colonne). La proprietà non è ereditata.
Sintassi
Sezione (-webkit-column-count: 3; -moz-column-count: 3; colonne-count: 3;) 
Riso. 1. Un esempio di markup multi-colonna
2. Larghezza colonna
La proprietà consente di suddividere il contenuto in colonne senza impostare la proprietà del conteggio delle colonne. Il numero di colonne dipenderà da quante colonne data larghezza può stare in un contenitore. Non ereditato.
Sintassi
Sezione (-webkit-column-width: 100px; -moz-column-width: 100px; column-width: 100px;)
3. Larghezza dello spazio bianco tra le colonne spazio tra le colonne
La proprietà controlla la spaziatura tra le colonne. Se viene impostata una linea di separazione per le colonne utilizzando la proprietà regola-colonna, questa linea verrà posizionata al centro dello spazio vuoto e la sua larghezza non cambierà la larghezza complessiva. La proprietà non è ereditata.
Sintassi
Sezione (-webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px;) 
Riso. 2. Spazi tra le colonne
4. Posizionamento dell'elemento su più colonne colonna-span
La proprietà imposta il numero di colonne che l'elemento selezionato attraverserà. È indicato non per un blocco contenitore, ma per un elemento specifico all'interno, ad esempio per un'intestazione.
Se vuoi che l'immagine si estenda su tutte le colonne, imposta img (display: block; -webkit-column-span: all; column-span: all;). La proprietà non è ereditata.
Sintassi
H1 (-webkit-column-span: all; column-span: all;) 
Riso. 3. Posizionamento dell'intestazione su tutte le colonne
5. Stile della linea di divisione in stile regola di colonna
La proprietà crea uno spazio vuoto tra le colonne all'interno striscia verticale- linea di divisione. Se il colore della linea non è specificato, alcuni effetti non verranno visualizzati. Non ereditato.
| I valori: | |
| nessuno | Il valore predefinito significa nessuna linea. Il colore e la larghezza specificati per la linea vengono ignorati. |
| nascosto | Allo stesso modo con il valore none, la linea è nascosta. |
| punteggiato | Disegna una linea come un insieme di punti quadrati. |
| tratteggiato | Visualizza la linea come una serie di trattini. |
| solido | Linea regolare. |
| Doppio | Visualizza una linea di divisione come due linee sottili parallele a una certa distanza l'una dall'altra. La larghezza della linea di divisione non è specificata, ma la somma delle linee e la spaziatura tra di esse è uguale al valore di larghezza-regola-colonna. |
| scanalatura | Visualizza una linea continua premuta nell'area di disegno. Lo fa creando un'ombra da due colori, uno più scuro e l'altro più chiaro. |
| cresta | Visualizza la linea di divisione volumetrica, ad es. l'opposto di solco. |
| inserto | display linea continua più scuro di imposta il colore Linee. |
| fin dall'inizio | Visualizza una linea continua nel colore specificato dalla proprietà column-rule-color. |
| iniziale | Imposta il valore della proprietà sul valore predefinito. |
| ereditare | Eredita il valore della proprietà dall'elemento padre. |
Sintassi
Sezione (-webkit-column-rule-style: punteggiato; -moz-column-rule-style: punteggiato; column-rule-style: punteggiato;) 
Riso. 4. Stile della linea di demarcazione
6. Larghezza della linea di demarcazione colonna-regola-larghezza
La proprietà imposta la larghezza della linea di divisione. Non funziona senza la proprietà in stile regola di colonna. Non ereditato.
Sintassi
Sezione (-webkit-column-rule-style: punteggiato; -moz-column-rule-style: punteggiato; column-rule-style: punteggiato; -webkit-column-rule-width: 10px; -moz-column-rule- larghezza: 10 px; larghezza regola-colonna: 10 px;) 
Riso. 5. Larghezza della linea di demarcazione
7. Colore della linea di demarcazione colonna-regola-colore
La proprietà consente di modificare il colore della linea di demarcazione, che eredita il colore del testo. Non ereditato.
Sintassi
Sezione (-webkit-column-rule-style: punteggiato; -webkit-column-rule-width: 5px; -webkit-column-rule-color: # 59ACE7; -moz-column-rule-style: punteggiato; -moz- larghezza-regola-colonna: 5px; -moz-column-rule-color: # 59ACE7; stile regola-colonna: punteggiato; larghezza regola-colonna: 5px; colore regola-colonna: # 59ACE7;) 
Riso. 6. Colore della linea di demarcazione
8. Breve notazione degli stili della linea di divisione della regola di colonna
La proprietà consente di impostare tre proprietà della linea di divisione in un'unica dichiarazione: larghezza regola-colonna, stile regola-colonna e colore regola-colonna. Non ereditato.
Sintassi
Sezione (-webkit-column-rule: 5px punteggiato # 59ACE7; -moz-column-rule: 5px punteggiato # 59ACE7; column-rule: 5px punteggiato # 59ACE7;)
9. Impostazione delle colonne utilizzando una colonna di proprietà
La proprietà è breve nota proprietà larghezza-colonna e conteggio-colonne, imposta sia la larghezza che il numero di colonne. Non ereditato.
Sintassi
Sezione (-webkit-columns: 100px 3; -moz-columns: 100px 3; colonne: 100px 3;)
Il layout CSS3 a più colonne semplifica la definizione di più colonne di testo, proprio come nei giornali:
Ping giornaliero
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit teugue duis dolore Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -webkit- o -moz- indicano la prima versione che ha funzionato con il prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| conteggio colonne | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| gap di colonna | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| regola-colonna | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| colonna-regola-colore | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| stile regola-colonna | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| larghezza-regola-colonna | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| larghezza della colonna | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
Proprietà CSS3 a più colonne
In questo capitolo imparerai a conoscere seguenti proprietà più colonne:
- conteggio colonne
- gap di colonna
- stile regola-colonna
- larghezza-regola-colonna
- colonna-regola-colore
- regola-colonna
- colonna-span
- larghezza della colonna
CSS3 Creazione di più colonne
La proprietà column-count specifica il numero di colonne per le quali l'elemento deve essere diviso.
Il seguente esempio dividerà il testo in
CSS3 Specifica la spaziatura tra le colonne
La proprietà column-gap specifica la spaziatura tra le colonne.
L'esempio seguente definisce una spaziatura di 40 pixel tra le colonne:
Colonna Regole CSS3
La proprietà column-rule-style definisce lo stile della regola tra le colonne:
esempio
div (
-webkit-column-rule-style: solido; / * Chrome, Safari, Opera * /
-moz-column-rule-style: solido; / *Firefox * /
stile regola-colonna: solido;
}
La proprietà column-rule-width imposta la larghezza del righello tra le colonne:
La proprietà column-rule-color imposta il colore della regola tra le colonne:
esempio
div (
-colore-regola-colonna-webkit: azzurro; / * Chrome, Safari, Opera * /
-moz-column-rule-color: azzurro; / *Firefox * /
colonna-regola-colore: azzurro;
}
La proprietà della regola di colonna è una proprietà abbreviata per impostare tutte le proprietà della regola di colonna * sopra.
L'esempio seguente imposta la larghezza, lo stile e il colore della regola tra le colonne:
esempio
div (
-webkit-column-rule: 1px azzurro fisso; / * Chrome, Safari, Opera * /
-moz-column-rule: 1px azzurro solido; / *Firefox * /
regola-colonna: 1px azzurro chiaro;
}
Specifica quante colonne deve occupare l'elemento
La proprietà Column-span determina il numero di colonne su cui deve estendersi l'elemento.
L'esempio seguente indica che
l'elemento deve coprire in tutte le colonne: Specifica la larghezza della colonna
L'esempio seguente indica che la larghezza ottimale della colonna suggerita dovrebbe essere 100 px:
Proprietà multi-colonna CSS3
La tabella seguente elenca tutte le proprietà di una multicolonna.
Questa proprietà fa parte della proprietà abbreviata delle colonne.
Visualizza tutte le proprietà per multicolonna: numero di colonne, larghezza di colonna, distanza tra le colonne, regola di colonna, estensione di colonne, colonne.
Sintassi
Selettore (conteggio colonne: numero | auto;)
I valori
Valore di default: auto.
Esempi di
Esempio
V questo esempio il testo si rompe in 3 colonne(ovviamente, nei browser che supportano il multicolonna, il resto sarà solo testo semplice in una colonna):
#elem (-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; text-align: require;)
Il risultato dell'esecuzione del codice:
Un esempio. Valore automatico
In questo esempio, la larghezza della colonna è specificata in 150 px, e il loro numero conteggio colonne sta nel significato auto- il browser stesso selezionerà il numero richiesto di colonne e lo spazio tra di loro:
#elem (-webkit-column-count: auto; -moz-column-count: auto; column-count: auto; -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px ; text-align: giustificare;)
Il risultato dell'esecuzione del codice:
Essere un'entusiasta diventava la sua posizione sociale, ea volte, quando non lo voleva nemmeno, per non deludere le aspettative di chi la conosceva, diventava un'entusiasta. Il sorriso trattenuto che giocava costantemente sul viso di Anna Pavlovna, sebbene non andasse ai suoi lineamenti obsoleti, esprimeva, come bambini viziati, la costante consapevolezza del suo dolce difetto, dal quale non vuole, non può e non trova necessario corretta. Nel bel mezzo di una conversazione sulle azioni politiche, Anna Pavlovna è divampata. - Oh, non parlarmi dell'Austria! Non ci capisco niente, forse, ma l'Austria non ha mai voluto e non vuole la guerra. Lei ci tradisce. Solo la Russia dovrebbe essere la salvatrice dell'Europa. Il nostro benefattore conosce la sua alta vocazione e vi sarà fedele. Questa è una cosa in cui credo. Il nostro gentile e meraviglioso sovrano avrà il ruolo più importante nel mondo, ed è così virtuoso e buono che Dio non lo lascerà, e realizzerà la sua chiamata per schiacciare l'idra della rivoluzione, che ora è ancora più terribile nel persona di questo assassino e cattivo. Noi soli dobbiamo riscattare il sangue dei giusti... Chi possiamo sperare, ve lo chiedo?... L'Inghilterra, con il suo spirito commerciale, non capirà e non potrà comprendere la piena altezza dell'anima dell'imperatore Alessandro. Si è rifiutata di liberare Malta. Vuole vedere, sta cercando un ripensamento delle nostre azioni. Cosa hanno detto a Novosiltsov?... Niente. Non hanno capito, non possono capire l'altruismo del nostro imperatore, che nulla vuole per sé e vuole tutto per il bene del mondo. E cosa hanno promesso? Niente. E quello che hanno promesso, e questo non accadrà! La Prussia ha già annunciato che Bonaparte è invincibile e che l'Europa intera non può nulla contro di lui... E non credo a una sola parola né a Hardenberg né a Gaugwitz. Cette fameuse neutralite prussienne, ce n`est qu`un piege. [Questa famigerata neutralità della Prussia è solo una trappola. ] Credo in un solo Dio e nell'alto destino del nostro caro imperatore. Salverà l'Europa!..- si fermò all'improvviso con un sorriso di scherno al suo fervore. "Penso", disse il principe sorridendo, "che se fossi stato mandato al posto del nostro caro Vincennerode, avresti preso d'assalto il consenso del re di Prussia. Sei così eloquente. Mi dai un po' di tè?
