Udostępnij za pośrednictwem

  • Artykuł

          

Encyklopedia: Jak zrobić ramkę w CSS - Kurs HTML i CSS Udostępnij na: Facebook

Autor: Mateusz Mikulski

Opublikowano: 2011-10-25

Często spotykanym problemem, podczas tworzenia strony internetowej, jest wyróżnienie pewnych elementów na stronie, w sposób graficzny, poprzez dodanie do nich obramowania.

Obramowanie elementu powinno dodawać się za pomocą użycia stylów CSS, a konkretnie poprzez argument border. Aby dodać obramowanie do elementu możemy skorzystać z dwóch konstrukcji. Pierwszą z nich jest dodanie obramowania w następujący sposób:

selektor{
    border: styl_obramowania szerokość_obramowania kolor_obramowania;
}

Drugim sposobem jest następująca konstrukcja:

selektor {
    border-style:styl_obramowania;
    border-width:szerokość_obramowania;
    border-color:kolor_obramowania;
}

W obydwu konstrukcjach można wyróżnić:

  1. styl_obramowania – wartość odpowiadająca za styl obramowania, dostępne są następujące style obramowań:
  • dashed,
  • dotted,
  • solid,
  • double,
  • groove,
  • ridge,
  • inset,
  • outset,

Wygląd wszystkich stylów obramowań został zaprezentowany na Rys. 1.

Rys. 1. Prezentacja stylów obramowania.

  1. szerokość_obramowania – wartość odpowiadająca za szerokość obramowania, podawana w px (pikselach) lub określana za pomocą wartości: medium, thick, thin,
  2. kolor_obramowania– wartość odpowiadająca za kolor obramowania, podawana za pomocą kolorów z języka angielskiego lub kodów HEX.

Ponadto, istnieje również możliwość ustawienia różnych wartości stylu, szerokości czy koloru obramowania dla każdej z krawędzi elementu poprzez dodanie do każdego z atrybutów (border, border-style, border-width, border-color) dopisku, wskazującego na krawędź, do której ma się odnosić:

  • border-top – dopisek top wskazuje na zmianę wyglądu górnej krawędzi,
  • border-bottom – dopisek bottom wskazuje na zmianę wyglądu dolnej krawędzi,
  • border-left – dopisek left wskazuje na zmianę wyglądu lewej krawędzi,
  • border-right –dopisek right wskazuje na zmianę wyglądu prawej krawędzi.

Dla przykładu, aby odwołać się do stylu górnej krawędzi, powinno się skorzystać z następującej konstrukcji:

border-top-style:styl_obramowania;

Przykład

Poniżej zaprezentowano przykładowy kod, wykorzystujący opisane wyżej właściwości obramowania na stronie WWW. Przykładowe zastosowanie obramowania zostało zaprezentowane na Rys. 2.

<html>
<head>
<title>Jak zrobić ramkę w CSS</title>
    <style type="text/css">
#Ramka{ 
    border-top-style:dashed;
    border-bottom-style:solid;
    border-left-style:dotted;
    border-right-style:groove;
    border-top-width:10px;
    border-bottom-width:5px;
    border-left-width:5px;
    border-right-width:9px;
    border-top-color:silver;
    border-bottom-color:Red;
    border-left-color:Green;
    border-right-color:Blue;
}
    </style>
</head>
<body>
    <p id="Ramka">To jest element otoczony bardzo ciekawym obramowaniem</p>
</body>
</html>

Kod.txt

Rys. 2. Przykładowe zastosowanie obramowania.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać obramowanie w samouczku: