Jak zmienić kolor czcionki HTML?

Jeśli chodzi o dostosowywanie witryny, często pomija się kolor czcionki. W większości przypadków właściciele witryn pozostawiają domyślny kolor czcionki, taki jak czarny lub jakikolwiek inny, zdefiniowany przez ich style motywu dla koloru tekstu głównego i nagłówka.

Jednak z kilku powodów warto zmienić kolor czcionki HTML w witrynie. Zmiana koloru czcionki HTML może wydawać się zniechęcająca, ale jest całkiem prosta. Istnieje kilka sposobów na zmianę koloru czcionki w Twojej witrynie.

W tym poście pokażemy Ci różne sposoby zmiany koloru czcionek Twojej witryny, a także przedyskutujemy, dlaczego chcesz to zrobić w pierwszej kolejności.

Po co zmieniać kolor czcionki HTML?

Chcesz zmienić kolor czcionki, ponieważ może to poprawić czytelność i dostępność Twojej witryny. Na przykład, jeśli Twoja witryna używa ciemniejszego schematu kolorów, pozostawienie czarnego koloru czcionki utrudniłoby odczytanie tekstu w witrynie.

Innym powodem, dla którego warto rozważyć zmianę koloru czcionki, jest użycie ciemniejszego koloru z palety kolorów marki. To kolejna okazja do wzmocnienia Twojej marki. Buduje spójność marki i zapewnia, że ​​tekst we wszystkich kanałach marketingowych wygląda tak samo.

Pomijając to, spójrzmy, jak możesz zdefiniować i zmienić kolor czcionki HTML.

Jeśli chodzi o dostosowywanie witryny, kolor czcionki często jest pomijany… ale jest to prosta zmiana, która może dodać wiele osobowości! Kliknij, aby tweetować

Sposoby definiowania koloru

Istnieje kilka sposobów definiowania koloru w projektowaniu stron internetowych, w tym nazwa, wartości RGB, kody szesnastkowe i wartości HSL. Przyjrzyjmy się, jak działają.

Nazwa koloru

Nazwy kolorów to najprostszy sposób na zdefiniowanie koloru w stylach CSS. Nazwa koloru odnosi się do konkretnej nazwy koloru HTML. Obecnie obsługiwanych jest 140 nazw kolorów i możesz użyć dowolnego z tych kolorów w swoich stylach. Na przykład możesz użyć „niebieskiego”, aby ustawić kolor dla pojedynczego elementu na niebieski.

Jednak wadą tego podejścia jest to, że nie wszystkie nazwy kolorów są obsługiwane. Innymi słowy, jeśli użyjesz koloru, którego nie ma na liście obsługiwanych kolorów, nie będziesz mógł użyć go w swoim projekcie według nazwy koloru.

Wartości RGB i RGBA

Następnie mamy wartości RGB i RGBA. RGB oznacza czerwony, zielony i niebieski. Definiuje kolor, mieszając wartości czerwonego, zielonego i niebieskiego, podobnie jak miesza się kolor na rzeczywistej palecie.

Wartość RGB wygląda tak: RGB(153,0,255). Pierwsza liczba określa kolor czerwony, druga kolor zielony, a trzecia kolor niebieski.

Wartość każdego koloru wejściowego może mieścić się w zakresie od 0 do 255, gdzie 0 oznacza, że ​​kolor w ogóle nie występuje, a 255 oznacza, że ​​dany kolor ma maksymalną intensywność.

Wartość RGBA dodaje jeszcze jedną wartość do miksu i jest to wartość alfa reprezentująca krycie. Waha się od 0 (nieprzezroczysty) do 1 (w pełni przezroczysty).

Wartość szesnastkowa

Kody kolorów szesnastkowych działają podobnie do kodów RGB. Składają się z cyfr od 0 do 9 i liter od A do F. Kod szesnastkowy wygląda tak: #800080. Pierwsze dwie litery określają intensywność koloru czerwonego, dwie środkowe liczby określają intensywność koloru zielonego, a dwie ostatnie określają intensywność koloru niebieskiego.

Wartości HSL i HSLA

Innym sposobem definiowania kolorów w HTML jest użycie wartości HSL. HSL oznacza odcień, nasycenie i lekkość.

Odcień używa stopni od 0 do 360. Na standardowym kole kolorów czerwony to około 0/360, zielony to 120, a niebieski to 240.

