A CSS keretek alapjai

Most megtanuljuk, hogyan adhatunk keretet az elemekhez. Ezt három tulajdonság segítségével tehetjük meg: a border-width tulajdonság határozza meg a keret vastagságát, a border-color a színét, a border-style pedig a keret típusát.

Az első két tulajdonság nyilvánvaló módon működik: a border-color ugyanabban a formátumban fogad el színeket, mint a color tulajdonság, a keret vastagsága pedig pixelben van megadva. Viszont a border-style tulajdonság kulcsszavak formájában fogad értékeket. Például a solid érték folytonos vonalat határoz meg.

Készítsünk például 3 pixel vastag keretet, folytonos vonal formájában, piros színnel:

html<div id="elem"></div>

css#elem {
  border-width: 3px;    /* 3px vastagság */
  border-style: solid;  /* vonal formájában */
  border-color: red;    /* piros szín */
  width: 300px;
  height: 100px;
}

Результат:

A következő leckékben részletesebben megvizsgáljuk a keretek kezelését.