Shembull. Vlera automatike

NË këtë mësim Ne do të flasim për përdorimin e vetive CSS3 për të ndërtuar një shabllon me shumë kolona. Meqenëse ky është CSS3, përdorimi i vetive të tij kërkon testim të kujdesshëm paraprakisht.

Përdorimi i kolonave të shumta

Për të krijuar kolona të shumta, mund të përdorni vetitë:

• numërimi i kolonave
• kolonë-gjerësi

E para vendos numrin e saktë të kolonave që do të dalin, dhe e fundit përcakton gjerësinë e secilës kolonë. Të gjithë parametrat e tjerë të kolonës do të përcaktohen nga gjerësia e disponueshme.

Ne përdorim shënimin HTML:

Kodi CSS do të jetë si ky:

Div (numërimi i kolonave: 3)

ose si kjo:

Div (gjerësia e kolonës: 15em) /* Mund të përdorni gjithashtu px */

Ekziston gjithashtu një regjistrim i shkurtër:

Div (kolona: 3 20em)

Në një hyrje të shkurtër, mund të vendosni si numrin e kolonave ashtu edhe gjerësinë e tyre. Sidoqoftë, në praktikë, si rregull, kërkohet vetëm një gjë.

Përcaktimi i kolonave duke përdorur vetinë e numërimit të kolonave është më i përshtatshëm për shabllonet fluide, pasi gjerësia e kolonave do të përshtatet ndërsa gjerësia e ekranit të shfletuesit ndryshon.

Kontejnerët me kolonë

Përdorimi i vetive të numërimit të kolonës ose gjerësisë së kolonës shkakton krijimin e një kontejneri të ri ndërmjet tyre element i jashtëm dhe përmbajtjes. Quhet një enë kolone, megjithëse nuk mund t'i ndryshoni vetitë e saj.

Kolonat janë rreshtuar në një rresht. Të gjithë kontejnerët e kolonave në një rresht do të kenë të njëjtën lartësi, megjithëse përmbajtja e tyre mund të ndryshojë ndjeshëm.

Nëse bëni një element të notojë në një kontejner kolone, ai do të kufizohet në kontejnerin e kolonës dhe jo në kontejnerin e jashtëm. Vendosja e gjerësisë së elementit të kolonës në % do të funksionojë gjithashtu - gjerësia do të llogaritet nga gjerësia e kontejnerit të kolonës, jo nga kontejneri i jashtëm.

Hapësirat dhe ndarësit e kolonave

Ka pak kontroll mbi altoparlantët. Ne mund të vendosim hapësirën midis kolonave duke përdorur veçorinë kolonë-gap. Si parazgjedhje, vetia kolonë-gap është vendosur në 1em.

Div (boshllëk kolone: ​​2em)

Ju gjithashtu mund të vendosni ndarësin vertikal duke përdorur veçorinë kolonë-rregull:

