Prawie skomplikowane lub naucz się CSS3. Część 3. Sposoby ustawiania kolorów w CSS. Ustaw przezroczystość elementu w dokumencie HTML

Witajcie drodzy czytelnicy strony remontcompa.ru! Nazywam się Roman Nahvat i przedstawiam wam trzecią część serii artykułów na temat języka CSS. W pierwszej i drugiej części przyjrzeliśmy się sposobom dodawania stylów do strony internetowej, przeanalizowaliśmy koncepcję selektora CSS i ich typów. Począwszy od tej części, zaczniemy badać właściwości języka CSS, które mają zastosowanie do różnych elementów strony HTML: tekstu, tabel, list, formularzy i tak dalej. W szczególności w tym artykule przyjrzymy się sposobom ustawiania koloru i przezroczystości elementów na stronie internetowej za pomocą właściwości koloru, koloru tła i krycia..

Prawie skomplikowane lub naucz się CSS3. Część 3. Sposoby ustawiania kolorów w CSS. Ustaw przezroczystość elementu w dokumencie HTML

Utwórz następującą strukturę dokumentu HTML, jak pokazano poniżej.

Zapisz ten dokument jako color.html na dysku flash w folderze CSS

Stworzymy również i zapiszemy na dysku flash w folderze CSS plik stylów color.css

