Przejdź do treści

CSS / CSS dla zielonych

Ramki z tekstem

Jak ująć tekst w ramkę w postaci obramowania z zaokrąglonymi narożnikami i tłem?

Praktycznym zastosowaniem klas selektorów mogą być np. ramki wizualnie wyróżniające tekst, który się w nich znajduje. Wystarczy, że raz zdefiniujemy ich wygląd w arkuszu stylów:

.nazwa-klasy {
	deklaracje stylów
}

by następnie w miarę potrzeb móc ich wielokrotnie używać w dowolnym dokumencie HTML na naszej stronie:

<div class="nazwa-klasy">dowolny tekst...</div>
Przypominam, że w arkuszu stylów (pierwsze polecenie powyżej) nazwa-klasy musi być poprzedzona znakiem kropki (w tym miejscu po kropce nie można postawić spacji!), podczas gdy w kodzie HTML (drugie polecenie powyżej) znak kropki koniecznie trzeba usunąć. Ponadto w nazwie klasy najlepiej używać wyłącznie małych liter bez polskich znaków diakrytycznych, a zamiast spacji można skorzystać np. ze znaku myślnika.

Wygląd ramki w którą zostanie ujęty tekst, można określić za pomocą wielu cech (własności) wchodzących w skład deklaracji stylów.

Kolor tła ramki

.nazwa-klasy {
	background-color: kolor tła;
}
"kolor tła" jest definicją koloru.

Marginesy wewnątrz ramki

.nazwa-klasy {
	padding: szerokość;
}
albo:
.nazwa-klasy {
	padding-top: górny;
	padding-bottom: dolny;
	padding-left: lewy;
	padding-right: prawy;
}
Aby określić szerokość marginesu wewnętrznego bądź oddzielnie margines górny, dolny, lewy lub prawy, należy wpisać liczbę, a od razu po niej (koniecznie bez spacji!) jednostkę - np.: 10px.

Obramowanie

.nazwa-klasy {
	border-width: grubość;
	border-style: styl;
	border-color: kolor;
}

Aby określić grubość obramowania, należy wpisać liczbę, a od razu po niej (koniecznie bez spacji!) jednostkę - np.: 1px.

Zamiast "styl" należy wpisać jedną z następujących wartości określających wygląd linii obramowania:

  • solid - linia ciągła
  • dashed - linia przerywana
  • dotted - linia kropkowa

Natomiast "kolor" jest definicją koloru obramowania.

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu obramowania na stronach internetowych, zobacz rozdziały: Styl obramowania, Szerokość obramowania, Kolor obramowania.

Zaokrąglone narożniki

.nazwa-klasy {
	border-radius: promień;
}
Aby określić promień zaokrąglenia, należy wpisać liczbę, a od razu po niej (koniecznie bez spacji!) jednostkę - np.: 5px.

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu zaokrąglenia obramowania na stronach internetowych, zobacz rozdział: Zaokrąglenie obramowania.

Przykład

Wszystkie powyższe deklaracje można ze sobą dowolnie łączyć. Na przykład jeśli w arkuszu stylów umieścimy następującą definicję klasy:

.ramka {
	background-color: silver;
	padding: 10px;
	border-width: 1px;
	border-style: solid;
	border-color: gray;
	border-radius: 5px;
}

a następnie w dowolnym dokumencie HTML wstawimy taki kod:

<div class="ramka">To jest przykład ramki z tekstem...</div>

to na stronie otrzymamy:

To jest przykład ramki z tekstem...

Możemy również zrezygnować z obramowania i zaokrąglonych narożników:

To jest przykład ramki z tekstem...

albo dodać tylko obramowanie z marginesami wewnątrz, ale bez tła:

To jest przykład ramki z tekstem...

Oczywiście na jednej stronie możemy używać jednocześnie kilku różnie wyglądających ramek z tekstem. W tym celu wystarczy w arkuszu stylów zdefiniować każda klasę z inną nazwą.

Komentarze

Zobacz więcej komentarzy

Facebook