3

kurs

css

Lekcja 9: Obramowanie

css

Ramki na stronie możemy stosować w celu wyróżnienia określonego elementu albo do zbudowania estetycznej struktury strony.

Obramowanie ustalamy za pomocą border.

selektor { border: wartość; }

W przypadku ramki wartość ma postać:

p { border: a b c; }
  • a - width (szerokość)
  • b - style (styl)
    • dotted
    • dashed
    • solid
    • double
    • groove
    • ridge
    • inset
    • outset
  • c - color (kolor)

Możemy ustawić osobno każdą z ramek:

  • border-left - lewa
  • border-right - prawa
  • border-top - górna
  • border-bottom - dolna
p {
border-left-width: 3px;
border-left-style: solid;
border-left-color: red;
}

Powyższa deklaracja jest równoznaczna poniższemu zapisowi.

p { border-left: 3px solid red; }
Przykład

Obramowanie z lewej strony w kolorze czerwonym o grubości 3px.

p { border: 5px dashed green; }
Przykład

Obramowanie w kolorze zielonym o grubości 5px.

Teraz dodamy zaokrąglenia narożników.

p { border: 2px solid green; border-radius: 5px 10px 5px 10px; }
Przykład

Obramowanie w kolorze zielonym o grubości 5px z zaokrąglonymi narożnikami.

comments powered by Disqus

Do góry