Dodaj kilka akapitów do strony internetowej color.html (tagi

...

z dowolnym tekstem (w naszym przypadku 4 akapity)

Otrzymujemy następujący rodzaj strony internetowej

Dla każdego akapitu wpisz nazwę klasy (klasa 1, klasa 2, klasa 3 i klasa 4), jak pokazano poniżej

Właściwość koloru CSS pozwala określić kolor tekstu wewnątrz elementu w dokumencie HTML. Po właściwości kolor wskazana jest jej wartość, którą można zapisać na różne sposoby

Możesz ustawić dowolny kolor w CSS na następujące sposoby: Używając angielskich nazw kolorów. Poprzez kod szesnastkowy, który określa ilość czerwieni, niebieskiego i zielonego. Ten kod jest zapisywany po znaku # RGB, który wyraża kolor w proporcjach czerwonego, niebieskiego i zielonego zgodnie z modelem RGB. Wartość RGBA jest nadal tą samą wartością RGB, do której dodaje się czwarty parametr, tak zwany kanał alfa, który przyjmuje wartość od 0,0 (przezroczystość) do 1,0 (krycie) i pozwala określić stopień krycia elementu. Wartość HSL dodana w CSS3 jako alternatywny sposób określania koloru. Ta wartość zaczyna się od liter hsl, po których następują parametry w nawiasach wyrażające odcień, nasycenie i jasność koloru. Wartość HSLA to ta sama wartość HSL, do której, podobnie jak w przypadku wartości RGBA, dodaje się tak zwany kanał alfa jako czwarty parametr, przyjmując wartości z zakresu od 0,0 do 1,0

Na stronie https://colorscheme.ru/ nazwy, kody szesnastkowe, wartości RGB kolorów HTML są prezentowane w wygodnej formie

Również na stronie https://colorscheme.ru/ przedstawiono uniwersalny konwerter kolorów, którego będziemy używać w przyszłości. Ten konwerter pozwala konwertować kolory z jednego modelu kolorów na inny, na przykład z RGB na HSL, konwertować szesnastkowy kod koloru na wartość RGB i tak dalej..

Ustaw tekst na niebieski dla pierwszego akapitu (do tego akapitu przypisaliśmy klasę o nazwie class1)

W pliku stylu color.css po właściwości color podaj nazwę koloru (niebieski) jako wartość

Jak widać, tekst pierwszego akapitu zmienił kolor na niebieski (niebieski)

Zmień kolor tekstu drugiego akapitu (klasa 2) na darkorchid

Jako wartość właściwości color napisz kolor darkorchid jako kod szesnastkowy, a mianowicie # 9932cc

Jak widać, kolor tekstu drugiego akapitu zmienił się na darkorchid (# 9932cc)

Zmień kolor tekstu trzeciego akapitu (klasa 3) na kolor fuksja (magenta), wskazując go jako wartość RGB po właściwości koloru. Zauważysz, że kolory fuksja i magenta są zasadniczo identyczne i mają te same kody szesnastkowe (# ff00ff) i wartości RGB (255,0,255)

Po właściwości RGB koloru piszemy wartość koloru fuksji (magenta) w następujący sposób: color: rgb (255,0,255)

Kolor tekstu trzeciego akapitu zmienił się na fuksja (magenta)

Zmień kolor tekstu czwartego akapitu (klasa 4), używając wartości HSL. Jak wspomniano powyżej, wartość HSL jest określona przez trzy parametry: odcień, nasycenie i jasność

Każdy z tych parametrów rozważamy osobno. Aby wskazać barwę, należy określić kąt obrotu (od 0 ° do 360 °) na kole kolorów, jak pokazano na poniższym rysunku. Na przykład zielony odpowiada kątowi obrotu 120 °, a niebieski kątowi obrotu 270 °

Parametr nasycenia określa nasycenie wybranego odcienia. Nasycenie w modelu kolorów HSL jest wskazywane jako procent w zakresie od 0% do 100%. Im bliżej wartości tego parametru jest 100%, kolor wygląda na bardziej czysty, a jeśli nasycenie dąży do 0%, wówczas kolor staje się wyblakły. Parametr jasności określa jasność koloru i, podobnie jak parametr nasycenia, jest określony procentowo w zakresie od 0% do 100%. Im wyższa wartość tego parametru, tym jaśniejszy kolor. Zmień kolor tekstu czwartego akapitu na zielony

Ponieważ chcemy określić wartość HSL jako wartość właściwości color, musimy przekonwertować kolor zielonego ekranu (# 7CFC00 lub 124.252.0) na model kolorów HSL. Aby to zrobić, użyj internetowego konwertera kolorów na https://colorscheme.ru/color-converter.html. Na przykład w linii modelu kolorów podaj wartość koloru zielonego ekranu, na przykład RGB, a mianowicie 124.252.0, a nieco niżej możemy zobaczyć wynik konwersji na HSL (hsl (90,100%, 49%))

Po właściwości koloru podaj wartość hsl (90,100%, 49%)

Jak widać, kolor tekstu czwartego akapitu zmienił się na zielony

Rozważ inną właściwość CSS jako kolor tła. Właściwość background-color ustawia kolor tła elementu w dokumencie HTML. Możesz ustawić wartość właściwości koloru tła w taki sam sposób, jaki rozważaliśmy przy określaniu koloru tekstu: używając angielskich nazw kolorów, szesnastkowego kodu koloru, wartości RGB i wartości HSL Zmień kolor tła dla czterech akapitów, używając właściwości koloru tła na różne sposoby, aby określić kolor . W pierwszym akapicie ustaw kolor tła za pomocą angielskiej nazwy koloru, na przykład ciemnoszary. W arkuszu stylów napisz kolor tła: ciemnoszary

Kolor tła pierwszego akapitu zmienił się na ciemnoszary

Zmień kolor tekstu drugiego akapitu na aqua (cyjan)

Ustaw szesnastkowy kod koloru aqua (cyjan) jako wartość właściwości background-color

Otrzymujemy następujące

W trzecim akapicie ustaw kolor tła na zielony, używając wartości RGB (173,255,47)

W pliku stylów color.css określ kolor tła: rgb (173,255,47)

Ustaw czwarty akapit na czarny kolor tła, używając wartości hsl

W pliku stylów color.css określamy właściwość background-color o wartości hsl (0,0%, 0%)

W rezultacie otrzymujemy następujące

W CSS3 istnieje kilka sposobów ustawiania przezroczystości elementów w dokumencie HTML:

Właściwość krycia, która pozwala określić stopień przezroczystości elementu i dowolnego z jego elementów potomnych. Właściwość krycia przyjmuje wartości z zakresu od 0,0 (w pełni przezroczysty) do 1,0 (nieprzezroczysty). Korzystając z modelu kolorów RGBA, który pozwala ustawić kolor w taki sam sposób jak RGB. W przeciwieństwie do RGB, RGBA ma czwarty parametr, tak zwany kanał alfa, który pozwala określić stopień przezroczystości elementu. Ten parametr przyjmuje wartości z zakresu od 0,0 do 1,0. Model kolorów HSLA, który pozwala wyrażać kolory pod względem odcienia, nasycenia i jasności, w taki sam sposób jak model kolorów RGBA, dodaje wartość przezroczystości jako czwarty parametr, tak zwany kanał alfa. Ten parametr, podobnie jak w przypadku RGBA, może przyjmować wartości od 0,0 do 1,0. Rozważ wszystkie metody ustawiania przezroczystości (na przykładzie tekstu) na konkretnych przykładach. W pliku color.css usuń wszystkie właściwości koloru tła

Po właściwości nieprzezroczystości wskazywana jest jej wartość, która może mieścić się w zakresie od 0,0 do 1,0. Im wartość tej właściwości jest bliższa 1, tym większa jest nieprzezroczystość elementu

Ustaw następujące wartości dla właściwości krycia w każdym akapicie: Dla pierwszego akapitu (przypisanej klasie o nazwie klasa1) określ wartość 0.2 jako wartości dla nieprzezroczystości. W drugim akapicie (przypisanej klasie o nazwie klasa2) określ wartość 0,3 dla właściwości nieprzezroczystości. akapit (przypisany do klasy o nazwie klasa3) jako wartość właściwości nieprzezroczystości, należy podać liczbę 0,4. W akapicie czwartym (przypisany klasa o nazwie klasa4) jako wartość właściwości nieprzezroczystości należy podać liczbę 1,0

W rezultacie widzimy, że tekst pierwszych trzech akapitów (do których zastosowano właściwość krycia o wartości odpowiednio 0,2, 0,3 i 0,4) jest bardziej przejrzysty niż tekst czwartego akapitu (właściwość krycia o wartości 1,0)

Usuń właściwości koloru i krycia z pliku color.css i ustaw przezroczystość tekstu akapitu za pomocą funkcji hsla

W funkcji hsla przezroczystość jest ustawiana, jak wspomniano powyżej, za pomocą parametru zwanego kanałem alfa (alfa), który przyjmuje wartości od 0,0 do 1,0.

W pliku color.css dla każdego akapitu zapisujemy wartości funkcji hsla:

W rezultacie otrzymujemy ten sam wynik, co użycie właściwości krycia.

Ustaw przezroczystość tekstu w akapitach za pomocą funkcji rgba, gdzie czwarty parametr (alfa) odpowiada za poziom przezroczystości i przyjmuje wartości od 0,0 do 1,0

Otrzymujemy taki sam wynik jak w przypadku funkcji hsla i właściwości opacity

Ciąg dalszy w artykule: Prawie skomplikowany lub naucz się CSS3. Część 4. 1. Czcionki w dokumencie HTML. Właściwości rodziny czcionek i @ czcionki-twarzy