Ginagamit ang mga hangganan sa mga pahina ng HTML upang maibawas at mai-highlight ang nilalaman. Kapag maraming impormasyon sa isang pahina at nais mong iguhit ang pansin ng gumagamit sa mga tukoy na bahagi, pagkatapos ay gumamit ng mga hangganan sa paligid ng nilalamang iyon. Sa artikulong ito sa Mga Hangganan sa CSS tatalakayin ko ang mga sumusunod na paksa:
- Kailan gagamit ng Mga Hangganan
- Mga hangganan sa CSS
- Mga Katangian ng CSS Border
- Mga default na halaga para sa Mga Katangian ng Border
- Tukuyin ang Mga Hangganan sa Shorthand
- Mga puntong dapat tandaan habang Pagdidisenyo ng Mga Hangganan sa CSS
Kailan gagamit ng Mga Hangganan
Ang karaniwang kasanayan ay ang paggamit ng mga CSS border tag upang tukuyin ang mga hangganan sa mga pahina ng HTML para sa:
- Sa paligid ng mahahalagang heading
- Upang mai-highlight ang postscript o mahahalagang tala
- Upang maipaloob ang mga larawan, guhit, quote mula sa mga tao, mga video
- Upang iguhit ang pansin sa pagpepresyo, mga timeline o napakahalagang impormasyon
Baka gusto mong basahin ang bago magpatuloy sa pag-aaral tungkol sa mga hangganan ng CSS.
Para sa isang komprehensibong tutorial sa CSS, bisitahin Edureka CSS Tutorial Para sa Mga Nagsisimula . Makakakuha ka ng isang mahusay na ulo-up sa paraang magagamit ang CSS upang madagdagan ang disenyo ng web sa HTML.
Mga hangganan sa CSS
Maaaring italaga ang Mga Hangganan ng CSS sa iba't ibang mga seksyon ng pahina ng HTML, maging upang isama ang mga heading o talata. Magsimula tayo sa isang halimbawa. Tinutukoy namin dito ang isang hangganan sa paligid ng heading at isa pang hangganan sa paligid ng teksto ng talata.
kung paano maging isang developer ng tableau
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: tuldok}Border sa paligid ng talata din!
Mga Katangian ng CSS Border
Ang mga hangganan ng CSS ay may 3 pangunahing mga katangian sa kanila
- style:AngstyleTinutukoy ng katangian ang pattern ng hangganan.
- kulay: Ang kulay ay maaaring maging alinman sa itinakdang itinakda ng mga kulay ng CSS.
- lapad: Ginagamit ang lapad upang mag-iba ang kapal ng hangganan, upang gawing mas kilalang ito.
Sa halimbawa sa itaas, nakita namin na isang katangian lamang ng hangganan ang natukoy, iyon ang istilo nito. Ang iba pang mga katangian kapag hindi tinukoy ay kumukuha ng mga default na halaga. May isa pang katangian na tinatawag na radius, na hindi gaanong ginagamit. Ginagamit ito upang gawing bilugan ang mga gilid ng hangganan.
- istilo ng hangganan katangian
| Istilo | Paglalarawan |
| border-style: solid | |
| border-style: doble | |
| border-style: uka | |
| border-style: tagaytay | |
| border-style: inset | |
| border-style: pasimula | |
| border-style: wala | |
| border-style: nakatago | |
| border-style: tuldok | |
| border-style: dashing |
Mapapansin mo na mayroong pagpipilian na 'walang hangganan' at 'nakatagong hangganan' din. Maaari lamang iwasan ng isang developer ang pagtukoy ng isang hangganan, bakit malinaw na tinukoy ito bilang isang 'nakatagong hangganan'? Ginagawa ito para sa paggamit ng espasyo at mga layunin sa pagkakahanay sa iba pang mga elemento sa pahina.
Ang mga istilo ng hangganan ay maaaring ihalo sa loob ng isang elemento din. Para sa layuning ito, ang 4 na indibidwal na panig ng hangganan ay maaaring hiwalay na natukoy sa iba't ibang mga estilo. Maaari itong magawa sa 2 paraan. Alinmang tukuyin ang lahat ng 4 na panig sa isang solong tag. Sa kasong ito, ang bilang ay nagsisimula mula sa tuktok na linya at pagkatapos ay gumagalaw pakanan. Bilang kahalili, ang bawat isa sa 4 na mga borderline ay maaaring tukuyin sa mga indibidwal na tag din. Ang parehong mga kaso ay ipinapakita sa susunod na Halimbawa.
| Istilo | Paglalarawan |
| border-style: may tuldok na tuldok na solid na dobleng border-top-style: tuldok border-right-style: dashing border-bottom-style: solid border-left-style: doble |
- kulay-hangganan katangian
Ang katangian ng kulay para sa isang hangganan ay maaaring itakda sa maraming paraan. Ito ay katulad ng pagtatakda ng kulay para sa iba pang mga elemento. Ang mga kulay ay maaaring itakda ng isa sa mga sumusunod na pamamaraan:
- pangalan - tukuyin ang isang pangalan ng kulay, tulad ng 'asul'. Maaari mo ring subukan ang ilang mga magarbong pagpipilian ng kulay tulad ng 'BlanchedAlmond'!
- Hex - tukuyin ang isang halaga ng hex, tulad ng '# ff0000'
- RGB - itakda ang RGB code. Halimbawa, ang rgb (255,255,0) ay nangangahulugang Dilaw.
- setting - tulad ng 'transparent' o 'opaque'
- border-width katangian:
Ang lapad na pag-aari, tulad ng ipinahihiwatig ng pangalan, ay tumutukoy sa kapal ng 4 na mga gilid ng hangganan. Kung ang isang halaga ay tinukoy, ito ay para sa lahat ng panig, kung hindi man ay maaaring itakda ang mga indibidwal na halaga ng lapad.
Maaaring tukuyin ang lapad sa alinman sa karaniwang pamantayan ng yunit tulad ng mga pixel ('px'), mga puntos ('pt') o sa mga sentimetro ('cm'). Maaari mo ring tukuyin ang lapad gamit ang paunang natukoy na mga halagang 'makapal', 'manipis' at 'daluyan'.
| Istilo | Paglalarawan |
| border-width: 10px | |
| border-width: 0.1cm | |
| border-width: medium |
- border-radius katangian
Ang layunin ng pagtukoy ng radius ay upang makakuha ng mga bilugan na sulok para sa hangganan. Tinutukoy ng kadahilanan ng radius ang lawak ng bilugan. Mas malaki ang halaga, mas hubog ang mga sulok. Bilang isang karaniwang kasanayan, ang mga halaga ng radius ay itinatago sa pagitan ng 1-3 beses ang lapad ng hangganan.
pag-uri-uriin ang array c ++ pataas
Ang sumusunod na code ay bubuo:
border-width: 10px
border-radius: 30px
Mga Default na Halaga para sa Mga Katangian ng Border
Ang ipinag-uutos na katangian lamang ay ang style . Kung nawawala ang istilo, hindi lilitaw ang hangganan.
Kung ang kulay ay hindi tinukoy, ang kulay mula sa kalakip na elemento ay kinuha bilang default na halaga. Halimbawa, kung ang kulay ng teksto ng isang talata ay tinukoy bilang 'asul', ang asul na kulay ng hangganan ay magiging asul din. Kung sakaling walang kahulugan ng kulay kahit para sa elemento, kung gayon ang default na kulay ay 'itim'.
Ang default na halaga para sa lapad ay 'medium'.
Tukuyin ang Mga Hangganan sa Shorthand
Mas gusto ng ilang mga developer na tukuyin ang mga katangian ng hangganan sa isang maikling tag na isang linya. Ang maikling format na ito ay tumutulong sa pagliit ng mga linya ng code at ginusto ng mga dalubhasa na developer ang format na ito. Inirerekomenda ang paggamit ng format ng shorthand kapag ang kahulugan ng hangganan ay simple at medyo na-standardize. Gayunpaman, kung kailangan mong i-highlight ang bawat panig ng hangganan sa isang iba't ibang estilo, pagkatapos ay kailangan mong manatili sa format ng pagtukoy ng mga indibidwal na tag.
Ginagamit ang sumusunod na code:
border-style: dashing
border-color: berde
border-width: 5px
hangganan: tinadtad berde 5px
Mga puntong dapat tandaan habang Pagdidisenyo ng Mga Hangganan sa CSS
Huwag gumamit ng masyadong maraming mga hangganan sa isang pahina, maaari itong makagambala at gawing mahirap para sa gumagamit na mag-focus.
kung paano makahanap ng pinakamalaking numero sa array java
Mahalaga na mapanatili ang pagkakapare-pareho sa istilo ng kulay at mga kulay. Ang mga elemento sa parehong antas ng hierarchy sa isang pahina ay dapat magkaroon ng katulad na istilo ng hangganan at lapad para sa pagkakapareho. Halimbawa, kung talata ay tinukoy na may solidong hangganan at 5px lapad, panatilihin ang format na ito sa buong iba pa talata mga elemento sa panahon ng disenyo ng web site.
Dumikit sa isang istilo ng mga kahulugan ng tag. Ang ilang mga developer ay komportable sa mga kahulugan ng shortcut sa lahat ng mga halagang itinalaga sa isang solong hangganan tag Ang ilan sa iba ay gusto ang tahasang listahan ng lahat ng mga tag para sa lapad, kulay at istilo. Ang kombensiyon ay kapag ang mga detalyadong dekorasyon sa hangganan ay kinakailangan sa isang pahina, ang mga indibidwal na tag ay nakalista nang magkahiwalay. Nakatutulong ito sa panahon ng pag-debug ng mga nasadyang kahulugan ng hangganan. Para sa mga normal na kaso, gagawin lamang ang isang kahulugan ng shortcut.
Inaasahan kong natagpuan mo ang impormasyong hinahanap mo sa mga hangganan ng CSS, at wito, natapos namin ang Hangganan na ito sa artikulong CSS.
Suriin ang aming na kasama ng live na pagsasanay na pinamunuan ng magtuturo at karanasan sa proyekto sa totoong buhay. Ang pagsasanay na ito ay gumagawa sa iyo ng kasanayan sa mga kasanayan upang gumana sa back-end at front-end na mga teknolohiya sa web. Kabilang dito ang pagsasanay sa Pag-unlad sa Web, jQuery, Angular, NodeJS, ExpressJS, at MongoDB.
May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng blog na 'Border in CSS' at babalikan ka namin.