Jedan od mnogih najkorisnija svojstva nova specifikacija. Zapamtite koliko se morate mučiti da napravite površinu od 3, 4 ili 5 stupaca iste širine u gumenom dizajnu bez korištenja tablica. Tako je, pakleni pakao. Sada se to može uraditi sa samo nekoliko CSS linije. Istina, još uvijek postoji mala mušica, ali o tome kasnije.
Dakle, koje alate imamo da kreiramo blok sa više kolona?
|
Nekretnina |
Opis |
|
|---|---|---|
| kolona-broj | broj kolona | broj kolona: 3; |
| kolona-razmak | rastojanje između stubova | razmak stupaca: 2em; |
| širina kolone | širina kolone | širina kolone: 200px; |
| kolona-pravilo |
linija razdvajanja između kolona (format zapisa je sličan svojstvu granice) |
kolona-pravilo: 1px solid #000; |
| kolona-pravilo-širina | širina linija razdvajanja | column-rule-width: 5px; |
| stil pravila kolone | stil linije razdvajanja | column-rule-style: točkasto; |
| kolona-pravilo-boja | boja linije razdvajanja | kolona-pravilo-boja: #fff; |
Ne zaboravite da je za pretraživače Mozilla i webkit potrebno duplicirati svojstva s prefiksima -webkit- I -moz-.
Mislim da je jasno kako raditi sa ovim svojstvima. Međutim, primetiću sledeće. Podrazumevano, broj kolona je automatski. To znači da ako navedete širinu kolone, broj kolona će se automatski izračunati.
Sada nekoliko riječi o tome zašto je to potrebno, gdje se može primijeniti i koja su ograničenja.
U principu, broj kolona nas vraća na novine, ili, tačnije, na štampanje. Zašto je to urađeno? Prije svega, to je lakoća čitanja, jer... Ljudsko oko najbolje percipira redove teksta koji su u prosjeku dugi 10 riječi. Također, podjela teksta na kolone vam omogućava da bolje organizirate sadržaj i smanjite broj slobodan prostor Na stranici.
Aplikacija
Za šta se ova nekretnina može koristiti? vjerujem da optimalno korišćenje Može se uzeti u obzir sljedeće: na stranicama s velikim središnjim poljem možete podijeliti tekst u stupce. Prednost je u tome što ako se ne odvoji, onda se od toga neće dogoditi ništa strašno.
Kao drugo mjesto za korištenje, predložio bih neko masivno vertikalni meni, gdje su potrebni blokovi iste širine. Ali, ako broj kolona ne radi, onda će doći do zastoja.
Ograničenja
Ne možete postaviti svojstva pojedinačne kolone, kao što su pozadina i širina, tako da se svojstvo još ne može koristiti za izgled web stranice
Ako postavite visinu stupca, onda će se dodati dodatni stupci ako ima puno teksta. da se uklopi. Ali, srećom, tretira se preko overflow: skriveno.
Ako je blok podijeljen na kolone i specificirano je pravilo kolone, onda kada se tekst smjesti u jednu kolonu, webkit pretraživači će pokazati liniju razdvajanja, ali pretraživači slični Mozilla-i neće.
Postoje još dva svojstva koja su u specifikaciji, ali ih nijedan pretraživač ne podržava. Ovo je prijelom stupca koji se može koristiti da odredi kada treba započeti sljedeći stupac ( .kontejner h3 (prelom stupca-prije:uvijek; )). Drugo svojstvo je column-span, koje vam omogućava da prikažete element u svim kolonama, na primjer, naslov ( .container h1 ( column-span:all; )).
Donke uopšte ne podržava ta svojstva koja su dostupna, a da ne spominjemo neke druge varijante i verzije pretraživača (izgleda da ima problema sa Operom). Mada, postoji pokušaj da se napiše dodatak za magarca, ali ja bih ga nazvao najboljem scenariju beta. Međutim, autor to ne krije ().
To je sve za danas. Šteta što imovinu ne podržavaju svi i nema hakova. Iako je najveća šteta što funkcionalnost još nije u potpunosti dostupna i ova metoda se još ne može smatrati još jednom u nizu za kreiranje rasporeda sa više kolona. Možemo se samo nadati da će konzorcij pažljivo razmisliti o tome.
IN ovu lekciju Razgovaraćemo o korišćenju CSS3 svojstava za pravljenje šablona sa više kolona. Pošto je ovo CSS3, korišćenje njegovih svojstava zahteva pažljivo testiranje prethodno.
Korištenje više kolona
Za kreiranje više kolona možete koristiti svojstva:
- kolona-broj
- širina kolone
Prvi postavlja tačan broj kolona za izlaz, a posljednji postavlja širinu svake kolone. Svi ostali parametri kolone će biti određeni dostupnom širinom.
Koristimo HTML oznake:
CSS kod će biti ovakav:
Div (broj kolona: 3)
ili ovako:
Div (širina kolone: 15em) /* Možete koristiti i px */
Dostupan je i kratki snimak:
Div (kolone: 3 20em)
U kratkom unosu možete podesiti i broj kolona i njihovu širinu. Međutim, u praksi je, po pravilu, potrebno samo jedno.
Definisanje kolona pomoću svojstva broja kolona je pogodnije za fluidne šablone, jer će se širina kolona prilagođavati kako se širina ekrana pretraživača mijenja.
Kontejneri u kolonama
Korištenje svojstava broja kolona ili širine stupca uzrokuje kreiranje novog spremnika između vanjski element i sadržaj. Zove se kontejner kolone, iako ne možete promijeniti njegova svojstva.
Kolone su poravnate u nizu. Svi kontejneri kolona u redu će imati iste visine, iako se njihov sadržaj može značajno razlikovati.
Ako element učinite da pluta u kontejneru stupca, on će biti ograničen na spremnik stupca, a ne na vanjski spremnik. Postavljanje širine elementa stupca u % će također raditi - širina će se izračunati iz širine spremnika stupca, a ne vanjskog spremnika.
Razmaci i separatori kolona
Postoji mala kontrola nad zvučnicima. Možemo postaviti razmak između kolona koristeći svojstvo column-gap. Podrazumevano, svojstvo column-gap je postavljeno na 1em.
Div (razmak između stupaca: 2em)
Također možete postaviti vertikalni separator koristeći svojstvo column-rule:
Div (pravilo kolone: tanka puna #ccc)
Kratak zapis se može predstaviti sa 3 svojstva koja djeluju na isti način kao kod definiranja okvira elemenata:
- kolona-pravilo-width
- stil pravila kolone
- kolona-pravilo-boja
Razmak je po visini jednak kontejneru kolone, a separator je postavljen u centar razmaka. Razmak i separator imaju istu visinu. Ako kolona nema sadržaj, separator između nje i susjednih kolona neće biti prikazan.
Podešavanje i raspon kolone
Vjerovatno nećete često koristiti svojstvo kolone-fill da biste odredili kako treba popunjavati kolone. Ovo je način da se pretraživačima kaže koliko sadržaja treba staviti u svaku kolonu.
Možete koristiti auto (podrazumevano) ili balans, što će natjerati pretraživač da pokuša ravnomjerno popuniti kolone. U praksi, nema velike razlike između rezultata korišćenja ovih vrednosti.
Skup raspona koji koristi svojstvo raspona stupaca je znatno veći korisna postavka. To dozvoljava HTML element protežu na nekoliko stubova. Na gornjoj slici, zaglavlje koristi upravo ovo svojstvo.
H2 (raspon kolone: sve)
Postoje samo dvije moguće vrijednosti - sve (sve) ili ništa (ništa). Nećete moći koristiti 2 od 3 kolone.
Prekid zvučnika
Postoje tri slična svojstva koja se mogu koristiti za prekid sadržaja u koloni oko elementa.
- do elementa - pauza prije:
- U elementu - provala unutra: auto | uvijek | izbjegavati | lijevo | desno | stranica | stupac | izbjegavaj-stranica | izbjegavati-kolona
- Nakon elementa - pauza nakon: auto | izbjegavati | izbjegavajte stranicu | izbjegavati-kolona
Definicije vrijednosti koje se koriste:
- auto— Generisanje ili zabrana preloma stranica/kolona su onemogućeni.
- uvijek
- izbjegavati— Onemogućite prijelome stranica/kolona.
- lijevo— Generirajte jedan ili dva prijeloma stranice tako da Sledeća stranica formatiran kao stranica s lijeve strane.
- u pravu- Generirajte jedan ili dva prijeloma stranice tako da sljedeća stranica bude formatirana kao stranice na desnoj strani.s
- stranica- Uvijek generirajte prijelom stranice.
- kolona- Uvijek generirajte prijelom stupca.
- izbjegavajte stranicu— Onemogućite prijelome stranica.
- izbjegavati-kolona— Zabrana prekida kolona.
Smisao svih ovih svojstava i vrijednosti je osigurati da određeni sadržaj počinje u novom stupcu.
Ako slika ili neprekidna riječ premašuje širinu stupca, bit će odsječena u sredini prostora na kojem je postavljen separator.
Moguće je ograničiti stupce tako da element ima više zvučnika nego mjesta za izlaz:
- Ograničavanje visine stupca može rezultirati dodatnim stupcima umjesto pružanja dovoljno prostora za izlaz.
- Ograničenje veličine stranice može uzrokovati premještanje dodatnih kolona na sljedeću stranicu.
- Navođenje prijeloma stupca može uzrokovati dodatna kolonaće biti izvađeno raspoloživog prostora za izlaz ili na sljedećoj stranici.
Zaključak
CSS3 svojstva za kreiranje šablona sa više kolona mogu biti odličan alat. Ali njihova upotreba zahtijeva pažljivu provjeru podrške u različitim pretraživačima.
Uz njihovu pomoć možete se promijeniti izgled postojeći projekat bez većih promjena u strukturi.
CSS3 kolone- koncept označavanja u više kolona, koji vam omogućava da podijelite sadržaj u kolone. Kolone mogu sadržavati naslove, tekst, tabele, slike i sve druge inline elemente.
Kreiranje markupa sa više kolona pomoću CSS3 modela kolona
Podrška za pretraživač
IE: 10.0
Firefox: 9.0 -moz-
Chrome: 4.0 -webkit-
safari: 3.0 -webkit-
Opera: 11.1, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: 8
Android pretraživač: 2.1 -webkit-
Chrome za Android: 44 -webkit-
1. Broj stupaca broj kolona
Svojstvo vam omogućava da eksplicitno postavite potreban broj kolona, a njihova širina će se izračunati na osnovu širine dostupnog prostora. Podrazumevano, pretraživač dodaje horizontalni razmak od 1em između kolona. Ako je širina slike veća od širine kolone, bit će izrezana. Ako je kolona-width specificirana u isto vrijeme kao i column-count , tada će se uzeti u obzir vrijednost column-count maksimalan broj kolone (kolone). Imovina se ne nasljeđuje.
Sintaksa
Odjeljak ( -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; ) 
Rice. 1. Primjer rasporeda sa više kolona
2. Širina kolone širina kolone
Svojstvo vam omogućava da podijelite sadržaj u kolone bez postavljanja svojstva broja kolona. Broj kolona zavisi od toga koliko kolona zadata širina može stati u kontejner. Nije naslijeđen.
Sintaksa
Odjeljak ( -webkit-column-width: 100px; -moz-column-width: 100px; column-width: 100px; )
3. Širina praznog prostora između kolona kolona-razmak
Svojstvo kontrolira razmak između stupaca. Ako postavite razdjelnu liniju za stupce koristeći svojstvo column-rule, tada će se ova linija nalaziti u sredini praznine, a njena širina neće promijeniti ukupnu širinu. Imovina se ne nasljeđuje.
Sintaksa
Odjeljak ( -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; ) 
Rice. 2. Razmaci između stupaca
4. Pozicioniranje elementa na nekoliko stupaca raspona stupaca
Svojstvo specificira broj stupaca koji će presijecati odabrani element. Nije naznačeno za blok kontejnera, već za određeni element unutar, na primjer, za zaglavlje.
Ako želite da se slika proteže na sve kolone, postavite img (prikaz: blok; -webkit-column-span: sve; column-span: sve;) . Imovina se ne nasljeđuje.
Sintaksa
H1 ( -webkit-column-span: all; column-span: all; ) 
Rice. 3. Pozicioniranje naslova na sve kolone
5. Stil razdjelne linije u stilu pravila kolone
Svojstvo stvara prazan prostor između stupaca vertikalna pruga- linija razdvajanja. Ako boja linije nije navedena, neki efekti neće biti prikazani. Nije naslijeđen.
| vrijednosti: | |
| nijedan | Zadana vrijednost znači da nema linije. Boja i širina određene za liniju se zanemaruju. |
| skriveno | Isto kao i kod vrijednosti none, linija je skrivena. |
| tačkasta | Prikazuje liniju kao skup kvadratnih tačaka. |
| isprekidano | Prikazuje liniju kao niz crtica. |
| solidan | Redovna linija. |
| duplo | Prikazuje liniju razdvajanja u obliku dvije paralelne tanke linije koje se nalaze na određenoj udaljenosti jedna od druge. Širina razdjelne linije nije navedena, ali zbir linija i razmaka između njih jednak je vrijednosti širine pravila kolone. |
| groove | Prikazuje volumetrijsku liniju utisnutu u platno. To se postiže stvaranjem sjene od dvije boje, jedne tamnije i jedne svjetlije. |
| greben | Prikazuje liniju razdvajanja volumena, tj. suprotan efekat od utora. |
| umetnuti | Displeji puna linija tamnije boje od specificirana boja linije. |
| početak | Prikazuje punu liniju s bojom specificiranom svojstvom kolone-pravilo-boja. |
| početni | Postavlja vrijednost svojstva na zadanu vrijednost. |
| nasljediti | Nasljeđuje vrijednost svojstva od roditeljskog elementa. |
Sintaksa
Odjeljak ( -webkit-column-rule-style: tačkasta; -moz-column-rule-style: točkasta; column-rule-style: točkasta; ) 
Rice. 4. Stil linije razdjelnice
6. Razdjelna linija širina kolona-pravilo-širina
Svojstvo postavlja širinu linije razdvajanja. Ne radi bez svojstva stila pravila stupca. Nije naslijeđen.
Sintaksa
Odjeljak ( -webkit-column-rule-style: dotted; -moz-column-rule-style: dotted; column-rule-style: dotted; -webkit-column-rule-width: 10px; -moz-column-rule- širina: 10px; širina pravila kolone: 10px) 
Rice. 5. Širina razdjelne linije
7. Boja linije razdvajanja kolona-pravilo-boja
Svojstvo vam omogućava da promijenite boju linije razdvajanja, koja nasljeđuje boju teksta. Nije naslijeđen.
Sintaksa
Odjeljak ( -webkit-column-rule-style: dotted; -webkit-column-rule-width: 5px; -webkit-column-rule-color: #59ACE7; -moz-column-rule-style: dotted; -moz- column-rule-width: -moz-column-rule-color: #59ACE7; 
Rice. 6. Boja linije razdvajanja
8. Kratak sažetak stilova razdjelnih linija pravila stupaca
Svojstvo vam omogućava da postavite tri svojstva razdjelne linije u jednoj deklaraciji—širina-pravila-kolone, stil-pravila kolone i boja-pravila kolone. Nije naslijeđen.
Sintaksa
Odjeljak ( -webkit-column-rule: 5px dotted #59ACE7; -moz-column-rule: 5px dotted #59ACE7; column-rule: 5px dotted #59ACE7; )
9. Postavljanje stupaca korištenjem svojstva jedne kolone
Nekretnina je kratka napomena svojstva column-width i column-count , istovremeno postavlja širinu i broj kolona. Nije naslijeđen.
Sintaksa
Odjeljak ( -webkit-columns: 100px 3; -moz-columns: 100px 3; stupci: 100px 3; )
CSS3 raspored sa više kolona olakšava definisanje više kolona teksta - baš kao u novinama:
Dnevni Ping
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 exercitation 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 do luprell te auzz. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Podrška za pretraživač
Brojevi u tabeli označavaju prvu verziju pretraživača koja u potpunosti podržava svojstvo.
Brojevi iza kojih slijedi -webkit- ili -moz- označavaju prvu verziju koja je radila s konzolom.
| Nekretnina | |||||
|---|---|---|---|---|---|
| kolona-broj | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| kolona-razmak | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| kolona-pravilo | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| kolona-pravilo-boja | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| stil pravila kolone | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| kolona-pravilo-širina | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| širina kolone | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
CSS3 svojstva više kolona
U ovom poglavlju ćete naučiti o tome sljedeća svojstva više kolona:
- kolona-broj
- kolona-razmak
- stil pravila kolone
- kolona-pravilo-width
- kolona-pravilo-boja
- kolona-pravilo
- raspon stupaca
- širina kolone
CSS3 Kreiranje više kolona
Svojstvo column-count specificira broj kolona na koje element treba biti podijeljen.
Sljedeći primjer će podijeliti tekst na
CSS3 Odredite razmak između kolona
Svojstvo column-gap specificira jaz između stupaca.
Sljedeći primjer definira razmak od 40 piksela između stupaca:
Rules Column CSS3
Svojstvo column-rule-style specificira stil pravila između stupaca:
primjer
div(
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
stil pravila kolone: čvrst;
}
Svojstvo column-rule-width specificira širinu ravnala između stupaca:
Svojstvo column-rule-color specificira boju pravila između kolona:
primjer
div(
-webkit-column-rule-color: svijetloplava; /* Chrome, Safari, Opera */
-moz-column-rule-color: svijetloplava; /* Firefox */
kolona-pravilo-boja: svijetloplava;
}
Svojstvo column-rule je skraćeno svojstvo za postavljanje svih svojstava column-rule-* iznad.
Sljedeći primjer postavlja pravila širine, stila i boje između stupaca:
primjer
div(
-webkit-column-rule: 1px puna svijetloplava; /* Chrome, Safari, Opera */
-moz-column-rule: 1px puna svijetloplava; /* Firefox */
kolona-pravilo: 1px puna svijetloplava;
}
Odredite koliko kolona stavka treba da obuhvata
Svojstvo column-span specificira koliko stupaca element treba da se proteže.
Sljedeći primjer ukazuje na to
element se mora prostirati u svim stupcima: Odredite širinu kolone
Sljedeći primjer pokazuje da predložena optimalna širina za stupce treba biti 100px:
CSS3 svojstva više kolona
Sljedeća tabela navodi sva svojstva više kolona.
Ovo svojstvo je dio stenografskog svojstva stupaca.
Pogledajte sva svojstva više kolona: kolona-broj, širina kolone, razmak stupca, pravilo kolone, raspon kolone, kolone.
Sintaksa
Selektor (broj kolona: broj | auto; )
Vrijednosti
Zadana vrijednost: auto.
Primjeri
Primjer
IN u ovom primjeru tekst će provaliti 3 kolone(naravno, u pretraživačima koji podržavaju više kolona, u drugim će to biti pravedno običan tekst u jednoj koloni):
#elem ( -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; text-align: justify; )
Rezultat izvršavanja koda:
Primjer. Automatska vrijednost
U ovom primjeru, širina kolone širina kolone je specificirana u 150px, i njihov broj kolona-broj stoji u značenju auto- pretraživač će sam odabrati potreban broj kolona i razmak između njih:
#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: justify ;
Rezultat izvršavanja koda:
Biti entuzijasta postao je njen društveni položaj, a ponekad, kada to nije ni htela, postala je entuzijasta, da ne bi prevarila očekivanja ljudi koji su je poznavali. Uzdržani osmijeh koji je neprestano igrao na licu Ane Pavlovne, iako nije odgovarao njenim zastarjelim crtama, izražavao je, poput razmažene djece, stalnu svijest o njenom dragom nedostatku koji ne želi, ne može i ne nalazi za shodno da se ispravi. sama. Usred razgovora o političkim akcijama, Ana Pavlovna se zahuktala. - Oh, nemoj mi pričati o Austriji! Ne razumijem ništa, možda, ali Austrija nikada nije htjela i ne želi rat. Ona nas izdaje. Rusija sama mora biti spasitelj Evrope. Naš dobročinitelj zna svoj visoki poziv i bit će mu vjeran. To je jedna stvar u koju vjerujem. Naš dobri i divni suveren ima najveću ulogu na svijetu, a on je toliko čestit i dobar da ga Bog neće ostaviti, i ispunit će svoj poziv da slomi hidru revolucije, koja je sada još strašnija u ličnosti ovog ubice i zlikovca. Samo mi moramo da se iskupimo za krv pravednika... Na koga se možemo osloniti, pitam vas?... Engleska sa svojim trgovačkim duhom neće i ne može da razume punu visinu duše cara Aleksandra. Odbila je očistiti Maltu. Ona želi da vidi, traži misao u osnovi naših postupaka. Šta su rekli Novosilcovu?... Ništa. Nisu razumeli, ne mogu da shvate nesebičnost našeg cara, koji sebi ne želi ništa, a hoće sve za dobro sveta. I šta su obećali? Ništa. A ono što su obećali neće se desiti! Pruska je već izjavila da je Bonaparte nepobediv i da cela Evropa ne može ništa protiv njega... A ja ne verujem ni na reč ni Hardenbergu ni Gaugvicu. Cette fameuse neutralite prussienne, ce n`est qu`un piege. [Ova ozloglašena neutralnost Pruske samo je zamka. ] Vjerujem u jednog Boga i u visoku sudbinu našeg dragog Cara. On će spasiti Evropu!.. - Odjednom je zastala sa osmehom podsmeha svom žaru. "Mislim", reče princ, smiješeći se, "da biste bili poslani umjesto našeg dragog Winzengerodea, na juriš bi dobili pristanak pruskog kralja." Tako si elokventan. Hoćeš li mi dati čaja?
