Jen o složitých nebo se učit CSS3. Část 3. Způsoby nastavení barev v CSS. Nastavit průhlednost prvku v dokumentu HTML

Dobrý den, drazí čtenáři webu remontcompa.ru! Jmenuji se Roman Nahvat a představuji vám třetí část série článků o jazyce CSS. V první a druhé části jsme se podívali na způsoby, jak přidat styly na webovou stránku, studovat koncept selektoru CSS a jejich typy. Počínaje touto částí začneme studovat vlastnosti jazyka CSS, které se vztahují na různé prvky stránky HTML: text, tabulky, seznamy, formuláře atd. Konkrétně se v tomto článku podíváme na způsoby, jak nastavit barvu a průhlednost prvků na webové stránce pomocí vlastností barvy, pozadí a barvy..

Jen o složitých nebo se učit CSS3. Část 3. Způsoby nastavení barev v CSS. Nastavit průhlednost prvku v dokumentu HTML

Vytvořte následující strukturu dokumentu HTML, jak je ukázáno níže.

Uložte tento dokument jako color.html na flash disk ve složce CSS

Rovněž vytvoříme a uložíme na flash disk ve složce CSS soubor color.css styles

Přidejte na webovou stránku color.html (značky) několik odstavců

...

s jakýmkoli textem (v našem případě 4 odstavce)

Získáme následující druh webové stránky

Pro každý odstavec napište název třídy (class1, class2, class3 a class4), jak je uvedeno níže

Vlastnost barvy CSS umožňuje určit barvu textu uvnitř prvku v dokumentu HTML. Po vlastnosti color je uvedena její hodnota, kterou lze zapsat různými způsoby

Jakoukoli barvu v CSS můžete nastavit následujícími způsoby: Pomocí anglických názvů barev. Prostřednictvím hexadecimálního kódu, který určuje množství červené, modré a zelené. Tento kód je zapsán za znaménkem # RGB, což vyjadřuje barvu v proporcích červené, modré a zelené podle modelu RGB. Hodnota RGBA je stále stejná hodnota RGB, ke které je přidán čtvrtý parametr, tzv. Alfa kanál, který bere hodnotu od 0,0 (průhlednost) do 1,0 (průhlednost) a umožňuje určit stupeň neprůhlednosti prvku. Hodnota HSL, která byla přidána v CSS3 jako alternativní způsob určení barvy. Tato hodnota začíná písmeny hsl, následovanými parametry v závorkách, které vyjadřují odstín, sytost a světlost barvy. Hodnota HSLA je stejná hodnota HSL, ke které, jako v případě hodnoty RGBA, je jako čtvrtý parametr přidán tzv. Alfa kanál, přičemž hodnoty jsou v rozsahu od 0,0 do 1,0.

Na stránce https://colorscheme.ru/ jména, hexadecimální kódy, RGB hodnoty HTML barev jsou uvedeny ve vhodné formě

Na stránkách https://colorscheme.ru/ je uveden univerzální převodník barev, který budeme v budoucnu používat. Tento převaděč umožňuje převádět barvy z jednoho barevného modelu na jiný, například z RGB na HSL, převádět hexadecimální kód barvy na hodnotu RGB atd..

V prvním odstavci nastavte text na modrý (do tohoto odstavce jsme přiřadili třídu s názvem class1).

V souboru stylu color.css za vlastnost color zadejte jako hodnotu název barvy (modrý)

Jak vidíte, text prvního odstavce změnil barvu na modrou (modrou)

Změňte barvu textu druhého odstavce (class2) na darkorchid

Jako hodnotu vlastnosti color napište barvu darkorchid jako hexadecimální kód, konkrétně # 9932cc

