CSS өнгөний модуль нь зохиогчдод html элементийн өнгө, тод байдал, мөн өнгөний утгыг тодорхойлох боломжийг олгодог утгуудыг тодорхой тайлбарладаг.
Хүчний өнгө
1. Тэргүүлэх өнгө: тод өнгө
Power нь янз бүрийн өнгө дамжуулах системийг ашиглан үсгийн өнгийг тохируулдаг. Хүч чадал нь текстийн элементийн өнгийг илэрхийлдэг. Нэмж дурдахад, энэ нь өнгөний утга учрыг бий болгодог бусад эрх мэдэлд шууд бус утгыг (currentColor) өгөхөд ашиглагддаг.
Хүч чадал буурч байна.
2. Өнгөний ач холбогдол
2.1. Гол түлхүүр үгс
Үндсэн түлхүүр үгсийн жагсаалтад дараах утгууд багтана.
| Нэр | HEX | RGB | Өнгө |
|---|---|---|---|
| хар | #000000 | 0,0,0 | |
| мөнгө | #C0C0C0 | 192,192,192 | |
| саарал | #808080 | 128,128,128 | |
| цагаан | #FFFFFF | 255,255,255 | |
| хүрэн улаан | #800000 | 128,0,0 | |
| улаан | #FF0000 | 255,0,0 | |
| нил ягаан | #800080 | 128,0,128 | |
| фуксиа | #FF00FF | 255,0,255 | |
| ногоон | #008000 | 0,128,0 | |
| шохой | #00FF00 | 0,255,0 | |
| чидун | #808000 | 128,128,0 | |
| шар | #FFFF00 | 255,255,0 | |
| тэнгисийн цэргийн | #000080 | 0,0,128 | |
| цэнхэр | #0000FF | 0,0,255 | |
| цайвар | #008080 | 0,128,128 | |
| усан | #00FFFF | 0,255,255 |
Өнгөний нэрс нь том жижиг жижиг үсгээр ялгагдахгүй.
Синтакс
Өнгө: цайвар;
2.2. Өнгөний тоон утгууд
2.2.1. Colori загварууд RGB
Аравтын тоот формат дахь RGB утгын формат нь # тэмдэг, араас нь гурав, зургаан арван тэмдэгт байна. Гурван оронтой RGB тэмдэглэгээ #rgb нь тэг нэмэх замаар биш харин тоог хуулах замаар зургаан оронтой #rrggbb хэлбэрт хувирдаг. Жишээлбэл, #fb0 нь #ffbb00 болж өргөждөг. Энэ нь цагаан #ffffff-ийг #ffff богино бичлэгт заалт болгон ашиглаж болох ба дэлгэцийн өнгөнөөс хамаарч аливаа ялгааг арилгах баталгаа болж байна.
Функциональ тэмдэглэгээний RGB утгын формат нь rgb (дараа нь гурван тоон утгын салангид жагсаалт (эсвэл гурван бүхэл тоо, эсвэл гурван зуу дахь утгууд), дараа нь тэмдэг). 255 бүхэл тоо нь 100% ба F эсвэл FF-тэй тохирч байна.
RGB(255,255,255) = RGB(100%, 100%, 100%) = #FFF
Тоон утгуудын хажууд хоосон тэмдэгт оруулахыг зөвшөөрдөг.
Вэб дизайн нь өнгө харуулах хэд хэдэн аргатай байдаг
HEX нь 16-д суурилсан өнгийг төлөөлдөг 16-тын систем юм. Энэ системийн хувьд 0-ээс 9 хүртэлх араб аравтын орон, 16 хүртэлх тоон тоонд А-аас F хүртэлх латин үсгийг ашигладаг. Вэб дизайны хувьд 16 үндсэн (гол өнгө) байна. авсан, тиймээс арван зургаад эрэмбэлнэ Өнгөний код нь #RRGGBB бөгөөд хос бүр өөрийн хэсгийн өнгийг илэрхийлдэг: RR – улаан, GG – ногоон, BB – цэнхэр. Арьсны өнгө нь 00-оос FF хооронд хэлбэлздэг.
Вэб дизайн дахь өнгөний өөр хоёр илрэл нь: RGB (*,*,*) хэлбэрээр, өнгөний "*" хэсгийг 0-ээс 255 хүртэлх хэдэн арван цифрээр, өнгөний нэрээр илэрхийлдэг. Англи.
Өнгөт дүрсийг бүтээхдээ гол асуудал бол өөр өөр төрлийн компьютер, монитор, хөтөч рүү өнгийг зөв шилжүүлэх явдал юм. Хэрэв хөтөч өнгийг зөв харуулж чадахгүй бол ижил төстэй өнгийг сонгох эсвэл хэд хэдэн өнгийг холино. Эсвэл шал өөр өнгөөр сольж болно.
Хүснэгт 16 үндсэн өнгө, бүх хөтөч дээр vikoristed байна
| Нэр | Өнгө | Hex | (RGB) |
| Aqua (morska hvilya) | #00FFFF | (000,255,255) | |
| Хар | #000000 | (000,000,000) | |
| Цэнхэр | #0000FF | (000,000,255) | |
| Фуксия (улаан ягаан) | #FF00FF | (255,000,255) | |
| Саарал (цуврал) | #808080 | (128,128,128) | |
| Ногоон | #008000 | (000,128,000) | |
| Шохой (тод ногоон) | #00FF00 | (000,255,000) | |
| Марун (хар бургунди) | #800000 | (128,000,000) | |
| Тэнгисийн цэргийн (хар хөх) | #000080 | (000,000,128) | |
| Олив | #808000 | (128,128,000) | |
| Нил ягаан | #800080 | (128,000,128) | |
| Улаан (улаан) | #FF0000 | (255,000,000) | |
| Мөнгө (sribny) | #C0C0C0 | (192,192,192) | |
| Цайвар (саарал-ногоон) | #008080 | (000,128,128) | |
| Цагаан | #FFFFFF | (255,255,255) | |
| Шар (жовтий) | #FFFF00 | (255,255,000) |
Хүснэгт нил ягаанөнгө, өнгө
| Нэр | Өнгө | Hex | (RGB) |
| Магента (ягаан) | #FFCBDD | (255,203,219) | |
| Магента (ягаан) | #FF0099 | (255,000,153) | |
| Magenta (magenta) | #F95A61 | (249,090,097) | |
| Фуксия (фуксиа) | #FF00FF | (255,000,255) | |
| Movein (анилин ягаан) | #EF0097 | (239,000,151) | |
| Ягаан хулд (улбар шар зэв) | #FF91A4 | (255,145,164) | |
| Цэниз (ягаан өнгийн сүүдэр) | #DE3163 | (153,149,140) | |
| Хаш хаш (хаш) | #990066 | (153,000,132) | |
| Лаванда цэцгийн ичих (ягаан лаванда) | #FFF0F5 | (255,240,245) | |
| Голт бор (боозковый) | #C8A2C8 | (200,162,200) | |
| Magenta (magenta) | #FF008F | (255,000,143) | |
| Орхидэйн (цахирмаа) | #DA70D6 | (218,112,214) | |
| Улаан-ягаан (ягаан-улаан) | #C71585 | (199,021,133) | |
| Сангвиник | #92000A | (146,000,010) | |
| Thistle (ягаан өнгийн сүүдэр) | #D8BFD8 | (185,211,238) | |
| Нил ягаан-хаш (ягаан өнгийн сүүдэр) | #991199 | (153,017,153) | |
| Rosa vivo (өсгөвүүлсэн эвэрт ургамал) | #FF007F | (255,000,127) | |
| Лаванда цэцгийн сарнай (нил ягаан өнгийн сүүдэр) | #FBA0E3 | (108,123,139) | |
| Mountbatten ягаан | #997ABD | (153,122,141) |
Хүснэгт сааралөнгө, өнгө
| Нэр | Өнгө | Hex | (RGB) |
| Саарал (Сири) | #808080 | (128,128,128) | |
| Саарал (Сири) | #bebebe | (190,190,190) | |
| (Сири-видтинок) | #858585 | (133,133,133) | |
| Саарал33 (Сири-33) | #545454 | (084,084,084) | |
| (Сирого шифер) | #708090 | (112,128,144) | |
| (Кварцов) | #99958с | (153,149,140) | |
| (Светло сирий) | #bbbbbb | (187,187,187) | |
| (Sriblyasty) | #c0c0c0 | (192,192,192) | |
| (Сиро-цагаан) | #f0f0f0 | (240,240,240) | |
| (Бороди Абдель-Керим) | #e0e0e0 | (224,224,224) | |
| Цайвар саарал (цайвар саарал) | #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) |
Энэ хуудсан дээр HTML, CSS, JavaScript, Flash гэх мэт вэб хөгжүүлэгчийн хэлээр өнгө хуваарилахад ашиглаж болох түлхүүр үгс бүхий хүснэгт байна.
Хуучин техникийн үзүүлэлтүүдэд WC3 концерн нь зөвхөн 16 түлхүүр үгтэй байсан бөгөөд үүнээс гадна HTML болон CSS дээр өнгө суулгасан байв. Цаашилбал, илүү сүүлийн үеийн техникийн үзүүлэлтүүд, өнгөний нэрийг зааж өгөх өөр 130 түлхүүр үг нэмсэн. Энд өнгө, арван зургаатын тоо, RGB кодуудын нэрсийг харуулсан хүснэгт байна.
CSS-ийн дүрмийн дагуу өнгөний нэрсийг жижиг жижиг үсгээр ялгадаггүй. Энэтхэгийн улаан ба энэтхэг улаан өнгөний оруулгууд тэнцүү байна.
Хүснэгтэнд байгаа 146 түлхүүр үгнээс үнэндээ цөөн өнгөтэй байгааг тэмдэглэх нь зүйтэй. Энэ нь эдгээр түлхүүр үгс нь ижил өнгөтэй гэсэн үг юм. Тиймээс Саарал, Саарал нэр нь 50 зургаан өнцөгт өнгийг #808080 кодоор илэрхийлдэг бөгөөд Magenta гэдэг нь HTML өнгөний Fuchsia-тай ижил утгатай бөгөөд энэ нь #FF00FF зургаан өнцөгт кодтой тохирч байна. Мөн Aqua, Cyan гэсэн үгтэй ижил утгатай өмхий нь #00FFFF кодтой тохирч байна.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Өнгө тохируулахын тулд арван зургаатын код дахь тоог ашигладаг. Арав дахь системийн оронд арван зургаа дахь систем нь нэрнээс нь харахад 16 тоон дээр суурилдаг. Тоонууд гарч ирнэ: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. 10-аас 15 хүртэлх тоог латин үсгээр сольсон. Арван зургаа дахь систем дэх 15-аас дээш тооны тоог нэг тоонд хоёр тоог нэгтгэснээр үүсдэг. Жишээлбэл, арав дахь систем дэх 255 тоог арван зургаа дахь системийн FF тоогоор баталгаажуулдаг. Тооны системтэй андуурахгүйн тулд арван зургаа дахь тооны өмнө # тэмдгийг тавь, жишээ нь #666999. Улаан, ногоон, цэнхэр гэсэн гурван өнгийн арьс нь 00-оос FF хүртэлх утгыг авах боломжтой. Тиймээс хуваарилагдсан өнгө нь гурван агуулахад хуваагддаг #rrggbb, эхний хоёр тэмдэг нь өнгөний улаан бүрэлдэхүүн хэсэг, дунд хоёр нь ногоон, үлдсэн хоёр нь цэнхэр өнгөтэй байна. Тэмдгийг нэмж болох #rgb богино хэлбэрийг ашиглахыг зөвшөөрнө. Тиймээс #fe0 бичлэгийг #ffee00 гэж үнэлдэг.
Нэрийн хувьд
| Internet Explorer | Chrome | Дуурь | Сафари | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Хөтөчүүд нэрнийхээ ард өөр өөр өнгийг дэмждэг. Хүснэгтэнд 1 нэр, арван зургаатын код, RGB дахь утгууд, HSL формат, тайлбарыг зааж өгсөн болно.
| би байна | Өнгө | Код | RGB | HSL | Тодорхойлолт |
|---|---|---|---|---|---|
| цагаан | #ffffff эсвэл #ffff | rgb(255,255,255) | hsl(0.0%,100%) | Били | |
| мөнгө | #c0c0c0 | rgb(192,192,192) | hsl(0.0%,75%) | Сири | |
| саарал | #808080 | rgb(128,128,128) | hsl(0.0%,50%) | Хар саарал | |
| хар | #000000 эсвэл #000 | rgb(0,0,0) | hsl(0.0%,0%) | Хорни | |
| хүрэн улаан | #800000 | rgb(128,0,0) | hsl(0.100%,25%) | Гүн улаан | |
| улаан | #ff0000 эсвэл #f00 | rgb(255,0,0) | hsl(0,100%,50%) | улаан алт | |
| жүрж | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | жүрж | |
| шар | #ffff00 эсвэл #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Жовтий | |
| чидун | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Олив | |
| шохой | #00ff00 эсвэл #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Цайвар ногоон | |
| ногоон | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Зелений | |
| усан | #00ffff эсвэл #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Блакитни | |
| цэнхэр | #0000ff эсвэл #00f | rgb(0,0,255) | hsl(240,100%,50%) | Цэнхэр | |
| тэнгисийн цэргийн | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Хар хөх | |
| цайвар | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Цэнхэр ногоон | |
| фуксиа | #ff00ff эсвэл #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Рожевий | |
| нил ягаан | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Нил ягаан |
Илүү их тусламж авахыг хүсвэл RGB
| Internet Explorer | Chrome | Дуурь | Сафари | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Та өнгө, ялалт ба улаан, ногоон, цэнхэр утгыг аравны нэгээр нь тодорхойлж болно. Гурван өнгөт бүрэлдэхүүн хэсэг бүхий арьс нь 0-ээс 255 хүртэлх утгыг авна. Мөн босоо өнгөний өнгийг тохируулах боломжтой бөгөөд энэ нь 255 тоотой 100% нийцэх болно. Rgb түлхүүр үгийг эхлээд зааж өгсөн болно. Гарны хувьд бүрэлдэхүүн хэсгийн өнгийг зааж өгнө, жишээлбэл rgb(255, 128, 128) эсвэл RGB (100%, 50%, 50%).
RGBA
| Internet Explorer | Chrome | Дуурь | Сафари | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
RGBA формат нь синтаксийн хувьд RGB-тэй төстэй боловч элементийн тодорхой байдлыг тодорхойлдог альфа сувгийг агуулдаг. 0-ийн утга нь тодорхой, 1- тодорхой бус, завсрын утга нь 0.5-ийн түвшинд - бүрэн тодорхой байгааг илтгэнэ.
CSS3-ийн RGBA өргөтгөлүүд нь тухайн хувилбарт зориулсан CSS кодыг баталгаажуулахыг шаарддаг. CSS3 стандартыг боловсруулж байгаа бөгөөд өөрчлөгдөж болзошгүйг анхаарна уу. Жишээлбэл, дэвсгэр өнгөт пикселийн нэмэлтүүдийн RGB форматын өнгө нь баталгаажуулалтанд хамрагдах ёстой боловч дэвсгэр пикселд нэмэлт зүйл байхгүй болсон. Энэ тохиолдолд хөтчүүд ерөнхийдөө энэ болон бусад хүчин чадлын өнгийг зөв ойлгодог.
HSL
| Internet Explorer | Chrome | Дуурь | Сафари | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSL формат нь Hue, Saturate, Lightness гэсэн эхний үсгүүдийн нэрээр нэрлэгдсэн. Өнгө нь гадас дээрх өнгөтэй адил (Зураг 1) бөгөөд градусаар тодорхойлогддог. 0° нь улаан, 120° нь ногоон, 240° нь цэнхэр байна. Өнгөний утгыг 0-ээс 359 хүртэл өөрчилж болно.
Жижиг 1. Өнгөт тойрог
Эрчим хүч нь өнгөний эрч хүч бөгөөд 0% -иас 100% хооронд хэлбэлздэг. 0%-ийн утга нь саарал өнгө, сүүдэр байгаа гэсэн үг бөгөөд 100% нь ханасан байдлын дээд утга юм.
Хөнгөн байдал нь өнгө хэр тод болохыг тодорхойлдог бөгөөд 0% -аас 100% хооронд заана. Өнгийг бараан, өндөр утгыг цайвар байлгах нь чухал бөгөөд 0% ба 100% гэсэн туйлын утга нь хар цагаан өнгийг илтгэнэ.
HSLA
| Internet Explorer | Chrome | Дуурь | Сафари | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA формат нь синтаксийн хувьд HSL-тэй төстэй боловч элементийн тодорхой байдлыг тодорхойлдог альфа сувгийг агуулдаг. 0-ийн утга нь тодорхой, 1- тодорхой бус, завсрын утга нь 0.5-ын түвшинд байгаа нь тодорхой байгааг илтгэнэ.
RGBA, HSL, HSLA форматын өнгөний утгыг CSS3-д нэмсэн тул эдгээр форматыг өөрчлөхдөө кодыг зөв хувилбараар нь шалгаж үзээрэй.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Урьдчилан
Вэбсайтад жагсаасан арслангийн загас агнуурын бүх аргууд нь онолын үндэслэлтэй бөгөөд тооцооллын аргад тулгуурладаг. Зохиогчид нь таны аюулгүй байдлыг хангахгүй бөгөөд үр дүнд нь хариуцлага хүлээхгүй. Арслан бол овоохой, хайхрамжгүй амьтан гэдгийг санаарай!
Энэ өгзөгний үр дүнг Зураг дээр үзүүлэв. 2.
Жижиг 2. Вэб хуудсан дээрх өнгө
Зөөврийн компьютерууд
