tutoriale

Kolor tła oraz tekstu za pomocą HTML i CSS (bgcolor, background)

Czas czytania: 3 minut

Kolor tła jak i fontu (czcionki) można zmienić na rożne sposoby. Twórcy stron internetowych wykorzystują do tego celu głownie głównie CSS ze względu na jego rozbudowane możliwości.

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ąć?

Na początek warto sprawdzić jakie są podstawowe kolory na stronie. Wiedza ta z punktu widzenia HTML może okazać się przydatna od CSS już nie koniecznie. W CSS (kaskadowych stylach) mamy bowiem większe pole manewru i dostępne są różne niekiedy nietypowe kolory. 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.

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.:

color: #3F51B5;

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.

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).

Teraz jako tło umieścimy obrazek

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).

%d bloggers like this: