Przejdź do treści

Wstawianie stylów - CSS

Wydzielone bloki <div style>

W jaki sposób objąć stylem grupę elementów blokowych?

<div style="cecha: wartość; cecha2: wartość2...">...</div>
Jako "cecha" należy wpisać o jakie konkretnie atrybuty formatowania nam chodzi (opisane w kolejnych rozdziałach).
Natomiast jako wyraz "wartość" wpisujemy dokładną wartość atrybutu.

Fragment dokumentu wydzielony za pomocą bloku <div>...</div> możemy swobodnie formatować. Element ten tak dobrze nadaje się do osadzania stylów, ponieważ sam w sobie nie ma określonego żadnego formatowania, które mogłoby kolidować z efektem, jaki chcemy uzyskać. Metoda ta jest bardzo podobna do SPAN, lecz obejmuje zwykle większe fragmenty dokumentu (może zawierać w sobie różne znaczniki jak również inne bloki). Dodatkowo DIV domyślnie jest wyświetlany:

XXXXXXXXXXXXXXXXXXXXXXXX
w bloku
XXXXXXXXXXXXXXXXXXXXXXXX

natomiast SPAN:

XXXXXXXXXXXXXXXXXXXXXXXXw liniiXXXXXXXXXXXXXXXXXXXXXXXX

Generalnie element blokowy (DIV) może zawierać wewnątrz siebie zwykły tekst, jak również inne elementy blokowe. Został on pomyślany do tworzenia obszerniejszych struktur. Natomiast elementy wyświetlanie w linii (SPAN) nie mogą zawierać elementów blokowych, ale mogą inne elementy wyświetlane w linii oraz zwykły tekst. Wewnątrz DIV można oczywiście wpisać również SPAN [Aby dowiedzieć się więcej, zobacz: Wyświetlanie].

Zwróć uwagę, że jednemu selektorowi możemy nadać kilka atrybutów (cech). Są one wtedy rozdzielone średnikami.

Przykład <div style>

Po wpisaniu w edytorze:
<div style="background-color: yellow">
	<span style="color: red">
		<b>To jest pogrubienie w ramach DIV oraz SPAN i dlatego jest czerwone na żółtym tle</b>,
		a to jest zwykły tekst - również wewnątrz DIV i SPAN.
	</span>
	To jest zwykły tekst, ale tylko wewnątrz DIV - dlatego nie jest czerwony, ale ma żółte tło.
	<p>A to jest akapit (element blokowy) w ramach DIV.</p>
</div>
Otrzymamy:
To jest pogrubienie w ramach DIV oraz SPAN i dlatego jest czerwone na żółtym tle, a to jest zwykły tekst - również wewnątrz DIV i SPAN. To jest zwykły tekst, ale tylko wewnątrz DIV - dlatego nie jest czerwony, ale ma żółte tło.

A to jest akapit (element blokowy) w ramach DIV.

Pytania i odpowiedzi

Jak podzielić stronę na bloki HTML?

Stronę HTML można podzielić na bloki za pomocą znacznika <div>, który tworzy kontenerowy blok bez żadnych domyślnych stylów lub efektów wizualnych. Poprzez nadawanie stylów CSS możemy nadal nadzorować wygląd i układ tych bloków oraz grupować w nich powiązane elementy.

Co daje DIV HTML?

Znacznik <div> w HTML jest elementem blokowym, który pozwala tworzyć kontenerowe bloki na stronie. Dzięki niemu można grupować inne elementy, tworzyć układy strony, stosować style CSS oraz manipulować zawartością za pomocą skryptów JavaScript, co umożliwia bardziej elastyczną i kontrolowaną strukturę strony internetowej.

Komentarze

Zobacz więcej komentarzy

Facebook