Semantyka tekstu - element "span"
Gdy musimy (z jakiegoś powodu) umieścić interesującą nas zawartość frazowaną w zawartości dodatkowego elementu HTML, a jednocześnie nie chcemy, aby wybrany przez nas element HTML narzucał z góry ustalone dodatkowe znaczenie dla wspomnianej zawartości frazowanej , wtedy do wspomnianego celu możemy wykorzystać element span.
Przykład:
<p>
Moim ulubionym kwiatem jest róża.
</p>Rezultat:
Załóżmy, że znamy język CSS. Załóżmy, że chcemy zmienić kolor każdego znaku budującego wyraz róża. Chcemy, aby znaki znajdujące się na pozycjach parzystych posiadały kolor czerwony, a znaki znajdujące się na pozycjach nieparzystych posiadały kolor niebieski. Do osiągnięcia wspomnianego celu możemy wykorzystać elementy span oraz reguły języka CSS.
Przykład:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Moje ulubione rzeczy</title>
<style>
.koloruj > :nth-child(even) { color:red; }
.koloruj > :nth-child(odd) { color:blue; }
</style>
</head>
<body>
<p>
Moim ulubionym kwiatem jest <span class="koloruj"><span>r</span><span>ó</span><span>ż</span><span>a</span></span>.
</p>
</body>
</html>Rezultat:
Mimo że domyślnie element span nie narzuca żadnego dodatkowego znaczenia dla treści, która zostanie umieszczona w zawartości wspomnianego elementu span, w naszym przykładzie sensem wykorzystania elementów span jest wyszczególnienie treści, której wygląd ma zostać zmieniony za pomocą reguł języka CSS.
Last updated