Jak zrobić obramowanie elementu HTML?
Obramowanie w HTML najłatwiej i najlepiej na początek wytłumaczyć na bazie elementu blokowego, jakim jest <div>. Wiedzieć musisz, że każdy div ma obramowanie, nawet jeśli jest niewidoczne, albo jeśli jest ustawione na wartość 0. Obramowanie to oddziela jeden <div> od drugiego. Obramowaniem manipulujemy za pomocą CSS i właściwości border oraz pochodnych jak border-width, border-color czy border-top.
Podstawowa składania właściwości obramowania w CSS ma prostą postać, ale przyjmuje wiele wartości.
div {border: border-width border-style border-color;}div {border: 2px solid red;}Szerokość border-width podajemy za pomocą umownych wartości jak thin, medium, thick lub wartości liczbowych, lub procentowych. Używając wartości liczbowych i procentowych mamy większą kontrolę. Gdy podasz wartość w pikselach, grubość obramowania ma dokładnie taką wartość. Gdy podasz szerokość obramowania w procentach, grubość obramowania ma wartość procentową w stosunku do całego bloku.
Style linii obramowania, czyli border-style, mogą przyjąć jedną z poniższych wartości:
- none - czyli brak obramowania, przeglądarka w tym przypadku ustawia szerokość na 0. Jest to domyślna wartość.
- dashed - czyli serie kresek.
- dotted - obramowanie stworzone jest z linii kropkowanej.
- double - obramowanie ma postać dwóch ciągłych linii.
- groove - obramowanie przyjmuje efekt wyrzeźbienia.
- inset - obramowanie z efektem zapadnięcia bloku.
- outset - obramowanie, które jest odwrotnością 'inset'. Blok wydaje się wysunięty z powierzchni.
- ridge - przeciwieństwo obramowania 'groove'.
- solid - w mojej ocenie najpopularniejsze obramowanie, które będziesz używał w CSS. Jest to pojedyncza, prosta i ciągła linia.
Wartość border-color przyjmuje wartości kolory jak każdy inny element HTML.
Każdy element w HTML ma cztery linie obramowania.
