Len o zložitých alebo naučiť CSS3. Časť 3. Spôsoby nastavenia farieb v CSS. Nastavte priehľadnosť na prvok v dokumente HTML

Dobrý deň, milí čitatelia webu remontcompa.ru! Volám sa Roman Nahvat a predstavujem vám tretiu časť série článkov o jazyku štýlu CSS. V prvej a druhej časti sme skúmali spôsoby, ako pridať štýly na webovú stránku, študovali sme koncepciu selektora CSS a ich typy. Počnúc touto časťou začneme študovať vlastnosti jazyka CSS, ktoré sa vzťahujú na rôzne prvky stránky HTML: text, tabuľky, zoznamy, formuláre atď. Konkrétne sa v tomto článku zameriame na spôsoby, ako nastaviť farbu a priehľadnosť prvkov na webovej stránke pomocou vlastností farby, pozadia a farby..

Len o zložitých alebo naučiť CSS3. Časť 3. Spôsoby nastavenia farieb v CSS. Nastavte priehľadnosť na prvok v dokumente HTML

Vytvorte nasledujúcu štruktúru dokumentu HTML, ako je uvedené nižšie.

Tento dokument uložte ako color.html na jednotku Flash v priečinku CSS

Na flash disk tiež vytvoríme a uložíme do súboru CSS súbor štýlov color.css

Pridajte na webovú stránku color.html (značky) niekoľko odsekov

...

s akýmkoľvek textom (v našom prípade 4 odseky)

Získame nasledujúci druh webovej stránky

Pre každý odsek napíšte názov triedy (class1, class2, class3 a class4), ako je to znázornené nižšie

Vlastnosť farby CSS umožňuje určiť farbu textu vo vnútri prvku v dokumente HTML. Za vlastnosťou farby je uvedená jej hodnota, ktorú je možné písať rôznymi spôsobmi

Akákoľvek farba v CSS môžete nastaviť nasledujúcimi spôsobmi: Pomocou anglických názvov farieb. Prostredníctvom hexadecimálneho kódu, ktorý určuje množstvo červenej, modrej a zelenej. Tento kód je napísaný za hodnotou znamienka # RGB, ktorá vyjadruje farbu v proporciách červenej, modrej a zelenej podľa modelu RGB. Hodnota RGBA je stále rovnaká hodnota RGB, ku ktorej sa pridá štvrtý parameter, tzv. Alfa kanál, ktorý preberá hodnotu od 0,0 (priehľadnosť) do 1,0 (nepriehľadnosť) a umožňuje vám určiť stupeň nepriehľadnosti prvku. Hodnota HSL, ktorá bola pridaná do CSS3 ako alternatívny spôsob určenia farby. Táto hodnota začína písmenami hsl, za ktorými nasledujú parametre v zátvorkách, ktoré vyjadrujú odtieň, sýtosť a ľahkosť farby. Hodnota HSLA je rovnaká hodnota HSL, ku ktorej je, rovnako ako v prípade hodnoty RGBA, pridaný štvrtý parameter tzv. Alfa kanál, pričom hodnoty sú v rozsahu od 0,0 do 1,0.

Na webových stránkach https://colorscheme.ru/ názvy, hexadecimálne kódy, hodnoty RGB farieb HTML sú uvedené vo vhodnej forme

Na stránke https://colorscheme.ru/ je tiež uvedený univerzálny prevodník farieb, ktorý budeme používať v budúcnosti. Tento prevodník umožňuje prevádzať farby z jedného farebného modelu na druhý, napríklad z RGB na HSL, prevádzať hexadecimálny farebný kód na hodnotu RGB atď..

V prvom odseku nastavte text na modrý (do tohto odseku sme priradili triedu s názvom class1).

V súbore štýlu color.css po vlastnosti color zadajte ako hodnotu názov farby (modrý)

Ako vidíte, text prvého odseku zmenil farbu na modrú (modrú)

Zmeňte farbu textu druhého odseku (trieda 2) na tmavohnedú

Ako hodnotu vlastnosti color napíšte farbu darkorchid ako hexadecimálny kód, konkrétne # 9932cc

Ako vidíte, farba textu druhého odseku sa zmenila na darkorchid (# 9932cc)

Zmeňte farbu textu v treťom odseku (trieda 3) na farebné fuchsie (purpurová) a označte ju ako hodnotu RGB po vlastnosti color. Zistíte, že farby fuchsie a purpurová farby sú v podstate rovnaké a majú rovnaké hexadecimálne kódy (# ff00ff) a hodnoty RGB (255,0 255).

Za vlastnosť color RGB píšeme hodnotu farby fuchsie (purpurová) takto: color: rgb (255,0,255)

Farba textu tretieho odseku sa zmenila na fuchsiu (purpurovú)

Zmeňte farbu textu štvrtého odseku (trieda 4) pomocou hodnoty HSL. Ako je uvedené vyššie, hodnota HSL je určená tromi parametrami: odtieň, sýtosť a ľahkosť

Každý z týchto parametrov posudzujeme osobitne. Ak chcete označiť odtieň, musíte na farebnom koliesku určiť uhol natočenia (od 0 ° do 360 °), ako je to znázornené na obrázku nižšie. Napríklad zelená zodpovedá uhlu rotácie 120 ° a modrá uhlu rotácie 270 °

Saturačný parameter určuje saturáciu vybraného odtieňa. Sýtosť vo farebnom modeli HSL je vyjadrená ako percento v rozsahu od 0% do 100%. Čím bližšia je hodnota tohto parametra na 100%, farba vyzerá čistejšie a ak má saturácia tendenciu k 0%, farba sa stratí. Parameter lightness určuje jas farby a, podobne ako parameter saturácie, je špecifikovaný ako percento v rozsahu od 0% do 100%. Čím vyššia je hodnota tohto parametra, tým jasnejšia bude farba. Zmeňte farbu textu štvrtého odseku na zelenú trávu

Pretože chceme špecifikovať hodnotu HSL ako hodnotu pre vlastnosť farby, musíme previesť farbu trávnika (# 7CFC00 alebo 124.252.0) na farebný model HSL. Použite online prevodník farieb na stránke https://colorscheme.ru/color-converter.html. Napríklad v línii farebného modelu zadajte hodnotu farby trávnika, napríklad RGB, konkrétne 124.252.0, a o niečo nižšiu môžeme vidieť výsledok prevodu na HSL (hsl (90 100%, 49%))

Po vlastnosti color zadajte hodnotu hsl (90 100%, 49%)

Ako vidíte, farba textu štvrtého odseku sa zmenila na zelenú trávu

Zvážte inú vlastnosť CSS ako farbu pozadia. Vlastnosť farba pozadia nastavuje farbu pozadia prvku v dokumente HTML. Hodnotu pre vlastnosť farba pozadia môžete nastaviť rovnakým spôsobom, aký sme zvažovali pri určovaní farby textu: pomocou anglických názvov farieb, hexadecimálneho kódu farby, hodnoty RGB a hodnoty HSL Zmeňte farbu pozadia pre štyri odseky pomocou vlastnosti farby pozadia rôznymi spôsobmi na špecifikovanie farby , V prvom odseku nastavte farbu pozadia pomocou anglického názvu farby, napríklad darkgray. Na šablónu so štýlmi napíšte farbu pozadia: darkgray

Farba pozadia v prvom odseku sa zmenila na darkgray

Zmeňte farbu textu v druhom odseku na aqua (azúrová)

Ako hodnotu vlastnosti farby pozadia nastavte hexadecimálny kód farby aqua (azúrový)

Dostávame nasledujúce

V treťom odseku nastavte farbu pozadia na zelenú pomocou hodnoty RGB (173 255,47).

V súbore štýlov color.css zadajte farbu pozadia: rgb (173 255,47)

Štvrtý odsek nastavte na čiernu farbu pozadia pomocou hodnoty hsl

V súbore štýlov color.css určíme vlastnosť background-color s hodnotou hsl (0,0%, 0%)

Výsledkom je nasledujúce

V CSS3 existuje niekoľko spôsobov, ako nastaviť priehľadnosť prvkov v dokumente HTML:

Vlastnosť nepriehľadnosti, ktorá vám umožňuje určiť mieru priehľadnosti prvku a všetkých jeho detí. Vlastnosť nepriehľadnosti akceptuje hodnoty v rozsahu od 0,0 (úplne priehľadné) do 1,0 (nepriehľadné). Použije sa farebný model RGBA, ktorý umožňuje nastaviť farbu rovnakým spôsobom ako RGB. Na rozdiel od RGB má RGBA štvrtý parameter, tzv. Alfa kanál, ktorý umožňuje určiť stupeň priehľadnosti prvku. Tento parameter akceptuje hodnoty v rozsahu od 0,0 do 1,0. Farebný model HSLA, ktorý umožňuje vyjadrovať farbu z hľadiska odtieňa, sýtosti a ľahkosti a rovnakým spôsobom ako farebný model RGBA, pridáva hodnotu priehľadnosti ako štvrtý parameter, tzv. Alfa kanál. Tento parameter, rovnako ako v prípade RGBA, môže brať hodnoty od 0,0 do 1,0. Zvážte všetky metódy na nastavenie priehľadnosti (ako príklad použite text) pomocou konkrétnych príkladov. V súbore color.css odstráňte všetky vlastnosti farby pozadia

Po vlastnosti opacity je uvedená jej hodnota, ktorá môže byť v rozsahu od 0,0 do 1,0. Čím bližšia je hodnota tejto vlastnosti 1, tým vyššia je nepriehľadnosť prvku

V každom odseku nastavte nasledujúce hodnoty pre vlastnosť opacity: V prvom odseku (priradená trieda s názvom class1) zadajte ako hodnotu pre vlastnosť opacity číslo 0.2. V druhom odseku (priradená trieda s názvom class2) zadajte hodnotu 0,3 pre vlastnosť opacity. odsek (priradená trieda s názvom class3) ako hodnota pre vlastnosť opacity, špecifikujte číslo 0.4. Pre štvrtý odsek (priradená trieda s názvom class4) ako hodnotu pre opacity vlastnosť, uveďte číslo 1.0

V dôsledku toho vidíme, že znenie prvých troch odsekov (na ktoré sa vzťahuje vlastnosť opacity s hodnotami 0,2, 0,3 a 0,4) je transparentnejšia ako znenie štvrtého odseku (vlastnosť opacity s hodnotou 1,0).

Odstráňte vlastnosti farby a nepriehľadnosti zo súboru color.css a pomocou funkcie hsla nastavte priehľadnosť textu odseku

Vo funkcii hsla je priehľadnosť nastavená, ako je uvedené vyššie, pomocou parametra nazývaného alfa kanál (alfa), ktorý preberá hodnoty od 0,0 do 1,0.

Do súboru color.css pre každý odsek zapíšeme hodnoty funkcie hsla:

Výsledkom je rovnaký výsledok ako pri použití vlastnosti opacity.

Nastavte priehľadnosť textu v odsekoch pomocou funkcie rgba, kde štvrtý parameter (alfa) je zodpovedný za úroveň priehľadnosti a preberá hodnoty od 0,0 do 1,0.

Získame rovnaký výsledok ako v prípade funkcie hsla a vlastnosti opacity

Pokračovanie v článku: Skoro komplikované alebo sa učte CSS3. Časť 4. 1. Písma v dokumente HTML. Vlastnosti rodiny fontov a @ fontov