Jak vidíte, barva textu druhého odstavce se změnila na darkorchid (# 9932cc)

Změňte barvu textu třetího odstavce (třída 3) na barvu fuchsie (purpurová) a označte ji jako hodnotu RGB po vlastnosti color. Všimněte si, že barvy fuchsie a purpurové barvy jsou v podstatě identické a mají stejné hexadecimální kódy (# ff00ff) a hodnoty RGB (255,0,255)

Za vlastnost color RGB píšeme hodnotu barvy fuchsie (purpurová) následujícím způsobem: color: rgb (255,0,255)

Barva textu třetího odstavce se změnila na fuchsie (purpurová)

Změňte barvu textu čtvrtého odstavce (třída 4) pomocí hodnoty HSL. Jak bylo uvedeno výše, hodnota HSL je určena třemi parametry: odstín, sytost a lehkost

Každý z těchto parametrů zvažujeme samostatně. Chcete-li označit odstín, musíte na barevném kolečku zadat úhel natočení (od 0 ° do 360 °), jak je znázorněno na obrázku níže. Například zelená odpovídá úhlu rotace 120 ° a modrá úhlu rotace 270 °

Parametr saturace určuje saturaci vybraného odstínu. Sytost v barevném modelu HSL je uvedena v procentech v rozsahu od 0% do 100%. Čím je hodnota tohoto parametru blíže k 100%, barva vypadá čistěji a pokud má nasycení tendenci k 0%, barva se vybledne. Parametr lightness určuje jas barvy a jako parametr saturace je určen jako procento v rozsahu od 0% do 100%. Čím vyšší je hodnota tohoto parametru, tím jasnější bude barva. Změňte barvu textu čtvrtého odstavce na zelenou trávu

Protože chceme určit hodnotu HSL jako hodnotu pro vlastnost color, musíme převést barvu trávníku (# 7CFC00 nebo 124.252.0) na barevný model HSL. Chcete-li to provést, použijte online převodník barev na adrese https://colorscheme.ru/color-converter.html. Například v řádku barevných modelů zadejte hodnotu barvy zelené trávy, například RGB, konkrétně 124.252.0, a o něco nižší můžeme vidět výsledek převodu na HSL (hsl (90 100%, 49%))

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

Jak vidíte, barva textu čtvrtého odstavce se změnila na zelenou trávu

Jako barvu pozadí zvažte jinou vlastnost CSS. Vlastnost barva pozadí nastavuje barvu pozadí prvku v dokumentu HTML. Hodnotu vlastnosti pozadí barvy můžete nastavit stejným způsobem, jaký jsme zvažovali při určování barvy textu: pomocí anglických názvů barev, hexadecimálního kódu barvy, hodnoty RGB a hodnoty HSL Změňte barvu pozadí pro čtyři odstavce pomocí vlastnosti barvy pozadí různými způsoby pro určení barvy . V prvním odstavci nastavte barvu pozadí pomocí anglického názvu barvy, například darkgray. Na šablonu stylů napište barvu pozadí: darkgray

Barva pozadí prvního odstavce se změnila na darkgray

Změnit barvu textu druhého odstavce na aqua (azurová)

Nastavit hexadecimální kód barvy aqua (azurová) jako hodnotu pro vlastnost pozadí barvy

Dostáváme následující

Pro třetí odstavec nastavte barvu pozadí na zelenou pomocí hodnoty RGB (173 255,47)

V souboru stylů color.css zadejte barvu pozadí: rgb (173 255,47)

Nastavte čtvrtý odstavec na barvu černého pozadí pomocí hodnoty hsl

V souboru stylů color.css určíme vlastnost background-color s hodnotou hsl (0,0%, 0%)

Výsledkem je následující

V CSS3 existuje několik způsobů, jak nastavit průhlednost prvků v dokumentu HTML:

Vlastnost neprůhlednosti, která umožňuje určit míru průhlednosti prvku a všech jeho dětí. Vlastnost neprůhlednosti přijímá hodnoty v rozsahu od 0,0 (zcela průhledné) do 1,0 (neprůhledné). Použije se barevný model RGBA, který umožňuje nastavit barvu stejným způsobem jako RGB. Na rozdíl od RGB má RGBA čtvrtý parametr, tzv. Alfa kanál, který umožňuje určit stupeň průhlednosti prvku. Tento parametr přijímá hodnoty v rozsahu od 0,0 do 1,0. Barevný model HSLA, který umožňuje vyjádření barvy z hlediska odstínu, sytosti a světlosti a stejným způsobem jako barevný model RGBA, přidává hodnotu průhlednosti jako čtvrtý parametr, tzv. Alfa kanál. Tento parametr, stejně jako v případě RGBA, může nabývat hodnot od 0,0 do 1,0. Zvažte všechny metody pro nastavení průhlednosti (jako příklad použijte text) pomocí konkrétních příkladů. V souboru color.css odstraňte všechny vlastnosti barvy pozadí

Po vlastnosti krytí je uvedena jeho hodnota, která může být v rozsahu od 0,0 do 1,0. Čím blíže je hodnota této vlastnosti 1, tím vyšší je krytí prvku

V každém odstavci nastavte následující hodnoty pro vlastnost opacity: Pro první odstavec (přiřazená třída s názvem class1) zadejte jako hodnotu vlastnosti opacity číslo 0.2. Pro druhý odstavec (přiřazená třída s názvem class2) zadejte hodnotu 0,3 pro vlastnost opacity. odstavec (přiřazená třída s názvem class3) jako hodnota pro vlastnost opacity, zadejte číslo 0.4. Pro čtvrtý odstavec (přiřazená třída s názvem class4) jako hodnotu pro vlastnost opacity zadejte číslo 1.0

V důsledku toho vidíme, že text prvních tří odstavců (na které se vztahuje vlastnost neprůhlednosti s hodnotami 0,2, 0,3, respektive 0,4) je průhlednější než text čtvrtého odstavce (vlastnost neprůhlednosti s hodnotou 1,0).

Odstraňte vlastnosti barvy a neprůhlednosti ze souboru color.css a pomocí funkce hsla nastavte průhlednost textu odstavce

Ve funkci hsla je průhlednost nastavena, jak je uvedeno výše, pomocí parametru nazývaného alfa kanál (alfa), který bere hodnoty od 0,0 do 1,0.

Do souboru color.css pro každý odstavec zapíšeme hodnoty funkce hsla:

Výsledkem je stejný výsledek jako při použití vlastnosti neprůhlednosti.

Nastavte průhlednost textu v odstavcích pomocí funkce rgba, kde čtvrtý parametr (alfa) odpovídá za úroveň průhlednosti a převezme hodnoty od 0,0 do 1,0

Dosáhneme stejného výsledku jako v případě funkce hsla a vlastnosti krytí

Pokračování v článku: Téměř komplikované nebo se učte CSS3. Část 4. 1. Písma v dokumentu HTML. Vlastnosti rodiny fontů a @ fontů