Kurso Table

Advanced CSS Tutorial

• 课外书 ng CSS
• Pangkat ng CSS
• Basiko ng Grammar ng CSS
• Advanced Grammar ng CSS
• Derived Selector ng CSS
• ID Selector ng CSS
• Class Selector ng CSS
• Paglikha ng CSS
• Background ng CSS
• Text ng CSS
• Font ng CSS
• List ng CSS

CSS Box Model

• Ulas ng Box Model ng CSS
• Internal Padding ng CSS
• Border ng CSS
• External Margin ng CSS
• Merging ng External Margin ng CSS

CSS Positioning

• Ulas ng Position ng CSS
• Relative Position ng CSS
• Absolute Position ng CSS
• Floating ng CSS

CSS Selector

• Element Selector ng CSS
• Grouping ng Selector ng CSS
• Detailed Explanation ng Class Selector ng CSS
• Detailed Explanation ng ID Selector ng CSS
• Detailed Explanation ng Attribute Selector ng CSS
• Descendant Selector ng CSS
• Child Element Selector ng CSS
• Adjacent Sibling Selector ng CSS

Mga.Optional na Kurso

Rekomendasyon ng Kurso:

• Kabibehang Bayad ng CodeW3C.com

Ang border ng elemento (border) ay isang linya o maraming linya na nakapalibot sa content at padding ng elemento.

Ang border property ng CSS ay nagbibigay-daan sa iyo na itakda ang estilo, laki at kulay ng border ng elemento.

Border ng CSS

Sa HTML, gumagamit tayo ng talahanayan upang gumawa ng border sa paligid ng teksto, ngunit sa pamamagitan ng paggamit ng border property ng CSS, maaari naming gumawa ng kahusayan na border at maaring ilagay ito sa anumang elemento.

Ang border ng elemento ay nasa loob ng margin ng elemento (border). Ang border ng elemento ay isang linya o maraming linya na nakapalibot sa content at padding ng elemento.

Ang bawat border ay may tatlong aspeto: laki, estilo at kulay. Sa mga sumusunod na pananalita, aking ituturo sa iyo ang tatlong aspeto na ito.

Border at Background

Ang CSS规范 ay nagsasabi na ang border ay ginuhit sa 'itaas ng background ng elemento'. Ito ay napakahalaga, dahil ang ilang border ay 'nakatapos' (halimbawa, dotted border o dashed border), ang background ng elemento ay dapat lumitaw sa pagitan ng nakikita na bahagi ng border.

Ang CSS2 ay nagsasabi na ang background ay tumatagal lamang sa padding, hindi sa border. Pagkatapos, ang CSS2.1 ay ginawa ng mas maliwanag na pagtutuwid: ang background ng elemento ay tumatagal sa content, padding at border area. Ang karamihan sa mga browser ay sumusunod sa CSS2.1, ngunit ang ilang lumang browser ay maaaring magkaroon ng iba't ibang pagganap.

Ang estilo ng border

Ang estilo ng border ay pinakamahalaga sa lahat ng aspeto ng border, hindi dahil ang estilo ang kumontrol ng pagpapakita ng border (totoo, ang estilo ay kumontrol ang pagpapakita ng border), kundi dahil kung walang estilo, walang border ang magiging magiging kahit anong uri.

Ang estilo ng CSS border-style propertyNaitala ang 10 na iba't ibang non-inherit estilo, kasama ang none.

Halimbawa, maaari mong itakda ang border ng isang larawan bilang outset, upang ito ay mukhang 'bump button':

a:link img {border-style: outset;}

Tukuyin ang iba't ibang estilo

Maaari mong itakda ang maraming estilo sa isang border, halimbawa:

p.aside {border-style: solid dotted dashed double;}

Ang patakaran na ito ay nagtatalaga ng apat na uri ng border style sa paragrapong may klase na aside: solid na border sa itaas, dotted na border sa kanan, dashed na border sa ilalim at double na border sa kaliwa.

Nakita namin muli na ang halaga dito ay ginamit ang pagkakasunod-sunod na top-right-bottom-left, ang pagtalakay sa paggamit ng maraming halaga upang itakda ang iba't ibang padding din nakita na ang pagkakasunod-sunod na ito.

Tukuyin ang solo na estilo

Kung gusto mong itakda ang estilo ng border sa isang gilid ng element box, hindi sa lahat ng apat na gilid, maaaring gamitin ang mga sumusunod na solo na border style property:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Kaya, ang dalawang pamamaraang ito ay katumbas sa isa't isa:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Pansin:Kung magiging gamit ka ng ikalawang paraan, dapat ilagay ang unang bahagi ng attribute pagkatapos ng maliit na attribute. Dahil kapag ilagay mo ang unang bahagi ng attribute bago ang border-style, papalitan ng halaga ng maliit na attribute ang halaga ng unang bahagi na none.

Lapad ng border

Maaari mong gamitin ang: Attribute ng border-widthMag-set ng lapad ng border.

May dalawang paraan para mag-set ng lapad ng border: maaaring mag-set ng halaga ng sukat, tulad ng 2px o 0.1em; o gamitin ang isa sa tatlong pangalan na tinatawag na thin, medium (ang default na halaga) at thick.