Div (rregulli i kolonës: solid i hollë #ccc)

Një rekord i shkurtër mund të përfaqësohet nga 3 veti që veprojnë në të njëjtën mënyrë si kur përcaktohen kornizat e elementeve:

• kolonë-rregull-gjerësi
• kolonë-rregull-stili
• kolonë-rregull-ngjyrë

Hapësira është e barabartë në lartësi me kontejnerin e kolonës, dhe ndarësi vendoset në qendër të hapësirës. Hapësira dhe ndarësi kanë të njëjtën lartësi. Nëse një kolonë nuk ka përmbajtje, ndarja midis saj dhe kolonave ngjitur nuk do të shfaqet.

Mbushja dhe hapësira e kolonës

Ndoshta nuk do ta përdorni shumë shpesh veçorinë kolonë-fill për të specifikuar se si duhet të plotësohen kolonat. Kjo është një mënyrë për t'u treguar shfletuesve se sa përmbajtje duhet të vendosin në secilën kolonë.

Ju mund të përdorni automatik (parazgjedhur) ose ekuilibër, gjë që do ta detyrojë shfletuesin të përpiqet të mbushë kolonat në mënyrë të barabartë. Në praktikë, nuk ka shumë dallime midis rezultateve të përdorimit të këtyre vlerave.

Kompleti i hapësirës duke përdorur veçorinë kolonë-span është dukshëm më i madh vendosje e dobishme. Kjo lejon Elementi HTML shtrihen mbi disa kolona. Në foton e mësipërme, kreu përdor pikërisht këtë veti.

H2 (hapësira e kolonës: të gjitha)

Ekzistojnë vetëm dy vlera të mundshme - të gjitha (të gjitha) ose asnjë (asgjë). Nuk do të mund të përdorësh 2 nga 3 kolonat.

Ndërprerja e folësit

Ekzistojnë tre veti të ngjashme që mund të përdoren për të ndërprerë përmbajtjen në një kolonë rreth një elementi.

• te elementi - pushim para:
• Në element - thyer brenda: auto | gjithmonë | shmangi | majtas | drejtë | faqe | kolona | shmangi-faqe | shmangi-kolona
• Pas elementit - pushim pas: auto | shmangi | shmangi-faqe | shmangi-kolona

Përkufizimet e vlerave të përdorura:

• auto— Gjenerimi ose ndalimi i ndërprerjeve të faqeve/kolonave janë çaktivizuar.
• gjithmonë
• shmangni— Çaktivizo ndërprerjet e faqeve/kolonave.
• majtas- Gjeneroni një ose dy ndërprerje të faqeve në mënyrë që faqja tjetër të formatohet si faqja në të majtë.
• drejtë- Gjeneroni një ose dy ndërprerje të faqeve në mënyrë që faqja tjetër të jetë e formatuar si faqet në të djathtë.s
• faqe- Krijoni gjithmonë një ndërprerje të faqes.
• kolonë- Gjithmonë krijoni një ndërprerje kolone.
• shmangi-faqe— Çaktivizo ndërprerjet e faqeve.
• shmangi-kolona— Ndaloni thyerjet e kolonave.

Qëllimi i të gjitha këtyre vetive dhe vlerave është të sigurohet që një përmbajtje e caktuar të fillojë në një kolonë të re.

Nëse një imazh ose fjalë e vazhdueshme tejkalon gjerësinë e kolonës, ajo do të pritet në mes të hapësirës ku është vendosur ndarësi.

Është e mundur të kufizohen kolonat në mënyrë që elementi të ketë më shumë folës sesa vendet për të nxjerrë:

• Kufizimi i lartësisë së kolonës mund të rezultojë në kolona shtesë në vend që të sigurojë hapësirë ​​të mjaftueshme për dalje.
• Kufiri i madhësisë së faqes mund të shkaktojë kolona shtesë do të zhvendoset në faqen tjetër.
• Përcaktimi i një ndërprerjeje kolone mund të bëjë që një kolonë shtesë të vizatohet jashtë hapësirë ​​në dispozicion për dalje ose në faqen tjetër.

konkluzioni

Karakteristikat CSS3 për krijimin e një shablloni me shumë kolona mund të jenë një mjet i shkëlqyeshëm. Por përdorimi i tyre kërkon kontroll të kujdesshëm të mbështetjes në shfletues të ndryshëm.

Me ndihmën e tyre ju mund të ndryshoni pamjen një projekt ekzistues pa ndryshime të mëdha në strukturë.

Kjo veti është pjesë e veçorisë së stenografisë së kolonave.

Shihni të gjitha vetitë e shumë kolonave: numërimi i kolonave , gjerësia e kolonës , boshllëku i kolonës , rregulli i kolonës , shtrirja e kolonës , kolonat .

Sintaksë

Zgjedhësi (numri i kolonave: numri | automatik; )

vlerat

Vlera e parazgjedhur: auto.

Shembuj

Shembull

NË në këtë shembull teksti do të shpërthejë 3 kolona(natyrisht, në shfletuesit që mbështesin shumë kolona, ​​në të tjerët do të jetë vetëm Teksti i thjeshtë në një kolonë):

#elem ( -webkit-column-count: 3; -moz-column-count: 3; kolona-count: 3; text-align: justify; )

Rezultati i ekzekutimit të kodit:

Shembull. Vlera automatike

Në këtë shembull, gjerësia e gjerësisë së kolonës përcaktohet në 150 px, dhe numrin e tyre numërimi i kolonave qëndron në kuptim auto- vetë shfletuesi do të zgjedhë numrin e kërkuar të kolonave dhe hapësirën midis tyre:

#elem ( -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; -webkit-column-width: 150px; -moz-column-width: 150px; kolona-width: 150px ; text-align: justify;)

Rezultati i ekzekutimit të kodit:

Të qenit entuziast u bë pozicioni i saj shoqëror dhe ndonjëherë, kur as nuk donte, ajo, për të mos mashtruar pritshmëritë e njerëzve që e njihnin, bëhej entuziast. Buzëqeshja e përmbajtur që luante vazhdimisht në fytyrën e Anna Pavlovna-s, megjithëse nuk përputhej me tiparet e saj të vjetruara, shprehte, si fëmijë të llastuar, një vetëdije të vazhdueshme për të metën e saj të dashur, nga e cila ajo nuk dëshiron, nuk mund dhe nuk e sheh të nevojshme ta korrigjojë. veten e saj. Në mes të një bisede për veprimet politike, Anna Pavlovna u nxeh. - Oh, mos më thuaj për Austrinë! Unë nuk kuptoj asgjë, ndoshta, por Austria kurrë nuk ka dashur dhe nuk dëshiron luftë. Ajo po na tradhton. Vetëm Rusia duhet të jetë shpëtimtari i Evropës. Bamirësi ynë e njeh thirrjen e tij të lartë dhe do të jetë besnik ndaj saj. Kjo është një gjë në të cilën besoj. Sovrani ynë i mirë dhe i mrekullueshëm ka rolin më të madh në botë, dhe ai është aq i virtytshëm dhe i mirë sa Zoti nuk do ta lërë atë dhe ai do të përmbushë thirrjen e tij për të shtypur hidrën e revolucionit, e cila tani është edhe më e tmerrshme në person. të këtij vrasësi dhe horr. Vetëm ne duhet të shlyejmë gjakun e të drejtëve... Te kush mund të mbështetemi, ju pyes?... Anglia, me frymën e saj tregtare, nuk do dhe nuk mund ta kuptojë lartësinë e plotë të shpirtit të perandorit Aleksandër. Ajo nuk pranoi të pastronte Maltën. Ajo dëshiron të shohë, duke kërkuar mendimin themelor të veprimeve tona. Çfarë i thanë Novosiltsovit?... Asgjë. Ata nuk e kuptuan, nuk mund ta kuptojnë vetëmohimin e perandorit tonë, i cili nuk do asgjë për vete dhe do gjithçka për të mirën e botës. Dhe çfarë premtuan ata? Asgjë. Dhe ajo që premtuan nuk do të ndodhë! Prusia ka deklaruar tashmë se Bonaparti është i pathyeshëm dhe se e gjithë Evropa nuk mund të bëjë asgjë kundër tij... Dhe unë nuk besoj asnjë fjalë as të Hardenbergut dhe as të Gaugwitz-it. Cette fameuse neutralite prussienne, ce n`est qu`un piege. [Ky neutralitet famëkeq i Prusisë është vetëm një kurth. ] Unë besoj në një Zot dhe në fatin e lartë të Perandorit tonë të dashur. Ai do ta shpëtojë Evropën!.. - Ajo u ndal befas me një buzëqeshje talljeje ndaj zjarrtë e saj. "Unë mendoj," tha princi duke buzëqeshur, "se nëse do të ishit dërguar në vend të Winzengerode tonë të dashur, do të kishit marrë pëlqimin e mbretit prusian me furtunë". Ju jeni kaq elokuent. A do të më japësh pak çaj?

Paraqitja me shumë kolona CSS3 e bën të lehtë përcaktimin e kolonave të shumta të tekstit - ashtu si në gazeta:

Ping ditor

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 ushtrime 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 facilit zzril delenit. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim supozoj.

Mbështetja e shfletuesit

Numrat në tabelë tregojnë versionin e parë të shfletuesit që mbështet plotësisht pronën.

Numrat e ndjekur nga -webkit- ose -moz- tregojnë versionin e parë që funksionoi me tastierën.

Vetitë me shumë kolona CSS3

Në këtë kapitull do të mësoni për vetitë e mëposhtme kolona të shumta:

• numërimi i kolonave
• boshllëk kolone
• kolonë-rregull-stili
• kolonë-rregull-gjerësi
• kolonë-rregull-ngjyrë
• kolonë-rregull
• shtyllë-hapësirë
• kolonë-gjerësi

CSS3 Krijimi i kolonave të shumta

Vetia e numërimit të kolonave specifikon numrin e kolonave në të cilat duhet të ndahet elementi.

NË shembullin e mëposhtëm do ta ndajë tekstin në