Krijimi i kufijve në CSS. pronë kufitare

Korniza CSS Një element është një ose më shumë rreshta që rrethojnë përmbajtjen e elementit dhe mbushjen e tij. Kufiri vendoset duke përdorur kufirin e shkurtër të pronës . Stili i kornizës vendoset duke përdorur tre veti: stil, ngjyrë dhe gjerësia.

Dekorimi i kufijve dhe kufijve të elementeve HTML me vetitë CSS

1. Stil kufitar

Si parazgjedhje, kufijtë vizatohen gjithmonë në krye të sfondit të një elementi, sfondi shtrihet në skajin e jashtëm të elementit. Stili i kornizës përcakton shfaqjen e tij, pa këtë vetitë e kornizës 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, e kështu me radhë. E pa trashëguar.

stili i kufirit (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ë se nuk ka kornizë. Gjithashtu heq kufirin e elementit nga grupi i elementeve me vlerën e këtij grupi të vetive.
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}	Numëroni katër stile të ndryshme për kufijtë e një elementi menjëherë, vetëm për veçorinë e stilit të kufirit: (Stil kufiri: me pika të forta asnjë me pika;)
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 kornizave të të gjitha anëve në të njëjtën kohë. Ju mund të përdorni vetitë e përsosjes për të vendosur një ngjyrë të personalizuar për kufirin e secilës anë të një elementi. Nëse nuk specifikohet asnjë ngjyrë kufiri, 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.

