Podświetlanie tekstu na stronie internetowej pomaga natychmiast przynieść ważne informacje do uwagi czytelnika. Na przykład, ten tekst jest wyróżniony na żółto i prawdopodobnie jako pierwszy przykuł Twoją uwagę. Istnieje kilka metod wyróżniania tekstu. Aby kontynuować, wybierz metodę z poniższej listy i postępuj zgodnie z instrukcjami.
Podkreślenie przy użyciu znacznika HTML5 <mark>
Jeśli pracujesz nad stroną HTML5, znacznik <mark> może szybko podświetlić tekst. Poniżej znajduje się przykład użycia znacznika mark oraz rezultat jego działania. Jeśli Twoja przeglądarka obsługuje znacznik <mark>, „podświetlony tekst” powinien mieć żółte tło.
Przykładowy kod
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Przykładowy wynik
Tutaj znajduje się przykład wyróżnionego tekstu przy użyciu tagu <mark>.
Podświetlanie tekstu z użyciem tylko kodu HTML
Aby podświetlić tekst z kodem HTML i obsługą wszystkich przeglądarek, ustaw styl background-color, jak pokazano w poniższym przykładzie, używając znacznika HTML <span>.
Przykładowy kod
<span style="background-color: #FFFF00">This text is highlighted in yellow.</span>
Przykładowy wynik
Ten tekst jest wyróżniony na żółto.
W powyższym przykładzie znacznik HTML <span> ma kod koloru tła #FFFF00, czyli żółty. W tym przypadku, słowo „żółty” może być użyte zamiast kodu koloru, lub jakiejkolwiek innej nazwy koloru w tej sprawie.
Z tym samym kodem, można również podświetlić jedno lub więcej słów w akapicie, aby zwrócić uwagę na określoną część tekstu.
Podświetl tekst za pomocą CSS & HTML
Możesz również utworzyć klasę CSS i ustawić atrybut „background-color”, jak pokazano w poniższym przykładzie.
Przykładowy kod
<style>body { background-color:blue; }.highlightme { background-color:#FFFF00; }p { background-color:#FFFFFF; }</style>
W powyższym kodzie CSS definiowane są trzy elementy. Po pierwsze, kolor tła ciała jest ustawiony na niebieski, po drugie, nowa klasa o nazwie „highlightme” ma żółte tło, a na koniec, znacznik akapitu ma białe tło.
Jeśli chcesz użyć klasy „highlightme” do podświetlenia tekstu, możesz utworzyć znacznik <span> w swoim kodzie HTML, który odwołuje się do klasy CSS.
Przykładowy kod
<span class="highlightme">test</span>
Jak wyróżnić cały akapit
Klasa CSS lub klasa stylu wspomniana powyżej może być również zastosowana do znacznika akapitu, jeśli chcesz wyróżnić cały akapit, jak pokazano poniżej.
Przykładowy kod
<p style="background-color: #FFFF00">This whole paragraph of text is highlighted in yellow.</p>
Przykładowy wynik
Ten cały akapit tekstu jest podświetlony na żółto.
Dodatkowe informacje
- Zobacz nasze strony związane z CSS, wyróżnieniem i definicją HTML dla dodatkowych informacji.
- Pomoc i wsparcie dla kolorów CSS i HTML.