V ovu lekciju mi ćemo vas provesti kroz korištenje CSS3 svojstava za izradu predloška s više stupaca. Budući da je ovo CSS3, korištenje njegovih svojstava zahtijeva pažljivu prethodnu provjeru.
Korištenje više stupaca
Za izradu više stupaca možete koristiti svojstva:
- kolona-broj
- širina stupca
Prvi postavlja točan broj stupaca za prikaz, a drugi postavlja širinu svakog stupca. Svi ostali parametri stupca bit će određeni dostupnom širinom.
Koristimo HTML oznaku:
CSS kod bi bio ovakav:
Div (broj stupaca: 3)
ili ovako:
Div (širina stupca: 15em) / * Također možete koristiti px * /
Dostupan je i kratki unos:
Div (stupci: 3 20em)
U kratkom zapisu možete odrediti i broj stupaca i njihovu širinu. U praksi, međutim, obično je potreban samo jedan.
Definiranje stupaca pomoću svojstva broja stupaca prikladnije je za fluidne izglede, jer će se širina stupaca prilagođavati kako se širina zaslona preglednika mijenja.
Kontejneri za stupce
Korištenje svojstava broja stupaca ili širine stupca stvara novi spremnik između vanjski element i sadržaj. Zove se spremnik stupca, iako za njega ne možete promijeniti svojstva.
Stupci su poravnati u liniji. Svi spremnici stupaca u redu imat će iste visine iako njihov sadržaj može značajno varirati.
Ako element učinite da pluta u spremniku stupca, tada će biti ograničen spremnikom stupca, a ne vanjskim spremnikom. Postavljanje širine elementa stupca u% također će raditi - širina će se izračunati iz širine spremnika stupca, a ne vanjskog spremnika.
Razmak između stupaca i separatori
Malo je kontrole nad zvučnicima. Možemo postaviti razmak između stupaca pomoću svojstva column-gap. Prema zadanim postavkama, svojstvo razmaka stupaca postavljeno je na 1em.
Div (razmak između stupaca: 2em)
Također možete postaviti okomiti razdjelnik pomoću svojstva stupca pravilo:
Div (pravilo stupca: tanka puna #ccc)
Kratak zapis može se predstaviti s 3 svojstva, koja djeluju na isti način kao i kod definiranja okvira elemenata:
- širina pravila stupca
- stil-pravilo stupaca
- stupac-pravilo-boja
Razmak je iste visine kao okvir stupca, a separator je postavljen u središte razmaka. Razmak i separator su iste visine. Ako stupac nema sadržaja, neće se prikazati separator između njega i susjednih stupaca.
Ispuna i raspon stupca
Vjerojatno nećete često koristiti svojstvo stupca-fill za određivanje popunjavanja stupca. Ovo je način da se preglednicima kaže koliko sadržaja treba staviti u svaki stupac.
Možete koristiti automatski (zadano) ili balans kako biste natjerali preglednik da pokuša ravnomjerno ispuniti stupce. U praksi nema velike razlike između rezultata korištenja ovih vrijednosti.
Skup raspona pomoću svojstva raspona stupaca znatno je veći korisna postavka... Dopušta HTML element protežu preko nekoliko stupova. Na gornjoj slici, naslov koristi ovo svojstvo.
H2 (raspon stupca: sve)
Postoje samo dvije moguće vrijednosti - sve (sve) ili ništa (ništa). Ne možete koristiti 2 od 3 stupca.
Prekidanje kolona
Postoje tri slična svojstva koja možete koristiti za prekid sadržaja stupca oko elementa.
- Prije elementa - pauza-prije:
- U elementu - provala iznutra: auto | uvijek | izbjegavati | lijevo | desno | stranica | stupac | izbjegavaj-stranica | izbjegavati-stupac
- Nakon elementa - pauza nakon: auto | izbjegavati | izbjegavaj-stranica | izbjegavati-stupac
Definicije korištenih vrijednosti:
- auto- Generiranje ili onemogućavanje prijeloma stranica/stupaca je onemogućeno.
- stalno
- Izbjegavajte- Spriječite prijelome stranica / stupaca.
- lijevo- Generirajte jedan ili dva prijeloma stranice tako da sljedeća stranica bude formatirana kao stranica slijeva.
- pravo- Generirajte jedan ili dva prijeloma stranice tako da sljedeća stranica bude formatirana kao stranice s desne strane.
- stranica- Uvijek generirajte prijelom stranice.
- stupac- Uvijek generirajte prijelom stupca.
- izbjegavati-stranica- Spriječite prijelom stranice.
- izbjegavati-stupac- Onemogući prijelom stupca.
Smisao svih ovih svojstava i vrijednosti je da određeni sadržaj počinje u novom stupcu.
Ako slika ili kontinuirana riječ premašuje širinu stupca, tada će biti izrezana u sredini intervala u 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 zvučnika može rezultirati dodatnim zvučnicima, a ne dovoljnim izlaznim prostorom.
- Ograničavanje veličine stranice može uzrokovati dodatni stupci bit će premješten na sljedeću stranicu.
- Postavljanje prijeloma stupca može uzrokovati izvlačenje dodatnog stupca slobodan prostor za izlaz ili na sljedećoj stranici.
Zaključak
CSS3 svojstva za kreiranje izgleda s više stupaca mogu biti izvrstan alat. Ali njihova upotreba zahtijeva pažljivo testiranje podrške u različitim preglednicima.
Uz njihovu pomoć možete se promijeniti izgled postojeći projekt bez globalne prerade strukture.
Ovo svojstvo dio je stenografskog svojstva stupaca.
Pogledajte sva svojstva za više stupaca: broj stupaca, širina stupca, razmak stupca, pravilo stupca, raspon stupca, stupci.
Sintaksa
Birač (broj stupaca: broj | auto;)
Vrijednosti
Zadana vrijednost: auto.
Primjeri
Primjer
V ovaj primjer tekst će provaliti 3 stupca(naravno, u preglednicima koji podržavaju višestupac, ostalo će samo običan tekst u jednom stupcu):
#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 stupca navedena je u 150px, i njihov broj kolona-broj stoji u značenju auto- sam preglednik će 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 ; text-align: justify;)
Rezultat izvršavanja koda:
Biti entuzijasticom postao je njezin društveni položaj, a ponekad, kada to nije ni htjela, postala je entuzijasticom, kako ne bi zavarala očekivanja ljudi koji su je poznavali. Suzdržani osmijeh koji je neprestano igrao na licu Ane Pavlovne, iako nije išao na njezine zastarjele crte lica, izražavao je, poput razmažene djece, stalnu svijest o njezinoj slatkoj mani, od koje ne želi, ne može i ne nalazi za potrebno ispravan. Usred razgovora o političkim akcijama, rasplamsala se Anna Pavlovna. - Ma, nemojte mi pričati o Austriji! Ne razumijem ništa, možda, ali Austrija nikada nije htjela i ne želi rat. Ona nas izdaje. Rusija bi sama trebala biti spasitelj Europe. Naš dobročinitelj zna svoj visoki poziv i bit će mu vjeran. Ovo je jedna stvar u koju vjerujem. Naš ljubazni i divni suveren imat će najveću ulogu na svijetu, a on je toliko krepostan i dobar da ga Bog neće ostaviti, i ispunit će svoj poziv da slomi hidru revolucije, koja je sada još strašnija u osoba ovog ubojice i zlikovca. Samo mi moramo okajati krv pravednika... Kome se možemo nadati, pitam vas?... Engleska sa svojim trgovačkim duhom neće razumjeti i ne može razumjeti punu visinu duše cara Aleksandra. Odbila je očistiti Maltu. Ona želi vidjeti, traži naknadnu misao o našim postupcima. Što su rekli Novosiltsovu?... Ništa. Nisu razumjeli, ne mogu razumjeti nesebičnost našeg cara, koji sebi ne želi ništa, a želi sve za dobro svijeta. A što su obećali? Ništa. I ono što su obećali, a to se neće dogoditi! Pruska je već izjavila da je Bonaparte nepobjediv i da cijela Europa ne može ništa protiv njega... I ne vjerujem ni u jednu riječ ni Hardenbergu ni Gaugwitzu. Cette fameuse neutralite prussienne, ce n`est qu`un piege. [Ova ozloglašena neutralnost Pruske samo je zamka. ] Vjerujem u jednoga Boga i u visoku sudbinu našeg dragog cara. On će spasiti Europu!.. - Iznenada je zastala sa smiješkom poruge zbog svog žara. “Mislim,” reče princ smiješeći se, “da biste bili poslani umjesto našeg dragog Vincennerodea, na juriš bi dobili pristanak pruskog kralja. Tako si elokventan. Hoćeš li mi dati čaj?
CSS3 izgled 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 du luptalotum te prezz 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 | |||||
|---|---|---|---|---|---|
| kolona-broj | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| stupac-razmak | 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 |
| stil-pravilo stupaca | 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 više stupaca
U ovom ćete poglavlju naučiti o sljedeća svojstva više stupaca:
- kolona-broj
- stupac-razmak
- stil-pravilo stupaca
- širina pravila stupca
- stupac-pravilo-boja
- stupac-pravilo
- raspon stupaca
- širina stupca
CSS3 Stvaranje više stupaca
svojstvo column-count specificira broj stupaca s kojima element treba podijeliti.
V sljedeći primjer podijelit će tekst na
CSS3 Navedite razmak između stupaca
Svojstvo column-gap specificira razmak između stupaca.
Sljedeći primjer definira razmak od 40 piksela između stupaca:
Stupac CSS3 pravila
Svojstvo column-rule-style definira stil pravila između stupaca:
primjer
div (
-webkit-column-rule-style: solid; / * Chrome, Safari, Opera * /
-moz-stup-pravilo-stil: čvrsta; / * Firefox * /
stil-pravilo stupaca: čvrst;
}
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-kolona-pravilo-boja: svijetloplava; / * Firefox * /
kolona-pravilo-boja: svijetloplava;
}
Svojstvo column-rule je skraćeno svojstvo za postavljanje svih gornjih svojstava column-rule-*.
Sljedeći primjer postavlja širinu, stil i boju pravila između stupaca:
primjer
div (
-webkit-column-rule: 1px puna svijetloplava; / * Chrome, Safari, Opera * /
-moz-column-rule: 1px puna svijetloplava; / * Firefox * /
stupac-pravilo: 1px čvrsta svijetloplava;
}
Odredite koliko stupaca stavka treba obuhvatiti
Svojstvo column-span određuje na koliko stupaca element treba da se proteže.
Sljedeći primjer ukazuje na to
element mora pokriti u svim stupcima: Odredite širinu stupca
Sljedeći primjer pokazuje da predložena, optimalna širina stupca treba biti 100px:
CSS3 svojstva više stupaca
Sljedeća tablica navodi sva svojstva višestupca.
Jedan od naj najkorisnija svojstva nova specifikacija. Sjetite se kako se trebate mučiti zbog trzanja kako biste napravili područje od 3, 4 ili 5 stupaca iste širine u gumenom dizajnu, a da pritom ne koristite tablice. Tako je, pakleni pakao. Sada se to može učiniti sa samo nekoliko linije CSS-a... Istina, još uvijek postoji mala mušica, ali o tome kasnije.
Dakle, koje alate imamo za stvaranje bloka s više stupaca.
|
Vlasništvo |
Opis |
|
|---|---|---|
| kolona-broj | broj stupaca | broj stupaca: 3; |
| stupac-razmak | razmak stupaca | razmak stupca: 2em; |
| širina stupca | širina stupca | širina stupca: 200px; |
| stupac-pravilo |
linija razdvajanja između stupaca (format je sličan svojstvu obruba) |
pravilo stupca: 1px solid # 000; |
| širina pravila stupca | širina razdjelne linije | širina pravila stupca: 5px; |
| stil-pravilo stupaca | stil razdjelne linije | stupac-pravilo-stil: točkasto; |
| stupac-pravilo-boja | boja razdjelne linije | kolona-pravilo-boja: #fff; |
Ne zaboravite da za preglednike mozilla i webkit morate duplicirati svojstva s prefiksima -webkit- i -moz-.
Mislim da je kako raditi s ovim svojstvima tako jasno. Međutim, želio bih istaknuti sljedeće. Prema zadanim postavkama, broj stupaca je automatski. To znači da ako postavite širinu stupca, broj stupaca ć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 stupaca nas upućuje na novine, a potpunije rečeno, na tiskarsku industriju. Zašto je to učinjeno? Prije svega, to je lakoća čitanja, jer ljudsko oko najbolje prepoznaje retke teksta prosječne duljine od 10 riječi. Također, dijeljenje teksta u stupce omogućuje vam bolju organizaciju sadržaja i smanjenje količine slobodan prostor Na stranici.
Primjena
Za što se ova nekretnina može koristiti? vjerujem da optimalno korištenje možemo uzeti u obzir sljedeće - na stranicama s velikim središnjim poljem možete podijeliti tekst u stupce. Plus je da ako se ne podijeli, od ovoga neće biti ništa strašno.
Kao drugo mjesto za korištenje, predložio bih neko masivno okomiti izbornik gdje su potrebni blokovi iste širine. Ali, ako brojanje stupaca ne radi, onda će izaći dovratak.
Ograničenja
Ne možete postaviti svojstva zasebnog stupca, kao što su pozadina i širina, tako da svojstvo još nije primijenjeno na izgled web-mjesta.
Ako postavite visinu stupca, tada će se dodati dodatni stupci ako ima puno teksta. da ga uklopi. No, na sreću, tretira se preko preljeva: skriveno.
Ako je blok podijeljen u stupce i postavljeno je pravilo stupca, onda u slučaju kada je tekst smješten u jedan stupac, preglednici web kompleta razdjelna linijaće se prikazati, 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 označavanje kada započeti sljedeći stupac ( .kontejner h3 (prelom stupca-prije: uvijek;)). Drugo svojstvo, column-span, omogućuje prikaz elementa u svim stupcima, na primjer, naslov ( .spremnik h1 (raspon stupca: sve;)).
Svojstva koja su dostupna magarac uopće ne podržava, a da ne spominjemo neke druge varijante i verzije preglednika (izgleda da ima problema s operom). Iako, za magarca postoji pokušaj pisanja dodatka, ali ja bih ga pozvao najboljem slučaju beta. Međutim, autor to ne krije ().
To je sve za danas. Šteta što vlasništvo ne podržavaju svi i nema hakova. Iako je najviše od svega šteta što funkcionalnost još nije u potpunosti dostupna i za sada se ova metoda ne može smatrati još jednom u nizu za izradu rasporeda s više stupaca. Ostaje za nadati se da će konzorcij o tome dobro razmisliti.
