Punaisen värin RGB-koodi on kirjoitettu muodossa. Tekstin värin asettaminen CSS:ssä

Kirjan ensimmäisessä osassa näytimme jo joissakin esimerkeissä, kuinka tekstin väri asetetaan CSS:ssä. Tässä ei ole mitään monimutkaista: tarvitset väriominaisuuden ja sen värin arvon, jolla haluat värittää tekstin.

P ( väri: #211C18; )

Esimerkissämme arvo #211C18 edustaa heksadesimaalivärikoodia. Jos olet jo perehtynyt heksadesimaalilukujärjestelmään, voit ohittaa seuraavan kappaleen lukemisen. Puhumme lisää myös muista tavoista esittää värejä verkossa - käyttämällä värimalleja (RGB, HSL) ja avainsanoja. Nämä tiedot ovat hyödyllisiä aloittelijoille, ja niitä suositellaan lukemaan.

Heksadesimaalivärit (heksadesimaali)

Heksadesimaalilukujärjestelmä ( heksadesimaali, heksadesimaali) perustuu numeroon 16. Heksadesimaaliarvon kirjoittamiseen käytetään 16 merkkiä: arabialaisia ​​numeroita 0-9 ja latinalaisten aakkosten ensimmäisiä kirjaimia (A, B, C, D, E, F). Heksadesimaalimuodossa oleva väri kirjoitetaan kolmella kaksinumeroisella numerolla 00:sta FF:ään (niitä edeltää hash-symboli #), joka vastaa kolmea komponenttia: punainen, vihreä, sininen (RGB-värimalli). Toisin sanoen värimerkintä voidaan esittää muodossa #RRGGBB, jossa ensimmäinen merkkipari määrittää punaisen tason, toinen - vihreän tason ja kolmas - sinisen tason. Tuloksena oleva väri on näiden kolmen värin yhdistelmä.

Lyhytmuotoinen merkintä hex-väreille

Jotkut heksadesimaaliväriarvot voidaan kirjoittaa lyhenteinä. Muuta merkintä kuten #RRGBB muotoon #RGB. Tämä voidaan tehdä, kun heksadesimaaliluku sisältää kolme paria identtisiä merkkejä.

Lyhennetty merkintämuoto on melko yleinen, ja annamme viitteellesi useita esimerkkejä lyhenteistä. Muuten, hex-väriarvot eivät ole isoja ja pieniä kirjaimia - voit käyttää sekä isoja että pieniä kirjaimia, kaikki riippuu halustasi ja maustasi.

Esimerkkejä hex-värien lyhennetyistä merkinnöistä:

RGB värimalli

Toinen tapa määrittää värit CSS:ssä on käyttää desimaalisia RGB-arvoja (punainen, sininen, vihreä). Tätä varten sinun on kirjoitettava avainsana rgb väriominaisuuden jälkeen ja sitten suluissa ja pilkuilla erotettuna - kolme numeroa välillä 0 - 255, joista jokainen tarkoittaa punaisen, vihreän ja sinisen värin voimakkuutta (r , g, b). Mitä suurempi luku, sitä voimakkaampi väri. Esimerkiksi saadaksesi kirkkaan vihreän värin sinun on kirjoitettava:

P ( väri: rgb(0, 255, 0); )

Mutta kellertävällä sinappisävyllä on seuraava merkitys:

Väri: rgb(94, 81, 3); /* alla on sama väri, kirjoitettuna heksadesimaalimuodossa: */ väri: #5E5103;

Mustan arvo kirjoitetaan muodossa (0, 0, 0) ja valkoisen arvoksi (255, 255, 255) . Nämä arvot on myös mahdollista ilmoittaa prosentteina. Joten luku 255 vastaa 100%, joten valkoinen väri voidaan asettaa seuraavasti:

Väri: rgb (100%, 100%, 100%);

Mistä etsiä värimerkityksiä

Ehkä sinulla on kysymys: mistä saat kaikki nämä värimerkit? On olemassa monia graafiset editorit ja online-palvelut, joiden avulla voit valita värejä ja rakentaa väriteemoja. Yksi suosituimmista ohjelmista, jossa voit valita sopivan värin ja saada sen RGB-, hex-arvon ja paljon muuta - Adobe Photoshop. Vaihtoehtona on erityisiä sivustoja, joissa voit helposti valita värin lisäksi myös koko värimaailman. Hyvä esimerkki on Adobe Color CC -palvelu.

RGBA värimalli

Voit asettaa värin RGBA-muodossa samalla tavalla kuin RGB-muodossa. Ero RGBA:n ja RGB:n välillä on alfakanavan läsnäolo, joka vastaa värin läpinäkyvyydestä. Läpinäkyvyys asetetaan numerolla 0-1, jossa 0 tarkoittaa täydellistä läpinäkyvyyttä ja 1 päinvastoin täysin läpinäkymätöntä. Väliarvot, kuten 0,5, mahdollistavat läpikuultavan ulkonäön asettamisen (lyhyt merkintä on sallittu, ilman nollaa, mutta pisteellä - 0,5). Esimerkiksi, jotta tekstistä tulee värillistä ja hieman läpinäkyvää, sinun on kirjoitettava rgba-avainsana ja väri-arvo väriominaisuuden jälkeen:

P ( väri: rgba(94, 81, 3, .9); )

RGBA:n haittana on, että se ei tue Internet-selain Explorer-versiot 8 ja aikaisemmin. Erityisesti IE8:ssa voit käyttää seuraavaa ratkaisua:

P ( väri: rgb(94, 81, 3); väri: rgba(94, 81, 3, .9); )

Esimerkin ensimmäinen ominaisuus on tarkoitettu IE8-selaimelle, joka näyttää tekstin halutulla värillä, mutta ilman läpinäkyvyyttä. Ja ne selaimet, jotka ymmärtävät RGBA:ta, käyttävät elementtiin toista ominaisuutta läpinäkyvästi.

HSL (HSLA) värimallit

Voit myös asettaa värin CSS:ssä käyttämällä HSL-värimallin koordinaatteja (Hue, Saturation, Lightness). Se on kirjoitettu näin:

P (väri: hsl(165, 100%, 50%); )

Ensimmäinen numero suluissa tarkoittaa värisävyä ja on annettu asteina (lukualue 0-359). On helppo ymmärtää, miksi asteita käytetään, jos muistat, miltä väripyörä näyttää:

Toinen ja kolmas numero suluissa tarkoittavat kylläisyyttä ja vaaleutta, vastaavasti. Niiden arvot on asetettu prosentteina 0 - 100. Mitä pienempi kylläisyysarvo on, sitä mykistyneempi väri muuttuu. Kylläisyysarvo nolla johtaa harmaan väriin riippumatta sävyn arvosta. Vaaleusarvon avulla voit määrittää värin kirkkauden. Matalat arvot johtavat tummiin värisävyihin, korkeat arvot vaaleisiin sävyihin. Vaaleuden arvo 100 % tarkoittaa valkoista, 0 % mustaa.

HSLA-värimalli toimii lähes samalla tavalla kuin HSL, mutta siinä on RGBA:n tapaan alfakanava, jolla voit asettaa värin läpinäkyvyyden määrittämällä halutun arvon välillä 0-1:

P (väri: hsla(165, 100%, 50%, .6);)

HSL:ää ja HSLA:ta tukevat kaikki selaimet paitsi Internet Explorer versiot 8 ja aikaisemmat.

Normaalit HTML-värit

Toinen tapa esittää värejä verkossa on avainsanat, joita voidaan käyttää elementin värin määrittämiseen. Esimerkki:

P(väri:musta;)

Väriominaisuuden arvoon voidaan kirjoittaa 16 vakioväriä:

Kaikki selaimet tukevat näitä värejä. Näiden lisäksi löytyy noin 130 lisäavainsanaa eri värisävyille. Täydellinen taulukko näistä väreistä on nähtävissä W3C-viitekirjassa.

Tällaisten avainsanojen käyttö on hyväksyttävää, mutta on olemassa vaara, että selain ei hyväksy jotakin sanaa. Siksi on suositeltavaa kirjoittaa muistiin heksadesimaalivärikoodi avainsanojen sijaan.

Tulokset

CSS:ssä tekstin väri määritetään väriominaisuuden avulla ja sen arvo voidaan kirjoittaa usealla eri tavalla - heksadesimaalimuodossa (heksadesimaalimuodossa, RGB- tai HSL-muodossa tai määrittämällä avainsana). Jotta vältetään avainsanalla määritetyn värin virheellinen näyttö, on parempi määrittää sen heksadesimaaliarvo.

Elementin läpinäkyvyys on myös mahdollista asettaa alfakanavalla (RGBA- ja HSLA-muodot). On syytä muistaa, että IE8-selain ja sen varhaiset versiot eivät tue RGBA-, HSL- ja HSLA-muotoja.

Tässä artikkelissa tutustumme HTML:n ja CSS:n kykyihin muuttaa tekstin väriä verkkosivuilla. Useita vaihtoehtoja harkitaan. Jokaisessa yksittäisessä tapauksessa oma erityinen menetelmä on kätevä.

Aluksi huomaamme, että kaikki värit voidaan määrittää kolmessa muodossa:

• Värin nimi (punainen, sininen, vihreä jne.)
• Heksadesimaalimuoto (#104A00, #0F0 jne.)
• rgba-muoto (rgba(0,0,0,0,5) jne.)

Sivustollamme on koko paletti ja sivuston html-värien nimet, joista voit valita sopivan värin.

Tapa 1. html-tunnisteen kautta