Obramowanie, border (tzw. ramka) stanowi istotny element strony internetowej nie tylko w przypadku tabel, może ono np. stanowić bardzo ciekawą dekoracją (np. wokół przycisku), lub rozdzielać witrynę na sektory.
Istnieje kilka typów obramowania jakie możemy uzyskać na stronie z pomocą CSS. Począwszy od zwykłej linii po kropkowaną lub kreskowaną. Oczywiście można te style także ze sobą mieszać uzyskując obiekt o różnych krawędziach.
W CSS własność obramowania opisuje się za pomocą zmiennej „border-style„.
Typy, popularne rodzaje obramowania
Poniżej zajdziecie listę właściwości jakie może przyjmować właściwość border-style:
- dotted – obramowanie kropkowane
- dashed – obramowanie kreskowane
- solid – obramowanie jednolite, w formie linii
- double – obramowanie składające się z podwójnej linii
- groove – definiuje rowkowane granicy 3D. Efekt zależy od wartości granicznej kolorów
- ridge – definiuje prążkowane granicy 3D. Efekt zależy od wartości granicznej kolorów
- inset – definiuje granicę 3D wstawka. Efekt zależy od wartości granicznej kolorów
- outset – definiuje początku granicę 3D. Efekt zależy od wartości granicznej kolorów
- none – brak obramowania
- hidden – ukryte obramowanie
Oczywiście istotna jest również grubość obramowania „border-width„. To ona decyduje o grubości dodawanej ramki.
Jak zrobić obramowanie na stronie HTML?
W praktyce może to wyglądać następująco:
See the Pen Border Style by Aura (@Julka85) on CodePen.
Czy można inaczej zapisać obramowanie?
Podobnie jak w przypadku właściwości CSS takich jak background sposób obramowania można zapisać na kilka rożnych sposobów. Chodzi tu o metodę zapisu uproszczoną np. zamiast:
p.dotted {
border-style: dotted;
border-width: 2px;
border-color:#ccc;
}możemy skumulować to do
p.dotted {border: 2px dotted #ccc;}Jak widać chociaż elemety są stworzone w HTML same cechy dodajemy w CSS.
Przeglądarka sama rozbije sobie ten zapis w efekcie efekt końcowy będzie identyczny.
Jak uzyskać obramowanie tylko dla jednej z krawędzi?
Warto pamiętać, że CSS w wielu przypadkach składa się z angielskich fraz i słów. Dlatego nikogo nie powinno dziwić nazewnictwo elementów:
- border-top – góra krawędź
- border-bottom – dolna krawędź
- border-left – lewa krawędź
- border-right – prawa krawędź
przykładowo kod będzie wyglądał więc tak:
p.dotted {border-left: 2px dotted #ccc;}Oznacza to że lewa krawędź będzie kropkowana.
Warto przeczytać:
Źródło:
http://www.w3schools.com/css/css_border.asp