Jedan od naj najkorisnija svojstva nova specifikacija. Sjetite se koliko se trebate namučiti zbog drkanja da biste u fluidnom dizajnu napravili prostor od 3, 4 ili 5 stupaca iste širine i ne koristili tablice. Tako je, dovraga. Sada se to može učiniti sa samo nekoliko njih CSS linije. Istina, još uvijek postoji mala mušica u masti, ali o tome kasnije.
Dakle, koje alate imamo za stvaranje bloka s više stupaca.
|
Vlasništvo |
Opis |
|
|---|---|---|
| brojanje stupaca | broj stupaca | broj stupaca: 3; |
| stupac-gap | razmak stupaca | razmak stupca: 2em; |
| širina stupca | širina stupca | širina stupca: 200 px |
| stupac-pravilo |
linija razdjelnika između stupaca (format notacije sličan je svojstvu granice) |
stupac-pravilo: 1px solid #000; |
| širina-pravila-stupca | širina crta razdvajanja | stupac-pravilo-širina: 5px; |
| stupac-pravilo-stil | stil linije razdjelnika | stupac-pravilo-stil: točkasto; |
| stupac-pravilo-boja | boja razdjelne linije | boja-pravila-stupca: #fff; |
Ne zaboravite da za preglednike mozilla i webkit trebate duplicirati svojstva s prefiksima -webkit- i -moz-.
Mislim da je jasno kako raditi s tim svojstvima. Međutim, primijetit ću sljedeće. Prema zadanim postavkama, broj stupaca postavljen je na automatski. To znači da ako postavite širinu stupca, tada će se broj stupaca izračunati automatski.
Sada nekoliko riječi o tome čemu služi, gdje se može primijeniti i koja su ograničenja.
U načelu, brojanje stupaca upućuje nas i na novine, odnosno potpunije rečeno na tisak. Čemu je to služilo? Prije svega, to je čitljivost, jer Ljudsko oko najbolje percipira retke teksta prosječne dužine 10 riječi. Također, odvajanje teksta u stupce omogućuje bolju organizaciju sadržaja i smanjenje broja slobodan prostor Na stranici.
Primjena
Za što se može koristiti ova nekretnina? pretpostavljam da optimalno korištenje možete razmotriti sljedeće - na stranicama s velikim središnjim poljem možete podijeliti tekst u stupce. Prednost je u tome što ako se ne odvoji, od ovoga neće biti ništa strašno.
Drugo mjesto za korištenje, predložio bih neku vrstu masiva okomiti izbornik, gdje su potrebni blokovi iste širine. Ali, ako brojanje stupaca ne radi, neće uspjeti.
Ograničenja
Ne možete postaviti svojstva zasebnog stupca, vrstu pozadine i širinu, tako da se svojstvo još ne može primijeniti na izgled stranice
Ako postavite visinu stupca, ako ima puno teksta, dodat će se dodatni stupci. da mu pristane. Ali blagoslov se tretira kroz prelijevanje: skriveno.
Ako je blok podijeljen u stupce i navedeno je pravilo stupca, tada će u slučaju kada je tekst smješten u jedan stupac webkit preglednici prikazati razdjelnu liniju, ali preglednici slični Mozilli neće.
Postoje još dva svojstva koja su u specifikaciji, ali ih nijedan preglednik ne podržava. Ovo je prijelom stupca koji se može koristiti za određivanje kada započeti sljedeći stupac ( .kontejner h3 ( prijelom stupca-prije:uvijek; )). Drugo svojstvo, column-span, omogućuje prikaz elementa u svim stupcima, na primjer, naslov ( .spremnik h1 ( raspon-kolona:sve; )).
Ta svojstva koja su dostupna magarac uopće ne podržava, a o nekim drugim varijantama i verzijama preglednika da i ne govorimo (čini se da ima problema s operom). Iako, za magarca postoji pokušaj pisanja dodatka, ali ja bih ga uključio najbolji slučaj beta. Međutim, autor to ne skriva () .
To je sve za danas. Šteta je što vlasništvo ne podržavaju svi i nema hakova. Iako je prije svega šteta što funkcionalnost još nije u potpunosti dostupna i ova se metoda još ne može smatrati još jednom u nizu za izradu izgleda s više stupaca. Ostaje se nadati da će konzorcij dobro razmisliti.
NA ovu lekciju govorit ćemo o korištenju CSS3 svojstava za izradu predloška s više stupaca. Budući da je ovo CSS3, korištenje njegovih svojstava treba prethodno pažljivo provjeriti.
Korištenje više stupaca
Za stvaranje više stupaca možete koristiti svojstva:
- brojanje stupaca
- širina stupca
Prvi postavlja točan broj stupaca za prikaz, a drugi postavlja širinu svakog stupca. Sve ostale opcije stupaca bit će određene dostupnom širinom.
Upotrijebimo HTML označavanje:
CSS kod će biti ovakav:
Div (broj stupaca: 3)
ili ovako:
Div (širina stupca: 15em) /* Također možete koristiti px */
Dostupna je i kratka snimka:
Div (stupci: 3 20em)
U kratkom unosu možete postaviti i broj stupaca i njihovu širinu. Međutim, u praksi se u pravilu traži samo jedno.
Definiranje stupaca sa svojstvom brojanja stupaca prikladnije je za fluidne predloške, jer će se širine stupaca prilagođavati promjeni širine zaslona preglednika.
Spremnici za zvučnike
Korištenje svojstava column-count ili column-width stvara novi spremnik između vanjski element i sadržaj. Zove se spremnik stupca, iako mu ne možete promijeniti svojstva.
Stupci su poredani u nizu. Svi spremnici stupaca u redu imat će iste visine iako se njihov sadržaj može bitno razlikovati.
Ako bilo koji element učinite plutajućim u spremniku stupca, on će biti ograničen na spremnik stupca, a ne na vanjski spremnik. Postavljanje širine elementa stupca u % također će funkcionirati - širina će se izračunati iz širine spremnika stupca, a ne vanjskog spremnika.
Razmaci i razdjelnici stupaca
Malo je kontrole nad stupcima. Možemo postaviti razmak između stupaca sa svojstvom column-gap. Prema zadanim postavkama, svojstvo column-gap postavljeno je na 1em.
Div (razmak između stupaca: 2em)
Također možete postaviti okomiti razdjelnik koristeći svojstvo column-rule:
Div (pravilo stupca: tanko čvrsto #ccc)
Kratki unos može se predstaviti s 3 svojstva koja djeluju na isti način kao kod definiranja granica elementa:
- širina-pravila-stupca
- stupac-pravilo-stil
- stupac-pravilo-boja
Razmak je po visini jednak kontejneru kolone, a separator je postavljen u središte razmaka. Razmak i separator imaju istu visinu. Ako stupac nema sadržaja, separator između njega i susjednih stupaca neće biti prikazan.
Popunjavanje stupaca i raspon
Vjerojatno nećete često koristiti svojstvo column-fill za određivanje ispune stupca. Ovo je način da preglednicima kažete koliko sadržaja da stave u svaki stupac.
Možete koristiti vrijednosti auto (zadano) ili ravnotežu (uravnoteženo), što će natjerati preglednik da pokuša ravnomjerno ispuniti stupce. U praksi nema velike razlike između rezultata korištenja ovih vrijednosti.
Skup raspona sa svojstvom column-span je puno veći korisna postavka. Dopušta HTML element rastegnuti na nekoliko stupaca. Na gornjoj slici, naslov koristi upravo ovo svojstvo.
H2 (raspon stupaca: sve)
Moguće su samo dvije vrijednosti - all (sve) ili none (ništa). Nećete moći koristiti 2 od 3 stupca.
Prekid govornika
Postoje tri slična svojstva koja se mogu koristiti za razbijanje sadržaja u stupcu oko elementa.
- Prije elementa - prekid prije:
- U elementu - provaliti unutra: auto | uvijek | izbjegavati | lijevo | desno | stranica | stupac | izbjegavati stranicu | izbjegavati-stupac
- Nakon elementa - pauza nakon: auto | izbjegavati | izbjegavati stranicu | izbjegavati-stupac
Definicije korištenih vrijednosti:
- auto- Generiranje ili onemogućavanje prijeloma stranica/stupaca je onemogućeno.
- stalno
- Izbjegavajte- Onemogućite prijelome stranica/stupaca.
- lijevo- Generirajte jedan ili dva prijeloma stranica tako da Sljedeća stranica formatirana kao stranica s lijeve strane.
- pravo- Generirajte jedan ili dva prijeloma stranica tako da sljedeća stranica bude oblikovana kao stranice s desne strane.s
- stranica- Uvijek generirajte prijelom stranice.
- stupac- Uvijek generirajte prijelom stupca.
- izbjegavati stranicu- Onemogući prijelom stranice.
- izbjegavati-stupac— Onemogući prijelom stupca.
Poanta svih ovih svojstava i vrijednosti je da određeni sadržaj počinje u novom stupcu.
Ako slika ili kontinuirana riječ prelazi širinu stupca, bit će odrezana u sredini prostora gdje se nalazi separator.
Moguće je ograničiti stupce tako da će element imati više stupaca nego mjesta za izlaz:
- Ograničavanje visine stupca može rezultirati dodatnim stupcima, umjesto dovoljno prostora za ispis.
- Ograničavanje veličine stranice može uzrokovati premještanje dodatnih stupaca na sljedeću stranicu.
- Postavljanje prijeloma stupca može rezultirati dodatni stupac bit će izvađeno slobodan prostor za ispis ili na sljedećoj stranici.
Zaključak
CSS3 svojstva za stvaranje izgleda s više stupaca mogu biti izvrstan alat. Ali njihova primjena zahtijeva pažljivo testiranje podrške u različitim preglednicima.
Mogu se koristiti za promjenu izgled postojeći projekt bez globalnog restrukturiranja strukture.
CSS3 stupci- koncept označavanja s više stupaca, koji vam omogućuje dijeljenje sadržaja u stupce. Stupci mogu sadržavati naslove, tekst, tablice, slike i bilo koje druge umetnute elemente.
Stvaranje izgleda s više stupaca s CSS3 modelom stupaca
Podrška za preglednik
IE: 10.0
Firefox: 9,0 -moz-
Krom: 4.0 -webkit-
safari: 3.0 -webkit-
opera: 11.1, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: 8
Android preglednik: 2.1 -webkit-
Krom za Android: 44 -webkit-
1. Broj stupaca column-count
Svojstvo vam omogućuje eksplicitno postavljanje potrebnog broja stupaca, a njihova širina će se izračunati na temelju širine dostupnog prostora. Prema zadanim postavkama preglednik dodaje horizontalni razmak od 1 em između stupaca. Ako je širina slike veća od širine stupca, bit će izrezana. Ako je stupac-width naveden u isto vrijeme kao i broj stupaca, tada će se uzeti u obzir vrijednost broja stupaca najveći broj stupci (kolone). Imovina se ne nasljeđuje.
Sintaksa
Odjeljak ( -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; ) 
Riža. 1. Primjer izgleda s više stupaca
2. Širina stupca širina stupca
Svojstvo vam omogućuje da podijelite sadržaj u stupce bez postavljanja svojstva brojanja stupaca. Broj stupaca ovisit će o tome koliko stupaca zadana širina može stati u kontejner. Nije naslijeđeno.
Sintaksa
Odjeljak ( -webkit-column-width: 100px; -moz-column-width: 100px; column-width: 100px; )
3. Širina bijelog prostora između stupaca razmaka stupaca
Svojstvo kontrolira razmak između stupaca. Ako stupci imaju liniju razdjelnika postavljenu pomoću svojstva column-rule, ta će se linija nalaziti u sredini razmaka, a njezina širina neće promijeniti ukupnu širinu. Imovina se ne nasljeđuje.
Sintaksa
Odjeljak ( -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; ) 
Riža. 2. Razmak između stupaca
4. Pozicioniranje elementa na više stupaca raspona stupaca
Svojstvo određuje broj stupaca koje će odabrani element presijecati. Određuje se ne za blok spremnika, već za određeni element unutar, na primjer, za zaglavlje.
Ako želite da slika obuhvaća sve stupce, koristite img (display: block; -webkit-column-span: all; column-span: all;) . Imovina se ne nasljeđuje.
Sintaksa
H1 ( -webkit-column-span: sve; column-span: sve; ) 
Riža. 3. Pozicioniranje zaglavlja na svim stupcima
5. Stil razdjelne linije stupac-pravilo-stil
Svojstvo stvara unutar praznog prostora između stupaca okomita pruga- crta razdvajanja. Ako boja linije nije postavljena, neki efekti neće biti prikazani. Nije naslijeđeno.
| Vrijednosti: | |
| nikakav | Zadana vrijednost znači da nema linije. Boja i širina navedene za liniju se zanemaruju. |
| skriven | Slično s vrijednošću none, linija je skrivena. |
| točkasta | Prikazuje liniju kao skup kvadratnih točaka. |
| isprekidano | Prikazuje liniju kao niz crtica. |
| čvrsta | Normalna linija. |
| dvostruko | Prikazuje razdjelnu crtu kao dvije paralelne tanke crte međusobno razmaknute. Širina linije razdjelnika nije specificirana, ali zbroj linija i razmak između njih jednak je vrijednosti stupca-rule-width. |
| utor | Prikazuje 3D liniju utisnutu u platno. To se postiže stvaranjem sjene s dvije boje, jednom tamnijom i jednom svjetlijom. |
| greben | Prikazuje liniju razdvajanja volumena, tj. suprotan učinak utora . |
| umetnuti | Prikazi puna linija tamnije boje od postavljena boja linije. |
| početak | Prikazuje punu liniju u boji određenoj svojstvom column-rule-color. |
| početni | Postavlja vrijednost svojstva na zadanu vrijednost. |
| naslijediti | Nasljeđuje vrijednost svojstva od nadređenog elementa. |
Sintaksa
Odjeljak ( -webkit-column-rule-style: dotted; -moz-column-rule-style: dotted; column-rule-style: dotted; ) 
Riža. 4. Stil razdjelne linije
6. Širina crte razdvajanja stupac-pravilo-širina
Svojstvo postavlja širinu linije razdvajanja. Ne radi bez svojstva column-rule-style. Nije naslijeđeno.
Sintaksa
Odjeljak ( -webkit-column-rule-style: dotted; -moz-column-rule-style: dotted; column-rule-style: dotted; -webkit-column-rule-width: 10px; -moz-column-rule- width: 10px; column-rule-width: 10px; ) 
Riža. 5. Širina linije razdvajanja
7. Boja linije razdvajanja kolona-pravilo-boja
Svojstvo vam omogućuje promjenu boje linije razdvajanja, koja nasljeđuje boju teksta. Nije naslijeđeno.
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: 5px; -moz-column-rule-color: #59ACE7; column-rule-style: dotted; column-rule-width: 5px; column-rule-color: #59ACE7; ) 
Riža. 6. Boja razdjelne linije
8. Stenografski stilovi linija za razdvajanje stupaca
Svojstvo vam omogućuje da postavite tri svojstva linije razdjelnika u jednoj deklaraciji - column-rule-width, column-rule-style i column-rule-color. Nije naslijeđeno.
Sintaksa
Odjeljak ( -webkit-column-rule: 5px dotted #59ACE7; -moz-column-rule: 5px dotted #59ACE7; column-rule: 5px dotted #59ACE7; )
9. Postavljanje stupaca s jednim svojstvom stupca
Nekretnina predstavlja kratka bilješka svojstva column-width i column-count , istovremeno postavlja širinu i broj stupaca. Nije naslijeđeno.
Sintaksa
Odjeljak ( -webkit-columns: 100px 3; -moz-columns: 100px 3; stupci: 100px 3; )
CSS3 raspored s više stupaca olakšava definiranje više stupaca 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 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 augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Podrška za preglednik
Brojevi u tablici označavaju prvu verziju preglednika koja u potpunosti podržava svojstvo.
Brojevi iza kojih slijedi -webkit- ili -moz- označavaju prvu verziju koja je radila s prefiksom.
| Vlasništvo | |||||
|---|---|---|---|---|---|
| brojanje stupaca | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| stupac-gap | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| stupac-pravilo | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| stupac-pravilo-boja | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0-webkit 11.1 |
| stupac-pravilo-stil | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0-webkit 11.1 |
| širina-pravila-stupca | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0-webkit 11.1 |
| širina stupca | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0-webkit 11.1 |
CSS3 svojstva s više stupaca
U ovom ćete poglavlju naučiti o sljedeća svojstva više stupaca:
- brojanje stupaca
- stupac-gap
- stupac-pravilo-stil
- širina-pravila-stupca
- stupac-pravilo-boja
- stupac-pravilo
- raspon stupca
- širina stupca
CSS3 Stvaranje više stupaca
Svojstvo column-count određuje broj stupaca na koje bi element trebao biti podijeljen.
Sljedeći primjer podijelit će tekst na
CSS3 Postavite razmak između stupaca
Svojstvo column-gap određuje razmak između stupaca.
Sljedeći primjer definira razmak od 40 piksela između stupaca:
CSS3 pravila za stupce
svojstvo column-rule-style definira stil pravila između stupaca:
primjer
div (
-webkit-column-rule-style: čvrst; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
svojstvo column-rule-width postavlja širinu ravnala između stupaca:
svojstvo column-rule-color postavlja boju pravila između stupaca:
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 gornjih svojstava column-rule-*.
Sljedeći primjer postavlja pravilo širine, stila i boje između stupaca:
primjer
div (
-webkit-column-rule: 1px jednobojna svijetloplava; /* Chrome, Safari, Opera */
-moz-column-rule: 1px jednobojna svijetloplava; /* Firefox */
stupac-pravilo: 1px jednobojno svjetloplavo;
}
Odredite koliko stupaca element treba obuhvatiti
Svojstvo raspona stupaca određuje koliko stupaca element treba obuhvaćati.
Na to ukazuje sljedeći primjer
element mora obuhvaćati sve stupce: Navedite širinu stupca
Sljedeći primjer pokazuje da bi predložena optimalna širina za stupce trebala biti 100 piksela:
CSS3 svojstva više stupaca
Sljedeća tablica navodi sva svojstva s više stupaca.
Ovo svojstvo je dio skraćenog svojstva stupaca.
Pogledajte sva svojstva s više stupaca: broj stupaca, širina stupca, razmak u stupcu, pravilo stupca, raspon raspona stupaca, stupci.
Sintaksa
Birač (broj stupaca: broj | automatski; )
Vrijednosti
Zadana vrijednost: auto.
Primjeri
Primjer
NA ovaj primjer tekst će biti razbijen 3 stupca(naravno, u preglednicima koji podržavaju više stupaca, u ostalima će biti samo čisti tekst u jednom stupcu):
#elem ( -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; text-align: justify; )
Rezultat izvršenja koda:
Primjer. automatska vrijednost
U ovom primjeru, širina stupca širine stupca navedena je u 150 px, i njihov broj brojanje stupaca stoji u značenju auto- preglednik će sam odabrati potreban broj stupaca 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 ; poravnanje teksta: poravnanje; )
Rezultat izvršenja koda:
Biti entuzijast postao je njezin društveni položaj, a ponekad, kada to nije ni htjela, ona je, da ne bi izmamila očekivanja ljudi koji su je poznavali, postajala entuzijast. Suzdržani smiješak koji je neprestano igrao na licu Ane Pavlovne, iako nije išao na njene zastarjele crte lica, izražavao je, kao u razmažene djece, stalnu svijest o njenom slatkom nedostatku, od kojeg ona ne želi, ne može i ne nalazi da je potrebno. da se ispravi. Usred razgovora o političkim akcijama Anna Pavlovna se uzbudila. - Ma, nemoj mi pričati o Austriji! Ja možda ništa ne razumijem, ali Austrija nikada nije htjela i ne želi rat. Ona nas izdaje. Samo Rusija mora biti spasitelj Europe. Naš dobročinitelj zna svoj visoki poziv i bit će mu vjeran. Evo jedne stvari u koju vjerujem. Naš dobri i divni vladar ima najveću ulogu na svijetu, a toliko je čestit i dobar da ga Bog neće ostaviti, i on će ispuniti svoj poziv da slomi hidru revolucije, koja je sada još strašnija u osobi. ovog ubojice i zlikovca. Samo mi moramo okajati krv pravednika... Kome da se nadamo, pitam vas?... Engleska sa svojim trgovačkim duhom neće i ne može shvatiti svu uzvišenost duše cara Aleksandra. Odbila je očistiti Maltu. Ona želi vidjeti, tražeći pozadinu naših djela. Što su rekli Novosilcovu?... Ništa. Nisu razumjeli, ne mogu razumjeti nesebičnost našeg cara, koji neće ništa za sebe, a želi sve za dobro svijeta. I što su obećali? Ništa. A što su obećali, a to se neće dogoditi! Pruska je već izjavila da je Bonaparte nepobjediv i da mu cijela Europa ne može ništa... A ja ne vjerujem ni u jednu riječ ni Hardenbergu ni Gaugwitzu. Cette fameuse neutralite prussienne, ce n`est qu`un piege. [Ova notorna neutralnost Pruske samo je zamka. ] Vjerujem u jednoga Boga i u visoku sudbinu našeg dragog cara. On će spasiti Europu!... - Zastala je odjednom sa smiješkom rugajući se svom žaru. “Mislim”, rekao je princ, smiješeći se, “da ste vi bili poslani umjesto našeg dragog Winzengerodea, da biste dobili pristanak pruskog kralja na juriš. Baš si elokventan. Hoćeš li mi dati čaja?
