Kurs z HTML dla początkujących

Kolor tła oraz tekstu za pomocą HTML i CSS

tutoriale

Kategoria wpisu Efekty i skrypty CSS, Kurs HTML, Kursy Tagi: , , , , on przez .



Kolor tła jak i fontu można zmienić na rożne sposoby. Twórcy stron internetowych wykorzystują do tego celu głownie głównie CSS ponieważ jest to proste i dużo łatwiejsze w kontrolowaniu oraz dalszemu rozwijaniu. Zdecydowanie łatwiej jest edytować konkretną klasę lub właściwość niż przeszukiwać całą stronę w poszukiwaniu jakieś cechy dodanej w HTML. Wpis ten będzie jednak nie tyle poświęcony CSS co bardziej pokazaniu wam jak zmienić kolor również z pomocą HTML.

Jak ustawić kolor dla 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:

Pierwsza zmienna bgcolor odnosi się do koloru tła. W miejsce „kolor-tła” wpisujemy interesujący nas kolor.

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

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

W CSS kolor czcionki elektronicznej uzyskujemy dzięki zmiennej color np:

Ogólnie strukturą jest zbliżona do tej w HTML. Różnica między stosowaniem jest jednak dość widoczna i istotna.

Kolor tła z kolei opisuje zmienna background np.

Właściwości tej możemy użyć do zmiany koloru tła dowolnego elementu.

Teraz jako tło umieścimy obrazek

 

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. Dodatkowo w czystym HTML jesteśmy bardzo ograniczeni w możliwości korzystania z kolorów podczas gdy w CSS np. tło możemy zrobić nawet w paski lub kratkę (kwestia dobrania odpowiedniego gradientu).

Podstawowe kolory na stronie

Umieszczanie grafiki jako tła strony

Gradient z wykorzystaniem CSS3 jako tło strony

Przeczytaj również

Zdarzenia myszki – pointer-events CSS Właściwość pointer-events określa jak na dane zdarzenie wywołane z użyciem kursora myszy powinien reagować konkretny obiekt HTML. Chodzi o zdarzenia ...
Dopasowywanie tekstu do kształtu obrazka – C... Jak sam tytuł mówi tym razem zajmę się dopasowaniem tekstu do kształtu obrazka, nie zrobię tego jednak w formie grafiki lecz na żywym tekście (czyli t...
Pogrubiony, pochylony lub podkreślony tekst Jedną z najczęściej spotykanych metod wyróżnienia tekstu na stronie internetowej jest jego pogrubienie zdecydowanie rzadziej podkreślamy lub robimy go...
Odstępy pomiędzy literami w słowie CSS letter-spac... Zadaniem właściwości CSS letter-spacing jest ustawianie odległości (odstępów) pomiędzy poszczególnymi literami słowa w tekście. Za jej pomocą możemy w...