Korniza CSS një element është një ose më shumë rreshta që rrethojnë përmbajtjen dhe mbushjen e elementit. Kufiri vendoset duke përdorur kufirin e shkurtër të pronës. Stili i kufirit vendoset duke përdorur tre veti: stil, ngjyrë dhe gjerësia.
Stilimi i kufijve dhe kufijve të elementeve HTML me vetitë CSS
1. Stil kufitar
Si parazgjedhje, kufijtë vizatohen gjithmonë në krye të sfondit të elementit, sfondi shtrihet në skajin e jashtëm të elementit. Stili i kornizës përcakton shfaqjen e tij, pa këtë veti kornizat nuk do të jenë fare të dukshme. Për një element, mund të caktoni një kufi për të gjitha anët në të njëjtën kohë duke përdorur veçorinë e stilit të kufirit, ose për secilën anë veçmas duke përdorur veçoritë kualifikuese të stilit kufitar-lart, etj. E pa trashëguar.
| të stilit kufitar (stili i kufirit-lart, i stilit të kufirit-djathtas, i stilit të kufirit-poshtë, i stilit të kufirit-majtas) |
|
|---|---|
| Vlerat: | |
| asnje | Vlera e paracaktuar do të thotë pa kufi. Gjithashtu heq kufirin e një elementi nga një grup elementësh me një vlerë të caktuar për këtë veti. |
| i fshehur | Ekuivalente me asnjë. |
| me pika |
me pika |
| i thyer |
i thyer |
| të ngurta |
të ngurta |
| dyfishtë |
dyfishtë |
| brazdë |
brazdë |
| kurriz |
kurriz |
| futur |
futur |
| fillimi |
fillimi |
| {1,4} |
Duke numëruar njëkohësisht katër stile të ndryshme për kufijtë e elementit, vetëm për veçorinë e stilit kufi:
|
| fillestare | |
| trashëgojnë | |
Sintaksë
P (stili i kufirit: i ngurtë;) p (stili i kufirit në krye: i ngurtë;)
2. Border color border-color
Vetia përcakton ngjyrën e kufijve të të gjitha anëve në të njëjtën kohë. Me ndihmën e sqarimit të vetive, mund të vendosni një ngjyrë të personalizuar për kufirin e secilës anë të elementit. Nëse asnjë ngjyrë nuk është specifikuar për kufirin, atëherë ajo do të jetë e njëjtë me ngjyrën e tekstit të elementit. Nëse elementi nuk ka tekst, atëherë ngjyra e kufirit do të jetë e njëjtë me ngjyrën e tekstit të elementit prind. E pa trashëguar.
| kufi-ngjyrë (kufiri-lartë-ngjyra, kufiri-ngjyra djathtas, kufiri-ngjyra e poshtme, kufiri-ngjyra majtas) |
|
|---|---|
| Vlerat: | |
| transparente | Vendos ngjyrën transparente për kufirin. Në këtë rast, gjerësia e kornizës mbetet. Mund të përdoret për të ndryshuar ngjyrën e kufirit kur vendosni miun mbi një element për të shmangur zhvendosjen e elementit. |
| ngjyrë | Ngjyra e kornizave vendoset duke përdorur vlerat e vetive. (ngjyra e kufirit: # cacd58;) |
| {1,4} |
Liston katër ngjyra të ndryshme në të njëjtën kohë për kufijtë e elementit, vetëm për veçorinë e ngjyrës së kufirit:
|
| fillestare | Vendos vlerën e pronës në vlerën e saj të paracaktuar. |
| trashëgojnë | Trashëgon vlerën e pronës nga elementi mëmë. |
Sintaksë
P (ngjyra e kufirit: # cacd58;)
3. Gjerësia e kufirit-gjerësia
Gjerësia e kornizës specifikohet duke përdorur njësi gjatësie ose fjalë kyçe. Nëse vetia e stilit kufitar vendoset në asnjë, dhe njëfarë gjerësie vendoset për kufirin e elementit, atëherë gjerësia e kufirit vendoset në zero në këtë rast. E pa trashëguar.
Sintaksë
P (gjerësia e kufirit: 2 px;)
4. Vendosja e kornizës me një veti
Vetia e kufirit ju lejon të kombinoni vetitë e mëposhtme: gjerësia e kufirit, stili i kufirit, ngjyra e kufirit, për shembull:
Div (gjerësia: 100 px; lartësia: 100 px; kufiri: 2 px gri e fortë;)
Në këtë rast, vetitë e specifikuara do të aplikohen në të gjitha kufijtë e elementit në të njëjtën kohë. Nëse ndonjë nga vlerat nuk është specifikuar, vlera e paracaktuar do të zërë vendin e saj.
5. Vendosja e një kufiri për një kufi të një elementi
Në rastin kur është e nevojshme të vendosni një stil tjetër të kufirit të një elementi, mund të përdorni stenografinë për kufirin përkatës.
Karakteristikat e mëposhtme kombinojnë vetitë e mëposhtme në një deklaratë të vetme: gjerësia e kufirit, stili i kufirit dhe ngjyra e kufirit. Lista e pronave specifikohet në rendin e specifikuar, ndërsa një ose dy vlera mund të hiqen, me ç'rast vlerat e tyre do të marrin vlerat e tyre të paracaktuara.
Stili i kufirit të sipërm caktohet duke përdorur veçorinë border-lart, pjesa e poshtme është kufiri-poshtë, e majta është kufiri-majtas dhe e djathta është kufiri-djathtas.
Sintaksë
P (kufi në krye: 2px gri e fortë;)
6. Skicë e konturit të jashtëm
Vetia vendos kufirin e jashtëm rreth elementeve (d.m.th. jashtë kufirit normal). Qëllimi kryesor i kësaj vetie është të nxjerrë në pah një element. Ndryshe nga vetia kufitare, aplikimi i kësaj vetie nuk ndikon në madhësinë ose pozicionin e elementit, pasi është. skica vizatohet mbi kutinë e elementit, e cila nga ana tjetër mund të shkaktojë mbivendosjen e mbushjes së jashtme të elementit dhe zonave ngjitur.
Gjithashtu, kontura e jashtme, ndryshe nga kufiri i elementit, e rrethon elementin nga të gjitha anët, duke e inkuadruar atë tërësisht.
Kontura e jashtme është gjithmonë drejtkëndëshe; nuk ndjek kufijtë e kutisë për të cilën është vendosur rrezja kufitare.
Vetia outline ju lejon të kombinoni vetitë e mëposhtme: skicë-ngjyra, skicë-stili, skicë-gjerësia. Nëse ndonjë nga vlerat nuk është specifikuar, vlera e paracaktuar do të zërë vendin e saj.
Div (gjerësia: 100 px; lartësia: 100 px; skica: # cacd58 solid 2 px;)
6.1. Stili i përvijimit skicë-stili
Pamja e vijës së konturit të jashtëm vendoset në të njëjtën mënyrë si me stilin e kufirit të elementit. E pa trashëguar.
Sintaksë
P (stili i përvijimit: kreshtë;)
6.2. Përvijimi i ngjyrës kontur-ngjyra
Ngjyra e skicës mund të vizatohet vetëm kur është vendosur stili i konturit. E pa trashëguar.
Sintaksë
P (stili i skicës: kreshtë; skica-ngjyra: argjendi;)
6.3. Trashësia e konturit skicë-gjerësia
Trashësia e vijës së konturit të jashtëm vendoset në të njëjtën mënyrë si trashësia e kornizës së elementit. E pa trashëguar.
Sintaksë
P (stili i skicës: me pika; gjerësia e skicës: 5 px;)
Vetia e kufirit CSS emërtohet për të krijuar kufirin e një objekti, përkatësisht trashësinë e kufirit, ngjyrën dhe stilin e tij. Kjo veçori përdoret gjerësisht në HTML. Mund të krijoni efekte të ndryshme për të perceptuar më mirë përmbajtjen në faqe. Për shembull, dizajnoni një shirit anësor, kokën e faqes, menunë, etj.
1. Sintaksa e kufirit CSS
kufiri: kufiri me gjerësi kufiri në stilin e kufirit me ngjyrë | trashëgojnë;
- border-width - trashësia e kufirit. Mund ta vendosni në piksel (px) ose të përdorni vlerat standarde të hollë, të mesëm, të trashë (ato ndryshojnë vetëm në gjerësi në piksel)
- border-style - stili i kufirit të dhënë. Mund të marrë vlerat e mëposhtme
- asnjë ose i fshehur - anulon kufirin
- me pika - kornizë me pika
- dash - kornizë dash
- linjë e fortë - e thjeshtë (përdoret më shpesh)
- kufiri i dyfishtë - dyfish
- groove - kufi me brazdë 3D
- kurriz, hyrje, fillim - efekte të ndryshme të kornizës 3D
- trashëgoj - aplikohet vlera e elementit mëmë
- border-color - ngjyra e kufirit. Mund të vendoset duke përdorur një emër specifik ngjyrash ose në formatin RGB (shih emrat e ngjyrave html për sitin)
Vlerat në pronën e kufirit CSS mund të specifikohen në çdo mënyrë. Sekuenca më e përdorur është "ngjyra e stilit të trashësisë".
2. Shembuj me kufij të ndryshëm të kufirit CSS
2.1. Shembull. Stilet e ndryshme të dekorimit të kufirit në stilin e kufirit
stil kufiri: i ndërprerëstil kufiri: i ndërprerëkufiri-style: solidkufiri-style: dyfishtëkufi-style: brazdëkufi-style: kurrizkufiri-style: futurkufiri-style: fillimiKatër korniza të ndryshme
kufiri-style: me pika
stil kufiri: i ndërprerë
kufiri-style: solid
kufiri-style: dyfishtë
kufi-style: brazdë
kufi-style: kurriz
kufiri-style: futur
kufiri-style: fillimi
Katër korniza të ndryshme
2.2. Shembull. Ngjyra e kufirit ndryshon në lëvizjen e miut
Ky shembull është shumë i thjeshtë por interesant. Tregon se si mund të përdorni: pseudo-klasën pezull dhe kufirin CSS për të krijuar efekte të thjeshta (si menytë).
Kur vendosni kursorin e miut mbi bllok, ngjyra e kufirit do të ndryshojë
Kështu duket në faqe:
2.3. Shembull. Si të bëni një kufi transparent
Korniza mund të bëhet transparente. Ky efekt është i rrallë, por ndonjëherë mund të jetë shumë i dobishëm për dizajnerët e uebit. Për të vendosur transparencën, duhet të përdorni cilësimin e ngjyrave në formën e RGBA (R, G, B, P), ku parametri i fundit vendos transparencën (një numër real nga 0.0 në 1.0)
Kështu duket në faqe:
3. Trashësia e kufirit: vetia e gjerësisë së kufirit
Përcakton trashësinë e vijës. Më parë e vendosëm në një përshkrim të vetëm kufiri.
Sintaksa e gjerësisë së kufirit CSS
gjerësia e kufirit: i hollë | e mesme | trashë | kuptimi;
- trashësia e vijës së hollë - hollë
- gjerësia e linjës mesatare - mesatare
- trashë - trashësi vijë e trashë
Më poshtë janë disa shembuj. Gjëja më e pazakontë do të jetë trashësia e ndryshme e kufirit në secilën anë.
gjerësia e kufirit: e hollëgjerësia e kufirit: e mesmegjerësia e kufirit: e trashëTrashësi të ndryshme në kufij
Kështu duket në faqe:
gjerësia e kufirit: e hollë
gjerësia e kufirit: e mesme
gjerësia e kufirit: e trashë
Trashësi të ndryshme në kufij
4. Si të bëni një kufi me vetëm një skaj (kufi)
Vetia e kufirit CSS ka veti të derivuara për vendosjen e kufijve të njëanshëm në një element:
- border-top - për të vendosur kufirin në krye (kufiri i sipërm)
- border-bottom - për të vendosur kufirin në fund (kufiri i poshtëm)
- kufiri-djathtas - për të vendosur kufirin në të djathtë (kufiri i djathtë)
- kufiri-majtë - për të vendosur kufirin në të majtë (kufiri i majtë)
Këta kufij mund të kombinohen, d.m.th. të përshkruajë kornizën e vet për çdo drejtim. Sintaksa është saktësisht e njëjtë me kufirin.
Ka edhe prona
- border-top-color - vendos ngjyrën e kufirit të sipërm
- border-top-style - Vendos stilin e kufirit të sipërm
- border-top-width - vendos trashësinë e kufirit të sipërm
- etj. për çdo drejtim
Sipas mendimit tim, është më e lehtë të shkruash gjithçka në një rresht sesa të prodhosh tekst shtesë në stile. Për shembull, vetitë e mëposhtme do të jenë të njëjta
/* Përshkrimi i dy stileve identike: */
4.1. Shembull. Kornizë e bukur për të theksuar kuotat
Shembull i një kornize kuotash
Kështu duket në faqe:
Shembull i një kornize kuotash
shënim
Ju mund të vendosni një kufi të veçantë për secilën anë.
5. Si të bëni kufij të shumëfishtë në një element html
Ndonjëherë ju duhet të bëni kufij të shumtë. Le të japim një shembull
5.1. Opsioni i parë me kufij të shumtë
Kështu duket në faqe:
Ekziston një mënyrë e dytë përmes mbivendosjes së hijeve.
5.2. Përzierja e hijeve për të krijuar kufij të shumtë
Kështu duket në faqe:
6. Rrumbullakimi i qosheve në kufij (rreze-kufi)
Përdorni vetinë CSS border-radius (e disponueshme vetëm në CSS3) për të krijuar kufij të bukur. Me të mund të rrumbullakoni qoshet, gjë që krijon një pamje krejtësisht të ndryshme. për shembull
7. Rreshti i prerë CSS
Linjat e injektuara mund të duken spektakolare në një sfond të errët, i cili nuk është i përshtatshëm për çdo vend.
Kështu duket në faqe:
Për të hyrë në kufirin nga JavaScript, duhet të shkruani konstruksionin e mëposhtëm:
dokument.getElementById ("elementID").style.border= "VLERË" (! GJUHË:
Jam i sigurt se tashmë jeni njohur me vetinë e kufirit css. A po 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 që CSS3 mund të përdoret për të rrumbullakosur qoshet, por CSS e pastër mund të përdoret për të krijuar forma komplekse. Në të kaluarën, mund të përdorni imazhin e sfondit për të dhënë përshtypjen e qosheve të rrumbullakosura. Falë teknikave të reja për përdorimin e kufirit, ne mund ta bëjmë atë në kod të pastër css.
Bazat e përdorimit të kufirit css
Ju ndoshta jeni njohur tashmë me përdorimin standard të pronës kufitare:
Kufiri: 1px i zi;
Kodi i mësipërm do të japë një kufi 1px, i cili 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; kufiri-ngjyra: e zezë;
Përveç kësaj, mund të përdorni vlera specifike për pronën me gjerësi kufiri, tre fjalë kyçe: e hollë, e mesme, e trashë.
Por përdorimi i sintaksës së zgjeruar nuk është gjithmonë praktik. Le të hedhim një vështrim në një shembull kur duhet të ndryshoni ngjyrën e kufirit të kutisë në lëvizjen e miut. Në këtë rast, përdorimi i sintaksës stenografi është shumë më i lehtë:
Kutia (kufiri: 1px e kuqe e fortë;) .kutia: rri pezull (kufiri: 1px jeshile e fortë;)
Më elegante dhe më e thjeshtë mund të bëhet si më poshtë:
Kutia (kufiri: 1 px e kuqe e fortë;) .kutia: rri pezull (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 - vetia e parë dhe më e zakonshme që është bërë praktike dhe e dobishme. Përveç IE8 dhe më poshtë, të gjithë shfletuesit japin 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ë ditët e sotme, ne mund të heqim prefikset speciale dhe të përdorim formën standarde të rrezes kufitare.
Një përfitim tjetër është se ne mund të përdorim vlera të veçanta për secilën anë të bllokut:
Rrezja e kufirit-lart-majtas: 20px; kufiri-lart-djathtas-rreze: 0; kufiri-poshtë-djathtas-rreze: 30px; kufiri-poshtë-majtas-rreze: 0;
Në kodin e mësipërm, vendosja e rrezes kufitare lart-djathtas dhe kufirit-poshtë-majtas-radius në zero mund të krijojë forma të mahnitshme. Edhe pse elementi mund të trashëgojë disa veti që do të duhet të rivendosen në zero.
Ashtu si kufiri dhe mbushja, ne mund të kondensojmë sintaksën:
/ * lart majtas, lart djathtas, poshtë djathtas, poshtë majtas * / kufiri-radius: 20px 0 30px 0;
Si shembull, duke përdorur veçorinë e rrezes kufitare, unë do t'ju tregoj "limonin" që dizajnerët përdorin shpesh kur dizajnojnë 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ë fushën e vetive css të kufirit përfundon atje. Por ka disa gjëra më interesante që mund të bëni për të krijuar gjëra të mrekullueshme!
Struktura komplekse kufitare css
Ka shumë teknika për krijimin e modeleve duke përdorur struktura komplekse kufitare. Për shembull, le të shohim sa vijon ...
Stil kufitar
Ne përdorim gjithmonë vetitë e njohura të ngurta, të ndërprera dhe me pika. Por ka disa prona të tjera të stilit kufitar: brazdë dhe kurriz.
Kufiri: groove 20 px # e3e3e3;
Ose në sintaksë të zgjeruar:
Border-color: # e3e3e3; gjerësia e kufirit: 20 px; kufiri-style: brazdë;
Ndërsa këto veti janë të dobishme, ato nuk janë baza për korniza komplekse.
Skicë
Teknika më e njohur për krijimin e një kufiri të dyfishtë është përdorimi i vetive të skicës.
Kutia (kufiri: 5px solid # 292929; skica: 5px solid # e3e3e3;)
Kjo metodë funksionon mirë, megjithëse na kufizon vetëm në dy kuti. Ndonjëherë ju duhet të krijoni një kufi gradient që përbëhet nga shumë shtresa ... si atëherë?
Pseudo-elemente
Kur teknika e skicimit nuk mjafton, një mjet alternativ është përdorimi i pseudo elementeve: para dhe: pas. Me të cilin mund të shtoni korniza shtesë në element:
Kutia (gjerësia: 200 px; lartësia: 200 px; sfondi: # e3e3e3; pozicioni: relative; kufiri: 10 px jeshile;) / * Krijoni dy kuti me të njëjtën gjerësi të kontejnerit * / .kutia: pas, .kutia: përpara ( përmbajtja: ""; pozicioni: absolut; lart: 0; majtas: 0; poshtë: 0; djathtas: 0;) .kutia: pas (kufiri: 5 px e kuqe e fortë; skica: 5 px e verdhë e fortë;) .kutia: përpara (kufiri : 10 px blu e fortë;)
Në pamje jo shumë elegante, por të paktën funksionon. Është pak problematike të kuptosh sekuencën e ngjyrave brenda kornizës ... por mund ta kuptosh.
Kuti-Hije
Një "mënyrë fëminore" interesante për të krijuar këtë efekt është përdorimi i vetive CSS3 box-shadow:
Kutia (kufiri: 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 një pronë të krijuar posaçërisht në hije. Duke ndryshuar parametrat x, y, blur në "zero", ne mund të përdorim ngjyra të ndryshme për të krijuar shumë korniza.
Por ka një problem, në shfletuesit e vjetër që nuk i kuptojnë vetitë e hijes së kutisë, do të jetë i dukshëm vetëm një kufi i kuq 5 px.
“Mos harroni! Dizajni i faqes në internet duhet të duket ndër-shfletues, domethënë i njëjtë në të gjithë shfletuesit. Përfshirë versionet e vjetra."
Ndryshimi i këndeve
Përveç rrezes së thjeshtë të kufirit të përdorur, ne mund të specifikojmë dy të veçanta - duke i ndarë me / ne specifikojmë rrezen horizontale dhe vertikale.
Për shembull:
Border-radius: 50px / 100px; / * rrezja horizontale, rrezja vertikale * /
...është njësoj si:
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 të lartësisë dhe gjerësisë. Jeni 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;)
Përdorimi më i zakonshëm i formave CSS është krijimi i një shigjete rrjedhëse. Sekreti i kësaj shigjete është krijimi i një kufiri me ngjyra të ndryshme për secilën anë. Pastaj, vendosni atributet e gjerësisë dhe lartësisë në 0.
Cakto klasën e shigjetave në bllokun div:
Shigjeta (gjerësia: 0; lartësia: 0; kufiri-lart: 100 pikselë e kuqe e fortë; kufiri-djathtas: 100 pikselë jeshile e fortë; 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 kodin 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;)
Doli e mrekullueshme! Por 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 t'i bëjmë tani.
Krijo një flluskë të folur
Për të krijuar Flluskën e të folurit, na duhet një pjesë e vogël CSS e pastër 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ë fazë, ne do të krijojmë shigjetën që kemi bërë më parë, do ta shtojmë atë në element dhe gjithçka që mbetet është pozicionimi:
Flluskë e të folurit: pas (përmbajtja: ""; pozicioni: absolute; 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ë drejtohet nga 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: absolute; gjerësia: 0; lartësia: 0; kufiri: 10 pikselë; ngjyra e skajit sipër: e kuqe;)
Kur krijojmë këtë formë CSS, nuk mund të specifikojmë madhësinë e shigjetës në mënyrë specifike. Në vend të kësaj, ne mund të vendosim veçorinë e gjerësisë së kufirit, e cila do të vendosë madhësinë për shigjetën. Ne gjithashtu do të vendosim pozicionin e shigjetës në fund-mes. Prandaj, ne përdorim vlerat e majës dhe majtas për këtë.
Flluskë e të folurit: pas (përmbajtja: ""; pozicioni: absolute; gjerësia: 0; lartësia: 0; kufiri: 15 px solid; 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 qoshe të rrumbullakosura.
Flluskë e të folurit (/ *… stile të tjera * / rreze-kufi: 10 pikselë;) .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 rregullime 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 vertikalisht brenda një blloku
Për një rresht teksti, mund të përdorni lartësinë e rreshtit. Por nëse keni dy ose më shumë rreshta teksti ... Zgjidhja më e mirë është të vendosni veçorinë e shfaqjes në tabelë dhe të vendosni të gjithë tekstin në një paragraf. Kështu duket në shënimin html:
Flluskë e të folurit (/ * stile të tjera * / shfaqja: tabelë;) .flluskë e të folurit p (ekrani: qeliza e tabelës; rreshtimi vertikal: në mes;)
Ne nuk jemi të kufizuar në trekëndësha. CSS është në gjendje të japë të gjitha llojet e formave - madje edhe zemrat dhe një shenjë të rrezikut biologjik.
Rreziku biologjik (gjerësia: 0; lartësia: 0; kufiri: 60 pikselë i fortë; rreze-kufi: 50%; ngjyra e sipërme e kufirit: e zezë; ngjyra e kufirit-poshtë: e zezë; e kufirit-majtas-ngjyra: e verdhë; e kufirit-djathtas- ngjyra: e verdhe ;)
konkluzioni
Përshëndetje të dashur lexues të faqes së blogut. Sot dua të vazhdoj temën e studimit dhe të marr parasysh ato rregulla stili që ju lejojnë të vendosni mbushjen dhe kufijtë për elementët Html: kufiri, diferenca dhe mbushja.
Para kësaj, ne arritëm të studiojmë vetitë mjaft të thjeshta që kontrollonin fontet (), tekstin () dhe morëm parasysh modelin
Po, ne gjithashtu arritëm të merrnim parasysh parimet e përdorimit në të gjitha detajet (të shtrira në disa artikuj). Tani është koha të kalojmë te rregullat që përbëjnë bazën për ndërtimin e dokumenteve (faqeve të internetit) dhe do të fillojmë me modelin e bllokut (marrëdhëniet e elementeve HTML).
Në terma të përgjithshëm, unë kam shkruar tashmë për modernen, mirë, por sot do të ketë specifika të pastra. Nëse dëshironi të lexoni publikimet e mëparshme mbi këtë temë, atëherë jeni të mirëpritur.
Modeli i kutisë CSS - mbushja, diferenca dhe kufiri
Së treti, interesi mund të përdoret. Nga se numërohen? Rezulton se nga gjerësia e enës(d.m.th., nga zona e përmbajtjes së elementit mëmë). Për më tepër, kjo vlen jo vetëm për margjinën-djathtas dhe majtas, gjë që do të ishte logjike, por për marzhin-lart dhe fund përqindjet do të llogariten saktësisht nga gjerësia (jo lartësia) e kontejnerit.
Duhet të theksohet, duke folur për vendosjen e vlerave dimensionale, se Marzhi mund të jetë edhe negative... ato. kur specifikojmë një vlerë pozitive për kufirin e jashtëm, ne e zhvendosim elementin ngjitur me distancën e specifikuar, dhe nëse specifikohet një vlerë negative, blloku ngjitur thjesht do të kalojë në atë për të cilin kemi vendosur këtë diferencë negative. Dhe kjo përdoret shumë shpesh në CSS.
Epo, është e vetëkuptueshme që ekziston një rregull i përbërë CSS Margin, i cili në shumë raste ju lejon të zvogëloni madhësinë e kodit të përdorur për të vendosur kufijtë e kërkuar. Rendi i vlerave në të është i rregulluar rreptësisht (ato shkruhen përmes një karakteri hapësinor) dhe duhet të korrespondojnë me modelin:
ato. numërimi fillon në krye dhe vazhdon në drejtim të akrepave të orës deri në fund të rrethit. Mund të duket diçka si kjo:
Margjina: 20px 10px 40px 30px;
Dhe kjo do të thotë që shfletuesi duhet të futë 20 pikselë në krye të bllokut tonë, 10 pikselë në të djathtë, 40 piksele nga fundi dhe 30 pikselë në të majtë. kjo hyrje do të jetë e barabartë me këtë:
Reduktimi i kodit CSS është i dukshëm me sy të lirë. Por ky nuk është kufiri. Është krejtësisht e pranueshme të përdoret jo vetëm katër, por edhe tre, dy dhe madje vetëm një vlerë në një rregull të përbërë. E cila do të ndihmojë më tej në zvogëlimin e madhësisë së kodit. Sidoqoftë, do të jetë e mundur të zvogëlohet numri i vlerave vetëm në raste të caktuara:
- Nëse kufijtë majtas dhe djathtas janë të njëjta, për shembull, si kjo: margjina: 20px 30px 40px 30px;
Kjo e fundit mund të hiqet:
Margjina: 20px 30px 40px;
Këto dy hyrje të rregullave kolektive bëjnë të njëjtën gjë. Prandaj, nëse shihni një rekord me tre vlera në Marzh, atëherë vlera e të katërtit (në të djathtë) mund të shihet në të dytën (në të majtë).
Në rastin e marzheve të barabarta sipër dhe poshtë, ky truk nuk do të funksionojë më, sepse logjikisht është e mundur të zvogëlohet struktura e rekordit të rregullit kolektiv, vetëm duke prerë vlerat e dyfishta nga fundi i saj(dhe vlera e marzhit të poshtëm do të jetë e parafundit).
- Nëse, përveç barazisë së kufijve të jashtëm majtas dhe djathtas, ka një barazi të vlerave të tyre në krye dhe në fund: marzhi: 20px 30px 20px 30px;
ose, e cila është e njëjtë (në bazë të pikës 1):
Margjina: 20px 30px 20px;
Një rregull i tillë kolektiv mund të shkruhet vetëm me dy vlera, duke hedhur poshtë të fundit, që përkon me të parën:
Margjina: 20px 30px; Në këtë rast, vlera e parë përshkruan kufijtë vertikalë, ndërsa e dyta përshkruan kufijtë horizontale.
- Dhe së fundi, nëse të gjitha vlerat në rregullin e parafabrikimit janë të njëjta: diferenca: 20px 20px 20px 20px;
ose, e cila është e njëjtë (në bazë të pikës 2):
Margjina: 20px 20px;
Pastaj mund të përdorni lloji i rekordit të shkurtuar maksimalisht(duke hedhur poshtë vlerën e fundit që përputhet me të parën):
Margjina: 20 px; Që do të thotë të njëjtën diferencë në të gjitha anët e elementit tonë Html.
Duke folur për marzhet, vlen të përmendet një skemë si p.sh "Margjina-kolaps" ose, me fjalë të tjera, "kolapsi i marzheve". Me pak fjalë, thelbi i këtij fenomeni është si më poshtë.
Nëse kemi dy blloqe të vendosura njëri nën tjetrin (kolapset e marzhit mund të ndodhin vetëm vertikalisht) dhe të dy kanë margjina të kundërta (për shembull, fundi për elementin e sipërm dhe marzhi i sipërm për pjesën e poshtme), atëherë një vlerë më e madhe e Marzhit do të thith një më të vogël.
Për shembull, nëse blloku i sipërm është caktuar si vijon:
Margjina: 20px 20px 200px 20px;
Dhe për pjesën e poshtme:
Margjina: 100px 20px 20px 20px;
Atëherë kufiri i poshtëm i bllokut të sipërm (200 px) do të thithë margjinën e sipërme të atij të poshtëm (100 px, dhe edhe nëse bëhet i barabartë me 199 px, asgjë nuk do të ndryshojë) dhe diferenca e jashtme që rezulton midis këtyre dy blloqeve do të jetë ende e barabartë me 200 px. ato. vetëm më i madhi modul Margin, dhe nuk shtohet në asnjë mënyrë me vlerën e kundërt të elementit vertikalisht ngjitur.
E tillë është ngjitja, e cila funksionon ekskluzivisht vertikalisht, dhe horizontalisht madhësitë e kundërta të Marzhit thjesht do t'i shtohen njëra-tjetrës. Por kjo ka të bëjë vetëm me kufijtë me të njëjtën shenjë, por nëse ato janë me shenja të ndryshme, atëherë numrat e tyre thjesht do të mblidhen dhe blloqet do të ndahen nga njëri-tjetri sipas vlerës që rezulton.
Për shembull, në këtë rast:
Margjina e sipërme: 20px 20px -20px 20px; Margjina e poshtme: 10px 20px 20px 20px;
Mbushja që rezulton midis blloqeve do të jetë -10 px, d.m.th. pjesa e poshtme do të kalojë mbi elementin e sipërm Html me 10 px.
Një veçori tjetër e përdorimit të rregullit të Marzhit në CSS është se vlera e përshkruar vertikale për elementet inline injorohet... Duke pyetur:
Margjina: 20 px;
Për shembull, for, i cili është një element inline, ne në fakt do të shohim vetëm mbushje horizontale dhe asnjë ndryshim nuk do të ndodhë vertikalisht.
Duke vrapuar pak përpara, do të them që Padding do të funksionojë për etiketat inline vertikalisht, por mbushja e rritur nuk do të ndikojë në asnjë mënyrë pozicionin e tij të përgjithshëm në lidhje me elementët e tjerë ngjitur.
Në rastin e një etikete blloku (titujt, paragrafët), Rritja vertikalisht e Mbushjes do ta lëvizte atë element në lidhje me blloqet e tjera ngjitur.
Epo, kufiri (Border), ose më mirë gjerësia e tij, gjithashtu nuk do të jetë në gjendje të lëvizë blloqet e tjera ngjitur vertikalisht larg etiketës së linjës. Për elementët e linjës, lëvizja është e mundur vetëm në një drejtim - horizontalisht dhe kaq.
Mbushje dhe kufi - mbushje dhe kufij
Le të kalojmë tani në vendosjen e mbushjes duke përdorur rregullin e mbushjes dhe të shohim saktësisht se çfarë vlerash mund të marrë:
Siç mund ta shihni, këtu nuk përmendet Auto, dhe ky rregull CSS nuk lejon vlera negative (ato mund të jenë vetëm pozitive - nga zero e lart). ato. Mbushja nuk do ta shtyjë përmbajtjen jashtë kornizës. Më së shumti që mund të bëhet është afrimi i përmbajtjes me kornizën.
Përqindjet në të llogariten në të njëjtën mënyrë si në Marzh - në lidhje me gjerësinë e kontejnerit (zona e përmbajtjes së elementit mëmë), e cila mbyll elementin tonë. Rregulla e kombinuar e mbushjes në Cssështë formuar dhe i bindet të njëjtave ligje siç u diskutua më lart:
Mbushje: 20px 10px 40px 30px;
Në këtë rregull, ne përshkruajmë të katër anët, duke filluar nga lart. Nëse keni nevojë të zvogëloni diçka në të (në tre, dy ose edhe një vlerë), atëherë do t'ju duhet të përdorni parimet e reduktimit të përshkruara më lart për dhëmbëzimet e jashtme, të cilat do të funksionojnë me të njëjtin sukses për dhëmbëzat e brendshme.
Dhe gjëja e fundit që do të doja të merrja në konsideratë sot është kuadri që është vendosur duke përdorur Kufiri... Ata kanë tre lloje parametrash:
- Border-width - vendos gjerësinë e kufirit
- Border-color - vendos ngjyrën e saj
- Border-style - lloji i kufirit ose lloji i vijës me të cilën do të vizatohet
Të tre këto rregulla CSS kanë një grup të vlefshëm vlerash:
Gjerësia e linjës për kornizën ( gjerësia e kufirit) mund të specifikohet duke përdorur numrat në Em, Ex ose Px, ose me fjalë:
- Vijë e hollë - e hollë;
- E mesme - e mesme (kjo vlerë përdoret si parazgjedhje);
- I trashë - i trashë.
Si një vlerë për ngjyrën e kufirit ( Kufi-ngjyra), mund të përdorni metodat e pranuara për specifikimin e tyre (kodi heksadecimal, fjalët, etj.):
Ngjyra e kufirit: e kuqe;
Si parazgjedhje, nëse ngjyra e kufirit nuk është specifikuar në mënyrë eksplicite, atëherë do të përdoret ajo e përdorur për fontin brenda këtij elementi.
Vetia CSS Border-style ju lejon të specifikoni llojin e kufirit me fjalë:
- Asnjë - pa kufi (i parazgjedhur)
- Pika - vija vizatohet me pika
- Vijë e ndërprerë - me pika
- Linjë e fortë - e fortë
- Linja e dyfishtë - dyshe
- Groove - kufi i dhëmbëzuar
- Kurriz - i dalë
- Hyrja dhe fillimi - duke luajtur me hijen
Natyrisht, meqenëse ka katër anët e çdo blloku, atëherë mund të përdorni të dy rregullat e përgjithshme dhe ato të veçanta për secilën nga anët:
E njëjta gjë do të zbatohet për parafab Rregulla kufitare- mund të shkruhet si për të gjitha anët në të njëjtën kohë (Border), ashtu edhe për secilën nga anët veç e veç (Border-lart, majtas, poshtë dhe djathtas). Rendi i vlerave nuk është i rëndësishëm:
Kufiri: 1px e kuqe e fortë;
Nëse diçka mungon, në vend të kësaj do të përdoret vlera e paracaktuar.
Paç fat! Shihemi së shpejti në faqet e faqes së blogut
mund të shikoni më shumë video duke shkuar te");">
Ju mund të jeni të interesuar
Lartësia, gjerësia dhe tejmbushja - Rregullat CSS për përshkrimin e një zone të përmbajtjes në një plan urbanistik 
Pozicioni (absolut, relativ dhe fiks) - mënyrat e pozicionimit të elementeve HTML në CSS (rregullat majtas, djathtas, lart dhe poshtë) Stilime të ndryshme për lidhje të brendshme dhe të jashtme nëpërmjet CSS 
Fluturoni dhe pastroni në CSS - mjetet e paraqitjes së bllokut 
Shfaq (bllok, asnjë, inline) në CSS - caktoni llojin e shfaqjes së elementeve Html në faqen e internetit
Një bllok mund të ketë një kornizë. Ai tregon kufijtë e bllokut. Në këtë rast, dhëmbëzimi i brendshëm është brenda bllokut, domethënë brenda kornizës, dhe dhëmbëzimi i jashtëm është jashtë kornizës. Korniza zë vendin e saj në faqe dhe nuk përshtatet as në dhëmbëzimin e jashtëm dhe as në atë të brendshëm. Për të krijuar një kufi, duhet të specifikoni tre veti: gjerësia e kufirit, stili i kufirit dhe ngjyra.
Vetia border-width përdoret për të specifikuar gjerësinë e kufirit. Mund të marrë vlerat e mëposhtme:
gjerësia e kufirit: e mesme - e mesme (e parazgjedhur)
kufiri-gjerësi: i hollë - i hollë
kufiri-gjerësia: trashë - trashë
gjerësia e kufirit: gjerësia në njësitë CSS
border-width: inherit - vlera merret nga elementi prind
Më shpesh, gjerësia specifikohet në çdo njësi matëse që ekziston në CSS.
Stili i kufirit vendoset duke përdorur veçorinë e stilit kufitar. Kornizat do të duken të ndryshme në varësi të kësaj vetie. Më poshtë janë vlerat e kësaj vetie dhe stilet që ato vendosin.
Nëse gjerësia është e vogël, korniza mund të duket paksa e ndryshme.
Përveç vlerave të specifikuara, vetia e stilit kufitar mund të marrë vlerat e mëposhtme:
kufiri-style: asnjë - pa kufi
border-style: fshehur - njëlloj si asnjë, vlen për qelizën e tabelës
border-style: inherit - vlera merret nga elementi prind
Ngjyra e kufirit vendoset nga vetia e ngjyrës kufitare. Vlera e pronës është ngjyra e specifikuar në një nga mënyrat që ekzistojnë në CSS.
Le të krijojmë një bllok dhe t'i japim një kornizë.
Stili:
Provoni t'i jepni bllokut një kufi me vlera të ndryshme të vetive.
Shënim i shkurtuar
Korniza mund të krijohet në një mënyrë më të shkurtër. Për këtë, ekziston një veti e quajtur border, në të cilën vetitë e kufirit renditen të ndara me një hapësirë, së pari gjerësia, pastaj stili, pastaj ngjyra. Për shembull, le të krijojmë një kuti me të njëjtin kufi, por ta vendosim duke përdorur stenografi.
Nëse nuk specifikoni një gjerësi ose ngjyrë, atëherë do të përdoret vlera e paracaktuar.
Anët individuale të kornizës
Korniza e bllokut mund të vendoset jo si një e tërë, por në secilën anë veç e veç. Anët e ndryshme të kornizës mund të kenë një stil të veçantë, nga njëra anë mund të ketë një kornizë, dhe nga ana tjetër, mund të mos jetë, në përgjithësi, ju keni liri të plotë veprimi.
Për të krijuar një kufi në secilën anë, ka veti kufiri-majtas, kufiri-djathtas, kufiri-lart, kufiri-fund. Për shembull, le të krijojmë një bllok që ka një kufi vetëm në të majtë.
Krijoni një kornizë rreth këtij blloku në anët e tjera me një pamje të ndryshme.
Për çdo anë të kornizës, mund të specifikoni secilën veçori veç e veç:
kufiri-majtë-gjerësi, kufiri-majtas-stili, kufiri-majtas-ngjyra
kufiri-djathtas-gjerësia, kufiri-djathtas-stili, kufiri-djathtas-ngjyra
kufiri-lart-gjerësia, kufiri-lart-stili, kufiri-lart-ngjyra
kufiri-fund-gjerësia, kufiri-poshtë-stili, kufiri-fund-ngjyra
Nëse dëshironi që korniza të shfaqet ndryshe nga të gjitha anët, mund të vendosni ndonjë nga vetitë e kornizës jo një vlerë, por katër, për secilën anë. Vlerat renditen të ndara me hapësira, së pari për pjesën e sipërme, pastaj për të djathtën, pastaj për pjesën e poshtme dhe më pas për të majtën.
Si shembull, le të krijojmë një bllok në të cilin korniza ka gjerësi të ndryshme nga të gjitha anët.
Stili:
Ju gjithashtu mund të specifikoni dy ose tre vlera për pronën. Nëse specifikohen dy vlera, vlera e parë tregohet për pjesën e sipërme dhe të poshtme të kornizës, dhe e dyta për të majtën dhe të djathtën. Nëse specifikohen tre vlera, vlera e parë është për pjesën e sipërme të kornizës, e dyta për anët e majta dhe të djathta dhe e treta për pjesën e poshtme.
