Si një projektues faqosjeje, unë gjithmonë jam mërzitur seriozisht nga fakti që trashësia e kufirit në CSS merret parasysh kur formohet gjerësia e bllokut. Jam dakord që kështu është më e drejtë, por në disa raste kjo është thjesht një padrejtësi e hapur, e cila sjell shumë probleme shtesë.
Një problem i tillë ishte se ishte e pamundur për mua të shtroja një plan urbanistik me shtrirje të përkryer të barabartë të blloqeve përgjatë skajeve. Disa blloka gjithmonë, po, zvarriteshin nga skajet e të gjithë të tjerëve. Ky problem u zbut nga fakti se "kjo zvarritje" ishte maksimumi 1-2 piksele, dhe më shpesh klienti thjesht nuk e vuri re atë. Por personalisht më shqetësoi shumë.
Është njësoj si të blesh E rreme kineze Orë zvicerane. Duket se gjithçka duket saktësisht e njëjtë, por atëherë ju vetë e kuptoni se kjo është një false.
Vetëm pak teori
Standardi CSS thotë se gjerësia përfundimtare e një blloku formohet nga madhësia e mbushjes, gjerësia e kornizës (nëse korniza ka 2 skaje horizontale, atëherë kjo madhësi duhet gjithashtu të shumëzohet me 2) dhe gjerësia e tekstit . Ky kuptim gjerësia, të cilin të gjithë tregojnë në bllok div dhe është gjerësia e tekstit. Shumë njerëz mendojnë se kjo është gjerësia e bllokut, por nuk është ashtu. Pikerisht kete mendoja edhe une.
Ekziston një mjet në CSS që ju lejon të anashkaloni këtë gjendje dhe lejon parametrin css gjerësia vendosni gjerësinë e bllokut pa marrë parasysh mbushjen dhe kufijtë.
Zgjidhja e problemit
Për ta bërë më të lehtë për t'u kuptuar, këtu është një shembull luftarak:
Opsione -moz-box-sizing dhe -webkit-box-sizing janë të nevojshme në mënyrë që versionet më të vjetra të shfletuesve Firefox dhe Safari të kuptojnë se nuk është e nevojshme të përfshihet gjerësia e kufirit dhe madhësia e mbushjes në këtë rast.
Çdo specialist duhet të kërkojë çdo ditë informacione të reja në fushën e tyre të veprimtarisë. Në fund të fundit, jo më kot thonë se jeta është një lëvizje vetëm përpara. Nëse keni jetuar një ditë dhe nuk keni mësuar asgjë të re prej saj, atëherë sigurohuni që e keni jetuar këtë ditë kot!
P.S. Për mua, si një zhvillues i personalizuar faqesh interneti, është një test shumë serioz - promovimi i faqes në motorin e kërkimit. Për mua të gjitha këto Motorë kërkimi, SEO është një pyll i errët që përpiqem t'ua “dhuroj” njerëzve të tjerë, pasi një person mund të jetë profesionist vetëm në një, në fushën e tij. Nuk kam nevojë për dikë tjetër.
Disa mësime më parë, ne shikuam paraqitje skematike blloku i një faqe interneti, dhe gjithashtu folëm shkurtimisht për një pronë të tillë CSS si kufiri, me të cilin mund të vendosni kufijtë për një element. Këtë herë ne do ta shikojmë këtë pronë në më shumë detaje duke përdorur shembuj.
Kufiri ndodhet midis margjinës dhe mbushjes. Kjo do të thotë se diferenca është mbrapa kufiri. Kufiri mund të vendoset si nga të katër anët (sikur të mbyllet blloku në një kornizë), ashtu edhe nga një, dy ose tre anët. Në CSS, ju mund të kontrolloni trashësinë, ngjyrën dhe stilin e kufijve. Le ta studiojmë këtë në më shumë detaje.
border-width: gjerësia e kufirit
Nëpërmjet vetitë kufitare-width vendos gjerësinë e kufirit. Më shpesh, kjo madhësi specifikohet në pixel. Mund të vendosni gjerësi të njëjta ose të ndryshme për të katër kufijtë, për shembull:
/* të 4 kufijtë janë 2 px të gjerë: */ border-width: 2px; /* kufijtë e sipërm dhe të poshtëm janë 2 px të gjera, majtas dhe djathtas janë 4 px të gjera: */ border-width: 2px 4px; /* kufiri i sipërm - 2 px, majtas dhe djathtas - 6 px, poshtë - 3 px: */ gjerësia e kufirit: 2px 6px 3px; /* kufiri i sipërm - 2px, djathtas - 3px, poshtë - 4px, majtas - 5px: */ gjerësia e kufirit: 2px 3px 4px 5px;
Për më tepër, ka fjalë kyçe për të specifikuar gjerësinë e kufirit:
- kufi i hollë - 2 px i gjerë;
- e mesme - kufiri i gjerë 4 px;
- trashë - 6 px kufiri i gjerë.
border-color: ngjyra e kufirit
Vetia border-color vendos ngjyrën për kufijtë. Ngjyrat mund të specifikohen në çdo format CSS: fjalë kyçe, heksadecimal ose RGB, cilado që është më e përshtatshme për ju. Për analogji me pronën e mëparshme, mund të vendosni një ngjyrë për të gjitha kufijtë, ose të zgjidhni ngjyra të ndryshme për secilën kufi.
Border-color: #FFFF00;
Ju gjithashtu mund të vendosni një ngjyrë transparente duke shkruar:
kufiri-ngjyra: transparente;
border-style: stil kufiri
Falë veçorisë së stilit kufitar, ju mund të bëni një kufi të rregullt të ndërprerë, të dyfishtë, tredimensional - ka shumë kuptime të ndryshme. Për ta bërë këtë, përdorni fjalët kyçe të mëposhtme:
- kufi i fortë - i fortë;
- me pika - kufi me pika;
- kufiri i ndërprerë - me pika;
- kufiri i dyfishtë - i dyfishtë;
- brazdë - kufiri i brazdës tre-dimensionale;
- kurriz - kufi vëllimor me një skaj të trashë (në fakt, përmbysja e stilit të mëparshëm);
- fillimi - kufiri i ekstruduar;
- inset - një kufi i prerë (në thelb e kundërta e stilit të mëparshëm).
Ashtu si me veçoritë e gjerësisë së kufirit dhe ngjyrës së kufirit, kufiri i secilës kuti mund të stilohet ndryshe - për shembull, mund t'i bëni kufijtë e sipërm dhe të poshtëm të ndërprerë dhe kufijtë e djathtë dhe të majtë të dyfishohen. Këtu gjithçka varet vetëm nga imagjinata.
Stili i kufirit: me pika të dyfishta;
Shënim: në shfletues të ndryshëm pamjen kufijtë mund të ndryshojnë pak.
Kufiri i përgjithshëm i pronës CSS: 3 në 1
Nuk është e nevojshme të përdoren të tre vetitë e mësipërme me radhë për të vendosur stilin për kufirin. Mjaft të dimë për gjeneralin pronë universale kufiri CSS, me të cilin mund të stiloni shumë më shpejt dhe të kurseni hapësirë. Për këtë në renditje e rastësishme shkruani vlerat për të tre vetitë:
Kufiri: 2px me pika #FF0000;
Kufijtë për palët individuale
Me veçori shtesë të kufirit CSS, mund të stiloni çdo kufi të bllokut individualisht. Karakteristikat e mëposhtme do t'ju ndihmojnë me këtë:
- border-top - stil për kufirin e sipërm;
- kufiri-djathtas - për kufirin e djathtë;
- kufiri-fund - për kufirin e poshtëm;
- kufiri-majtë - për kufirin e majtë.
Rezultatet
Tani që dini se si të bëni kufij për kuti, mund të praktikoni krijimin e tyre. Ka shumë mënyra për të përshkruar në mënyrë të përmbledhur një stil pa e tepruar me linjat. skedar css. Një rol të rëndësishëm këtu luhet nga njohja e parimeve të fletëve të stilit kaskadë. Konsideroni një shembull.
Le të themi se dëshironi të kornizoni një div me tre kufij të ngurtë gri dhe të bëni kufirin e poshtëm të thyer të gjelbër. Ju mund ta shkruani këtë stil si kjo:
Div (kufiri-djathtas: 8px dyfishtë #FF0000; kufiri-majtas: 8px dyfishtë #FF0000; kufiri-poshtë: 8px dyfishtë #FF0000; kufiri-lart: 4px me pika #FDD201; )
Por kjo është shumë e gjatë. E gjithë kjo mund të shkruhet shkurt:
Div (kufi: 8 pikselë e dyfishtë #FF0000; kufiri në krye: 4 px me pika #FDD201; )
Siç u përmend më lart, këtu do të përfitojmë nga vetitë kaskaduese të CSS. Së pari, ne shkruajmë stilin për të katër anët e kornizës, dhe më pas specifikojmë stilin veçmas për kufirin e poshtëm, duke mbishkruar pjesërisht stilin e mëparshëm. Është shumë e rëndësishme të ndiqni këtë sekuencë rreshtash.
mini-detyrë
Provoni të krijoni një kufi div 200x200px. Stilet për kornizën duhet të jenë si më poshtë:
- Bëni kufijtë e sipërm dhe të poshtëm të fortë të ngurta, jepini të njëjtën ngjyrë të zgjedhur dhe një gjerësi prej 5 px.
- Bëni një kufi të majtë me pika, 3 piksele të gjera, zgjidhni një ngjyrë të ndryshme nga ajo e mëparshme.
- Bëni kufirin e duhur të dyfishtë dyfishtë, 7 piksele e gjere, ngjyre e ndryshme nga dy te meparshmet.
Në fund, puna juaj duhet të duket kështu (përveç ngjyrës që zgjidhni vetë):
Rezultati i punës (shiko në Chrome)
Jam i sigurt që tashmë jeni njohur me vetinë e kufirit css. A do të mësoni diçka të re që nuk e dinit më parë për kufirin css? Epo, jo vetëm që do të mësoni, por do të shihni edhe disa gjëra të reja që nuk i keni ditur kurrë më parë!
Jo vetëm CSS3 mund të përdoret për të rrumbullakosur qoshet, por kodi i pastër CSS mund të përdoret gjithashtu për të krijuar forma komplekse. Më parë, mund të përdorni imazhin e sfondit për të dhënë përshtypjen e qosheve të rrumbullakosura. Falë teknikave të reja të kufirit, ne mund ta bëjmë këtë në CSS të pastër.
Bazat e përdorimit të kufijve css
Ju ndoshta jeni njohur tashmë me përdorim standard Karakteristikat e kufirit:
Kufiri: 1px i zi;
Kodi i mësipërm do të japë një kufi 1px që do të jetë i zi. Thjesht dhe lehtë. Ju gjithashtu mund të zgjeroni pak sintaksën:
gjerësia e kufirit: e trashë; kufiri-style: solid ngjyra e kufirit: e zezë
Si shtesë, mund të përdoren vlera specifike për pronën me gjerësi kufiri, tre fjalë kyçe: i hollë, i mesëm, i trashë.
Por përdorimi i sintaksës së zgjeruar nuk është gjithmonë praktik. Le të shohim një shembull ku dëshironi të ndryshoni ngjyrën e kufirit të bllokut kur rri pezull mbi të. Në një rast të tillë, përdorimi i sintaksës së stenografisë është shumë më i lehtë:
Kutia (kufi: 1px e kuqe e fortë; ) .kutia:rhiq (kufi: 1px jeshile e fortë; )
Më elegante dhe më e thjeshtë mund të bëhet si kjo:
Kutia (kufi: 1px e kuqe e fortë; ) .kutia:rhiq (ngjyra e kufirit: jeshile; )
Siç mund ta shihni, teknika e avancuar është gjithashtu e dobishme kur ne ndryshojmë vetëm disa veti: gjerësinë, stilin, ngjyrën dhe të tjera.
kufi-rrezja
kufiri-rrezeështë vetia "e artë" e CSS3 - prona e parë, më e zakonshme që është bërë praktike dhe e dobishme. Duke përjashtuar IE8 dhe më poshtë, të gjithë shfletuesit shfaqin kënde të rrumbullakosura me këtë.
Edhe pse, është e nevojshme të përdoren parashtesa të veçanta për Webkit dhe Mozilla që stili të jetë i saktë.
webkit-border-radius: 10px; -moz-border-radius: 10px; kufiri-radius: 10px
Në kohën e sotme, ne mund të heqim prefikset speciale dhe t'i përdorim formë standarde kufi-rrezja.
Një përfitim tjetër është se ne mund të përdorim vlera të veçanta për secilën anë të bllokut:
kufiri-lart-majtë-rrezja: 20px; kufiri-lart-djathtas-rreze: 0; kufiri-poshtë-djathtas-rreze: 30px; kufiri-poshtë-majtas-rreze: 0;
Në kodin e mësipërm, duke vendosur rreze-bord-lart-djathtas-radius dhe border-bottom-left-radius në "zero", mund të arrihen forma të mahnitshme. Edhe pse elementi mund të trashëgojë disa veti që do të duhet të anulohen.
Ashtu si kufiri dhe mbushja, ne mund të kondensojmë sintaksën:
/* lart majtas, lart djathtas, poshtë djathtas, poshtë majtas */ border-radius: 20px 0 30px 0;
Si shembull, duke përdorur veçorinë e rrezes kufitare, unë do t'ju tregoj një "limon" që dizajnerët përdorin shpesh kur shtrojnë faqet e internetit:
Limon (gjerësia: 200 px; lartësia: 200 px; sfondi: #F5F240; kufiri: 1 px solid #F0D900; rrezja e kufirit: 10 px 150 px 30 px 150 px; )
Duke shkuar përtej bazave
Në shumë stilistë, të gjitha njohuritë në këtë fushë vetitë css kufiri, ja ku mbaron. Por ka edhe disa të tjera gjëra të ftohta me të cilat mund të krijoni gjëra të mrekullueshme!
Struktura komplekse kufitare css
Ka shumë teknika për projektimin e strukturave komplekse kufitare. Për shembull, merrni parasysh sa vijon...
të stilit kufitar
Ne përdorim gjithmonë vetitë më të famshme të ngurta, të prera dhe me pika. Por ka disa prona të tjera të stilit kufitar: brazdë dhe kurriz.
Kufiri: brazdë 20 px #e3e3e3;
Ose në sintaksë të zgjeruar:
kufiri-ngjyra: #e3e3e3; gjerësia e kufirit: 20 px kufiri-style: brazdë;
Megjithëse këto veti janë të dobishme, ato nuk janë baza për krijimin e kornizave komplekse.
përvijojnë
Teknika më e njohur për krijimin kornizë e dyfishtë- duke përdorur vetinë skicë.
Kutia (kufi: 5px solid #292929; skicë: 5px solid #e3e3e3; )
Kjo metodë funksionon mirë, megjithëse na kufizon vetëm në dy korniza. Ndonjëherë ju duhet të krijoni një kufi gradient që përbëhet nga shumë shtresa... si atëherë?
Pseudo elemente
Kur teknika e skicës nuk është e mjaftueshme, mjete alternativeështë përdorimi i elementeve pseudo :para dhe :pas. Me të cilin mund të shtoni kufij shtesë në element:
Kutia ( gjerësia: 200 px; lartësia: 200 px; sfondi: #e3e3e3; pozicioni: relative; kufiri: 10 px jeshile; ) /* Krijo dy kuti me gjerësia e njëjtë e kontejnerit */ .box:after, .box:para (përmbajtja: ""; pozicioni: absolut; lart: 0; majtas: 0; poshtë: 0; djathtas: 0; ) .box:after (kufi: 5px e kuqe e fortë; skica: 5px e verdhë e fortë; ) .kutia:përpara (kufi: 10px blu e fortë; )
Nuk duket shumë elegante, por të paktën, punon. Është pak problematike të merresh me sekuencën e ngjyrave brenda ... por mund ta kuptosh.
Hije kutie
Një mënyrë interesante "fëminore" për të krijuar këtë efekt është përdorimi i vetive CSS3 box-shadow:
Kutia (kufi: 5px e kuqe e fortë; kuti-hije: 0 0 0 5px jeshile, 0 0 0 10px e verdhë, 0 0 0 15px portokalli; )
Në këtë rast, ne ishim më të zgjuar, duke përdorur veçorinë e dedikuar kuti-hije. Duke ndryshuar parametrat x, y, blur në zero, ne mund të përdorim ngjyra të ndryshme për të krijuar korniza të shumta.
Por ka një problem, në shfletuesit e vjetër që nuk e kuptojnë vetinë e hijes së kutisë, do të jetë e dukshme vetëm një kufi i kuq 5 pikselë.
“Mos harroni! Dizajni i faqes duhet të duket ndër-shfletues, domethënë i njëjtë në të gjithë shfletuesit. Përfshirë versionet më të vjetra.
Ndryshimi i këndeve
Përveç atij të përdorur kuptim i thjeshtë kufi-radius, mund të specifikojmë dy të veçanta - duke i ndarë me / do të specifikojmë rrezen horizontale dhe vertikale.
Për shembull:
Rrezja kufitare: 50 px / 100 px /* rrezja horizontale, rrezja vertikale */
... kjo është e barabartë me:
Rrezja e kufirit-lart-majtas: 50px 100px; kufiri-lart-djathtas-rreze: 50px 100px; kufiri-poshtë-djathtas-rreze: 50px 100px; kufiri-poshtë-majtas-rreze: 50px 100px;
Kjo teknikë është e përshtatshme për krijimin e formave unike të bllokut. Për shembull, ja se si të krijoni një efekt letre të mbështjellë:
Kutia (gjerësia: 200 pikselë; lartësia: 200 pikselë; sfondi: #666; rrezja e kufirit-lart-majtas: 15em 1em; kufiri-poshtë-djathtas-rreze: 15em 1em; )
Format CSS duke përdorur kufirin
Kjo teknikë tregon se si mund të krijoni forma css duke përdorur elementë me dimensione zero lartësi dhe gjerësi. I befasuar? Le të shohim një shembull ...
Për disa shembuj të ardhshëm, ne do të përdorim shënimin e mëposhtëm:
…dhe stilin bazë të mëposhtëm:
Kutia (gjerësia: 200 px; lartësia: 200 px; sfondi: i zi; )
Shumica shembull i zakonshëm Përdorimi i CSS forma - duke krijuar një shigjetë që rrjedh. Sekreti i kësaj shigjete qëndron në krijimin e një kufiri me ngjyra të ndryshme për secilën anë. Më pas vendosim atributet e gjerësisë dhe lartësia deri në 0.
Cakto për bllok div Klasa e shigjetave:
Shigjeta (gjerësia: 0; lartësia: 0; kufiri-lart: 100 pikselë e kuqe e fortë; kufiri-djathtas: 100 pikselë jeshile e ngurtë; kufiri-poshtë: 100 pikselë blu e fortë; kufiri majtas: 100 pikselë e verdhë e fortë; )
Për të demonstruar, ne fillimisht përdorim sintaksën e zgjeruar. Më pas, ne mund të heqim kod shtesë, duke përdorur sintaksën e stenografisë:
Shigjeta (gjerësia: 0; lartësia: 0; kufiri: 100 px solid; ngjyra e kufirit: e kuqe jeshile blu e verdhë; )
Interesante, apo jo? Tani do të vendosim ngjyra transparente në të gjitha anët përveç anës blu.
Shigjeta (gjerësia: 0; lartësia: 0; kufiri: 100 px solid; kufiri-fund-ngjyra: blu; )
Ka funksionuar shkëlqyeshëm! Por kjo bie ndesh paraqitjen semantike, krijoni një div .shigjeta, vetëm për të shtuar një shigjetë në faqe. Për këtë qëllim, ne mund të përdorim pseudo-elemente, të cilat do ta bëjmë tani.
Krijo një flluskë të folur
Për të krijuar një flluskë të folur, na duhet një pjesë e vogël CSS e pastër kod dhe një bllok div.
Flluskë e të folurit ( pozicioni: relative; ngjyra e sfondit: #292929; gjerësia: 200 px; lartësia: 150 px; lartësia e rreshtit: 150 px; /* vertikalisht në qendër */ ngjyra: e bardhë; rreshtimi i tekstit: në qendër; )
Flluskë e të folurit:pas (përmbajtja: ""; )
Në këtë pikë, ne do të krijojmë shigjetën që bëmë më parë, do ta shtojmë atë në element dhe gjithçka që mbetet për të bërë është ta pozicionojmë atë:
Flluskë e të folurit:pas (përmbajtja: ""; pozicioni: absolut; gjerësia: 0; lartësia: 0; kufiri: 10 px solid; ngjyra e kufirit: e kuqe jeshile blu e verdhë; )
Nëse duam që shigjeta të tregojë poshtë, do të duhet t'i vendosim të gjithë kufijtë në transparent, përveç atij të sipërm.
Flluskë e të folurit:pas (përmbajtja: ""; pozicioni: absolut; gjerësia: 0; lartësia: 0; kufiri: 10 pikselë; ngjyra e skajit sipër: e kuqe; )
Kur e krijojmë këtë Formulari CSS, nuk mund të specifikojmë në mënyrë specifike madhësinë e shigjetës. Në vend të kësaj, ne mund të vendosim veçorinë e gjerësisë së kufirit, e cila do të vendosë madhësinë e shigjetës. Ne gjithashtu do të vendosim pozicionin e shigjetës në mes të poshtëm. Prandaj, ne përdorim vlerat e sipërme dhe të majta për këtë.
Flluskë e të folurit:pas (përmbajtja: ""; pozicioni: absolute; gjerësia: 0; lartësia: 0; kufiri: 15 pikselë e fortë; kufiri-lart-ngjyra: e kuqe; lart: 100%; majtas: 50%; )
Përveç kësaj, na mbetet që të japim ngjyrën e njëjtë me atë të bllokut. Mos harroni, kur poziciononi, duhet të merrni parasysh madhësinë e kufijve të tjerë që janë të padukshëm (15 px). Ne gjithashtu do t'i japim bllokut rrumbullakimin në qoshe.
Flluskë e të folurit ( /* ... stile të tjera */ rreze-borde: 10 px; ) .flluskë e të folurit:pas (përmbajtja: ""; pozicioni: absolut; gjerësia: 0; lartësia: 0; kufiri: 15 px solid; kufiri -lart -ngjyra: #292929; lart: 100%; majtas: 50%; margjina majtas: -15 px; /* rregullo për gjerësinë e kufirit */ )
Jo keq, a? Duke përdorur disa klasa css dhe truket kufitare, mund të krijoni një gjë të tillë.
/* Përdorimi i flluskave të të folurit: Aplikoni klasën .speech-bubble dhe .speech-bubble-DIRECTION siç tregohet më poshtë
Bonus! Përqendrimi vertikal brenda një blloku
Për një rresht të vetëm teksti, mund të përdoret lartësia e rreshtit. Por nëse keni dy ose më shumë linja teksti... zgjidhja më e mirë do të vendosë veçorinë e shfaqjes në tabelë dhe do ta vendosë të gjithë tekstin në një paragraf. Ja si duket shënimi html:
Flluskë e të folurit ( /* stile të tjera */ shfaqja: tabelë; ) .flluskë e të folurit p ( shfaqja: qeliza e tabelës; rreshtimi vertikal: në mes; )
Ne nuk jemi të kufizuar në trekëndësha. CSS është në gjendje të shfaqë forma të ndryshme - madje edhe zemra dhe një shenjë të rrezikut biologjik.
Rreziku biologjik ( gjerësia: 0; lartësia: 0; kufiri: 60 pikselë e ngurtë; rrezja e kufirit: 50%; ngjyra e skajit lart: e zezë; e kufirit-poshtë-ngjyra: e zezë; e kufirit-majtas-ngjyra: e verdhë; e kufirit-djathtas- ngjyra: e verdhe;)