ngjyra e kufirit (kufiri-lartë-ngjyra, kufiri-ngjyra djathtas, kufiri-ngjyra e poshtme, kufiri-ngjyra majtas)
Vlerat:
transparente	Përcakton ngjyrën transparente për kornizën. Në këtë rast, gjerësia e kornizës mbetet. Mund të përdoret për të ndryshuar ngjyrën e kufirit kur rri pezull miun mbi një element për të shmangur lëvizjen e elementit.
ngjyrë	Ngjyra e kornizës vendoset duke përdorur vlerat e vetive. (ngjyra e kufirit: #cacd58;)
{1,4}	Numëroni katër ngjyra të ndryshme për kufijtë e një elementi në të njëjtën kohë, vetëm për vetinë e ngjyrës së kufirit: (ngjyra e kufirit: #cacd58 #5faf8a #b9cea5 #aab238;)
fillestare	Vendos vlerën e një prone në vlerën e saj të paracaktuar.
trashëgojnë	Trashëgon vlerën e vetive nga elementi mëmë.

Sintaksë

P (ngjyra e kufirit: #cacd58;)

3. Kufiri-gjerësia

Gjerësia e kornizës specifikohet duke përdorur njësi gjatësie ose fjalë kyçe. Nëse vetia e stilit të kufirit vendoset në asnjë dhe kufiri i elementit vendoset në njëfarë gjerësie, 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 kufi ju lejon të kombinoni vetitë e mëposhtme: border-width , border-style , border-color , 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 njëkohësisht. Nëse ndonjë vlerë nuk është e specifikuar, vlera e paracaktuar do të zërë vendin e saj.

5. Vendosja e një kornize për një kufi të një elementi

Në rastin kur duhet të vendosni një stil të ndryshëm të kufijve të një elementi, mund të përdorni një shënim të shkurtër për kufirin përkatës.
Karakteristikat e listuara më poshtë kombinojnë vetitë e mëposhtme në një deklaratë: gjerësia e kufirit , stili i kufirit dhe ngjyra e kufirit. Lista e pronave specifikohet në rendin e dhënë, ndërsa një ose dy vlera mund të hiqen, me ç'rast vlerat e tyre do të marrin vlerat e paracaktuara.

Stili i kufirit të sipërm caktohet duke përdorur veçorinë border-lart, kufiri i poshtëm është kufiri-poshtë, kufiri i majtë është kufiri-majtas dhe kufiri i djathtë është kufiri-djathtas.

Sintaksë

P (kufi në krye: 2px gri e fortë;)

6. Përvijoni skicën

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, si skica paraqitet në krye të kutisë së elementit, e cila nga ana tjetër mund të bëjë që kufijtë e elementit dhe zonat ngjitur të mbivendosen.

Gjithashtu, konturi i jashtëm, ndryshe nga kufiri i elementit, e rrethon elementin nga të gjitha anët, duke e inkuadruar atë tërësisht.

Skica e jashtme është gjithmonë drejtkëndëshe dhe nuk ndjek kufirin e kutisë që është caktuar në kufirin-radius .

Vetia outline ju lejon të kombinoni vetitë e mëposhtme: outline-color, outline-style, outline-width. Nëse ndonjë vlerë nuk është e 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 stili i kornizës së elementit. E pa trashëguar.

Sintaksë

P (stili i përvijimit: kurriz;)

6.2. Përvijimi i ngjyrës kontur-ngjyra

Ngjyra e skicës së jashtme mund të vendoset vetëm kur është vendosur stili i skicës. E pa trashëguar.

Sintaksë

P (stili i skicës: kreshtë; skica-ngjyra: argjendi; )

6.3. Gjerësia e konturit të jashtëm 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; )

Përshëndetje, të dashur miq dhe të ftuar të blogut! Sot vazhdojmë të njihemi me elementët e ndërtimit të faqes dhe le të mësojmë se si të krijojmë korniza css. Në artikullin tim të fundit, ju thashë dhe ju tregova se si krijohen, por korniza css dukeni më bukur dhe tërheqëse. Prandaj, kushdo që ka mësuar se si të krijojë korniza html do të zotërojë krijimin e një kornize css. Dhe unë do t'ju ndihmoj me këtë! Le të fillojmë...

Si të bëni kufijtë css për sitin?

Siç ju thashë më lart, kornizat css janë shumë më të bukura dhe praktike se kornizat html dhe nuk do ta keni të vështirë të krijoni vetë korniza të tilla css nëse tashmë keni mësuar se si të bëni korniza html.

Çfarë na duhet për të bërë kufijtë css? Asgjë e egër! Dëshira juaj dhe artikulli im, në të cilin do t'ju shpjegoj gjithçka në detaje.

Këtu është kodi i saj:

Kornizat tona css!

Këtu është një shembull i dytë i kufirit css:

Këtu është kodi i saj:

Kornizat tona css!

Këtu është një shembull i tretë i një kornize me pika:

Ky është kodi i saj:

Kornizat tona css!

Ky është shembulli i katërt i një kufiri me goditje të dyfishtë:

Këtu është kodi i saj:

Kornizat tona css!

Dhe nëse aplikoni vlerën "kreshtë", atëherë kjo është korniza që merrni:

Këtu është kodi i saj:

Kornizat tona css!

Tani le të bëjmë skajet e rrumbullakosura të kornizës sonë css me këto vlera "border-radius" dhe "box-shadow":

Këtu është një kornizë me skajet e rrumbullakëta dhe kodi i saj:

Kornizat tona css!

Tani le të bëjmë një kornizë me skaje të paqarta, ajo gjithashtu duket mjaft tërheqëse, dhe është e lehtë për t'u bërë, thjesht ndryshoni numrin në vlerën "box-shadow" në një vlerë më të madhe. Dhe ja çfarë ndodh:

Këtu është kodi i saj:

Kornizat tona css!

Tani bëjmë një kornizë me skica shumëngjyrëshe, thjesht shtoni disa ngjyra në vlerën "box-hije":

Këtu është kodi i saj:

Kornizat tona css!

Dhe tani apogjeu i kornizave tona css është një kornizë e rrumbullakët. Kjo bëhet gjithashtu thjesht duke ndryshuar vlerën "border-radius". Shikoni këtu:

Këtu është kodi i saj këtu:

Kornizat tona css!

Epo, kjo është e gjitha për sot. Shihemi se shpejti!

Nëse ju pëlqeu materiali, ju lutemi bëni sa më poshtë ...

1. Jepini një "like".

1. Bëni një retweet.

1. Ndani këtë postim me miqtë tuaj në rrjetet sociale.

Faleminderit per vemendjen!

Në këtë kapitull:

Modeli i kutisë është një mënyrë e shfaqjes së elementeve nga shfletuesit që trajtojnë të gjitha etiketat si blloqe të vogla, për ta çdo etiketë është një kontejner me përmbajtje: tekst, imazhe, etiketa të tjera, etj.

• diferencë(margin) - hapësirë ​​e bardhë (diferencë) që ndan një element nga tjetri. Shembulli më i thjeshtë i dhëmbëzimit është hendeku midis paragrafëve të njëpasnjëshëm. Zona e margjinës është transparente dhe nuk mund të ketë një ngjyrë të personalizuar ose efekte të tjera stilimi.
• Kufiri(kufi i elementit) - kufiri në të dyja anët e elementit. Korniza mund të instalohet si në të gjitha anët e elementit, ashtu edhe në njërën anë. Përdorimi i një kufiri thjesht mund të dekoroj bukur një element ose të ndajë vizualisht përmbajtjen e elementit aktual nga elementët e tjerë në faqe.
• Mbushje(mbushje) - hapësira boshe midis përmbajtjes së elementit dhe kufirit të tij. Zona e mbushjes është transparente dhe nuk mund të ketë një ngjyrë të personalizuar ose efekte të tjera stilimi.
• Shumica e elementeve kanë një zonë përmbajtjeje që përmban gjithçka përmbajtjen element (tekst, imazhe të futura ose elementë të tjerë).

Kornizë

Kufiri është një vijë e thjeshtë që shfaqet rreth elementit që stilohet. Por nuk është e nevojshme të aplikoni një kornizë që rrethon elementin nga të gjitha anët. Mund ta shtoni vetëm nga ana e kërkuar e elementit. Për shembull, nëse shtoni një kufi vetëm nga fundi i një elementi blloku, ai do të ketë të njëjtin efekt si element

---

(vijë horizontale), duke vepruar si ndarës.

Çdo kornizë ka tre veti që mund t'i kontrollojmë duke përdorur CSS: gjerësia, stili dhe ngjyra, le të shohim se cilat veçori mund të përdorim për t'i vendosur dhe ndryshuar ato:

Në vend që të specifikoni të tre pronat, mund të specifikoni vetëm një - pronë kufitare, e cila ju lejon të specifikoni gjerësinë, stilin dhe ngjyrën për kufirin në të njëjtën kohë:

Paragrafi i parë.

Paragrafi i dytë.

Paragrafi i tretë.

Për të kontrolluar kornizën veçmas në secilën anë të elementit, përdoren vetitë përkatëse:

• maja e kufirit- korniza e sipërme
• kufiri-majtas- korniza e majtë
• kufiri-djathtas- korniza e duhur
• kufiri-fund- korniza e poshtme

Këto veti funksionojnë saktësisht në të njëjtën mënyrë si vetia kufitare, me përjashtim që ato kontrollojnë kufirin vetëm në njërën anë të elementit që stilohet.

Kufijtë e jashtëm dhe të brendshëm

Indent- hapësira boshe midis përmbajtjes së elementit dhe kufirit të tij (nëse është vendosur një). Për të shtuar dhe kontrolluar gjerësinë e mbushjes në të katër anët e një elementi, përdorni pronë e mbushjes.

Mbushja është hapësirë ​​e bardhë që ndan një element nga elementët e tjerë ose skajet e dritares së shfletuesit. Për të shtuar dhe kontrolluar gjerësinë e margjinave në të katër anët e një elementi, përdorni pronë e marzhit.

Vetitë e mbushjes dhe kufirit mund të marrin një deri në katër vlera:

Ku vlerat vendosen në drejtim të akrepave të orës, duke filluar nga lart:

Nëse specifikoni vetëm një vlerë për vetitë, atëherë dhëmbjet në të gjitha anët do të jenë të njëjta gjerësi.

Në pamje të parë, efekti i dukshëm kur përdorni këto veti duket i njëjtë, për të vërejtur ndryshimin vizual midis tyre, mund, për shembull, të vendosni një kornizë për një element ose të vendosni një sfond:

Paragraf i rregullt.

Për hapjet, si dhe për kornizat, ka veti që ju lejojnë të kontrolloni madhësinë e dhëmbëzimit në secilën anë veç e veç. Indentimet kontrollohen nga vetitë: mbushje e sipërme , mbushje djathtas , mbushje-fund dhe mbushje-majtas. Marzhet kontrollohen nga vetitë: marzh-majë , marzh-djathtas , marzh-fund dhe margjina-majtas.

Shënim: Vlerat e vetive të mbushjes dhe marzhit nuk trashëgohen nga elementët fëmijë, kështu që ju duhet të specifikoni gjerësinë e mbushjes veçmas për çdo element që ka nevojë për to.

Gjerësia dhe lartësia e elementit

Si parazgjedhje, elementët e bllokut përdorin gjerësinë automatike. Kjo do të thotë që elementi do të shtrihet saktësisht aq sa ka hapësirë ​​të lirë. Lartësia e elementeve të bllokut vendoset automatikisht si parazgjedhje, d.m.th. shfletuesi shtrin zonën e përmbajtjes në drejtim vertikal në mënyrë që të shfaqet e gjithë përmbajtja. Për të vendosur madhësi të personalizuara për zonën e përmbajtjes së një elementi, mund të përdorni vetitë e gjerësisë dhe lartësisë.

Një aplikim interesant i vetive CSS3 box-shadow është krijimi i një kufiri të dyfishtë rreth një elementi. Një efekt shumë interesant për dekorimin e faqeve, por do të funksionojë vetëm në versionet e reja të shfletuesve që mbështesin box-shadow .

Megjithatë, ka disa mënyra të tjera për të krijuar një efekt të tillë. Për më tepër, përdorimi i dukshëm i një imazhi të sfondit është shumë larg nga ideali.

Ky tutorial prezanton pesë metoda për krijimin e një kufiri të dyfishtë rreth një elementi. Dhe vetëm njëri prej tyre kërkon një imazh, dhe të gjithë të tjerët përdorin kod të pastër CSS me mbështetje të shkëlqyer të shfletuesit.

Metoda 1: kufiri dhe skica

Kjo metodë funksionon vetëm në shfletues që mbështesin veçorinë e përshkrimit (të gjithë përveç IE6/7). Ju shtoni elementit të dy vetitë e kufirit dhe të skicës.

Një (kufi: solid 6px #fff; skicë: solid 6px #888; )

Arsyeja pse kjo metodë funksionon është sepse skica vizatohet gjithmonë në pjesën e jashtme të drejtkëndëshit. Çështja me veçorinë skicë hyn në lojë kur përdoren elementë lundrues, pasi skica mbivendoset me elementët fqinjë.

Metoda 2: pseudo element

Kjo metodë kërkon pozicionimin absolut të kornizës:

Dy (kufi: solid 6px #fff; pozicioni: relative; z-indeksi: 1; ) .two:para (përmbajtja: ""; shfaqja: bllok; pozicioni: absolut; lart: -12 px; majtas: -12 px; kufiri: solid 6px #888; gjerësia: 312 px; mbushja e poshtme: 12 px; min-lartësia: 100%; indeksi z: 10; )

Pikat kryesore janë vendosja e vetive z-indeks (në mënyrë që elementi pseudo të mbivendoset me përmbajtjen), pozicionimi dhe vlera min-lartësia. Vetia e fundit ruan elasticitetin e kornizës.

Metoda 3: Hije

Metoda më e mirë, pasi nevojitet vetëm një rresht kodi për të vendosur vetinë e hijes së kutisë.

Tre (hije kutie: 0 0 0 6px #fff, 0 0 0 12px #888; )

Dy hije përdoren për të shfaqur kufirin e dyfishtë. Ato ndahen me presje. Turbullimi është vendosur në 0. Meqenëse hija e dytë mbivendoset me të parën, ajo ka dyfishin e gjerësinë. Pika kryesore është përdorimi i ngjyrave opake, të cilat krijojnë një kufi të qartë midis kornizave.

Ashtu si vetia e skicës, hije-box nuk ndikon në elementët ngjitur dhe mund t'i mbivendos ato. Prandaj, është e nevojshme të vendosni një fushë për formimin e pamjes së përbërjes.

Natyrisht, mbështetja për veçorinë box-shadow është e kufizuar në shfletues më të rinj.

Metoda 4: Element shtesë div

Kjo metodë përdor një element të jashtëm