HTML/CSS, Poradniki webdevelopera

Jak zmienić kolor czcionki HTML?

1

Podczas codziennej pracy na stronie internetowej, może dojść do sytuacji w której będziesz chciał/ała wyróżnić poszczególne fragmenty tekstu kolorem. Kolor czcionki w HTML możemy zmienić na dwa sposoby. W tym artykule pokażemy zalety oraz wady obydwu rozwiązań, zaczynajmy!

Dostępne metody zmiany koloru czcionki w HTML

Tak jak wspomnieliśmy – domyślnie do dyspozycji mamy dwa sposoby aby zmienić kolor czcionki:

  • Poprzez dodanie parametru style w tagu HTML
  • Poprzez zdefiniowanie klasy CSS

Każde z tych rozwiązań jest przydatne i posiada swoje dedykowane (preferowane) użycie.

1. Zmiana koloru czcionki w Tagu HTML

Aby zmienić kolor elementu (tagu) wystarczy w jego kodzie dodać parametr style=”color:naszkolor;”.

Przedstawiamy przykład, który powinien rozjaśnić zagadnienie:

Tekst pierwotny:

<p>HTML jest super</p>

Tekst po oscylowaniu:

<p style="color:red;">HTML jest super</p>

Jak widzimy do naszego Tagu „p” dodaliśmy atrybut style z wartością color:red; – nasz tekst powinien być teraz koloru czerwonego.

Tag „p” odnosi się do całego akapitu, jeżeli chcemy zaznaczyć tylko fragment akapitu, możemy użyć następującego kodu:

<p>HTML jest <span style="color:red;">super</span></p>

Jak widzimy, do zaznaczenia fragmentu tekstu, może posłużyć Tag „span” – metodyka oscylowania jest identyczna.

Zalety podejścia:

– Wygodna metoda podczas szybkiej edycji treści

Wady podejścia:

– W momencie edycji, zmianę musimy wprowadzić ręcznie na wszystkich elementach

2. Zmiana koloru poprzez zdefiniowanie klasy CSS

Drugą metodą oscylowania elementu jest utworzenie dedykowanej klasy lub oznaczenie wszystkich tagów z danej grupy. Rozważmy identyczny przykład z podejściem dedykowanej klasy.

Do wizualizacji przykładu potrzebować będziemy całej struktury dokumentu HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Ćwiczymy stylowanie</title>
</head>
<body>
<p class="kolorczcionki"> HTML jest prosty w obsłudze</p>
<p class="kolorczcionki"> Oscylowanie czcionki jest proste</p>
<p> HTML jest super</p>
</body>
</html>

W strukturze dodaliśmy 3 akapity, przy czym w dwóch dodaliśmy te same klasy.
W celu oscylowania naszego akapitu musimy utworzyć znaczniki <style></style> w sekcji <head></head> strony.

Po modyfikacji nasz kod wygląda następująco:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Ćwiczymy stylowanie</title>
<style>
 .kolorczcionki{color:red;}
</style>
</head>
<body>
<p class="kolorczcionki"> HTML jest prosty w obsłudze</p>
<p class="kolorczcionki"> Oscylowanie czcionki jest proste</p>
<p> HTML jest super</p>
</body>
</html>

Jak widzimy, pomiędzy znaczniki <style></style> (elementy oznaczające sekcję oscylowania strony) mamy określoną naszą klasę: kolorczcionki z parametrem color:red;

Taką klasę możemy wykorzystać w każdym tagu HTML. Jeżeli chcemy wyróżnić tylko fragment tekstu, możemy teraz skorzystać z następującego kodu:

<p> Fragment tekstu <span class=”kolorczcionki”>rozwiniętego</span>

Zalety takiego podejścia:

– Szybkość modyfikacji oscylowania
– Oddzielenie Css’a od tagow HTML

Wady:

– Brak większych wad

Podsumowanie

Zapoznając się z artykułem, pozyskałeś wiedzę na temat jak zmienić kolor czcionki w HTML. Jak sam pewnie zauważyłeś, metoda polegająca na dodaniu oscylowania kodu w pojedynczym tagu, nie jest długofalowo dobra – zdecydowanie lepiej jest stworzyć dedykowaną klasę i tam zawrzeć wszystkie odpowiednie parametry – opisane podejście jest praktykowane na większości serwisów internetowych.

1 komentarz do: “Jak zmienić kolor czcionki HTML?

  1. Artykuł super 🙂 Prosta wiedza szybka do przyswojenia

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *