Компьютерлік ойындар – бос уақытыңызды өткізудің ең танымал тәсілдерінің бірі. Бейне ойын әлеміне еніп, біз нақты проблемалар мен қиындықтарды ұмытып, демаламыз және көңіл көтереміз. Ал егер бұл онлайн ойын немесе көп ойыншы режиміндегі ойын болса, онда оның басты артықшылығы - мұнда сіз әлемнің түкпір-түкпірінен көптеген адамдармен кездесіп, тек пікірлес адамдарды ғана емес, сонымен қатар ең жақсы достарды да таба аласыз. MTA-дағы түске дейін ойын параметрлері басқа ойыншылармен қарым-қатынасыңызға қалай әсер ететінін білгіңіз келе ме? Оқыңыз!
Көп ойыншы режимінің ерекшеліктері
Сіз бір кездері ойланып көрдіңіз бе: MTA немесе басқа ойында түстерді қалай реттеуге болады? Көптеген ойыншылармен онлайн ойын ойнау мүмкіндігі болмаған адамдардың ешқайсысы басқалардың алдында өзін жақсы жағынан көрсеткісі келетінін жоққа шығармайды. Сіз өзіңіздің кейіпкеріңіздің ерекше, қымбат нәрселерін көрсете аласыз, ойын терминологиясын білуіңізде ерекшелене аласыз немесе тәжірибесіз ойыншыларға қарағанда жақсы жұмыс істейтіндей ойыныңыздың интерфейсін теңшей аласыз.
«МТА»-дағы түстер - нені білу керек?
Егер «GTA: San Andreas», «MTA» ойынының көп ойыншы режимінің нұсқаларының бірі туралы айтатын болсақ, мұнда түс өте маңызды рөл атқарады. MTA-да лақап атыңыздың түсін теңшеу мүмкіндігі әрбір бастаушы ойыншы иеленуі керек ең жақсы дағдылардың бірі болып табылады.
Сонымен, лақап атыңыздың түсін орнату үшін «MTA: SA» қолданбасына өтіп, «Параметрлер» опциясын басыңыз, содан кейін атыңызды таңдаңыз, содан кейін оның алдына қажетті түс кодын енгізіңіз. «МТА-да» лақап аттарға арналған түстердің үлкен палитрасы бар. Мақалада біз өзіңізге ұнайтын реңкті таңдауға болатын үлгі бояғыштарын қостық.
Енді сіз өзіңіздің лақап атыңызды жаңадан бастағандар мен тәжірибесіз ойыншылардың лақап аттарынан қалай ерекшелеуге болатынын білесіз. Жарқын, ол сізді қарапайым ойыншылардан ерекшелендіреді және сізге көбірек назар аударады. Ойыннан ләззат алыңыз!
Өкінішке орай, веб-сайтта дәм сезімін көрсету әлі мүмкін емес. Бірақ бұл түстердің көмегімен толығымен өтелуі мүмкін. Өйткені, html түстері миллиондаған реңктердің кез келгенін көрсетуге мүмкіндік береді. Сонымен" түрлі-түсті қарындаштарОның жиынтығында жетіден көп.
html форматындағы түс схемасы
html-де түсті бірнеше пішімде көрсетуге болады:
1. Он алтылық сан ретінде – он алтылық санау жүйесінде көрсетілген код пайдаланылады. HTML тіліндегі мұндай түс кодтары он алтылық санның үш жұбынан тұрады. Әрбір жұп реңктің негізгі түсімен қанықтылығына жауап береді:
- Бірінші сандық жұп қызыл түске жауапты;
- Екінші жұп жасыл түс мазмұнына арналған;
- Соңғысы оның көк мазмұнына арналған.
Хэш белгісі кодтың басында (сандардың алдында) қойылады. Бұл он алтылық түс коды. Бұл санау жүйесінде 1-ден 9-ға дейінгі сандардан басқа латын әліпбиінің (A, B, C, D, E, F) әріптері қолданылады.
Мысалы, html-дегі ақ түс коды #FFFFFF сияқты болады:
2. Түйінді сөз – HTML қазіргі уақытта шамамен 147 кілт сөзді қолдайды. Бірақ бұл сөздердің бәрі бірегей емес. Олардың кейбіреулері бірдей түсті реңкке сілтеме жасайды.
Сұр түс екі кілт сөзбен берілген: сұр және сұр . Олардың он алтылық коды (HEX) #808080 бірдей мәнмен берілген.
Мысалы:
#808080
3. RGB пішімінде – html-дегі бұл түсті кодтау 0-ден 255-ке дейінгі аралықта орнатылған үш мәнді пайдалануға негізделген. Олардың әрқайсысы негізгі түстердің бірімен реңктің қанықтылығын анықтайды:
- R – қызыл (қызыл);
- G – жасыл (жасыл);
- B – көк (көк).
RGB пішіміндегі түс нөмірі келесі түрде жазылады: rgb(0, 210, 100).
фон түсі:rgb(100,186,43)
4. RGBA пішімінде – бұл жетілдірілген RGB пішімі, мұнда төртінші мән түстің мөлдірлігін 0-ден 1-ге дейінгі ондық бөлшек ретінде көрсетеді.
Қолдану мысалы:
фон түсі:rgba(100,86,143,0,2)
фон түсі:rgba(100,86,143,0,5)
фон түсі:rgba(100,86,143,0,8)
фон түсі:rgba(100,86,143,1)
HTML түс кестелері және түс генераторлары
Түс параметрінің пішімдерінің осындай кең ауқымымен шатастыру оңай. Сондықтан арнайы түсті кесте ойлап табылды. Ол барлық негізгі түс стандарттарындағы сәйкестік кодтары бар түс реңктерінің 147 негізгі атауын береді. Сонымен қатар, әр өріс түсті көрнекі таңдау үшін жолақпен жабдықталған. Осы кестелердің бірі colorscheme.ru сайтында ұсынылған:
Бірақ бұл сәйкестік құрылымында да, дұрыс реңкті таңдау қиын болуы мүмкін. Түс кодтарының кестесінде сізге қажет нәрсе болатыны шындық емес.
Бұл кедергіні айналып өту және дұрыс реңкті таңдауды барынша жеңілдету үшін интерактивті веб-қызметтері әзірленді. Олардың пайдаланушы интерфейсі бір-бірінен сәл өзгеше болуы мүмкін.
html-color-codes.info веб-сайтында түс генераторы келесідей көрінеді:
Ал color-picker.appsmaster.co қызметінде бұл құрал сәл басқаша жүзеге асырылады:
Генератордағы әрбір түстің қанықтылығы арнайы жүгірткілердің көмегімен орнатылады. Көрнекі түрде көлеңке жақтаудың және сол жақтағы тіктөртбұрыштың түсі арқылы көрсетіледі. Төменгі жағында 3 өріс негізгі пішімдерде түс кодын көрсетеді.
Бірақ түс генераторы тек мамандандырылған сайттарда ғана емес. Барлық дерлік графикалық редакторлар ұқсас құралмен жабдықталған. Мысалы, Photoshop:
Түспен жұмыс істеу кезіндегі қауіпсіздік шаралары
Бұл ұзақ уақыт бұрын, тек 256 түсті қолдайтын видеокарталар дәуірінде болды. Сол алыс уақытта операциялық жүйелер сегіз разрядты реңктердің белгілі бір санын бұрмалаусыз ғана көрсете алатын.
Содан кейін қауіпсіз түстердің керемет кестесі әзірленді. Ол сол кездегі браузерлердің кез келгенінде бұрмаланбай көрсетуге болатын 216 реңкті көрсетті. Және осы күнге дейін « тамаша қолжазба» әлі де кейбір ресурстарда қолжетімді:
Қазір бәрі өзгерді. Сондықтан html-де түстермен жұмыс істеу кезінде барлық қауіпсіздік ережелері толығымен жойылады. Өйткені, заманауи компьютерлік жабдық 16 миллионнан астам түрлі реңктерді қолдайды. Ал 216 қауіпсіз түс ұмытылды.
Бұл деректер статистикамен толық расталады. Осыған қарағанда, 2014 жылы пайдаланушылардың тек 0,5% ғана 256 реңкті қолдайтын компьютерлерге ие.
Түс гармониясының негіздері
Барлығымызға табиғи үйлесімді дәм сезімі берілмейді. Сондықтан дұрыс түсті таңдау нағыз қиыншылық болуы мүмкін. Бірақ, ғылымға мақтау болсын, ол тіпті бірнеше схемалар түрінде түстердің үйлесімділігін сипаттай алды. Олардың барлығы түсті дөңгелекті пайдалануға негізделген. html-де үйлесімді түс таңдау схемалары:
- Параллель түс схемасы - түс дөңгелегіндегі екі реңк параллель болғанда;
- Триадикалық схема - үшбұрыштың барлық бұрыштары түстердің біріне негізделген;
- Монохроматикалық - бір түстің бірнеше жақын реңктері таңдалғанда;
- Аналог - монохроматикалық схеманың жетілдірілген нұсқасы. Бұл жағдайда бір түстің реңктері белгілі бір қашықтықта орналасады.
Барлық осы схемалардың орындалуы paletton.com сервисінде жақсы ұсынылған. Бұл үйлесімді түсті оңай таңдауға мүмкіндік береді.
HTML тілінде түсті үш жолмен көрсетуге болады:
HTML тіліндегі түсті оның аты бойынша орнату
Кейбір түстерді мән ретінде ағылшын тіліндегі түс атауын пайдаланып, олардың атымен көрсетуге болады. Ең көп таралған түйінді сөздер: қара, ақ, қызыл, жасыл, көк және т.б.:
Мәтіннің түсі – қызыл
World Wide Web Consortium (W3C) стандартының ең танымал түстері:
| Түс | Аты | Түс | Аты | Түс | Аты | Түс | Аты |
|---|---|---|---|---|---|---|---|
| Қара | Сұр | Күміс | Ақ | ||||
| Сары | Әк | Aqua | Фуксия | ||||
| Қызыл | Жасыл | Көк | Күлгін | ||||
| Марун | Зәйтүн | Әскери-теңіз күштері | Қызғылт |
Түрлі түс атауларын пайдалану мысалы:
Мысалы: түсті оның аты бойынша көрсету
- Өзіңіз көріңіз »
Қызыл фонда тақырып
Қызғылт сары фонда тақырып
Әк фонындағы тақырып
Көк фонда ақ мәтін
Қызыл фонда тақырып
Қызғылт сары фонда тақырып
Әк фонындағы тақырып
Көк фонда ақ мәтін
RGB көмегімен түсті анықтау
Мониторда әртүрлі түстерді көрсету кезінде RGB палитрасы негіз ретінде пайдаланылады. Кез келген түс үш негізгі түсті араластыру арқылы алынады: R - қызыл, G - жасыл, B - көк. Әрбір түстің жарықтығы бір байтпен беріледі және сондықтан 0-ден 255-ке дейінгі мәндерді қабылдай алады. Мысалы, RGB (255,0,0) қызыл болып көрсетіледі, себебі қызыл ең жоғары мәнге (255) орнатылған және қалғаны 0 мәніне орнатылған Түсті пайыз ретінде де орнатуға болады. Әрбір параметр сәйкес түстің жарықтық деңгейін көрсетеді. Мысалы: rgb(127, 255, 127) және rgb(50%, 100%, 50%) мәндері бірдей орташа жасыл түсті орнатады:
Мысал: RGB көмегімен түсті көрсету
- Өзіңіз көріңіз »
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Түсті он алтылық мән бойынша орнатыңыз
Мәндер Р Г Бсондай-ақ келесі пішіндегі он алтылық (HEX) түс мәндерін пайдаланып көрсетуге болады: #RRGGBB мұнда RR (қызыл), GG (жасыл) және BB (көк) 00-ден FF-ге дейінгі он алтылық мәндер (ондық 0-255 сияқты) ). Он алтылық жүйе ондық жүйеге қарағанда, аты айтып тұрғандай, 16 санына негізделген. Он алтылық жүйе келесі белгілерді пайдаланады: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Мұнда 10-нан 15-ке дейінгі сандар латын әріптерімен ауыстырылады. Он алтылық жүйедегі 15-тен үлкен сандар екі таңбаны бір мәнге біріктіру арқылы көрсетіледі. Мысалы, ондық сандағы ең жоғары 255 саны он алтылықтағы ең жоғары FF мәніне сәйкес келеді. Ондық жүйеден айырмашылығы, он алтылық санның алдында хэш таңбасы болады. # , мысалы, #FF0000 қызыл болып көрсетіледі, себебі қызыл ең жоғары мәнге (FF) орнатылған, ал қалған түстер олардың ең төменгі мәніне (00) орнатылған. Хэш белгісінен кейінгі белгілер # Бас әріппен де, кіші әріппен де теруге болады. Он алтылық жүйе қысқартылған #rgb пішімін пайдалануға мүмкіндік береді, мұнда әрбір таңба екі есеге тең. Осылайша, #f7O жазбасы #ff7700 ретінде қарастырылуы керек.
Мысалы: HEX түсі
- Өзіңіз көріңіз »
қызыл: #FF0000
жасыл: #00FF00
көк: #0000FF
қызыл: #FF0000
жасыл: #00FF00
көк: #0000FF
қызыл+жасыл=сары: #FFFF00
қызыл+көк=күлгін: #FF00FF
жасыл+көк=көгілдір: #00FFFF
Жалпы түстер тізімі (аты, HEX және RGB):
| Ағылшынша атауы | орысша аты | Үлгі | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Амарант | Амарант | #E52B50 | 229 | 43 | 80 | |
| Кәріптас | Кәріптас | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Көк-жасыл | #00FFFF | 0 | 255 | 255 | |
| Лазур | Лазур | #007FFF | 0 | 127 | 255 | |
| Қара | Қара | #000000 | 0 | 0 | 0 | |
| Көк | Көк | #0000FF | 0 | 0 | 255 | |
| Бонди көк | Бонди жағажайының суы | №0095B6 | 0 | 149 | 182 | |
| Жез | Жез | #B5A642 | 181 | 166 | 66 | |
| Қоңыр | Қоңыр | №964B00 | 150 | 75 | 0 | |
| Cerulean | Лазур | #007BA7 | 0 | 123 | 167 | |
| Қара көктемгі жасыл | Қара көктемгі жасыл | #177245 | 23 | 114 | 69 | |
| Изумруд | Изумруд | #50C878 | 80 | 200 | 120 | |
| Баялды | Баялды | #990066 | 153 | 0 | 102 | |
| Фуксия | Фуксия | #FF00FF | 255 | 0 | 255 | |
| Алтын | Алтын | #FFD700 | 250 | 215 | 0 | |
| Сұр | Сұр | #808080 | 128 | 128 | 128 | |
| Жасыл | Жасыл | #00FF00 | 0 | 255 | 0 | |
| Индиго | Индиго | №4B0082 | 75 | 0 | 130 | |
| Нефрит | Нефрит | #00A86B | 0 | 168 | 107 | |
| Әк | Әк | #CCFF00 | 204 | 255 | 0 | |
| Малахит | Малахит | #0BDA51 | 11 | 218 | 81 | |
| Әскери-теңіз күштері | Қою көк | #000080 | 0 | 0 | 128 | |
| Очер | Очер | #CC7722 | 204 | 119 | 34 | |
| Зәйтүн | Зәйтүн | #808000 | 128 | 128 | 0 | |
| Апельсин | Апельсин | #FFA500 | 255 | 165 | 0 | |
| Шабдалы | Шабдалы | #FFE5B4 | 255 | 229 | 180 | |
| Асқабақ | Асқабақ | #FF7518 | 255 | 117 | 24 | |
| Күлгін | Күлгін | #800080 | 128 | 0 | 128 | |
| Қызыл | Қызыл | #FF0000 | 255 | 0 | 0 | |
| Шафран | Шафран | #F4C430 | 244 | 196 | 48 | |
| Теңіз жасылы | Жасыл теңіз | №2E8B57 | 46 | 139 | 87 | |
| Батпақ жасыл | Болотный | #ACB78E | 172 | 183 | 142 | |
| Қызғылт | Көк-жасыл | #008080 | 0 | 128 | 128 | |
| Ультрамарин | Ультрамарин | #120A8F | 18 | 10 | 143 | |
| Күлгін | Күлгін | #8B00FF | 139 | 0 | 255 | |
| Сары | Сары | #FFFF00 | 255 | 255 | 0 | |
Қанықтылық және реңк бойынша түс кодтары (фон).
CSS түсінбейді). Сондықтан болашақ веб-шеберге жай ғана оқу керек Түсті өзгертуге мүмкіндік беретін HTML құралдары,мысалы, сайттың мақсатты аудиториясының назарын аударатын жарқын және түрлі-түсті электрондық пошта ақпараттық бюллетеньдерін жасау үшін.
Бұл пост өте ұзақ, бірақ одан HTML көмегімен түстермен жұмыс істеудің барлық техникалық мүмкіндіктері туралы біле аласыз. Жазуды мына сұрақты түсінуден бастаймыз: неге HTML бетінің белгілі бір элементтерін түспен бөлектеу керек? Содан кейін біз арнайы кодтардың көмегімен HTML-де түстерді орнатуға мүмкіндік беретін RGB моделі туралы айтатын боламыз (жол бойы біз ондық түс кодтары мен он алтылық HTML түс мәндерін қарастырамыз). Сондай-ақ осы посттан сіз түстер палитрасы туралы біле аласыз, сонымен қатар HTML-де палитра неге жоқ екенін түсінесіз. Және бұл жарияланымның соңында болады фон түсін, мәтінді және сілтемелерді өзгерту мысалдары.
HTML тілінде түстерді пайдалану
Веб-сайт беттері суреттерсіз қызықсыз және қызықсыз болар еді, өйткені біз бұрын және егжей-тегжейлі айтқанбыз. Бірақ суреттердің бір маңызды кемшілігі бар: әрбір сурет қосымша және сәйкесінше хостингке қосымша жүктеме.
Мен WordPress блогын жобалау үшін бір суретті пайдаланбағанымды атап өткім келеді; Дәл солай Бүгін біз HTML тіліндегі түстер туралы сөйлесетін боламыз.. HTML тіліндегі түстер әртүрлі мақсаттарда пайдаланылады, мысалы, белгілі бір элементтерді бір немесе басқа түспен бөлектеу арқылы веб-сайт макеттерін жасай аламыз.
Түсті пайдалана отырып, біз келушілердің назарын сайттың белгілі бір мәтініне немесе блогына аудара аламыз. Пайдаланушы түсінетіндей түсті пайдалану арқылы да анықталатынын ескеріңіз: ол қай сілтемені басқанын, қандай сілтемеге әлі кірмегенін және қазір қай HTML парағында екенін.
Сақ болыңыз HTML құжаттарын жобалау үшін түстерді пайдалану, барлық түстер бір-бірімен үйлеспейді және әрбір түс веб-сайтқа келушілерге ұнамайды. Бірақ сіз веб-дизайнерлерден осы нәзіктіктер туралы сұрағаныңыз жөн, бұл мақала сізге HTML беті элементтерінің түсін басқаруға мүмкіндік беретін техникалық мүмкіндіктерді түсінуге көмектеседі.
Бірақ дизайн мазмұннан бөлек болуы керек екенін ұмытпау керек, сондықтан HTML беттеріндегі түсті өңдеу үшін CSS-ті қолданған дұрыс, бірақ бұл туралы басқа постта айтатын боламыз. Енді көреміз HTML-де сайт беттеріндегі түстерді басқаруға арналған қандай құралдар бар?.
IT индустриясында түсті манипуляциялау үшін көптеген түсті модельдер бар. Ең көп қолданылатын түсті бейнелеу моделі RGB моделі болып табылады. Біз осы жерде осы модельдің кейбір мүмкіндіктері туралы айтатын боламыз және RGB-ге толығырақ кіріспе үшін жеке басылым болады. Төменде IT-да қолданылатын түс үлгілерінің тізімін таба аласыз (тек HTML және CSS емес):
- RGB үлгісі. Бұл модель өте кең таралған және HTML элементтерінің түсін өңдеудің ең ыңғайлы және кең таралған әдістерінің бірі болып табылады.
- RGBA үлгісі. Бұл модель RGB үлгісіне өте ұқсас, бірақ түс үшін альфа арнасын қамтиды. RGBA моделінің ерекшелігі - ол реттеуге мүмкіндік береді HTML элементінің түсі ғана емес, сонымен қатар оның мөлдірлігіальфа арнасының болуына байланысты. RGBA үлгісі CSS3 жүйесіне қосылды және оны ескі браузерлер қолдамайды.
- HSL үлгісі. HSL моделінің ерекшелігі - біз түсті оның параметрлері арқылы орнатамыз: реңк, тегістік және ашықтық. Бұл модельді түсіну RGB үлгісіне қарағанда біршама қиынырақ.
- HSLA үлгісі. Бұл модель HSL үлгісіне өте ұқсас, бірақ RGBA үлгісі сияқты, ол альфа түсті арнамен жұмыс істеуге мүмкіндік береді, сондықтан HSLA көмегімен біз беттегі HTML элементінің түсін ғана емес, оның мөлдірлігін де орнатуға болады. .
- HSV (HSB) үлгісі. Бұл модельді HSL үлгісімен шатастырмау керек. Алғашқы төрт үлгіні HTML немесе CSS-де веб-беттерді жобалау үшін пайдалануға болатынын ескеріңіз, бірақ HSV үлгісі мүмкін емес. HSV 1978 жылы Pixar негізін қалаушылардың бірі әзірлеген және HSL-ге өте ұқсас.
- CMY немесе CMYK үлгісі. Бұл модель басып шығару үшін барлық түсті принтерлерде қолданылады. CMYK үлгісі басып шығару ақ қағаз парақтарында орындалатын ережеге негізделген. Кез келген CMYK түсі көгілдір (ақшыл көк, көгілдір), қызыл қызыл (қызыл) және сары түстерді араластыру арқылы алынады. CMY үлгісіндегі әрбір түстің пайызбен өлшенетін мөлдірлік сипаттамасы (сия мөлшері) болады. Бірақ тізімде көрсетілген үш түске қоса, CMYK үлгісі қара түсті де пайдаланады.
Жоғарыда аталған барлық түсті модельдер аппараттық құралға байланысты, яғни егер сіз RGB немесе HSL үлгісін пайдаланып HTML элементінің түсін орнату, онда сіздің сайтқа кіруші нақты түс реңкін көретінін нақты айту мүмкін емес, өйткені барлық пайдаланушылардың мониторлары әртүрлі және олар түстерді әртүрлі жеткізеді. Сондай-ақ, жоғарыда аталған үлгілердің барлығы RGB үлгісіне негізделгенін және кез келген үлгіде көрсетілген кез келген түсті (альфа арнасының болуына байланысты HSLA және RGBA қоспағанда) RGB түрлендіруге болатынын ескеріңіз.
Аппараттық құралдардан тәуелсіз түсті тасымалдау модельдері туралы айтатын болсақ, онда LAB моделін атап өткен жөн. Сонымен, біз кейбір түс үлгілерімен танысу арқылы HTML тіліндегі түстермен жұмыс істеуге біраз үзіліс жасадық. Браузерлердің тек алғашқы төрт үлгіні ғана «түсінетінін» ескеріңіз: HSL, RGB, HSLA және RGBA. Сондықтан, осы үлгілер арқылы HTML элементтерінің түсін ғана басқара аламыз.
HTML элементінің түсі қалай қалыптасады: RGB моделінің кейбір мүмкіндіктері
Оны анықтап көрейік HTML элементінің түсі қалай қалыптасадыжәне RGB үлгісінің кейбір мүмкіндіктерімен. RGB моделі, сондай-ақ веб-беттерді жобалау үшін қолданылатын басқа модельдер туралы сәл кейінірек бөлек мақалаларда айтатынымызды ескеріңіз.
Сонымен, RGB үлгісі қызыл, жасыл, көк дегенді білдіреді. RGB моделі аддитивтілік принципіне негізделген. Бұл принцип кез келген түсті алу үшін қара түске түс қосылады. Жақсырақ түсіну үшін экраныңыз қара қабырға екенін және сізде үш жарықтандыру шамы бар екенін елестетіп көріңіз: біріншісі қызыл, екіншісі жасыл, ал үшіншісі көк түспен жарқырайды. Әрбір прожектордың жарықтығын 0-ден 255-ке дейінгі сандары бар сызғышты пайдаланып реттеуге болады. Сәйкесінше, егер сіз прожекторды нөлге орнатсаңыз, ол өшеді және егер мән 255 болса, онда жарықтандыру мүмкіндігінше ашық түсті береді; .
Осылайша, егер сіз бір нүктеге қызыл және жасыл прожекторды жарқыратсаңыз, қара қабырғадағы сары дақты байқайсыз. Егер сіз қызыл және көк түстерді біріктірсеңіз, сіз күлгін түске ие боласыз, ал жасыл мен көкті біріктірсеңіз, қара қабырғадағы жарық дақ көгілдір болады, бірақ барлық үш прожекторды бір нүктеге бағыттасаңыз, жарық нүктесі ақ болады.
Жоғарыда сипатталған принцип RGB үлгісінің негізінде жатыр және браузердегі беттегі HTML элементтеріндегі түстерді өңдеу үшін қолданылады.
Элементтердің түсін өзгертуге арналған HTML атрибуттары: элементтің өң түсі және элемент ішіндегі мәтіннің түсі
Бет элементтерін бірегей ету үшін қолданылады. HTML атрибуттарын пайдалану арқылы біз элементтердің түсін басқара аламыз:
- HTML төлсипатының түсі. Бұл атрибут HTML элементінің ішіндегі мәтін түсін өзгертуге мүмкіндік береді. Атрибут мәндерді HTML түс атаулары және он алтылық және ондық белгілердегі RGB үлгі кодтары түрінде қабылдай алады. Түс төлсипаты кейбір HTML элементтерінің ішіндегі мәтін түсін өзгертуге мүмкіндік беретін бірегей HTML атрибуты болып табылады.
- HTML мәтіндік атрибуты. Бұл атрибут бірегей тег атрибуты болып табылады . Тег тегтермен бірге Және пішін. Естеріңізде болса, контейнердің ішінде элементтер орналастырылады, содан кейін шолғыш көру аймағында көрсетеді. Мәтін атрибуты көрсетуге мүмкіндік береді Бүкіл HTML беті үшін әдепкі мәтін түсі.
- HTML атрибуты bgcolor. Ол сондай-ақ бірегей HTML атрибуты болып табылады және кейбір HTML элементтерінің өң түсін өзгертуге мүмкіндік береді.
- HTML атрибуты vlink. Бұл төлсипат бірегей және тек тегке қолданылады пайдаланушы кірген сілтеменің түсін өзгерту үшін.
- HTML атрибуты alink. Бұл төлсипат те бірегей және тек тегке қолданылады . alink төлсипаты белсенді HTML сілтемесінің түсін өзгертеді.
- HTML сілтеме атрибуты. Сілтеме атрибуты тек тегпен бірге қолданылады және пайдаланушы әлі кірмеген HTML бет сілтемелерінің түсін өзгертуге қызмет етеді.
Назар аударыңыз: HTML элементтерінің түсін өзгерту үшін атрибуттарды пайдалану ұсынылмайды, өйткені веб-бет дизайнын оның мазмұнынан бөлуге мүмкіндік беретін каскадты стиль кестелері бар.
HTML тіліндегі ондық түс кодтарын пайдалану
Сонымен, біз 0-ден 255-ке дейінгі нөмірленген сызбалар бар арнайы сызғыштың көмегімен прожектордың жарықтығын орнатуға болатындығы туралы айттық. Енді бұл HTML элементтерінің түсін өзгертуге қалай көмектесетінін көрейік. Мәселе мынада, біз HTML элементіндегі мәтіннің түсін немесе HTML тіліндегі фондық түсін ондық кодты пайдаланып келесідей өзгерте аламыз:
Мысалдағыдай негізгі контейнер сипатталған HTML құжатын жасасаңыз, мынаны көресіз:
- HTML құжатының фондық түсі енді жасыл: bgcolor=”rgb (0,255,0)”.
- HTML бетінің мәтін түсі көк түске боялады: text=”rgb (0,0,255)”.
- Пайдаланушы кірмеген сілтеменің HTML түсі ақ болады: link=”rgb (255,255,255)”.
- Ашық тұрған сілтеменің түстері қара болады: alink=”rgb (0,0,0)”.
- Ал бұрын кірген HTML сілтемесінің түсі қызыл болады: vlink=”rgb (255,0,0)”.
Назар аударыңыз: «прожектордың қуатын» өз қалауыңыз бойынша реттеуге ешкім тыйым салмайды HTML түсін орнату, мысалы, мына жолмен:
rgb(94, 85, 50) |
Және балалық тосынның түсін алыңыз. Бұл RGB моделінің ерекшелігі, икемділігі және ыңғайлылығы. Мониторыңызда жарық шамдары бар қара қабырға болып табылады және сіз ондық санау жүйесінде HTML атрибуттарын пайдалана отырып, осы прожекторлардың қуатын реттеп, фондық түстердің барлық түрлерін, мәтінді және сілтемелерді жасай аласыз немесе мынаны айта аласыз: ондық түс кодтарын пайдалану.
Ақиқатында HTML тілінде ондық түс кодтарын айту дұрыс емес, десек дұрысырақ болар еді RGB ондық түс кодтары, өйткені бұл модель HTML және CSS-те веб-беттерді жобалау үшін ғана қолданылмайды.
Он алтылық HTML түс мәндері
RGB моделінің ондық кодтарын пайдаланып HTML элементтерінің түсін орнату өте ыңғайлы емес (және қазіргі уақытта барлық браузерлер бұл түсті өңдеу әдісін қолдамайды), өйткені жазу ең ықшам болмайды; он алтылық мәндерді пайдаланып HTML элементтерінің түсін орнатыңыз. Төмендегі суретте ондық мәндердің он алтылық санға қалай түрленетінін көруге болады.
Оналтылық санау жүйесімен таныс емес адамдар үшін оңай болуы үшін аздап түсініктеме беру керек. он алтылық RGB үлгі кодтары арқылы HTML элементтерінің түсін өңдеу. Біріншіден, ондық санау жүйесі осылай аталды, себебі кез келген санды он цифрдың тіркесімі арқылы алуға болады (терминология маңызды: сан мен цифрдың арасында айырмашылық бар): 0, 1, 2, 3, 5, 6, 7, 8, 9.
Он алтылық санау жүйесінде кез келген санды он алты цифрдың тіркесімі арқылы жазуға болады: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Түсіну оңай болуы үшін, a - он, f - он бес деп болжауға болады. Мысалы, он алты саны он алтылық жүйеде 10 болып жазылады. Ал 255 саны ff ретінде жазылады.
Енді қалай болатынын көрейік он алтылық мәндерді пайдаланып HTML элементтерінің түсін орнатыңыз, ондық түс кодтарын олардың он алтылық аналогтарымен ауыстыра отырып, алдыңғы мысалды қайталайық:
<
body
alink
=
”#000000” сілтеме=”#ffffff” vlink=”ff0000” bgcolor=”#00ff00” text=”#0000ff”> |
Ескерту: HTML тілінде он алтылық форматта түсті жазу біршама ықшамондық санға қарағанда, бұл бірінші. Екіншіден: әрбір прожектордың қуаты 0-ден 255-ке дейінгі сандармен белгіленеді. 255 санын жазу үшін он алтылық форматтағы екі цифр қажет (ff = 250), сондықтан әр түсті арнаның жарықтығы (біздің прожекторлар дұрыс түсті арна деп аталады, түсті арна) 0-ден f аралығындағы екі санмен орнатылады.
Назар аударыңыз: әр түсті арнаның жарықтығы бөлек орнатылады, бірақ егер біз бұл жалғыз сан деп елестетсек, онда RGB моделінің он алтылық санау жүйесінде мүмкін болатын максималды сан ffffff, ол бізге ақ түс береді, ал ондық жүйе ол: 16,777,215. Түстер мен реңктердің бұл саны RGB үлгісін орнатуға/пайдалануға мүмкіндік береді. Бұл сан әр түсті арнаның 256 жарықтық мәніне (0-ден 255-ке дейін) ие екендігіне байланысты: 256 * 256 * 256 = 16 777 215.
Он алтылық HTML түс мәндері ықшам және анық, веб-дизайнерлердің көпшілігі мен макет дизайнерлері HTML тіліндегі түсті өңдеу үшін он алтылық мәндерді пайдаланады, сондықтан түс белгілеудің ондық түріне үйренбеу керек, бірақ бірден он алтылық мәнді пайдалану ұсынылады.
Бастапқыда жаңадан келген дизайнерге немесе макет дизайнеріне түсті белгілеудің он алтылық формасын шарлау қиынға соғатыны анық, сондықтан кез келген дерлік графикалық редакторда қажетті түсті таңдауға және оны алуға мүмкіндік беретін түстер палитрасы бар. әртүрлі санау жүйелеріндегі түрлі түсті модельдер үшін код.
Кейбір мәтіндік редакторларда, мысалы, палитра кеңейтімдері бар, олар түсті жылдам таңдап, оны өзгерткіңіз келгенде өте ыңғайлы. Бұл тұрғыда мен ештеңе айта алмаймын.
HTML тіліндегі түс атаулары
HTML атрибуттары мән ретінде қабылдай алады ондық кодтар мен он алтылық мәндер ғана емес, сонымен қатар ерекше гүл атаулары. HTML элементтерінің түсін оның атын пайдаланып өзгерту жақсы идея емес. Біріншіден, HTML тіліндегі түс атауының артында RGB модель коды жатыр, екіншіден, әрбір браузер атаумен көрсетілген HTML элементінің түсін басқаша көрсетеді, ол тек браузер әзірлеушілерінің қалауына байланысты.
Сондықтан HTML тілінде түс атауын пайдалану ұсынылмайды. RGB үлгісі аппараттық құралға байланысты, ал атаумен көрсетілген түс браузерге және тіпті оның нұсқасына байланысты. Атын пайдаланып HTML бет элементтерінің түсін орнатуға тырысайық:
<
body
alink
=
”black
”link
=
”#white” vlink=”red” bgcolor=”green” text=”көк”> |
Түсінгеніңіздей, көптеген түстер мен реңктер бар. Бұл жерде HTML атрибуттары градиент орнатуға мүмкіндік бермейтінін атап өткен жөн, бірақ бұл туралы басқа мақалада айтатын боламыз. HTML тіліндегі көптеген түстердің атаулары бар. HTML тіліндегі түс атауларының кестесін және олардың RGB кодтарын менің веб-сайтымнан таба аласыз.
Жоғарыдағы кесте көрсетеді HTML элементін атау арқылы көрсетсеңіз, ол қандай түсті алады. Бұл кестеде W3C бекіткен 16 түстер мен олардың атаулары бар және кез келген браузерде бірдей көрсетілуі керек. Бірақ шын мәнінде, HTML-де сіз негізгі браузерлер қолдайтын 200-ге жуық түс атауларын пайдалана аласыз, мысалы: Opera, Chrome, Firefox, Safari, Internet Explorer (бұл мәлімдеме соңғысы туралы өте даулы).
HTML түстер палитрасы
Ақиқатында HTML тілінде түстер палитрасы жоқ. Палитра сөзінің анықтамасын еске түсірейік. Палитра - суретші бояуларды араластырып, барлық түстерді алатын төртбұрышты немесе сопақ пішінді кішкентай жұқа тақта. Кейде палитрада бас бармақты ұстауға ыңғайлы болу үшін тесік жасалады. Төменде сіз палитраның суретін таба аласыз. Сондықтан HTML тілінде палитра жоқ.
Бірақ әртүрлі мәтіндік редакторларда бар түстер палитрасы плагиндерісол көмек HTML элементінің түсін жылдам таңдаңыз. Сондай-ақ графикалық редакторларда түстер палитрасы бар, өйткені дизайнер үшін отыру және есептеу өте ыңғайлы және қызықты емес: осы немесе басқа арнаның осы немесе басқа жарықтығында қандай түс шығады. Төмендегі суретте Paint редакторының ең қарапайым палитрасын көруге болады.
Түс палитрасының көптеген модульдері мен плагиндері түс кодын RGB/RGBA пішімінде ғана емес, сонымен қатар басқа үлгілердің форматында да алуға мүмкіндік беретінін ескеріңіз. Есте сақта HTML-де палитра жоқ, жақсы, егер сіз өзегі үшін суретші болмасаңыз және HTML бетінің түстер палитрасын сол түстер деп атайсызоны безендіру үшін пайдаланылған (кейде палитра белгілі бір суретші пайдаланатын түстерді немесе белгілі бір кескіндемені жасау кезінде пайдаланылған түстерді білдіреді).
HTML тілінде мәтін түсін өзгертуді үйрену
алдық HTML тіліндегі түстер туралы көптеген теориялар, жаттығуға кірісіп, тырысайық HTML элементтерінің түстерімен жұмыс. Біз үйренетін бірінші нәрсе - бұл HTML құжатындағы мәтін түсін өзгертуарнайы атрибуттар мен тегтерді пайдалану. Кез келген редакторды ашып, оған келесі кодты жазыңыз:
HTML тілінде түстермен жұмыс істеуге үйрету
Мәтін түсін өзгерту
Мәтін түсін өзгерту үшін BODY мәтін элементінің бірегей атрибутын, сонымен қатар FONT элементін және оның түс атрибутын пайдалануға болады. Бұл мәтін сұр түсті болады.
< ! DOCTYPE html > < html lang = "ru-RU" > < head > < meta charset = "UTF-8" > < title >HTML құжатындағы мәтін түсін өзгерту< / title > < link rel = "stylesheet" type = "text/css" href = "style.css" / > < / head > < body text = "#ff0000" > < h1 > < font color = "rgb(0,255,0)" >HTML тілінде түстермен жұмыс істеуге үйрету< / font > < / h1 > < h2 > < font color = "yellow" >Мәтін түсін өзгерту< / font > < / h2 > < p >Мәтін түсін өзгерту үшін біз бірегей пайдалана аламыз элементтің BODY мәтін төлсипатын, сондай-ақ FONT элементін пайдаланыңыз < / body > < / html > |
Мен бұл файлды color.html ретінде сақтаймын және бұл туралы ұмытпауға кеңес беремін. Ондық санау жүйесінде түсті жазуға Chrome, Firefox және Opera қолдау көрсетпейді, бірақ IE бұл түс белгісін түсінеді және HTML тақырыбын жасыл түспен бөлектейді:
Ең дұрысы HTML тіліндегі мәтін түсін өзгерту емес, HTML тіліндегі қаріп түсін өзгерту. туралы
CSS-тегі түс кодтары түстерді анықтау үшін қолданылады. Әдетте түс кодтары немесе түс мәндері элементтің алдыңғы түсінің (мысалы, мәтін түсі, сілтеме түсі) немесе элементтің өң түсі (фон түсі, блок түсі) үшін түсті орнату үшін пайдаланылады. Оларды түйменің, жиектің, маркердің, меңзердің және басқа сәндік әсерлердің түсін өзгерту үшін де пайдалануға болады.
Түс мәндерін әртүрлі пішімдерде көрсетуге болады. Төмендегі кестеде барлық ықтимал пішімдердің тізімі берілген:
Тізімделген форматтар төменде толығырақ сипатталған.
CSS түстері - Hex кодтары
Он алтылық түс кодытүстің алты таңбалы көрінісі болып табылады. Алғашқы екі сан (RR) қызыл мәнді, келесі екеуі жасыл мәнді (GG) және соңғы екеуі көк мәнді (BB) білдіреді.
CSS түстері - қысқа алтылық кодтар
Қысқа он алтылық түс кодыалты таңбалы белгілердің қысқаша түрі. Бұл пішімде әр сан баламалы алты таңбалы түс мәнін шығару үшін қайталанады. Мысалы: #0F0 #00FF00 болады.
Он алтылық мәнді Adobe Photoshop, Core Draw және т.б. сияқты кез келген графикалық бағдарламалық құралдан алуға болады.
CSS-тегі әрбір он алтылық түс кодының алдында "#" хэш белгісі болады. Төменде он алтылық белгілерді қолдану мысалдары берілген.
CSS түстері - RGB мәндері
RGB мәні rgb() қасиеті арқылы орнатылатын түс коды болып табылады. Бұл сипат үш мәнді қабылдайды: қызыл, жасыл және көк үшін әрқайсысы бір. Мән 0-ден 255-ке дейінгі бүтін сан немесе пайыз болуы мүмкін.
Ескерту:Барлық браузерлер rgb() түс сипатын қолдамайды, сондықтан оны пайдалану ұсынылмайды.
Төменде RGB мәндерін қолданатын бірнеше түстерді көрсететін мысал келтірілген.
Түс кодының генераторы
Сіз біздің қызметімізді пайдаланып миллиондаған түс кодтарын жасай аласыз.
Браузердің қауіпсіз түстері
Төменде ең қауіпсіз және компьютерден тәуелсіз 216 түсті кесте берілген. CSS-тегі бұл түстер 000000-нан FFFFFF он алтылық кодқа дейін ауытқиды. Оларды пайдалану қауіпсіз, себебі олар 256 түстер палитрасымен жұмыс істегенде барлық компьютерлердің түстерді дұрыс көрсетуін қамтамасыз етеді.
| CSS-тегі «қауіпсіз» түстер кестесі | |||||
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | №6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |