tutoriale
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.
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.
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).
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.
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.
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ę.
<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.
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 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).
Teraz jako tło umieścimy obrazek czyli grafikę w tle elementu.
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).
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).
Na stronie internetowej możemy umieszczać różnego typu tła np.
– jedno kolorowe (barwne),
– wielobarwne (np. gradient, jakiś wzór),
– graficzne (obraz, zdjęcie),
– film.
Lepiej dodawać w CSS. Daje nam to większy wachlarz możliwości.
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…