Csak a bonyolult vagy megtanulható CSS3 számára. 3. rész. A színek beállításának módjai a CSS-ben. Állítsa az átlátszóságot egy elemre egy HTML dokumentumban

Üdvözlet, kedves olvasók az remontcompa.ru webhelyről! A nevem Roman Nahvat, és a CSS stílusú nyelvről szóló cikksorozat harmadik részét mutatom be Önnek. Az első és a második részben megvizsgáltuk a stílusok weblapokhoz történő hozzáadásának lehetőségeit, megvizsgáltuk a CSS választó fogalmát és típusait. Ebből a részből megkezdjük a CSS nyelv tulajdonságainak tanulmányozását, amelyek a HTML oldal különféle elemeire vonatkoznak: szöveg, táblázatok, listák, űrlapok és így tovább. Pontosabban ebben a cikkben megvizsgáljuk a weblap elemeinek színének és áttetszőségének a szín, a háttér szín és az átlátszóság tulajdonságainak felhasználásával történő beállítását..

Csak a bonyolult vagy megtanulható CSS3 számára. 3. rész. A színek beállításának módjai a CSS-ben. Állítsa az átlátszóságot egy elemre egy HTML dokumentumban

Hozza létre a következő HTML dokumentum szerkezetet az alább látható módon.

Mentse el ezt a dokumentumot color.html formátumban egy flash meghajtón a CSS mappában

A flash.meghajtóra a CSS mappába is létrehozunk és mentjük a color.css stílus fájlt

