Vetitë me shumë kolona CSS3. Ngjyra e linjës ndarëse kolonë-rregull-ngjyrë

Një nga më vetitë më të dobishme specifikim i ri. Mbani mend se sa shumë duhet të vuani për t'u tërhequr në mënyrë që të krijoni një sipërfaqe prej 3, 4 ose 5 kolona me të njëjtën gjerësi në dizajn fluid dhe të mos përdorni tabela. Kjo është e drejtë, ferr. Tani mund të bëhet vetëm me disa Linjat CSS. Vërtetë, ka ende një mizë të vogël në vaj, por më shumë për këtë më vonë.

Pra, çfarë mjetesh kemi për të krijuar një bllok me shumë kolona.

Mos harroni se për shfletuesit mozilla dhe webkit ju duhet të kopjoni vetitë me parashtesa -kit në internet- Dhe -moz-.

Mendoj se është e qartë se si të punohet me këto prona. Megjithatë, unë do të vërej sa vijon. Si parazgjedhje, numërimi i kolonave është vendosur në automatik. Kjo do të thotë që nëse vendosni gjerësinë e kolonës, atëherë numri i kolonave do të llogaritet automatikisht.

Tani disa fjalë për çfarë shërben, ku mund të aplikohet dhe cilat janë kufizimet.

Në parim, numërimi i kolonave na referon edhe gazetave, dhe për ta thënë më plotësisht, shtypjes. Për çfarë ishte? Para së gjithash, është lexueshmëria, sepse Syri i njeriut i percepton më së miri rreshtat e tekstit me gjatësi mesatare prej 10 fjalësh. Gjithashtu, ndarja e tekstit në kolona ju lejon të organizoni më mirë përmbajtjen dhe të zvogëloni numrin e hapesire e lire Në faqe.

Aplikacion

Për çfarë mund të përdoret kjo pronë? Unë mendoj se përdorim optimal mund të merrni parasysh sa vijon - në faqet me një fushë të madhe qendrore, mund ta ndani tekstin në kolona. Avantazhi është se nëse nuk ndahet, atëherë nuk do të ketë asgjë të tmerrshme nga kjo.

Vendi i dytë për t'u përdorur, unë do të sugjeroja një lloj masiv menu vertikale, ku nevojiten blloqe me të njëjtën gjerësi. Por, nëse numërimi i kolonave nuk funksionon, ai do të dështojë.

Kufizimet

Nuk mund të vendosni vetitë e një kolone të veçantë, llojin e sfondit dhe gjerësinë, kështu që vetia nuk mund të zbatohet ende në paraqitjen e sajtit

Nëse vendosni lartësinë e kolonës, atëherë nëse ka shumë tekst, do të shtohen kolona shtesë. për t'i përshtatur atij. Por bekimi ai trajtohet përmes tejmbushjes: i fshehur.

Nëse blloku ndahet në kolona dhe specifikohet rregulli i kolonës, atëherë në rastin kur teksti vendoset në një kolonë, shfletuesit e uebkit do të shfaqin një vijë ndarëse, por shfletuesit e ngjashëm me Mozilla-n jo.

Ka edhe dy veti të tjera që janë në specifikim, por që nuk mbështeten nga asnjë shfletues. Ky është një ndërprerje kolone që mund të përdoret për të specifikuar se kur të fillojë kolona tjetër ( .container h3 (colona-break-fore:gjithmonë; )). Vetia e dytë, shtrirja e kolonës, ju lejon të shfaqni elementin në të gjitha kolonat, për shembull, titullin ( .container h1 (kolona-span: të gjitha; )).

Ato prona që janë në dispozicion nuk mbështeten fare nga gomari, për të mos përmendur disa varietete dhe versione të tjera të shfletuesit (duket se ka probleme me operën). Megjithëse, për gomarin ka një përpjekje për të shkruar një shtojcë, por unë do ta thërrisja atë rasti më i mirë beta. Sidoqoftë, autori nuk e fsheh këtë () .

Kaq për sot. Është për të ardhur keq që prona nuk mbështetet nga të gjithë dhe nuk ka hake. Edhe pse mbi të gjitha është për të ardhur keq që funksionaliteti nuk është ende plotësisht i disponueshëm dhe kjo metodë nuk mund të konsiderohet ende një tjetër në serinë për krijimin e paraqitjeve me shumë kolona. Mbetet për të shpresuar se konsorciumi do ta mendojë siç duhet.

NË këtë mësim 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 duhet të kontrollohet me kujdes 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 për t'u shfaqur, dhe e dyta përcakton gjerësinë e secilës kolonë. Të gjitha opsionet e tjera të kolonës do të përcaktohen nga gjerësia e disponueshme.

Le të 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 me vetinë e numërimit të kolonave është më i përshtatshëm për Modelet Fluid, pasi gjerësia e kolonave do të përshtatet kur ndryshon gjerësia e ekranit të shfletuesit.

Kontejnerët e altoparlantëve

Përdorimi i vetive të numërimit të kolonës ose të gjerësisë së kolonës krijon një enë të re ndërmjet element i jashtëm dhe përmbajtjes. Quhet një kontejner kolone, megjithëse nuk mund t'i ndryshoni vetitë për të.

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

Nëse bëni ndonjë element që noton në kontejnerin e kolonës, atëherë 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 kolonat. Ne mund të vendosim hapësirën midis kolonave me 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ë hyrje e shkurtër mund të përfaqësohet nga 3 veti që veprojnë në të njëjtën mënyrë si kur përcaktohen kufijtë e elementit:

• 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 diapazoni i kolonës

Ndoshta nuk do ta përdorni shpesh veçorinë e mbushjes së kolonës për të specifikuar mbushjen e kolonës. Kjo është një mënyrë për t'u treguar shfletuesve se sa përmbajtje duhet të vendosin në secilën kolonë.

Mund të përdorni vlerat automatike (të parazgjedhura) ose të balancës, të cilat do ta detyrojnë 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.

Hapësira e vendosur me veçorinë kolonë-span është shumë më e madhe vendosje e dobishme. Kjo lejon Elementi HTML shtrihen mbi disa kolona. Në figurën e mësipërme, kreu përdor pikërisht këtë veti.

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

Vetëm dy vlera janë të mundshme - të gjitha (të gjitha) ose asnjë (asgjë). Nuk do të mund të përdorësh 2 nga 3 kolona.

Ndërprerja e folësit

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

• Para elementit - pushim para:
• në element - thyej brenda: auto | gjithmonë | shmangi | majtas | drejtë | faqe | kolona | shmang faqen | shmangi-kolona
• Pas elementit - pushim pas: auto | shmangi | shmang faqen | shmangi-kolona

Përkufizimet e vlerave të përdorura:

• auto- Krijimi ose çaktivizimi i ndërprerjeve të faqeve/kolonave është i çaktivizuar.
• gjithmonë
• shmangni- Çaktivizo ndërprerjet e faqeve/kolonave.
• majtas- Gjeneroni një ose dy ndërprerje faqesh në mënyrë që Faqja tjetër formatuar si faqe në të majtë.
• drejtë- Gjeneroni një ose dy ndërprerje të faqeve në mënyrë që faqja tjetër të formatohet si faqe në të djathtë.s
• faqe- Krijoni gjithmonë një ndërprerje të faqes.
• kolonë- Gjithmonë krijoni një ndërprerje kolone.
• shmangni faqen- Çaktivizo ndërprerjen e faqes.
• shmangi-kolona— Çaktivizo ndërprerjen e kolonës.

Qëllimi i të gjitha këtyre vetive dhe vlerave është 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ë kolona sesa vendet për të nxjerrë:

• Kufizimi i lartësisë së kolonës mund të rezultojë në kolona shtesë, në vend të hapësirës së mjaftueshme për dalje.
• Kufizimi i madhësisë së faqes mund të shkaktojë zhvendosjen e kolonave shtesë në faqen tjetër.
• Vendosja e një ndërprerjeje kolone mund të rezultojë në kolonë shtesë do të nxirret jashtë hapësirë ​​në dispozicion për dalje ose në faqen tjetër.

konkluzioni

Vetitë CSS3 për krijimin e një paraqitjeje me shumë kolona mund të jenë një mjet i shkëlqyeshëm. Por aplikimi i tyre kërkon testim të kujdesshëm të mbështetjes në shfletues të ndryshëm.

Ato mund të përdoren për të ndryshuar pamjen një projekt ekzistues pa ristrukturim global të strukturës.

Kolonat CSS3- koncepti i shënjimit me shumë kolona, ​​i cili ju lejon të ndani përmbajtjen në kolona. Kolonat mund të përmbajnë tituj, tekst, tabela, fotografi dhe çdo element tjetër inline.

Krijimi i paraqitjes me shumë kolona me modelin e kolonave CSS3

Mbështetja e shfletuesit

IE: 10.0
Firefox: 9.0 -moz-
Krom: 4.0 -kit në internet-
safari: 3.0 -kit në internet-
opera: 11.1, 15.0 -kit në internet-
iOS Safari: 9, 7.1 -kit në internet-
Opera Mini: 8
Shfletuesi Android: 2.1 -kit në internet-
krom për Android: 44 -kit në internet-

1. Numri i kolonave-numërimi i kolonave

Vetia ju lejon të vendosni në mënyrë eksplicite numrin e kërkuar të kolonave dhe gjerësia e tyre do të llogaritet bazuar në gjerësinë e hapësirës së disponueshme. Si parazgjedhje, shfletuesi shton një hapësirë ​​horizontale prej 1em midis kolonave. Nëse gjerësia e figurës është më e madhe se gjerësia e kolonës, ajo do të pritet. Nëse gjerësia e kolonës specifikohet në të njëjtën kohë me numërimin e kolonës, atëherë vlera e numërimit të kolonës do të merret parasysh numri maksimal kolona (kolona). Prona nuk është e trashëguar.

Sintaksë

Seksioni ( -webkit-column-count: 3; -moz-column-count: 3; kolona-count: 3; )
Oriz. 1. Një shembull i paraqitjes me shumë kolona

2. Gjerësia e kolonës - gjerësia e kolonës

Vetia ju lejon të ndani përmbajtjen në kolona pa vendosur vetinë e numërimit të kolonave. Numri i kolonave do të varet nga numri i kolonave gjerësia e dhënë mund të futet në një enë. E pa trashëguar.

Sintaksë

Seksioni ( -Kitu i internetit-gjerësia e kolonës: 100 px; -moz-gjerësia e kolonës: 100 px; gjerësia e kolonës: 100 px; )

3. Gjerësia e hapësirës së bardhë ndërmjet kolonave të boshllëkut të kolonës

Vetia kontrollon hapësirën midis kolonave. Nëse kolonat kanë një vijë ndarëse të vendosur duke përdorur veçorinë kolonë-rregull, atëherë kjo linjë do të vendoset në mes të hendekut dhe gjerësia e saj nuk do të ndryshojë gjerësinë e përgjithshme. Prona nuk është e trashëguar.

Sintaksë

Seksioni ( -webkit-column-gap: 40px; -moz-column-gap: 40px; kolona-boshllëk: 40px; )
Oriz. 2. Hapësira ndërmjet kolonave

4. Pozicionimi i një elementi në kolona të shumta të hapësirës së kolonës

Vetia specifikon numrin e kolonave që elementi i zgjedhur do të kryqëzojë. Nuk specifikohet për bllokun e kontejnerit, por për një element specifik brenda, për shembull, për kokën.

Nëse dëshironi që imazhi të përfshijë të gjitha kolonat, përdorni img (ekrani: bllok; -webkit-column-span: të gjitha; kolona-span: të gjitha;) . Prona nuk është e trashëguar.

Sintaksë

H1 ( -webkit-column-span: të gjitha; shtrirja e kolonës: të gjitha; ) Oriz. 3. Pozicionimi i kokës në të gjitha kolonat

5. Stili i vijës ndarëse kolona-rregull-stili

Vetia krijon brenda hapësirës boshe midis kolonave shirit vertikal- vijë ndarëse. Nëse ngjyra e linjës nuk është vendosur, atëherë disa efekte nuk do të shfaqen. E pa trashëguar.

Sintaksë

Seksioni (-webkit-column-rule-style: me pika; -moz-column-rule-style: me pika; kolona-rule-style: me pika; )
Oriz. 4. Stili i vijës ndarëse

6. Gjerësia e vijës ndarëse kolona-rregulla-gjerësia

Vetia përcakton gjerësinë e vijës ndarëse. Nuk funksionon pa veçorinë e stilit të rregullave të kolonës. E pa trashëguar.

Sintaksë

Seksioni (-webkit-column-rule-style: pikë-pika; -moz-column-rule-style: me pika; kolona-rule-style: me pika; -webkit-column-rule-width: 10px; -moz-column-rule- gjerësia: 10 px; gjerësia e rregullit të kolonës: 10 px; )
Oriz. 5. Gjerësia e vijës ndarëse

7. Ngjyra e vijës së ndarjes kolonë-rregull-ngjyrë

Vetia ju lejon të ndryshoni ngjyrën e vijës ndarëse, e cila trashëgon ngjyrën e tekstit. E pa trashëguar.

Sintaksë

Seksioni ( -webkit-column-rule-style: me pika; -webkit-column-rule-width: 5px; -webkit-column-rule-color: #59ACE7; -moz-column-rule-style: me pika; -moz- gjerësia e rregullit të kolonës: 5 px; -moz-column-rule-color: #59ACE7; stili i rregullit të kolonës: me pika; gjerësia e rregullit të kolonës: 5 px; ngjyra e rregullit të kolonës: #59ACE7; )
Oriz. 6. Ngjyra e vijës ndarëse

8. Stilet e vijave ndarëse të stenografisë me rregulla kolonash

Vetia ju lejon të vendosni tre veti të linjës ndarëse në një deklaratë - kolonë-rule-width , kolonë-rule-style dhe kolonë-rule-color. E pa trashëguar.

Sintaksë

Seksioni ( -kit-ueb-rregulli i kolonës: 5 pikselë me pika #59ACE7; -moz-rregulli i kolonës: 5 pikselë me pika #59ACE7; rregulli i kolonës: 5 pikselë me pika #59ACE7; )

9. Vendosja e kolonave me një veti me një kolonë të vetme

Prona perfaqeson shënim i shkurtër karakteristikat e kolonës-width dhe kolonës-count , cakton njëkohësisht gjerësinë dhe numrin e kolonave. E pa trashëguar.

Sintaksë

Seksioni ( -kollonat e paketës së internetit: 100 px 3; -moz-kolonat: 100 px 3; kolonat: 100 px 3; )

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

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 parashtesën.

Vetitë e shumëfishta të kolonave CSS3

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

• numërimi i kolonave
• kolonë-boshllëk
• kolonë-rregull-stili
• kolonë-rregull-gjerësi
• kolonë-rregull-ngjyrë
• kolonë-rregull
• shtrirja e kolonës
• 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.

Shembulli i mëposhtëm do ta ndajë tekstin në