AT ovu lekciju govorićemo o korišćenju CSS3 svojstava za pravljenje šablona sa više kolona. Pošto je ovo CSS3, potrebno je prethodno pažljivo provjeriti korištenje njegovih svojstava.
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 prikaz, a drugi postavlja širinu svake kolone. Sve ostale opcije stupaca će biti određene 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 postaviti i broj kolona i njihovu širinu. Međutim, u praksi je, po pravilu, potrebno samo jedno.
Definiranje kolona sa svojstvom column-count je pogodnije za Fluid Templates, jer će se širine kolona prilagođavati kako se širina ekrana pretraživača mijenja.
Kontejneri za zvučnike
Korištenje svojstava broja kolona ili širine stupca stvara novi kontejner između vanjski element i sadržaj. Zove se kontejner kolone, iako ne možete promijeniti svojstva za njega.
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 napravite bilo koji element koji pluta u kontejneru stupca, onda će on biti ograničen na kontejner stupca, a ne na vanjski kontejner. Postavljanje širine elementa stupca u % će također raditi - širina će se izračunati iz širine kontejnera kolone, a ne vanjskog spremnika.
Razmaci i separatori stupaca
Postoji mala kontrola nad kolonama. Možemo postaviti razmak između kolona pomoću svojstva 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 unos može biti predstavljen sa 3 svojstva koja djeluju na isti način kao i kod definiranja granica elementa:
- širina pravila kolone
- 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.
Popunjavanje kolona i raspon
Vjerovatno nećete često koristiti svojstvo kolone-fill da biste odredili dopunu kolone. Ovo je način da se pretraživačima kaže koliko sadržaja treba staviti u svaku kolonu.
Možete koristiti automatske (podrazumevane) ili vrednosti balansa, što će naterati pretraživač da pokuša da ravnomerno popuni kolone. U praksi, nema velike razlike između rezultata korišćenja ovih vrednosti.
Skup raspona sa svojstvom raspona stupaca je mnogo veći korisna postavka. To dozvoljava HTML element protegnuti preko nekoliko stubova. Na gornjoj slici, naslov koristi upravo ovo svojstvo.
H2 (raspon kolone: sve)
Moguće su samo dvije 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 razbijanje sadržaja u koloni oko elementa.
- Prije elementa - breakbefore:
- U elementu - provali unutra: auto | uvijek | izbjegavati | lijevo | desno | stranica | stupac | izbjegavaj stranicu | izbjegavati-kolona
- Nakon elementa - pauza nakon: auto | izbjegavati | izbjegavaj stranicu | izbjegavati-kolona
Definicije korištenih vrijednosti:
- auto- Generisanje ili onemogućavanje prijeloma stranica/kolona je onemogućeno.
- uvijek
- izbjegavati- Onemogućite prijelome stranica/kolona.
- lijevo— Generirajte jedan ili dva prijeloma stranice tako da sljedeća stranica bude formatirana 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.
- izbegavaj stranicu- Onemogući prijelom stranice.
- izbjegavati-kolona— Onemogućite prijelom kolone.
Smisao svih ovih svojstava i vrijednosti je da određeni sadržaj počinje u novoj koloni.
Ako slika ili neprekidna riječ premašuje širinu kolone, bit će odsječena u sredini prostora na kojem je postavljen separator.
Moguće je ograničiti stupce tako da će element imati više kolona nego mjesta za izlaz:
- Ograničavanje visine stupca može rezultirati dodatnim stupcima, umjesto dovoljno prostora za izlaz.
- Ograničenje veličine stranice može rezultirati dodatne koloneće biti premješten na sljedeću stranicu.
- Navođenje prijeloma stupca može uzrokovati da se dodatni stupac pojavi izvana raspoloživog prostora za izlaz ili na sljedećoj stranici.
Zaključak
CSS3 svojstva za kreiranje rasporeda sa više kolona mogu biti odličan alat. Ali njihova primjena zahtijeva pažljivo testiranje podrške u raznim pretraživačima.
Mogu se koristiti za promjenu izgled postojeći projekat bez globalnog restrukturiranja strukture.
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
AT ovaj primjer tekst će biti razbijen 3 kolone(naravno, u pretraživačima koji podržavaju više kolona, u ostalim će jednostavno biti običan tekst u jednoj koloni):
#elem ( -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; text-align: justify; )
Rezultat izvršenja koda:
Primjer. auto value
U ovom primjeru je navedena širina kolone širine stupca 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šenja koda:
Biti entuzijasta postao je njen društveni položaj, a ponekad, kada to nije ni htela, postala je entuzijasta, da ne bi zavarala očekivanja ljudi koji su je poznavali. Uzdržani osmeh koji je neprestano igrao na licu Ane Pavlovne, iako nije išao na njene zastarele crte lica, izražavao je, kao kod razmažene dece, stalnu svest o njenoj slatkoj mani, od koje ona ne želi, ne može i ne nalazi za potrebno da se ispravi. Usred razgovora o političkim akcijama, Ana Pavlovna se uzbudila. - Oh, nemoj mi pričati o Austriji! Ne razumijem ništa, možda, ali Austrija nikad 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. Evo jedne stvari u koju vjerujem. Naš ljubazni i divni suveren ima najveću ulogu na svijetu, a toliko je čestit i dobar da ga Bog neće ostaviti, i ispunit će svoj poziv da slomi hidru revolucije koja je sada još strašnija pred licem ovog ubice i zlikovca. Samo mi moramo da se iskupimo za krv pravednika... Kome da se nadamo, pitam vas?... Engleska sa svojim trgovačkim duhom neće i ne može da razume svu uzvišenost duše cara Aleksandra. Odbila je da očisti Maltu. Ona želi vidjeti, tražeći pozadinu misli o našim postupcima. Šta su rekli Novosilcovu?... Ništa. Nisu shvatili, 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 šta su obećali, a to se neće 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 u jednu 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, smešeći se, „da biste bili poslani umesto našeg dragog Winzengerodea, da biste na juriš dobili pristanak pruskog kralja. Tako si elokventan. Hoćeš li mi dati čaj?
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 prefiksom.
| 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 |
| širina pravila kolone | 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
- širina pravila kolone
- 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.
AT sljedeći primjerće podijeliti tekst na
CSS3 Postavite razmak između kolona
Svojstvo column-gap specificira razmak između stupaca.
Sljedeći primjer definira razmak od 40 piksela između stupaca:
Pravila CSS3 kolona
Svojstvo column-rule-style definira 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 postavlja širinu ravnala između stupaca:
column-rule-color svojstvo postavlja 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 pravilo š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 stupaca element 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.
Jedan od mnogih najkorisnijih svojstava nova specifikacija. Upamtite koliko treba da patite zbog drkanja kako biste napravili površinu od Isti širini je potrebno u fluidnom dizajnu i ne koristiti tabele. Tako je, dovraga. 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 | razmak kolona | razmak stupaca: 2em; |
| širina kolone | širina kolone | širina kolone: 200px |
| kolona-pravilo |
linija razdvajanja između stupaca (format notacije je sličan svojstvu granice) |
kolona-pravilo: 1px solid #000; |
| širina pravila kolone | širina linije razdvajanja | column-rule-width: 5px; |
| stil pravila kolone | stil linije separatora | column-rule-style: tačkasta; |
| kolona-pravilo-boja | boja linije razdvajanja | kolona-pravilo-boja: #fff; |
Ne zaboravite da za pretraživače mozilla i webkit morate 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 postavljen na automatski. To znači da ako postavite širinu kolone, broj kolona će se automatski izračunati.
Sada nekoliko riječi o tome čemu služi, gdje se može primijeniti i koja su ograničenja.
U principu, broj kolona nas upućuje i na novine, a potpunije rečeno, na štampanje. za šta je to bilo? Prije svega, to je čitljivost, jer Ljudsko oko najbolje percipira redove teksta prosječne dužine od 10 riječi. Također, razdvajanje teksta u kolone omogućava vam da bolje organizirate sadržaj i smanjite broj slobodan prostor Na stranici.
Aplikacija
Za šta se ova nekretnina može koristiti? Pretpostavljam da optimalno korišćenje možete uzeti u obzir sljedeće - na web lokacijama s velikim središnjim poljem možete podijeliti tekst u stupce. Prednost je u tome što ako se ne odvoji, onda od ovoga neće biti ništa strašno.
Drugo mjesto za korištenje, ja bih predložio neku vrstu masivnog vertikalni meni, gdje su potrebni blokovi iste širine. Ali, ako broj kolona ne radi, neće uspjeti.
Ograničenja
Ne možete postaviti svojstva zasebne kolone, vrstu pozadine i širinu, tako da se svojstvo još ne može primijeniti na izgled stranice
Ako postavite visinu kolone, onda će se dodati dodatni stupci ako ima puno teksta. da mu odgovara. Ali blagoslov se tretira kroz prelivanje: skriveno.
Ako je blok podijeljen na stupce i specificirano je pravilo stupca, onda u slučaju kada je tekst smješten u jednu kolonu, webkit pretraživači linija razdvajanjaće se prikazati, ali pretraživači slični Mozili neće.
Postoje još dva svojstva koja se nalaze 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ću kolonu ( .kontejner h3 (prelom stupca-prije:uvijek; )). Drugo svojstvo, column-span, omogućava vam da prikažete element u svim kolonama, na primjer, naslov ( .container h1 ( column-span:all; )).
Ta svojstva koja su dostupna magarac uopšte ne podržava, a da ne govorimo o nekim drugim varijantama i verzijama pretraživača (izgleda da ima problema sa operom). Mada, za magarca postoji pokušaj da se napiše dodatak, ali ja bih ga pozvao najbolji slucaj beta. Međutim, autor to ne krije () .
To je sve za danas. Šteta što imovinu ne podržavaju svi i nema hakova. Iako je najviše od svega š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. Ostaje za nadati se da će konzorcij dobro razmisliti o tome.
