Uwaga: Poniższy artykuł pomoże Ci w: Zmiana kolorów czcionek w HTML i CSS [Beginner-Friendly Tutorial]
Chcesz zmienić kolory czcionek w HTML, ale nie wiesz, jak to zrobić?
Ważne jest, aby stworzyć odpowiedni kontrast między interfejsem witryny a kolorem czcionki, aby czytelnicy mogli łatwo czytać i udostępniać Twoje treści.
Ponadto unikalny kolor czcionki może wyróżnić Twoją markę na tle konkurencji i zdefiniować jej osobowość wśród docelowych odbiorców.
Ale bez najnowszej wiedzy na temat kodowania HTML5 nie będziesz w stanie udostępnić koloru czcionki wszystkim użytkownikom.
I dlatego w tym przyjaznym dla początkujących samouczku pokażę ci wszystko 4 metody zmiany kolorów czcionek w HTML i CSS z odpowiednimi szczegółami.
Zmiana koloru czcionki HTML (w skrócie)
Zanim zagłębimy się w metody zmiany koloru czcionki w HTML, odpowiedzmy na dwa najczęściej zadawane pytania:
Czy mogę zmienić kolor czcionki tekstu?
Tak, możesz zmienić kolor czcionki tekstu na stronie bloga, dodając właściwości font-color w atrybucie style znacznika HTML za pomocą wbudowanego kodu CSS.
Na przykład dla danego
Bloggingtips
możemy zmienić kolor czcionki z domyślnego czarnego (kod szesnastkowy:#000000) na granatowy (kod szesnastkowy: #000080) za pomocą tego kodu:
Jak zmienić kolor czcionki w HTML?
Możesz zmienić kolor czcionki w HTML, używając znaczników czcionek i określając kolory za pomocą ich kodu szesnastkowego lub nazwy.
Np. będzie to kod HTML akapitu blogu w kolorze niebieskim:
Ocean jest niebieski. lub Ocean jest niebieski.
Jednak tag nie jest już obsługiwany w HTML po wprowadzeniu HTML5 w 2014 roku.
Celem HTML jest opisanie struktury strony internetowej, a nie określanie stylu tekstu.
Dlatego znaczniki czcionek i centrum zostały wycofane i przeniesione do kaskadowych arkuszy stylów (CSS).
Jak określić kolor w HTML?
Istnieją cztery sposoby określania koloru w HTML:
Nazwy kolorów:
Najprostszym sposobem określenia koloru w arkuszach kaskadowych jest wpisanie nazwy koloru, jaką zwykle znamy w języku angielskim, np. niebieski, zielony, pomarańczowy itd.
Możesz także określić różne odcienie koloru podstawowego, takie jak szkarłat w kolorze czerwonym, jak pokazano powyżej.
CSS obsługuje obecnie 140 standardowych nazw kolorów.
Jednak na liście 140 obsługiwanych nazw kolorów nie znajdziesz rzadkich kolorów, takich jak „Sarcoline”.
Jeśli więc prowadzisz bloga o modzie lub urodzie, lepiej skorzystać z innych opcji z tej listy.
Kody szesnastkowe:
Kod szesnastkowy lub szesnastkowy to sześciocyfrowa reprezentacja koloru oparta na trzech kolorach podstawowych: czerwonym, zielonym i niebieskim.
Wszystkie kody szesnastkowe mają #RRGGBB, gdzie R oznacza kolor czerwony, G oznacza kolor zielony, a B oznacza kolor niebieski.
Tak więc czerń będzie reprezentowana przez #000000, ponieważ czerń nie ma odcieni czerwieni, zieleni ani niebieskiego, podczas gdy # FFFFFF będzie reprezentować biel, ponieważ biel zawiera wszystkie odcienie koloru RGB.
Używanie szesnastkowego nie jest intuicyjne, ale znajdziesz więcej opcji niż nazwy kolorów.
wartości RGB
Są podobne do kodów szesnastkowych, w których definiujesz kolor na podstawie czerwonego, zielonego i niebieskiego wejścia pomiędzy 0-255.
0 oznacza brak koloru, a 255 oznacza, że kolor jest w pełni obecny.
Na przykład RGB koloru pomarańczowego to RGB(255,165,0), ponieważ ma maksymalne stężenie czerwieni, znaczną obecność zieleni i brak obecności niebieskiego.
Istnieje powiązana wersja wartości RGB: RGBA, z „A” jako wartością alfa dla krycia.
Jego wartość waha się od 0 (nieprzezroczysty) do 1(całkowicie przezroczysty).
Wartości HSL:
Wreszcie mamy HSL, co oznacza odcień, nasycenie i jasność.
Odcień reprezentuje kolory na standardowym kole kolorów z wartościami takimi jak 0/360 lub 360/360 (dla koloru czerwonego), 240/360 (dla koloru niebieskiego) i tak dalej.
Nasycenie i Jasność są bardzo podobne, z wartościami od 0% (czarny) do 100% (biały).
Tak więc HSL pomarańczy będzie wynosił HSL(44, 96%, 71%).
Podobnie jak RGB, możesz dodać wartości krycia za pomocą a 0 Do 1 zakres.
Zmiana kolorów czcionek w HTML i CSS: Ultimate Cheatsheet
Teraz pokażemy Ci szczegółowy proces zmiany kolorów czcionek w HTML i CSS.
Skorzystaj z naszej ściągawki HTML, aby dodać charakteru swojej stronie internetowej bez doświadczenia w programowaniu.
Każde oprogramowanie do projektowania graficznego może utworzyć podgląd tego, jak kolor Twojej czcionki będzie wyświetlany użytkownikom, więc użyj go, aby sfinalizować wybór koloru, a następnie wykonaj następujące czynności:
Metoda #1: Zmiana kolorów czcionek bez użycia CSS
Jest to najprostsza metoda zmiany koloru czcionki, w której używasz znacznika i definiujesz kolor za pomocą nazwy czcionki lub kodu szesnastkowego.
Przykładem tego kodu będzie:
Brett jest grafikiem i pisarzem.
Jednak tag został wycofany wraz z wprowadzeniem HTML5.
Jeśli więc Twoja witryna znajduje się wśród 95% witryn w sieci WWW, które używają HTML, powinieneś unikać stosowania metody znacznika .
Przeglądarki internetowe mogą w każdej chwili przestać obsługiwać ten stary kod HTML, uniemożliwiając użytkownikom prawidłowy dostęp do treści.
Jednak obecnie wszystkie nowoczesne przeglądarki, w tym Chrome, Safari, Opera i Edge, obsługują znaczniki czcionek w formacie HTML.
Metoda #2: Zmiana kolorów czcionek za pomocą wbudowanego CSS
Możesz użyć wbudowanego CSS, aby dodać właściwości stylu bezpośrednio do pliku HTML.
Innymi słowy, umieszczasz elementy CSS bezpośrednio w kodzie HTML.
Oto wbudowany kod CSS zmieniający kolor tekstu na niebieski:
Brett jest grafikiem i pisarzem.
Możesz zdefiniować kolor za pomocą dowolnej z czterech metod opisanych powyżej (nazwa czcionki, kod szesnastkowy, wartości RGB lub wartości HSL) i zmienić kolory akapitów, nagłówków i hiperłączy.
Możesz użyć tej wbudowanej metody CSS, aby szybko zmienić kolor jednego akapitu lub nagłówka, co powoduje bałagan w pliku HTML i skraca czas ładowania.
Pagespeed jest jednym z kluczowych czynników wpływających na ranking i wrażenia użytkowników, więc lepiej unikać tej metody.
Metoda #3: Zmiana kolorów czcionek przy użyciu wewnętrznego lub osadzonego CSS
Aby zmienić kolory czcionek za pomocą wbudowanego CSS, musisz dodać znaczniki
Podobnie możesz zmienić kolory czcionek hiperłączy i nagłówków.
Różnica między wbudowanymi i osadzonymi metodami CSS polega na tym, że wbudowane CSS działa tylko dla określonej strony internetowej, podczas gdy wbudowane CSS będzie działać na wszystkich stronach załadowanych tagiem
.Ale osadzony CSS również psuje plik HTML, zmniejszając szybkość strony na różnych urządzeniach.
Metoda #4: Zmiana kolorów czcionek za pomocą zewnętrznego CSS
Twoja witryna ma osobny plik CSS opisujący rozmiar czcionki, kolor, rodzinę czcionek, wypełnienie, kolor tła i inne elementy stylistyczne witryny.
Możesz edytować ten plik CSS, aby zmienić rozmiar czcionki dla akapitów, nagłówków lub hiperłączy.
Na przykład, aby zmienić kolor tekstu na niebieski dla wszystkich akapitów w sekcji „content p”, dodaj ten kod do pliku CSS:
#treść p { kolor: niebieski; }
Aby zdefiniować kolor w zewnętrznym CSS, możesz użyć nazw kolorów, kodu szesnastkowego, wartości RGB lub HSL.
Jest to najlepsza metoda zmiany koloru czcionki, ponieważ utrzymuje wszystkie elementy stylizacji witryny w jednym miejscu, ułatwiając edycję.
Ponadto nie ma to wpływu na szybkość strony, co jest lepsze dla wygody użytkownika.
Note: Zmiany w wbudowanym lub wewnętrznym CSS mogą zastąpić zewnętrzny CSS.
Inne samouczki dotyczące zmiany kolorów czcionek do wypróbowania
Najlepiej używać CSS do zmiany kolorów czcionek, ponieważ jest to akceptowane przez HTML5 i sprawia, że treść Twojej witryny jest bardziej dostępna i przyszłościowa.
Oto kilka samouczków związanych ze zmienianiem kolorów czcionek do sprawdzenia:
Podsumowanie
Odpowiedni kolor czcionki może poprawić czytelność i czas oczekiwania, prowadząc do lepszych rankingów i widoczności w Internecie.
Kuszące jest użycie metody znaczników HTML , ale jest ona przestarzała i może spowolnić szybkość strony.
Dlatego najlepiej jest dodawać atrybuty kolorów za pomocą nazw kolorów, kodów szesnastkowych, wartości RGB lub HSL pod odpowiednim selektorem w pliku CSS, aby skutecznie zmieniać kolor czcionki witryny.
Używanie wbudowanego lub osadzonego CSS może sprawić, że kod Twojej witryny będzie chaotyczny i powolny, podobnie jak tagi HTML.