Adjon hozzá néhány bekezdést a color.html weboldalhoz (címkék

...

bármilyen szöveggel (esetünkben 4 bekezdés)

Megkapjuk a következő weboldalt

Minden bekezdéshez írja be az osztály nevét (1. osztály, 2. osztály, 3. osztály és 4. osztály) az alább látható módon

A CSS színtulajdonság lehetővé teszi a HTML dokumentumban az elem belsejében található szöveg színének meghatározását. A színtulajdonság után feltüntetik annak értékét, amelyet különféle módon lehet írni

A CSS-ben bármilyen színt beállíthat a következő módon: Angol színnevek használata. Egy hexadecimális kód segítségével, amely meghatározza a piros, kék és zöld mennyiségét. Ezt a kódot az # RGB jel után írják, amely a színt az RGB modell szerint a vörös, kék és zöld arányban fejezi ki. Az RGBA érték továbbra is ugyanaz az RGB érték, amelyhez hozzáadódik a negyedik paraméter, az úgynevezett alfa-csatorna, amely 0.0 (átlátszóság) és 1.0 (átlátszóság) közötti értéket vesz fel, és lehetővé teszi az elem átlátszatlanságának meghatározását. A szín meghatározásának alternatív módjaként a CSS3-ban hozzáadott HSL-érték. Ez az érték a hsl betűkkel kezdődik, amelyet zárójelben szereplő paraméterek követnek, amelyek kifejezik a szín árnyalatát, telítettségét és világosságát. A HSLA-érték megegyezik a HSL-értékkel, amelyhez, mint az RGBA-értékhez, az ún. Alfa-csatornát hozzáadják negyedik paraméterként, a 0.0–1.0 tartományba eső értékeket figyelembe véve.

A https://colorscheme.ru/ oldalon a nevek, a hexadecimális kódok, a HTML színek RGB-értékei kényelmes formában kerülnek bemutatásra

A https://colorscheme.ru/ oldalon egy univerzális színváltót is bemutatunk, amelyet a jövőben is használunk. Ez a konverter lehetővé teszi a színek konvertálását az egyik színmodellből a másikba, például RGB-ről HSL-re, a hexadecimális színkód konvertálását RGB-értékre stb..

Állítsa a szöveget kékre az első bekezdésben (ehhez a bekezdéshez osztályt adtunk, amelyet class1-nek hívtunk)

A color.css stílusfájlban a színtulajdonság után adja meg az értékként a szín nevét (kék)

Mint láthatja, az első bekezdés szövege színét kékre (kék) változtatta meg

Változtassa meg a második bekezdés (2. osztály) szövegének színét darkorchid-ra

A színtulajdonság értékeként írja be a darkorchid színét hexadecimális kódként, nevezetesen # 9932cc

Mint láthatja, a második bekezdés szövegének színe darkorchid-ra változott (# 9932cc)

Változtassa meg a harmadik bekezdés (3. osztály) szöveges színét a fuksia (magenta) színre, jelölve RGB értékként a színtulajdonság után. Észre fogja venni, hogy a fukszia és a bíborvörös színek lényegében azonosak, és azonos hexadecimális kódokkal (# ff00ff) és RGB-értékekkel (255,0255) rendelkeznek.

A színes RGB tulajdonság után a fukszia (bíborvörös) színértékét írjuk le a következőképpen: szín: rgb (255,0255)

A harmadik bekezdés szövegének színe fuksia (bíbor) színre változott

A HSL érték használatával változtassa meg a negyedik bekezdés (4. osztály) szövegét. Mint fentebb említettük, a HSL-értéket három paraméter határozza meg: színárnyalat, telítettség és világosság

Ezeket a paramétereket külön-külön vesszük figyelembe. Az árnyalat jelöléséhez meg kell adnia a forgásszöget (0 ° -tól 360 ° -ig) a színes kereken, az alábbi ábra szerint. Például a zöld megfelel a 120 ° forgásszögnek, a kék pedig a 270 ° forgási szögnek

A saturation paraméter határozza meg a kiválasztott árnyalat telítettségét. A telítettséget a HSL színmodellben százalékban adjuk meg, 0 és 100% között. Minél közelebb van ennek a paraméternek a 100% -a, annál tisztabb lesz a szín, és ha a telítettség 0% -ra hajlik, akkor a szín elhalványul. A világossági paraméter meghatározza a szín fényerejét, és a telítettség paraméteréhez hasonlóan a 0% és 100% közötti százalékban kerül megadásra. Minél nagyobb a paraméter értéke, annál világosabb lesz a szín. Változtassa meg a negyedik bekezdés szöveges színét zöldfűré

Mivel a HSL-értéket a színtulajdonság értékének a meghatározására szeretnénk meghatározni, a gyepzöld színt (# 7CFC00 vagy 124.252.0) HSL-színmodellre kell konvertálnunk. Ehhez használja az online színváltót a https://colorscheme.ru/color-converter.html webhelyen. Például a színes modell sorában adja meg a füves zöld szín értékét, például az RGB-t, azaz a 124.252.0, és kissé alacsonyabban láthatjuk a HSL-re történő átalakítás eredményét (hsl (90,100%, 49%))

A színtulajdonság után adja meg a hsl-értéket (90 100%, 49%)

Mint láthatja, a negyedik bekezdés szövegének színe zöldfűré vált

Fontolja meg egy másik CSS tulajdonságot háttér színként. A háttér szín tulajdonsága beállítja az elem háttér színét a HTML dokumentumban. A háttérszín tulajdonság értékét ugyanúgy állíthatja be, mint amelyet a szöveg színének meghatározásakor figyelembe vettünk: angol színnevek, hexadecimális színkód, RGB érték és HSL érték felhasználásával változtassa meg a háttér színét négy bekezdéshez, a háttér szín tulajdonságának használatával, a szín megadására különféle módon. . Az első bekezdéshez állítsa be a háttérszínt az angol színnév használatával, például darkgray. A stíluslapba írja be a háttér színét: sötétszürke

Az első bekezdés háttérszíne sötétszürkére változott

Változtassa meg a második bekezdés szövegét aqua (cián) színre

Állítsa be a hexadecimális színkódot aqua (cián) a háttér szín tulajdonságának értékéhez

A következőket kapjuk

A harmadik bekezdéshez állítsa a háttérszínet zöldfényűre az RGB-érték felhasználásával (173 255,47)

A color.css stílusfájlban adja meg a háttér színét: rgb (173 255,47)

Állítsa be a negyedik bekezdést a fekete háttér színére a hsl érték használatával

A color.css stílusfájlban meghatározzuk a háttér szín tulajdonságát hsl értékkel (0,0%, 0%)

Ennek eredményeként a következőket kapjuk

A CSS3-ban számos módon állíthatja be a HTML-dokumentumok elemeinek átláthatóságát:

Az átlátszatlanság tulajdonsága, amely lehetővé teszi az elem és annak gyermekei átlátszóságának mértékének meghatározását. Az átlátszatlanság tulajdonsága a 0,0 (teljesen átlátszó) és 1,0 (átlátszatlan) tartományba eső értékeket fogad el az RGBA színmodell segítségével, amely lehetővé teszi a szín beállítását az RGB-hez hasonlóan. Az RGB-vel ellentétben az RGBA-nek van egy negyedik paramétere, az úgynevezett alfa-csatorna, amely lehetővé teszi az elem átlátszóságának mértékének meghatározását. Ez a paraméter elfogadja a 0,0 és 1,0 közötti értékeket. A HSLA színmodell, amely lehetővé teszi a szín kifejezését árnyalatban, telítettségben és világosságban, és ugyanúgy, mint az RGBA színmodell, hozzáadja az átláthatóságot negyedik paraméterként, az úgynevezett alfa-csatornát. Ez a paraméter, akárcsak az RGBA esetében, 0,0 és 1,0 közötti értékeket vehet fel. Fontolja meg az átlátszóság beállításának valamennyi módszerét (szövegként példaként) konkrét példák felhasználásával. A color.css fájlban törölje az összes háttérszín tulajdonságot

Az átlátszatlansági tulajdonság után megmutatja annak értékét, amely 0,0 és 1,0 között lehet. Minél közelebb van ez a tulajdonság értéke 1-hez, annál nagyobb az elem átlátszatlansága

Az egyes bekezdésekben állítsa be az alábbi értékeket az átlátszatlanság tulajdonságához: Az első bekezdéshez (osztályhoz hozzárendelt osztályt1 névvel) adja meg a 0,2 értéket az átlátszatlanság tulajdonságának értékét. A második bekezdéshez (az osztályhoz hozzárendelt osztályt2 névvel) adja meg az átlátszatlanság tulajdonság 0,3 értékét. bekezdés (osztályhoz rendelt egy osztályt3 névvel), mint az átlátszatlanság tulajdonságának értékét, adja meg a 0.4-es számot. A negyedik bekezdéshez (osztályhoz hozzárendelt osztályt a 4. névvel) az átlátszatlanság tulajdonságához adja meg az 1.0-at.

Ennek eredményeként látjuk, hogy az első három bekezdés szövege (amelyre a 0,2, 0,3 és 0,4 értékű átlátszósági tulajdonságot alkalmazzák) átláthatóbb, mint a negyedik bekezdés szövege (átlátszatlanság tulajdonsága 1,0 értékkel).

Távolítsa el a szín és az átlátszóság tulajdonságait a color.css fájlból, és állítsa be a bekezdésszöveg átlátszóságát a hsla függvény használatával

A hsla függvényben az átláthatóságot a fentiek szerint állítják be egy alfa-csatorna (alfa) nevű paraméter felhasználásával, amely 0,0 és 1,0 közötti értéket vesz fel.

Az egyes bekezdések color.css fájljában megírjuk a hsla függvény értékeit:

Ennek eredményeként ugyanazt az eredményt kapjuk, mint az átlátszatlanság tulajdonságát.

Állítsa be a bekezdésekben szereplő szöveg átlátszóságát az rgba függvény használatával, ahol a negyedik paraméter (alfa) felelős az átlátszósági szintért, és 0,0 és 1,0 közötti értéket vesz fel.

Ugyanazt az eredményt kapjuk, mint a hsla függvény és az átlátszóság tulajdonság esetében

Folytatás a cikkben: Csak a bonyolultról vagy a CSS3-ról. 4. rész 1. Betűtípusok egy HTML dokumentumban. Betűkészlet-család és @ betűkészlet-tulajdonságok