Kolor tła oraz tekstu za pomocą HTML i CSS (bgcolor, background)
Kolor tła jak i fontu (czcionki) można zmieniać na rożne sposoby. Twórcy stron internetowych wykorzystują do tego celu głównie CSS ze względu na jego rozbudowane możliwości.
Co znajdziesz w tym wpisie
Dlaczego używamy głównie CSS a nie HTML?
Zdecydowanie łatwiej jest edytować konkretną klasę lub właściwość niż przeszukiwać całą stronę w poszukiwaniu jakieś cechy dodanej w HTML. Dodatkowo bardzo istotna jest też spójność w obrębie całej strony internetowej.
Wpis ten będzie jednak nie tyle poświęcony samemu CSS co pokazaniu wam jak zmienić kolor również z pomocą HTML. Czyli przeznaczony jest głównie dla osób zaczynających lub odświeżających wiedzę z podstaw HTML i CSS.
Bardziej zaawansowanych zapraszam do wpisu o formatowaniu tekstu na stronie internetowej lub przejściu do sekcji Dlaczego CSS a nie HTML.
Od czego zacząć?
Jeśli jeszcze nigdy nie zmieniałeś koloru na tekstu lub tła warto na początek sprawdzić jakie są podstawowe kolory na stronie. Wiedza ta z punktu widzenia HTML może okazać się przydatna (czysty HTML do wersji 5 ma dość mocno ograniczone możliwości) od CSS już nie koniecznie.
W CSS (kaskadowych stylach) mamy bowiem większe pole manewru i dostępne są różne niekiedy nietypowe kolory (palety barw). Do wprowadzenia zmian oraz ogólnie zbudowania witryny będzie nam też potrzebny edytor np. Notepad++, Visual Studio Code (oba są darmowe).
Zmiana, dodanie kolorów w HTML
Zaczniemy może od zmiany, dodania koloru z pomocą HTML, następnie przejdziemy dalej do CSS. Na początek pokażę wam jak wstawić jedno kolorowe tło w stronie internetowej. Pod koniec tego wpisu przynajmniej teoretycznie powinniście wiedzieć jak wprowadzić kolory do strony www.
Jak ustawić kolor tła całej strony w HTML?
W przypadku HTML przypisywanie kolorów jak i innych właściwości odbywa się bezpośrednio w kodzie witryny.
Przykładowo:
<body bgcolor="kolor-tła" text="kolor-tekstu"> Treść strony </body>
Pierwsza zmienna bgcolor odnosi się do koloru tła całej strony. W miejsce „kolor-tła” wpisujemy interesujący nas kolor. Domyślnie jako kolor strony ustawiony jest kolor biały (#ffffff / white).
Druga zmienna text dotyczy tekstu na stronie. Analogicznie w miejsce „kolor-tekstu” wpisujemy wybrany kolor.
Jak wstawić tło obrazkowe, grafikę w HTML?
W HTML możemy też dodać grafikę w tło całej strony:
<body background="image/tlo.jpg"> Treść strony </body>
To, że wybraliśmy jakiś kolor dla tekstu na całej stronie nie oznacza, że wszędzie musi on być taki sam. Jeżeli umieścimy wybrany fragment w poniższym kodzie możemy zmienić jego barwę.
Zmiana koloru tekstu (fontu) na stronie
<font color="kolor">...</font>
Gdzie za kolor wpisujemy nazwę koloru.
przykład:
Przykładowy tekst
Warto pamiętać że <body> może być tylko jedno na stronie i kiedy chcemy zmienić kolor tła nie tworzymy nowego.
Jak zmienić kolory w CSS
Kolor fontu (czcionki) z CSS
W CSS kolor czcionki elektronicznej uzyskujemy dzięki zmiennej color np.:
selector {color: #3F51B5;}W miejscu wyrażenia „selektor” umieszczamy selektor interesującego nas obiektu np. p (dla wszystkich akapitów), .klasa-tekstu, #id-tekstu
Ogólnie strukturą jest zbliżona do tej w HTML (właściwość nosi podobną nazwę). Różnica między stosowaniem jest jednak dość widoczna i istotna bardziej w kwestii wywoływania. Z pomocą CSS można bowiem nadpisać ustawienia HTML. CSS daje nam też dużo ciekawsze możliwości dla koloru fontu (czcionki). Przykładowo możemy tworzyć nawet Wielokolorowe akapity tekstu (Gradient, Ombre).
Kolor tła z CSS
Kolor tła z kolei opisuje zmienna background np.
selector {background: #FFFFFD;}Właściwości tej możemy użyć do zmiany koloru tła dowolnego elementu. W sytuacji gdy nie ustawimy elementowi (poza grafiką) tła tak naprawdę element jest przezroczysty (transparent).
Jak dodać grafikę w tle z pomocą CSS?
Teraz jako tło umieścimy obrazek
selector {background: url(przykladowy-obrazek.jpg);}Nieco więcej o dodawaniu obrazka w tle dowiecie się z wpisu ustawianie grafiki jako tła strony Polecam ten wpis bo pokazuje w nim w jaki sposób można ustawiać obrazkowe tło. Dodaje też w przykładach nie jeden a kilka różnych grafik.
CSS daje nam również możliwość utworzenia tła w formie gradientu (płynnego przechodzenia z jednego koloru w kolejny).
Dlaczego CSS a nie HTML
Odpowiedz jest prosta – możliwości. CSS nie ogranicza nas jedynie do podstawowych opisanych powyżej właściwości a HTML niestety tak. W czystym języku HTML jesteśmy bardzo ograniczeni do możliwości korzystania z zwykłych podstawowych kolorów. Podczas gdy w CSS oferuje nam zdecydowanie większy wachlarz możliwości np. tło możemy zrobić nawet w paski lub kratkę (kwestia dobrania odpowiedniego gradientu).