Jak zmienić kolor tekstu swojej witryny za pomocą CSS?

Posiadanie kontroli nad stroną internetową jest ważnym elementem projektowania stron internetowych. W idealnym świecie powinieneś być w stanie zmienić każdy aspekt projektu swojej witryny bez konieczności kompromisu w zakresie gotowego produktu.

Oczywiście strony internetowe często bywają uparte. Nie zawsze jest możliwe osiągnięcie pożądanych rezultatów bez zagłębiania się w świat CSS. Rzućmy okiem na to, jak możesz zmienić kolor tekstu za pomocą CSS w swojej witrynie, aby dać ci wyobrażenie o tym, jak możesz osiągnąć więcej dzięki sile CSS.

Zmiana koloru tekstu witryny za pomocą CSS

CSS został starannie zaprojektowany, aby zapewnić projektantom władzę nad ich projektami stron internetowych. Zmiana koloru tekstu za pomocą CSS w Twojej witrynie jest niezwykle łatwa; potrzebujesz tylko jednej reguły, aby to zrobić.

kolor niebieski;

Oczywiście same reguły CSS nie działają zbyt dobrze. Musisz sparować je z klasami elementów, identyfikatorami i identyfikatorami, aby upewnić się, że przeglądarki internetowe wiedzą, do czego odnosi się styl. Możesz zobaczyć przykłady użycia tej reguły z nagłówkiem H1, akapitem P i przyciskiem poniżej.

h1 { kolor: niebieski; }
p { kolor: czerwony; }
przycisk { kolor: czerwony; }

Powinno to dać ci podstawową wiedzę na temat tego, co należy zrobić, aby zmienić kolor tekstu witryny za pomocą CSS. Zwykle zajmuje to więcej czasu, zwłaszcza jeśli chcesz nadać różne kolory różnym tekstom w swojej witrynie.

Związane z: Objaśnienie modelu CSS Box z przykładami

Znalezienie odpowiedniej klasy CSS

Zanim będziesz mógł zmienić konkretny tekst na swojej stronie, musisz wiedzieć, jak go zidentyfikować w swoim CSS. Większość przeglądarek internetowych ma zestaw narzędzi, które mają pomóc programistom i prawdopodobnie ta, z której korzystasz, ma coś, co nazywa się Inspektor. Można to wykorzystać do zajrzenia do kodu HTML i innego kodu, który buduje witrynę internetową.

Otwarcie Inspektora

Otwarcie inspektora jest inne w każdej z przeglądarek na rynku. Poniżej omówiliśmy kilka najpopularniejszych przeglądarek, aby dać Ci przewagę:

• Google Chrome: CTRL + Shift + C lub Kropki menu > Więcej narzędzi > Narzędzia deweloperskie
• Microsoft Edge: CTRL + Shift + C lub Kropki menu > Więcej narzędzi > Narzędzia deweloperskie
• Mozilla Firefox: CTRL + Shift + C lub Kropki menu > Więcej narzędzi > Narzędzia dla programistów stron internetowych
• Apple Safari: Preferencje > Zaawansowany > Pokaż menu Develop na pasku menu i wtedy Rozwijać > Pokaż inspektora sieci

Znajdowanie odpowiedniego stylu tekstu CSS

Może to być mylące, gdy po raz pierwszy otworzysz Inspektora w przeglądarce. Będzie wiele rzeczy, których możesz nie zrozumieć, ale na razie nie musisz się tym martwić. Musisz tylko znaleźć nazwę stylu tekstu, który próbujesz zmienić.

Jako przykład, zamierzamy znaleźć i zmienić styl tekstu CSS używany w głównym nagłówku w sekcji MakeUseOf Programming. Możesz rozpocząć ten proces od sprawdzenia elementu, który należy zmienić.

• Google Chrome: Kliknij prawym przyciskiem myszy > Sprawdzać
• Microsoft Edge: Kliknij prawym przyciskiem myszy > Sprawdzać
• Mozilla Firefox: Kliknij prawym przyciskiem myszy > Sprawdzać lub Q
• Apple Safari: Kliknij prawym przyciskiem myszy > Sprawdź element

Spowoduje to, że konsola witryny/okno inspektora skupi się na elemencie, który próbujesz zmienić. W Chrome, Safari, Edge i Firefox powinieneś zobaczyć sekcję oznaczoną Style który zawiera cały kod CSS sprawdzanego elementu.

Powinieneś również zobaczyć swój element HTML podświetlony w okienku obok tego. Można to wykorzystać do określenia klasy lub identyfikatora elementu, który zmieniasz. W naszym przypadku patrzymy na główny nagłówek H1 na naszej stronie, który należy do klasy o nazwie .listing-title.