Mga pagkakalit:Wala sa CSS ang pagtatalaga ng tiyak na lapad ng tatlong salitang pangpangalan, kaya maaaring i-set ng isang user agent ang thin, medium (ang default na halaga) at thick nang magkapareho sa 5px, 3px at 2px, habang maaring i-set ng ibang user agent ang 3px, 2px at 1px.

Kaya, maaari naming itakda ang width ng border sa ganito:

p {border-style: solid; border-width: 5px;}

O:

p {border-style: solid; border-width: thick;}

Magtatag ng bahagi ng width ng isang gilid

Maaari mong itakda ang bawat bahagi ng border ng elemento sa pagkasunod-sunod na top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

Ang nakaraang halimbawa ay maaaring ayusin sa ganito (ang paraan na ito ay tinatawag na):Mga salin ng halaga）：

p {border-style: solid; border-width: 15px 5px;}

Maaari mo ring magtakda ng bawat bahagi ng border sa pamamagitan ng sumusunod na mga attribute:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Kaya, ang mga sumusunod na patakaran ay katumbas ng nakaraang halimbawa:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

Walang border

Sa nakaraang halimbawa, nakita mo na kung gusto mong ipakita ang anumang gawa ng border, kailangang itakda ang estilo ng border, tulad ng solid o outset.

Kung magbabago ka ng border-style sa none, ano ang mangyayari?

p {border-style: none; border-width: 50px;}

Kahit ang lapad ng border ay 50px, ang estilo ng border ay itinakda na none. Sa ganitong sitwasyon, hindi lamang ang estilo ng border ang nawala, kundi ang lapad nito ay naging 0. Nag-iwan ang border, bakit ba?

Ito ay dahil kung ang estilo ng border ay none, ang border ay wala sa eksistensya, kaya't walang lapad ang border, kahit anong inialam mo sa unang pagtatatakda.

Malaking kahalagahan ito. Palagian, ang pagkabigong ipahintulot ang estilo ng border ay isang madalas na nagkakamali. Ayon sa sumusunod na patakaran, ang lahat ng h1 na elemento ay walang anumang border, at mas mabuti pa't walang 20 pixels na lapad:

h1 {border-width: 20px;}

Dahil ang default na halimbawa ng border-style ay none, kung wala sa border ang naipahintulot na estilo, ito ay katulad ng border-style: none.Kaya't kung nais mong makita ang border, dapat mong ipahintulot ang estilo ng border.

Kulay ng border

Ang pagtatakda ng kulay ng border ay napakasimple. Ginagamit ng CSS ang isang simpleng Propyedad ng border-color，itong maaring tanggapin ang pinakamataas na 4 halimbawa ng kulay.

Maaaring gamitin anumang uri ng halimbawa ng kulay, tulad ng pangalang kulay, heksadecimal at RGB:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

Kung ang halimbawa ng kulay ay mas mababa sa 4, ang kapagtalaga ay gumagamit ng kopya. Halimbawa, ang sumusunod na patakaran ay nagdeklara na ang border ng itaas at ilalim ng paragrafo ay kulay asul, ang kanan at kaliwa ay kulay red:

p {
  border-style: solid;
  border-color: blue red;
  }

Mga pagkakalit:Ang default na kulay ng border ay ang foreground color ng elemento. Kung wala sa border ang naipahintulot na kulay, ito ay magiging magkapareho sa kulay ng teksto ng elemento. Sa ibang banda, kung walang teksto ang elemento, pagkatapos ay ipinaglalagay na ito ay table, na naglalaman lamang ng mga imaheng, ang kulay ng border ng table ay ang kulay ng teksto ng magulang nito (kaya't ang color ay maaaring minamana). Ang magulang na ito ay maaaring maging body, div o ibang table.

I-definir ang kulay ng isang panig

Mayroon pang ilang propyedad ng kulay ng isang panig ng border. Ang mekanismo nito ay katulad ng estilo at lapad ng isang panig:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Upang maipahintulot sa h1 na may direct na kulay ng border na itim at sa kanang border na may kulay na kulay red, gawin ito sa pamamagitan ng pagtatalaga:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Transparent border

Nakipag-usap na kami, kung walang estilo ang border, walang lapad ito. Gayunpaman, may mga kaso kung saan nais mong lumikha ng walang kapansin na border.

CSS2 ay nakaipakita ng kulay ng border na transparent. Ang halimbawa na ito ay ginamit para sa paglikha ng border na may lapad ng walang kapansin. Ikaw ay makikita sa mga sumusunod na halimbawa:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

Nagpalagay kami ng mga estilo sa itaas na link:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Subukan nang personal na!

Sa isang paraan, ang paggamit ng transparent, ang gilid ay parang dagdag na innerspace; gayundin, mayroon ding kapakinabangan na maging makikita kapag kailangan nito. Ang transparent na gilid ay katulad ng innerspace, dahil ang background ng elemento ay papasok sa lugar ng gilid (kung may nakikitang background).

Mahalagang detalye:Bago ang IE7, walang suporta ang IE/WIN para sa transparent. Sa naunang bersyon, ang IE ay magtatakda ng kulay ng gilid ayon sa halaga ng color ng elemento.

CSS Border Properties

Toolbox

CSS Reference Manual

CSS Example

CSS Quiz

CSS Tutorial

Link sa mga tagapagbigay ng pondo