Nasycenie używa wartości procentowych do określenia stopnia nasycenia koloru. 0 reprezentuje czerń i biel, a 100 reprezentuje pełny kolor.

Wreszcie, jasność wykorzystuje procenty podobnie jak nasycenie. W tym przypadku 0% reprezentuje czerń, a 100% reprezentuje biel.

Na przykład fioletowy kolor, którego używaliśmy w tym artykule, będzie wyglądał tak w HSL: hsl(276, 100%, 50%) .

HSL, podobnie jak RGB, obsługuje nieprzezroczystość. W takim przypadku użyjesz wartości HSLA, gdzie A oznacza alfa i jest zdefiniowana liczbą od 0 do 1. Jeśli chcemy zmniejszyć krycie przykładowego fioletu, użyjemy tego kodu: hsl(276, 100%, 50%, .85) .

Teraz, gdy wiesz, jak zdefiniować kolor, przyjrzyjmy się różnym sposobom zmiany koloru czcionki HTML.

Stare: <font> Tagi

Zanim HTML5 został wprowadzony i ustawiony jako standard kodowania, można było zmienić kolor czcionki za pomocą znaczników czcionek. Mówiąc dokładniej, użyjesz znacznika czcionki z atrybutem koloru, aby ustawić kolor tekstu. color został określony za pomocą nazwy lub kodu szesnastkowego.

Oto przykład tego, jak wyglądał ten kod z kodem koloru szesnastkowego:

 <font color="#800080">This text is purple.</font>

I w ten sposób możesz ustawić kolor tekstu na fioletowy, używając nazwy koloru.

 <font color="purple">This text is purple.</font>

Jednak tag <font> jest przestarzały w HTML5 i nie jest już używany. Zmiana koloru czcionki to decyzja projektowa, a projektowanie nie jest głównym celem HTML. Dlatego ma sens, że tagi <font> nie są już obsługiwane w HTML5.

Jeśli więc tag <font> nie jest już obsługiwany, jak zmienić kolor czcionki HTML? Odpowiedź jest z Cascading Style Sheets lub CSS.

Nowość: Style CSS

Aby zmienić kolor czcionki HTML za pomocą CSS, użyjesz właściwości koloru CSS w połączeniu z odpowiednim selektorem. CSS pozwala używać nazw kolorów, wartości RGB, szesnastkowych i HSL do określenia koloru. Istnieją trzy sposoby wykorzystania CSS do zmiany koloru czcionki.

Wbudowany CSS

Wbudowany CSS jest dodawany bezpośrednio do pliku HTML. Użyjesz tagu HTML, takiego jak <p>, a następnie nada mu styl za pomocą właściwości koloru CSS w następujący sposób:

 <p>This is a purple paragraph.</p>

Jeśli chcesz użyć wartości szesnastkowej, Twój kod będzie wyglądał tak:

 <p>This is a purple paragraph.</p>

Jeśli zamierzasz używać wartości RGB, napiszesz to w ten sposób:

 <p>This is a purple paragraph.</p>

Na koniec, używając wartości HSL, użyjesz tego kodu:

 <p>This is a purple paragraph.</p>

Powyższe przykłady pokazują, jak zmienić kolor akapitu w witrynie. Ale nie ograniczasz się do samych akapitów. Możesz zmienić kolor czcionki nagłówków oraz linków.

Na przykład zastąpienie powyższego tagu <p> tagiem <h2> zmieni kolor tekstu nagłówka, natomiast zastąpienie go tagiem <a> zmieni kolor tego linku. Możesz również użyć elementu <span> do pokolorowania dowolnej ilości tekstu.

Zapisz się do newslettera

Chcesz wiedzieć, jak zwiększyliśmy ruch o ponad 1000%?

Dołącz do ponad 20 000 innych osób, które otrzymują nasz cotygodniowy biuletyn z poufnymi wskazówkami dotyczącymi WordPressa!

Zapisz się teraz

Jeśli chcesz zmienić kolor tła całego akapitu lub nagłówka, jest to bardzo podobne do zmiany koloru czcionki. Musisz zamiast tego użyć atrybutu background-color i użyć nazwy koloru, wartości szesnastkowych, RGB lub HSL, aby ustawić kolor. Oto przykład:

<p>

Wbudowany CSS

