Kolory w CSS

Kolory odgrywają bardzo znaczącą rolę w projektowaniu strony internetowej. W CSS kolory są najczęściej używane do pokolorowania tła, tekstu i granicy. Tutaj chodzi o sposób ustawienia/zdefiniowania koloru w CSS?

Dobrze! W kolorach CSS można zdefiniować różnymi metodami, takimi jak przy użyciu predefiniowanych nazw kolorów, wartości szesnastkowych itp. W tym zapisie omówi następujące metody ustawienia koloru tła, koloru tekstu i kolorów granicznych:

• Zdefiniowane nazwy kolorów, takie jak czerwony, zielony, pomarańczowy itp.
• Wartości kolorów szesnastkowych, takie jak #RRGGBB, #00FF00 itp.
• Wartości kolorów RGB, takie jak RGB (255, 0, 0); RGB (0, 255, 255) itp.
• Wartości kolorów RGBA, takie jak RGB (255, 255, 0, 0.7), RGB (255, 0, 0, 0.1) itp.
• Wartości kolorów HSL, takie jak HSL (0, 100%, 50%), HSL (240, 100%, 50%) itp
• Wartości kolorów HSLA, takie jak HSL (0, 100%, 50%, 0.5), HSL (240, 100%, 50%, 0.2) itp

Wszystkie wyżej wymienione konwencje kolorów zostaną omówione z przykładami. Więc zacznijmy tę podróż z predefiniowanymi nazwami kolorów.

CSS predefiniowane nazwy kolorów

CSS zapewnia liczne predefiniowane nazwy kolorów na przykład czerwony, żółty, zielony itp. Te nazwy kolorów mogą być używane do stylizacji tła, tekstu itp.

Zrozumiemy pojęcie predefiniowanych nazw kolorów przy użyciu poniżej podanego przykładu

Przykład

Powiedzmy, że mamy

Element i chcemy stylizować jego kolor tekstu za pomocą predefiniowanych wartości kolorów:

Html

Witamy w Linuxhint.com

CSS

P
kolor niebieski;

Po prostu przypisz nazwę koloru do właściwości kolorów, w wyniku czego otrzymasz następujące dane wyjściowe:

CSS Heksadecimal Kolor

Kolory szesnastkowe są zdefiniowane przez „#„Symbol z kodem sześciu cyfr. Wymaga wartości od 0 do 15, jednak 10 będzie reprezentowane z A, 11 z B itd. Do 15, które zostaną określone za pomocą F.

Ponieważ Hexadecimal to sześciocyfrowy kod i.E #e3e3e3, pierwsze dwa szczeliny dla czerwonego koloru, kolejne dwa dla zielonego i ostatnie dwa dla niebieskiego koloru. Połączenie tych sześciu cyfr określa nowy kolor e.G. #Ffff00 reprezentuje żółty kolor.

Przykład

Poniższe linie podane będą ustawić kolor zielonego tła

element wykorzystujący wartości sześciokadciowców:

Html

Witamy w Linuxhint.com

CSS

P
kolor tła: #00FF00;

Powyższy kod zawiera następujące dane wyjściowe:

Kolor CSS RGB

Kolor RGB to połączenie czerwonego, zielonego i niebieskiego. Funkcja RGB () pobiera wartości od 0 do 255. Określenie różnych wartości w funkcji RGB () powoduje różne kombinacje kolorów. Na przykład RGB (255, 0, 0) wygeneruje czerwony kolor.

Przykład

Poniższy kawałek kodu określa wartość RGB, aby ustawić kolor szarego tekstu w akapicie:

Html

Witamy w Linuxhint.com

CSS

P
kolor tła: RGB (128, 128, 128);

Wyjście ustawia szary kolor tła:

Kolor CSS RGBA

Współczynnik przezroczystości można dodać do kolorów RGB, dodając w nim wartość alfa. Parametr alfa pobiera wartości od 0 do 1. Niższa wartość sprawia, że ​​kolor jest przezroczysty, podczas gdy wyższa wartość sprawia, że ​​kolor jest nieprzezroczysty. Na przykład dodanie 0.0 sprawi, że kolor będzie przezroczysty, a 1.0 sprawi, że kolor będzie w pełni nieprzezroczysty.

Przykład

Dodajmy parametr alfa w powyższym przykładzie.

Html

Witamy w Linuxhint.com

CSS

P
kolor tła: RGBA (128, 128, 128, 0.2);

W powyższym kodzie 0.2 jest dodawane jako wartość parametru alfa, która sprawia, że ​​kolor tła jest przezroczysty:

Kolor CSS HSL

HSL to akronim odcienia, nasycenia i lekkości.

• Termin odcień definiuje anioła wewnątrz koła kolorów.
• Nasycenie określa intensywność koloru.
• Lekkość określa poziomy lekkości.

Lekkość i nasycenie będą reprezentowane przez znak %.

Przykład

Kolorujmy tło

element za pomocą wartości kolorów HSL.

Html

Witamy w Linuxhint.com

CSS

P
kolor tła: HSL (334, 80%, 56%);

Powyższy kod ustawie różowe tło

element.

CSS HSLA Kolor

Konwencję kolorów HSL można rozszerzyć na HSLA. A reprezentuje parametr alfa, który służy do dodania efektów przezroczystości na kolor.

Przykład

Rozszerzmy poprzedni przykład i dodajmy również parametr alfa:

Html

Witamy w Linuxhint.com

CSS

P
kolor tła: HSL (334, 80%, 56%, 0.3);

Powyższy kod wyświetli następujące dane wyjściowe:

Wniosek

CSS zapewnia wiele kolorów i metod ustawiania koloru elementu, takiego jak predefiniowane nazwy kolorów, można zastosować kombinację wartości od 0 do 255 w rgb () lub wartości odcienia, nasycenia i światła. Ponadto parametr alfa może być używany z RGB i HSL, aby dodać efekt przezroczystości na kolor. Ten zapis przedstawił kompleksowy i opracowany przegląd kolorów CSS i różnych metod ustawiania kolorów w CSS.