Dobry design typograficzny jest ważną częścią udanej witryny internetowej. CSS zapewnia doskonałą kontrolę nad wyglądem tekstu na stronach internetowych, które tworzysz. Obejmuje to możliwość zmiany koloru dowolnych czcionek, których używasz.
Poniżej przyjrzymy się zmianie koloru czcionki za pomocą zewnętrznego arkusza stylów i stylu używanego w znaczniku akapitu. Możesz zastosować tę samą właściwość stylu, aby zmienić kolor czcionki w dowolnym tagu otaczającym tekst, w tym w etykietka.
Dodawanie stylów do zmiany koloru czcionki
W tym przykładzie musisz mieć dokument HTML, aby zobaczyć zmiany CSS i oddzielny plik CSS dołączony do tego dokumentu. Przyjrzymy się właśnie elementowi akapitu.
Aby zmienić kolor tekstu dla każdego akapitu w pliku HTML, przejdź do zewnętrznego arkusza stylów i wpisz p {}. Umieść kolor właściwość w stylu, po której następuje dwukropek, np p {color:}. Następnie dodaj wartość koloru po właściwości, kończąc na średniku: p {color: black;}.
Wartości kolorów można wyrazić jako słowa kluczowe w kolorze, numery kolorów RGB lub szesnastkowe liczby kolorów. W naszym przykładzie tekst akapitu zostanie zmieniony na kolor czarny.
Jeśli jednak chcesz zmienić kolor tekstu na zielony, niebieski, czerwony itd., Użycie słów kluczowych w kolorze nie zapewni Ci elastyczności, którą możesz chcieć stworzyć w różnych odcieniach. Do tego dochodzą wartości szesnastkowe.
p {color: # 000000; }
Ten styl CSS może być używany do kolorowania akapitów czarnych, ponieważ kod szesnastkowy # 000000 tłumaczy się na czarny. Możesz nawet użyć skrótu z tą wartością heksadecymalną i zapisać ją jako # 000 z tymi samymi wynikami. p {color: # 2f5687; }
Jak wspomniano powyżej, wartości szesnastkowe działają dobrze, gdy potrzebujesz koloru, który nie jest po prostu czarny lub biały. Powyższa wartość szesnastkowa CSS ustawiałaby akapity na niebieski kolor, ale w odróżnieniu od słowa kluczowego "niebieski", ten kod szesnastkowy daje możliwość ustawienia bardzo specyficznego odcienia niebieskiego, średniego zakresu, koloru przypominającego łupek w tym przypadku . p {color: rgba (47, 86, 13, 1); }
Na koniec możesz również użyć wartości kolorów RGBA dla kolorów czcionki. RGCA jest obsługiwany we wszystkich nowoczesnych przeglądarkach, więc możesz używać tych wartości z przekonaniem, że będzie działać dla większości przeglądających, ale możesz też ustawić prosty sposób na powrót. Ta wartość RGBA jest taka sama, jak wcześniej określony niebieski kolor łupka. Pierwsze trzy wartości określają wartości Czerwone, Zielone i Niebieskie, a ostatnia liczba to ustawienie alfa dla przezroczystości. Ustawienie alfa jest ustawione na 1 na 100 procent, więc ten kolor nie ma przezroczystości. Jeśli ustawisz tę wartość na liczbę dziesiętną, np. .85, będzie to oznaczało krycie na poziomie 85 procent, a kolor będzie nieco przezroczysty. p { kolor: # 2f5687; kolor: rgba (47, 86, 13, 1);}
Jeśli chcesz kuloodporne wartości kolorów, naśladuj powyższy kod CSS. Ta składnia najpierw ustawia kod szesnastkowy, a następnie zastępuje tę wartość numerem RGBA. Oznacza to, że każda starsza przeglądarka, która nie obsługuje RGBA, otrzyma pierwszą wartość i zignoruje drugą. Kolory czcionek można zmieniać za pomocą zewnętrznego arkusza stylów, wewnętrznego arkusza stylów lub wbudowanego stylu w dokumencie HTML. Jednak najlepsze praktyki wymagają użycia zewnętrznego arkusza stylów dla stylów CSS. Wewnętrzny arkusz stylów, które są stylami napisanymi bezpośrednio w "nagłówku" dokumentu, są zazwyczaj używane tylko w przypadku małych, jednostronicowych stron internetowych. Należy unikać stylów inline, ponieważ są one zbliżone do starych tagów "font", którymi zajmowaliśmy się wiele lat temu. Te wbudowane style sprawiają, że bardzo trudno jest zarządzać stylem czcionki, ponieważ trzeba je zmienić przy każdym wystąpieniu stylu wbudowanego. Inne sposoby kształtowania strony HTML