Wbudowany CSS znajduje się w <style> i jest umieszczony pomiędzy znacznikami head w dokumencie HTML.

Kod będzie wyglądał tak, jeśli chcesz użyć nazwy koloru:

 <!DOCTYPE html> <html> <head> <style> <p> { color: purple; } </style> </head>

Powyższy kod zmieni kolor każdego akapitu na stronie na fioletowy. Podobnie jak w przypadku wbudowanej metody CSS, możesz użyć różnych selektorów, aby zmienić kolor czcionki nagłówków i linków.

Jeśli chcesz użyć kodu szesnastkowego, oto jak ten kod będzie wyglądał:

 <!DOCTYPE html> <html> <head> <style> <p> { color: #800080; } </style> </head>

Poniższy przykład wykorzystuje wartości RBGA, więc możesz zobaczyć przykład ustawienia krycia:

 <!DOCTYPE html> <html> <head> <style> <p> { color: RGB(153,0,255,0.75), } </style> </head>

A kod HSL wyglądałby tak:

 <!DOCTYPE html> <html> <head> <style> <p> { color: hsl(276, 100%, 50%), } </style> </head>

Zewnętrzny CSS

Wreszcie, możesz użyć zewnętrznego CSS, aby zmienić kolor czcionki w swojej witrynie. Zewnętrzny CSS to CSS umieszczony w oddzielnym pliku arkusza stylów, zwykle nazywanym style.css lub stylesheet.css.

Ten arkusz stylów odpowiada za wszystkie style w Twojej witrynie i określa kolory i rozmiary czcionek, marginesy, dopełnienie, rodziny czcionek, kolory tła i inne. W skrócie, arkusz stylów odpowiada za wygląd Twojej witryny.

Aby zmienić kolor czcionki za pomocą zewnętrznego CSS, użyj selektorów do stylizacji żądanych części kodu HTML. Na przykład ten kod zmieni cały tekst treści w Twojej witrynie:

 body {color: purple;}

Pamiętaj, że możesz użyć wartości RGB, szesnastkowych i HSL, a nie tylko nazw kolorów, aby zmienić kolor czcionki. Jeśli chcesz edytować arkusz stylów, zaleca się to w edytorze kodu.

Wbudowany, wbudowany czy zewnętrzny?

Więc teraz wiesz, jak użyć CSS do zmiany koloru czcionki. Ale jakiej metody powinieneś użyć?

Jeśli używasz wbudowanego kodu CSS, dodasz go bezpośrednio do pliku HTML. Ogólnie rzecz biorąc, ta metoda jest odpowiednia do szybkich poprawek. Jeśli chcesz zmienić kolor określonego akapitu lub nagłówka na jednej stronie, ta metoda jest najszybszym i najmniej skomplikowanym sposobem na zrobienie tego.

Jednak style wbudowane mogą zwiększyć rozmiar pliku HTML. Im większy jest plik HTML, tym dłużej trwa ładowanie strony internetowej. Oprócz tego wbudowany CSS może sprawić, że Twój HTML będzie bałaganiarski. W związku z tym wbudowana metoda używania CSS do zmiany koloru czcionki HTML jest ogólnie odradzana.

Wbudowany CSS jest umieszczany pomiędzy znacznikami <head> oraz wewnątrz znaczników <style>. Podobnie jak wbudowany CSS, jest dobry do szybkich poprawek i zastępowania stylów określonych w zewnętrznym arkuszu stylów.

Ważną różnicą między stylami wbudowanymi i osadzonymi jest to, że będą one miały zastosowanie do każdej strony, na której załadowane są tagi head, podczas gdy style wbudowane mają zastosowanie tylko do określonej strony, na której się znajdują, zazwyczaj do elementu, na który są kierowane na tej stronie.

Ostatnia metoda, zewnętrzny CSS, wykorzystuje dedykowany arkusz stylów do definiowania stylów wizualnych. Ogólnie rzecz biorąc, najlepiej jest użyć zewnętrznego arkusza stylów, aby przechowywać wszystkie style w jednym miejscu, skąd można je łatwo edytować. Oddziela to również prezentację i projekt, dzięki czemu kod jest łatwy w zarządzaniu i utrzymaniu.

Należy pamiętać, że style wbudowane i osadzone mogą zastępować style ustawione w zewnętrznym arkuszu stylów.

Znaczniki czcionek lub style CSS: zalety i wady

Dwie podstawowe metody zmiany kolorów czcionek HTML to użycie znacznika czcionki lub stylów CSS. Obie te metody mają swoje plusy i minusy.

Tagi czcionek HTML Plusy i minusy

Tag czcionki HTML jest łatwy w użyciu, więc jest to zaleta na jego korzyść. Zazwyczaj CSS jest bardziej skomplikowany i trwa dłużej niż wpisanie <font color="purple"> . Jeśli masz starszą witrynę, która nie korzysta z HTML5, tag czcionki jest realną metodą zmiany koloru czcionki.

Mimo że tag czcionki jest łatwy w użyciu, nie powinieneś go używać, jeśli Twoja witryna korzysta z HTML. Jak wspomniano wcześniej, tag czcionki został przestarzały w HTML5. Należy unikać używania przestarzałego kodu, ponieważ przeglądarki mogą w dowolnym momencie przestać go obsługiwać. Może to prowadzić do uszkodzenia witryny i nieprawidłowego działania lub, co gorsza, w ogóle nie wyświetla się dla odwiedzających.

Zalety i wady CSS

CSS, podobnie jak znacznik czcionki, ma swoje wady i zalety. Najważniejszą zaletą korzystania z CSS jest to, że jest to właściwy sposób na zmianę koloru czcionki i określenie wszystkich innych stylów dla Twojej witryny.

Jak wspomniano wcześniej, oddziela prezentację od projektu, co ułatwia zarządzanie i utrzymanie kodu.

Z drugiej strony, CSS i HTML5 mogą zająć trochę czasu, aby nauczyć się i poprawnie pisać w porównaniu ze starym sposobem pisania kodu.

Pamiętaj, że w CSS masz różne sposoby zmiany koloru czcionki, a każda z tych metod ma swój własny zestaw zalet i wad, jak omówiono wcześniej.

Wskazówki dotyczące zmiany koloru czcionki HTML

Teraz, gdy wiesz, jak zmienić kolor czcionki HTML, oto kilka wskazówek, które ci pomogą.

Użyj próbnika kolorów

Zamiast losowego wybierania kolorów, użyj próbników kolorów, aby wybrać odpowiednie kolory. Zaletą selektora kolorów jest to, że poda nazwę koloru i prawidłowe wartości szesnastkowe, RGB i HSL, których należy użyć w kodzie.

Sprawdź kontrast

Ciemny tekst z ciemnym tłem oraz jasny tekst z jasnym tłem nie działają dobrze razem. Sprawią, że tekst na Twojej stronie będzie trudny do odczytania. Możesz jednak użyć narzędzia do sprawdzania kontrastu, aby zapewnić dostępność kolorów witryny i czytelność tekstu.

Znajdź kolor za pomocą metody inspekcji

Jeśli widzisz kolor, który Ci się podoba na stronie internetowej, możesz sprawdzić kod, aby uzyskać wartość szesnastkową, RGB lub HSL koloru. W Chrome wszystko, co musisz zrobić, to wskazać kursorem część strony internetowej, którą chcesz sprawdzić, kliknąć prawym przyciskiem myszy i wybrać Sprawdź . Spowoduje to otwarcie panelu kontroli kodu, w którym możesz zobaczyć kod HTML witryny i odpowiadające mu style.

Chcesz zmienić kolor czcionki w swojej witrynie? To proste! Ten przewodnik pomoże Ci zacząć ️ Kliknij, aby tweetować

Streszczenie

Zmiana koloru czcionki HTML może pomóc poprawić czytelność i dostępność witryny. Może również pomóc w ustaleniu spójności marki w stylach witryny.

W tym przewodniku poznałeś cztery różne sposoby zmiany koloru czcionki HTML: za pomocą nazw kolorów, kodów szesnastkowych, wartości RGB i HSL.

Omówiliśmy również, jak zmienić kolor czcionki za pomocą wbudowanego, osadzonego i zewnętrznego kodu CSS, a także użyć tagu czcionki oraz zalet i wad każdej metody. Do tej pory powinieneś dobrze wiedzieć, której metody należy użyć do zmiany koloru czcionki HTML, więc jedyne, co pozostało do zrobienia, to zaimplementowanie tych wskazówek w swojej witrynie.

Co myślisz o zmianie koloru czcionki za pomocą CSS i znacznika czcionki? Daj nam znać w sekcji komentarzy!