Dzięki CSS łatwo jest ustawić kolor tekstu w dokumencie. Jeśli chcesz, aby akapity na twojej stronie były renderowane w określonym kolorze, po prostu określ, że w zewnętrznym arkuszu stylów przeglądarka wyświetli tekst w wybranym kolorze. Co się stanie, gdy chcesz zmienić kolor tylko jednego słowa (a może tylko kilku słów) w akapicie tekstu? W tym celu musisz użyć wbudowanego elementu, takiego jak tag.
Ostatecznie zmiana koloru pojedynczego słowa lub małej grupy słów w zdaniu jest łatwa przy użyciu CSS, a znaczniki są poprawne HTML, więc nie martw się, że to jakiś hack. Dzięki takiemu podejściu unikasz także używania przestarzałych tagów i atrybutów, takich jak "font", który jest produktem minionej ery HTML.
Ten artykuł jest przeznaczony dla początkujących twórców stron internetowych, którzy są prawdopodobnie nowi w HTML i CSS. Pomoże Ci nauczyć się używać znacznika HTML i CSS do zmiany koloru określonego tekstu na twoich stronach. Biorąc to pod uwagę, istnieją pewne wady tej metody, które omówimy na końcu tego artykułu. Na razie czytaj dalej, aby dowiedzieć się, jak zmienić ten kolor tekstu. Jest to bardzo łatwe i powinno zająć około dwóch minut.
Instrukcja krok po kroku
- Otwórz stronę internetową, którą chcesz zaktualizować w swoim ulubionym edytorze HTML. Może to być program taki jak Adobe Dreamweaver lub prosty edytor tekstu, taki jak Notatnik, Notepad ++, TextEdit itp.
- W dokumencie znajdź wyrazy, które chcesz wyświetlić w innym kolorze na stronie. Ze względu na samouczek, użyjmy słów znajdujących się w większym akapicie tekstu. Ten tekst będzie zawarty w parze tagów. Znajdź jedno z dwóch słów, których kolor chcesz edytować.
- Umieść kursor przed pierwszą literą słowa lub grupy słów, które chcesz zmienić. Pamiętaj, że jeśli używasz edytora WYSIWYG takiego jak Dreamweaver, pracujesz teraz w "widoku kodu".
- Zawiń tekst, którego kolor chcemy zmienić za pomocą tagu, w tym atrybut klasy. Cały akapit może wyglądać tak:
To jest tekst, który skupia się na zdaniu.
- Właśnie użyliśmy elementu inline, aby nadać temu konkretnemu tekstowi "hak", którego możemy użyć w CSS. Naszym następnym krokiem jest przejście do naszego zewnętrznego pliku CSS w celu dodania nowej reguły.
- W naszym pliku CSS dodajmy:
-
.focus-text {
-
kolor: # F00;
-
}
- Ta reguła ustawiłaby ten wbudowany element, aby wyświetlać na kolor czerwony. Gdybyśmy mieli poprzedni styl, który ustawiłby tekst naszego dokumentu na czarny, ten wbudowany styl powodowałby, że tekst span byłby skupiony i wyróżniał się innym kolorem. Możemy również dodać inne style do tej reguły, być może zaznaczając tekst kursywą lub pogrubieniem, aby podkreślić to jeszcze bardziej?
- Zapisz swoją stronę.
- Przetestuj stronę w ulubionej przeglądarce, aby zobaczyć wprowadzone zmiany.
- Zwróć uwagę, że oprócz tego niektórzy specjaliści od stron internetowych wybierają inne elementy, takie jak pary lub znaczniki. Znaczniki te były pogrubione i kursywa, ale były przestarzałe i zastąpione tagami i. Tagi nadal działają w nowoczesnych przeglądarkach, jednak wielu programistów używa ich jako wbudowanych haków do stylizacji. To nie jest najgorsze podejście, ale jeśli chcesz uniknąć jakichkolwiek przestarzałych elementów, sugerujemy trzymać się tagów dla tego rodzaju potrzeb stylizacyjnych.
Wskazówki i rzeczy, na które należy uważać
Chociaż to podejście działa dobrze w przypadku małych potrzeb dotyczących stylizacji, na przykład w przypadku konieczności zmiany tylko jednego małego fragmentu tekstu w dokumencie, może szybko wymknąć się spod kontroli. Jeśli zauważysz, że twoja strona jest zaśmiecona elementami wbudowanymi, z których wszystkie mają unikalne klasy, których używasz w swoim pliku CSS, możesz zrobić to źle, Pamiętaj, im więcej tagów znajduje się na twojej stronie, tym trudniej prawdopodobnie będzie utrzymywać tę stronę w przyszłości. Dodatkowo, dobra typografia internetowa rzadko ma na całej stronie tyle wariantów kolorów itp.
