Element <span>
Mirosław Zelent
Pojemnik, na pierwszy rzut oka podobny do <div>
, jednak w odróżnieniu od niego, element <span>
nie zachowuje się blokowo (nie spowoduje zmian w strukturze blokowej witryny, niczego nie przesunie). Słowo span ma w języku angielski wiele znaczeń, jednak w tym kontekście przetłumaczymy je jako: zasięg, rozpiętość. Najczęściej element <span>
tworzymy po to, aby zdefiniować zasięg działania jakiejś klasy w CSS.
Sam znacznik nie posiada żadnej roli, poza właśnie prostym zdefiniowaniem iż odtąd dotąd obowiązuje dany styl. Dlatego też atrybutami znacznika <span>
będą najczęściej class
, albo ewentualnie <style>
. Dobrym praktycznym przykładem zastosowania <span>
, jest chęć zapisania jednego wyrazu innym kolorem czcionki, na przykład czerwonym:
<style> .cz { color:red; } </style>
<!-- ustawienie czerwonego koloru czcionki dla klasy .cz -->
Polowanie na <span class="cz">Czerwony</span> Październik
Rezultat w przeglądarce:
Polowanie na Czerwony Październik
Takie użycie <span>
zastąpiło nieużywane już dzisiaj tagi <font>
z atrybutem color
. Tagów <font>
nie używamy, gdyż interesuje nas rozdzielenie wyglądu strony od jej zawartości.
Czasami, w niektórych kodach źródłowych, zobaczysz elementy <span>
, które zachowują się blokowo, tzn. tak jak divy. Jest to możliwe, jeśli w klasie spana wymusimy takie zachowanie dopisując: display: block;
Więcej informacji dotyczących elementu span znajdziesz w tym miejscu.
Polecamy: Sekurak Academy 2024
Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.
Książka: Wprowadzenie do bezpieczeństwa IT
Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!
Pomóż dzieciom
Polska Akcja Humanitarna od wielu lat dożywia dzieci. Prosimy, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękujemy!
Komentarze
Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach! Dziękujemy Wam za poświęcony na to czas!
Disqus