W tym momencie możesz przetestować styl tekstu CSS, który dodasz do swojej witryny. Górna część sekcji stylu CSS w konsoli witryny może służyć do stosowania reguł do określonego elementu, na który kierujesz reklamy. Oczywiście nie jest to jednak trwałe.

Związane z: Jak zbudować responsywny pasek nawigacyjny za pomocą HTML i CSS?

Dodawanie nowego CSS

Teraz nadszedł czas, aby dodać nowy CSS do swojej witryny. Sposób, w jaki to zrobisz, będzie zależał od rodzaju używanej platformy internetowej, a opcje takie jak Shopify wymagają rozszerzeń umożliwiających dodawanie CSS bez zmiany plików.

Jakkolwiek dodajesz swój kod CSS, musisz upewnić się, że jest poprawny. Używanie reguł CSS w stylu tekstu nie jest zbyt trudne, ale może być frustrujące, gdy nie możesz dowiedzieć się, jak zmienić kolor tekstu. W naszym przykładzie jest to kod, który musielibyśmy dodać do naszej witryny.

.tytuł-listy {
kolor niebieski;
}

Co się stanie, jeśli kolor tekstu się nie zmieni?

Po edycji pliku CSS powinieneś być w stanie zobaczyć wprowadzone zmiany zaraz po odświeżeniu strony. Jednak nie zawsze jest to takie proste. CSS może być bardziej złożony, niż ludzie się spodziewają, i być może będziesz musiał zrobić więcej na tym etapie.

• Opróżnianie pamięci podręcznej: Witryny często używają pamięci podręcznej, aby skrócić czas ładowania. Twoja pamięć podręczna może uniemożliwiać wyświetlanie zmian w witrynie i musisz ją opróżnić, gdy wprowadzasz zmiany w CSS.
• Wyżej w arkuszu stylów: CSS ładuje style sekwencyjnie, co oznacza, że ​​pierwsze reguły w Twoim arkuszu stylów będą tymi, które wyświetlają się w Twojej witrynie. Przenoszenie stylów może być dobrym sposobem na nadanie im pierwszeństwa przed innymi stylami.
• Korzystanie z ważnych tagów: ta następna opcja nie jest uważana za najlepszą praktykę i najlepiej ją zarezerwować, gdy nie masz innego wyboru. Możesz dodać ważny tag do swoich stylów tekstu CSS, aby nadać im priorytet nad wszystkimi innymi stylami, co można zobaczyć poniżej:

.tytuł-listy {
kolor: niebieski !ważne;
}

Inny styl tekstu CSS Zabawa

CSS to niezwykle potężne narzędzie, które daje dostęp do wielu różnych opcji podczas pracy z tekstem i innymi elementami w witrynie. To nie kończy się tylko na kolorze tekstu CSS i możesz ładować swój tekst, gdy zdecydujesz się nauczyć trochę CSS. Poniżej znajdziesz kilka podstawowych reguł stylów CSS:

• Rozmiar czcionki: Zmienia to rozmiar tekstu na Twojej stronie, np. rozmiar czcionki: 12px;
• Grubość czcionki: Waga odnosi się do grubości czcionki, przy czym pogrubienie oznacza dużą wagę, a cienki tekst niską, np. grubość czcionki: 400;
• Wyrównanie tekstu: Zmienia to wyrównanie tekstu, z którym pracujesz, np. text-align: right;
• Cień tekstu: Pozwala to na dodanie cienia do tekstu z szeregiem atrybutów, np. text-shadow: 2px 2px 3px black;
• Przekształcenie tekstu: Zmienia wielkość liter w tekście, z którym pracujesz, np. text-transform: uppercase;
• Tekst-dekoracja: Pozwala to na dodawanie podkreśleń, myślników i innych dekoracji do tekstu, np. dekoracja tekstu: podkreślenie;

To tylko zarysowanie powierzchni tego, co możesz zrobić ze stylami tekstu w CSS. W sieci jest mnóstwo przewodników, które mogą Ci pomóc w tym procesie, i zawsze dobrze jest zrobić rozeznanie na początku.

Związane z: Jak zmienić tekst swojej witryny za pomocą właściwości rodziny czcionek CSS?

Dowiedz się więcej niż kolor tekstu CSS

Praktyka, eksperymentowanie oraz próba i błędy to najlepsze sposoby na nauczenie się takiego narzędzia jak CSS. Arkusze stylów mogą wydawać się zniechęcające, gdy po raz pierwszy zaczynasz z nimi pracować, ale są one niezwykle łatwe w użyciu, gdy spędzisz z nimi trochę czasu.

10 prostych przykładów kodu CSS, których możesz się nauczyć w 10 minut

Potrzebujesz pomocy z CSS? Wypróbuj te podstawowe przykłady kodu CSS na początek, a następnie zastosuj je na swoich stronach internetowych.

Czytaj dalej

O autorze