Przejdź do treści

Wstawianie stylów - CSS

Rozciąganie stylu <span style>

W jaki sposób objąć stylem kilka elementów tekstowych?

<span style="cecha: wartość; cecha2: wartość2...">...</span>
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.

Znacznik <span>...</span> pozwala na objęcie pewnego większego fragmentu dokumentu. Pojedynczym znacznikiem <span>...</span> możemy objąć kilka różnych elementów, które są wyświetlane w linii (sam element SPAN tak właśnie jest wyświetlany), np. wytłuszczenie tekstu oraz kursywę. 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ć.

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

Przykład <span style>

Po wpisaniu w edytorze:
<span style="color: red">
	<b>To jest pogrubienie (element wyświetlany w linii) w ramach SPAN</b>,
	a to jest zwykły tekst - również wewnątrz span.
</span>
Otrzymamy:

To jest pogrubienie (element wyświetlany w linii) w ramach SPAN, a to jest zwykły tekst - również wewnątrz SPAN.

Pytania i odpowiedzi

Do czego służy znacznik SPAN?

Znacznik <span> w HTML służy do wyróżniania lub stylizacji konkretnego fragmentu tekstu lub zawartości bez zmiany struktury dokumentu. Może być używany do zastosowań takich jak zmiana koloru, dodanie efektu podkreślenia lub nadania specjalnego formatowania wybranym słowom lub literom.

Czym się różni SPAN od DIV?

Zarówno znacznik <span> jak i <div> są znacznikami kontenerowymi w HTML, jednak różnią się głównie zastosowaniem i wpływem na strukturę dokumentu. <span> jest używany do stylizacji lub wyróżnienia fragmentów tekstu wewnątrz linii tekstu, podczas gdy <div> jest używany do tworzenia bloków kontenerowych, które mogą zawierać inne elementy HTML i służą do grupowania i układania zawartości strony.

Komentarze

Zobacz więcej komentarzy

Facebook