Udostępnij za pośrednictwem

  • Artykuł

          

Encyklopedia: HTML i CSS - Jak zmienić wygląd span w CSS - Kurs HTML i CSS Udostępnij na: Facebook

Autor: Mateusz Mikulski

Opublikowano: 2011-09-30

Podczas tworzenia treści na stronach WWW, często zachodzi potrzeba wyróżnienia pewnych elementów tekstu. W takim przypadku do grupowania elementów używany jest znacznik <span>. Jego wygląd możemy łatwo zmienić za pomocą stylów CSS. Najczęściej zmienianymi elementami wyglądu zawartości znacznika <span> jest zmiana koloru fontu tekstu w nim zawartego, lub stylu fontu (pochylona, pogrubiona), czy też obramowania wokół elementów w nim zawartych, a także zmiana tła tekstu.

Przykład

Przykładowe zastosowanie zmiany wyglądu zawartości znacznika <span> w CSS prezentuje poniższy kod:

<html> 
<title>Jak zmienić wygląd span w CSS</title>
<head>
<style type="text/css">
    #zielony { color:green; }
    #pochylony { font-style:italic; }
    #pogrubiony{ font-weight:bold; }
    #ramka { border:dashed black; }
    #tlo { background-color:Silver; }
</style>
</head>
<body>

    <h2>Tekst po zmianie wyglądu znaczników span</h2>
<p>Lorem ipsum dolor sit amet,
 <span id="zielony">consectetur adipiscing elit. Vivamus in est sem</span>.
 Vestibulum sit amet tellus nisi. Integer eros lectus, fermentum et laoreet at,
 <span id="pochylony">dignissim eu urna. Proin id nisl quis ligula elementum</span> 
vehicula venenatis at nisl.
 <span id="pogrubiony">Donec vitae nulla sit amet turpis iaculis fringilla vel non nulla </span>.
 <span id="ramka">Vivamus erat massa, convallis eget dictum non, ultricies vulputate mauris. Vestibulum tempor felis vitae ligula dictum ac fringilla quam rhoncus.</span> 
Donec scelerisque retium ac augue. Ut acretium ac augue. Ut acretium ac augue. retium ac augue. Ut acDonec scelerisque Donec scelerisque Donec scelerisque Donec scelerisque ligula quis tellus ultrices at ultrices libero fermentum. 
<span id="tlo">Phasellus erat eros, ullamcorper ut vestibulum sit amet, pretium ac augue. Ut ac felis turpis, et commodo sem.</span>
 Nam eu sollicitudin tortor. Vivamus ut urna eget odio varius congue vel et diam.</p>

</body>
</html>

Powyższy kod, po sprawdzeniu w przeglądarce, prezentuje się tak, jak na Rys. 1.

Rys. 1. Strona zawierająca znaczniki span ze zmienionym wyglądem.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać <span> w samouczku: