CSS spalvų modulis aiškiai apibūdina reikšmes, kurios leidžia autoriams nurodyti html elementų spalvą ir aiškumą, taip pat spalvų reikšmes.
Galios spalva
1. Prioritetinės spalvos: ryškumo spalva
Institucija nustato šrifto spalvą naudodama įvairias spalvų perdavimo sistemas. Stiprumas reiškia teksto elemento spalvą. Be to, jis naudojamas suteikti galimą netiesioginę reikšmę (currentColor) bet kurioms kitoms galioms, kurios sukuria reikšmę spalvai.
Galia mažėja.
2. Spalvos reikšmė
2.1. Pagrindiniai raktažodžiai
Pagrindinių raktinių žodžių sąraše yra šios reikšmės:
vardas | HEX | RGB | Koliras |
---|---|---|---|
juodas | #000000 | 0,0,0 | |
sidabras | #C0C0C0 | 192,192,192 | |
pilka | #808080 | 128,128,128 | |
baltas | #FFFFFF | 255,255,255 | |
kaštoninės spalvos | #800000 | 128,0,0 | |
raudona | #FF0000 | 255,0,0 | |
violetinė | #800080 | 128,0,128 | |
fuksija | #FF00FF | 255,0,255 | |
žalias | #008000 | 0,128,0 | |
kalkių | #00FF00 | 0,255,0 | |
alyvuogių | #808000 | 128,128,0 | |
geltona | #FFFF00 | 255,255,0 | |
karinis jūrų laivynas | #000080 | 0,0,128 | |
mėlyna | #0000FF | 0,0,255 | |
žalsvai mėlyna | #008080 | 0,128,128 | |
aqua | #00FFFF | 0,255,255 |
Spalvų pavadinimuose didžiosios ir mažosios raidės neskiriamos.
Sintaksė
Spalva: žalsvai melsva;
2.2. Spalvų skaitinės reikšmės
2.2.1. Colori modeliai RGB
RGB reikšmės formatas šešioliktainiu formatu yra # ženklas, po kurio eina trys arba šeši šešioliktainiai simboliai. Trijų skaitmenų RGB žymėjimas #rgb paverčiamas šešiaženkle forma #rrggbb kopijuojant skaičius, o ne pridedant nulius. Pavyzdžiui, #fb0 išsiplečia į #ffbb00. Tai garantuoja, kad balta #ffffff gali būti naudojama kaip nuoroda trumpame #ffff įraše ir pašalina bet kokius skirtumus, priklausančius nuo ekrano spalvos.
Funkcinio žymėjimo RGB reikšmės formatas yra rgb (po kurio pateikiamas atskiras trijų skaitinių reikšmių (arba trijų sveikųjų skaičių, arba trijų šimtųjų dalių) sąrašas, po kurio pateikiamas simbolis). Sveikasis skaičius 255 atitinka 100 %, o F arba FF šešioliktaine tvarka:
RGB (255 255 255) = RGB (100%, 100%, 100%) = #FFF
Šalia skaitinių reikšmių leidžiami tušti simboliai.
Interneto dizainas turi daugybę spalvų pateikimo būdų
HEX yra šešioliktainė sistema, skirta spalvoms pateikti pagal 16. Šioje sistemoje naudojami arabiški dešimtys skaitmenys nuo 0 iki 9 ir lotyniškos raidės nuo A iki F, siekiant padidinti skaitmeninį skaičių iki 16. Interneto dizainui – 16 pagrindinių (raktas) paimamos spalvos , todėl reitingas šešiolika Spalvos kodas yra #RRGGBB, kur kiekviena pora savo ruožtu reiškia spalvą: RR – raudona, GG – žalia ir BB – mėlyna. Odos spalva svyruoja nuo 00 iki FF.
Dar dvi spalvų apraiškos žiniatinklio dizaine yra: RGB(*,*,*) forma, kur spalvos dalis „*“ pavaizduota dešimtimis skaitmenų nuo 0 iki 255 ir spalvų pavadinimais. Anglų.
Kuriant spalvotą vaizdą, pagrindinė problema yra teisingas spalvų perkėlimas į įvairių tipų kompiuterius, monitorius ir naršykles. Jei naršyklė negali tinkamai parodyti spalvos, ji pasirenka panašią arba sumaišo kelias spalvas. Arba galite jį pakeisti visiškai kita spalva.
Lentelė 16 pagrindinių spalvų, kurios yra visose naršyklėse
vardas | Koliras | Hex | (RGB) |
Aqua (morska hvilya) | #00FFFF | (000,255,255) | |
Juoda | #000000 | (000,000,000) | |
Mėlyna | #0000FF | (000,000,255) | |
Fuksija (rausvai raudona) | #FF00FF | (255,000,255) | |
Pilka (serija) | #808080 | (128,128,128) | |
Žalias | #008000 | (000,128,000) | |
Lime (šviesiai žalia) | #00FF00 | (000,255,000) | |
Kaštoninė (tamsi bordo) | #800000 | (128,000,000) | |
tamsiai mėlyna (tamsiai mėlyna) | #000080 | (000,000,128) | |
Alyvuogių | #808000 | (128,128,000) | |
Violetinė | #800080 | (128,000,128) | |
Raudona (raudona) | #FF0000 | (255,000,000) | |
sidabras | #C0C0C0 | (192,192,192) | |
žalsvai žalsva (pilkai žalia) | #008080 | (000,128,128) | |
Baltas | #FFFFFF | (255,255,255) | |
Geltona (zhovtiy) | #FFFF00 | (255,255,000) |
Lentelė violetinė spalvos ir spalvos
vardas | Koliras | Hex | (RGB) |
Purpurinė (violetinė) | #FFCBDB | (255,203,219) | |
Purpurinė (violetinė) | #FF0099 | (255,000,153) | |
Magenta (rausvai raudona) | #F95A61 | (249,090,097) | |
Fuksija (fuksija) | #FF00FF | (255,000,255) | |
Movein (anilino violetinė) | #EF0097 | (239,000,151) | |
Lašišos rožinė (oranžinė-rūdžių) | #FF91A4 | (255,145,164) | |
Cenise (violetinis atspalvis) | #DE3163 | (153,149,140) | |
Baklažanai (baklažanai) | #990066 | (153,000,132) | |
Levandų skaistalai (rožinės levandos) |  #FFF0F5 | (255,240,245) | |
Alyva (boozkoviy) | #C8A2C8 | (200,162,200) | |
Magenta (rausvai raudona) | #FF008F | (255,000,143) | |
Orchidėja (orchidėja) | #DA70D6 | (218,112,214) | |
Raudona-violetinė (violetinė-raudona) | #C71585 | (199,021,133) | |
Sangvinikas | #92000A | (146,000,010) | |
Erškėtis (violetinis atspalvis) | #D8BFD8 | (185,211,238) | |
Violetinis baklažanas (violetinis atspalvis) | #991199 | (153,017,153) | |
Rosa vivo (inkubuota raguolė) | #FF007F | (255,000,127) | |
Levandų rožė (violetinės spalvos atspalvis) | #FBA0E3 | (108,123,139) | |
Mountbatten rožinė | #997ABD | (153,122,141) |
Lentelė pilka spalvos ir spalvos
vardas | Koliras | Hex | (RGB) |
Pilka (Sirija) | #808080 | (128,128,128) | |
Pilka (Sirija) | #bebebe | (190,190,190) | |
(Siry-vidtinok) | #858585 | (133,133,133) | |
Gray33 (Syriy-33) | #545454 | (084,084,084) | |
(Sirogo šiferis) | #708090 | (112,128,144) | |
(Kvarcinis) | #99958с | (153,149,140) | |
(Svetlo siry) | #bbbbbb | (187,187,187) | |
(Sriblyasty) | #c0c0c0 | (192,192,192) | |
(Siro-balta) | #f0f0f0 | (240,240,240) | |
(Borodijus Abdel-Kerimas) | #e0e0e0 | (224,224,224) | |
Šviesiai pilka (šviesiai pilka) | #d3d3d3 | (211,211,211) | |
LightStateGray () | #778899 | (119,136,153) | |
StateGray-1 (Blіdo-cornflower blue1) | #c6e2ff | (198,226,255) | |
StateGray-2 (Blіdo-cornflower blue2) | #b9d3ee | (185,211,238) | |
StateGray3() | #9fb6cd | (159,182,205) | |
StateGray4() | #6c7b8b | (108,123,139) |
Šiame puslapyje yra lentelė su raktiniais žodžiais, kuriais galima priskirti spalvas tokiomis žiniatinklio kūrėjų kalbomis kaip: HTML, CSS, JavaScript, Flash ir kt.
Senosiose specifikacijose WC3 koncernui buvo numatyta tik 16 raktinių žodžių, be to, HTML ir CSS buvo įdiegtos spalvos. Tolesnėse naujausiose specifikacijose buvo pridėta dar 130 raktinių žodžių spalvų pavadinimams nurodyti. Čia yra lentelė, kurioje rodomi spalvų pavadinimai, šešioliktainiai ir RGB kodai, kuriuos jie atstovauja.
Vadovaujantis CSS taisyklėmis, spalvų pavadinimuose didžiosios ir mažosios raidės neskiriamos. Indijos raudona ir indianred spalvų įrašai yra vienodi.
Taip pat verta paminėti, kad iš 146 lentelėje pateiktų raktinių žodžių ji iš tikrųjų turi mažiau spalvų. Tai reiškia, kad šie raktiniai žodžiai reiškia tą pačią spalvą. Taigi, pavadinimai Pilka ir Pilka nurodo 50 šešiakampių spalvą su kodu #808080, o žodis Magenta yra sinonimas HTML spalvai Fuchsia, kuri atitinka šešioliktainį kodą #FF00FF. Taip pat sinonimas žodžiams Aqua ir Cyan, smarvės atitinka kodą #00FFFF.
|
|
Norint nustatyti spalvas, naudojami skaičiai šešioliktainiais kodais. Šešioliktoji sistema, o ne dešimtoji, yra pagrįsta, kaip rodo jos pavadinimas, skaičiumi 16. Atsiras skaičiai: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Skaičiai nuo 10 iki 15 pakeičiami lotyniškomis raidėmis. Skaičiai, didesni nei 15 šešiolikos sistemoje, sukuriami sujungiant du skaičius viename. Pavyzdžiui, skaičių 255 dešimtoje sistemoje patvirtina skaičius FF šešioliktoje sistemoje. Kad nesusipainiotumėte su nurodyta skaičių sistema, prieš šešioliktą skaičių įdėkite simbolį #, pavyzdžiui, #666999. Skinai iš trijų spalvų – raudonos, žalios ir mėlynos – gali turėti reikšmes nuo 00 iki FF. Tokiu būdu priskirta spalva padalijama į tris sandėlius #rrggbb, kur pirmieji du simboliai nurodo raudoną spalvos komponentą, du viduriniai – žalią, o likę du – mėlyną. Leidžiama naudoti trumpąją formą #rgb, kur galima pridėti simbolį. Taigi įrašo #fe0 pėdsakas vertinamas kaip #ffee00.
Dėl vardo
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Naršyklės palaiko skirtingas jų pavadinimų spalvas. Lentelėje 1 nurodomas pavadinimas, šešioliktainis kodas, reikšmės RGB, HSL formatu ir aprašymas.
aš | Koliras | Kodas | RGB | HSL | apibūdinimas |
---|---|---|---|---|---|
baltas | #ffffff arba #ffff | rgb (255 255 255) | hsl (0,0 %, 100 %) | Bily | |
sidabras | #c0c0c0 | rgb(192,192,192) | hsl (0,0 %, 75 %) | Sirija | |
pilka | #808080 | rgb(128 128 128) | hsl (0,0 %, 50 %) | Tamsiai pilka | |
juodas | #000000 arba #000 | rgb(0,0,0) | hsl (0,0 %, 0 %) | Chorny | |
kaštoninės spalvos | #800000 | rgb(128,0,0) | hsl (0,100 %, 25 %) | Tamsiai raudona | |
raudona | #ff0000 arba #f00 | rgb(255,0,0) | hsl(0,100%,50%) | raudonas auksas | |
oranžinė | #ffa500 | rgb(255,165,0) | hsl (38,8 100 %, 50 %) | Oranžinė | |
geltona | #ffff00 arba #ff0 | rgb(255,255,0) | hsl (60 100 %, 50 %) | Žovtijus | |
alyvuogių | #808000 | rgb(128,128,0) | hsl (60 100 %, 25 %) | Alyvuogių | |
kalkių | #00ff00 arba #0f0 | rgb(0,255,0) | hsl (120 100 %, 50 %) | Šviesiai žalia | |
žalias | #008000 | rgb(0,128,0) | hsl (120 100 %, 25 %) | Zeleny | |
aqua | #00ffff arba #0ffff | rgb(0 255 255) | hsl (180 100 %, 50 %) | Blakitny | |
mėlyna | #0000ff arba #00f | rgb(0,0,255) | hsl (240 100 %, 50 %) | Mėlyna | |
karinis jūrų laivynas | #000080 | rgb(0,0,128) | hsl (240 100 %, 25 %) | Tamsiai mėlyna | |
žalsvai mėlyna | #008080 | rgb(0 128 128) | hsl (180 100 %, 25 %) | Mėlyna Žalia | |
fuksija | #ff00ff arba #f0f | rgb(255;0,255) | hsl(300,100%,50%) | Roževijus | |
violetinė | #800080 | rgb(128,0,128) | hsl (300 100 %, 25 %) | Violetinė |
Daugiau pagalbos RGB
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Galite nustatyti spalvos, vikorijos ir raudonos, žalios ir mėlynos spalvos reikšmes dešimtosiomis. Oda su trimis spalvų komponentais įgauna reikšmes nuo 0 iki 255. Taip pat galima nustatyti aukštos kokybės spalvos spalvą, kuri 100% atitiks skaičių 255. Iš pradžių nurodomas rgb raktinis žodis ir tada rankoms, per kurias, atrodo, yra spalvų komponentai, pavyzdžiui, rgb (255, 128, 128) arba RGB (100%, 50%, 50%).
RGBA
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
RGBA formatas yra panašus į RGB sintaksę, tačiau apima alfa kanalą, kuris nurodo elemento aiškumą. 0 reikšmės rodo padidėjusį aiškumą, 1 – neaiškumą, o tarpinės reikšmės 0,5 – padidintą aiškumą.
Norint naudoti RGBA plėtinius į CSS3, reikia patvirtinti patį tos versijos CSS kodą. Atminkite, kad CSS3 standartas vis dar kuriamas ir gali būti keičiamas. Pavyzdžiui, fono spalvos pikselio papildymų RGB formato spalva turi būti patikrinta, tačiau prie fono pikselio nebėra jokių papildymų. Tokiu atveju naršyklės paprastai teisingai supranta šios ir kitos galios spalvą.
HSL
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSL formatas pavadintas pagal pirmąsias raides Hue, Saturate ir Lightness. Spalva yra tokia pati kaip spalva ant kuolo (1 pav.) ir nurodoma laipsniais. 0° yra raudona, 120° yra žalia, o 240° yra mėlyna. Spalvos reikšmę galima keisti nuo 0 iki 359.
Mažas 1. Spalvų ratas
Intensyvumas yra spalvos intensyvumas, kuris svyruoja nuo 0% iki 100%. 0% reikšmė reiškia spalvų ir pilkų atspalvių buvimą, 100% yra didžiausia sodrumo reikšmė.
Šviesumas nustato spalvos ryškumą ir nurodomas intervalais nuo 0% iki 100%. Svarbu, kad spalvos būtų tamsios, o didelės vertės – šviesios, kraštutinės 0% ir 100% reikšmės rodo juodą ir baltą spalvą.
HSLA
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA formatas yra panašus į HSL sintaksę, tačiau apima alfa kanalą, kuris nurodo elemento aiškumą. 0 reikšmės rodo padidėjusį aiškumą, 1 – neaiškumą, o tarpinės reikšmės 0,5 – padidintą aiškumą.
RGBA, HSL ir HSLA formatų spalvų reikšmės pridedamos prie CSS3, todėl keisdami šiuos formatus patikrinkite, ar kodas galioja su teisinga versija.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Iš anksto
Visi svetainėje išvardyti liūtų žvejybos būdai yra teoriniai ir pagrįsti skaičiavimo metodais. Autoriai negarantuoja jūsų saugumo juos naudojant ir prisiima atsakomybę už rezultatus. Atminkite, kad liūtas yra namelis ir neatsargus padaras!
Šio užpakalio rezultatas parodytas fig. 2.
Mažas 2. Colori tinklalapyje
Nešiojamieji kompiuteriai