CSS-väriominaisuudet. Värit

Yksi työkalu verkkosivujen tyylejen muuttamiseen on CSS-väri. Tätä asetusta voidaan muuttaa useilla tavoilla. Jokaisella on sekä etuja että haittoja.

nimi

Väriominaisuus määrittää elementin värin. CSS: ssä on 145 otsikkoa. Niistä on yksinkertaisia (esimerkiksi musta, sininen) ja monimutkaisia (esim. Karmiininpunainen, lawngreen).

Koska koko luettelo on vaikea muistaa, tyyliarkin nimeä käytetään harvoin.

RGB

Useimmat televisiot, älypuhelimet, näytöttyöskentele värimallilla RGB. Eli mikä tahansa sävy voidaan asettaa ensisijaisilla väreillä, jotka sisältävät punaisen, vihreän ja sinisen. Tätä lähestymistapaa käytetään sekä laitteissa että CSS: ssä. väri peruskoostumuksen arvot ovat 0 - 255. Ja mahdollisten sävyjen lukumäärä on 16777216.

Koska RGB-malli liittyy suoraan värin visualisoinnin fyysisiin lakeihin, musta määritellään siinä rgb (0, 0, 0), valkoinen on rgb (255, 255, 255). RGBA-järjestelmä on täysin analoginen RGB: lle, vainlisäämällä alfa-kanava. Se vaikuttaa taustalla olevaan sävyyn yhdistävästä läpinäkyvyydestä. Elementin ulkonäkö vaihtelee "substraatin" mukaan.

HSL

Jotta ymmärtäisit, miten HLS-järjestelmä toimii, sinun on annettava värirengas. Sen keskellä on punainen, sitten (myötäpäivään) kaikki muut sateenkaaren sävyt. Määritellään CSS: ssä värit käyttämällä HLS-järjestelmää, sinun on asetettava kolme parametria:

sävy (asteina) - suunta ympyrän keskeltä;
kylläisyys (prosentteina) on kuinka paljon väriä tarvitaan;
kirkkaus (prosentteina).

Esimerkiksi violetti voidaan määritellä seuraavasti: hsl (315, 100%, 45%). HSL sopii parhaiten kokeisiin. Tutkittuasi värirenkaan voi karkeasti kuvitella, millainen väri on määritetty tietylle elementille, samalla kun tarkastellaan tyylialustaa. HSLA - sama HLS, vain alfa-kanavalla: hsl (0, 100%, 50, 0,6) - punainen, läpinäkyvä hieman yli puolet.

HEX

Vuonna CSS-värit voidaan määrittää heksadesimaalisella esityksellä, esimerkiksi oranssi määräytyy arvon mukaan # FF4500.

Ymmärrä paremmin, mikä onheksalukuina, olisi vielä tarkasteltava kymmenjärjestelmä. Se on luku 0 9. Kun tarve laskee, joka on suurempi kuin 9, yksi bitti lisätään, ja se muuttuu 10, sitten 100, ja niin edelleen. E. Kaikki täsmälleen sama heksadesimaalimerkintätavalla, mutta se jälkeen 9 on A, sitten B ja niin edelleen F on sama kuin 15 desimaalijärjestelmässä. Sitten yksi bitti lisätään, ja saamme 10, yhtä suuri kuin 16 tavallisessa laskimossa.

Kuten RGB: ssä, HEX: n sävyt osoittavat, missämittasuhteet käyttävät ensisijaisia värejä. Niitä ei ole erotettu pilkulla (väri: # FFD500). Jokaisessa merkissä on punainen, vihreä ja sininen.

HEX-järjestelmää ei yleensä käytetä kokeiden aikana, koska on mahdotonta löytää oikeita värejä CSS. pöytä voi auttaa tässä asiassa, mutta jos jatkuvastikuulla hänen kanssaan, työ viivästyy. Hexadecimal-esitys sopii parhaiten siirrettäessä mallia graafisesta editoriin. Loppujen lopuksi on paljon helpompaa kopioida vain yhdestä numerosta, kuin vuorotellen kolme.

Mikä on paras tapa?

Tältä osin mitään konkreettista ei voida sanoa. Jos liitäntäelementit tarvitsevat läpinäkyvyyden, valitse RGBA ja HSLA. Jos haluat kokeilla selaimen, HLS-värirengas on kätevä. Jos käytät palettia tai siirrät mallia Photoshopista, sinun tulisi mieluummin käyttää heksadesimaaleja CSS-värikoodeja.</ span </ p>