Түстерді анықтау үшін он алтылық сандар қолданылады. Он алтылық жүйе ондық жүйеден айырмашылығы, аты айтып тұрғандай, 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 мәндерін және сипаттамасын көрсетеді.

Кесте 1. Түстердің атаулары

Аты	Түс	Код	RGB	HSL	Сипаттама
ақ		#ffffff немесе #fff	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 сияқты аралық мән жартылай мөлдір.

RGBA CSS3-ке қосылды, сондықтан CSS коды осы нұсқаға қарсы тексерілуі керек. Айта кету керек, CSS3 стандарты әлі де әзірлену үстінде және кейбір мүмкіндіктер өзгеруі мүмкін. Мысалы, background-color сипатына қосылған RGB пішіміндегі түс тексеріледі, бірақ фон сипатына қосылған түс енді жарамсыз. Сонымен қатар, браузерлер екі сипаттың да түсін дұрыс түсінеді.

HSL

Internet Explorer	Chrome	Опера	Сафари	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.0+	2.1+	2.0+

HSL пішімінің атауы Hue (реңк), Қанықтылық (қанықтылық) және 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. Веб-беттегі түстер

Влад Мержевич

HTML тілінде түс екі жолдың бірімен көрсетіледі: он алтылық кодты пайдалану және белгілі бір түстердің атымен. Оналтылық санау жүйесіне негізделген әдіс негізінен әмбебап болғандықтан қолданылады.

Он алтылық түстер

HTML түстерді көрсету үшін он алтылық сандарды пайдаланады. Он алтылық жүйе ондық жүйеден айырмашылығы, аты айтып тұрғандай, 16 санына негізделген. Сандар келесідей болады: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. 10-нан 15-ке дейінгі сандар латын әріптерімен ауыстырылады. Кестеде 6.1 ондық және он алтылық сандар арасындағы сәйкестікті көрсетеді.

Он алтылық жүйедегі 15-тен үлкен сандар екі санды бір санға біріктіру арқылы жасалады (6.2-кесте). Мысалы, ондық жүйедегі 255 саны он алтылық жүйедегі FF санына сәйкес келеді.

Санау жүйесін анықтауда шатасуды болдырмау үшін он алтылық санның алдына # хэш белгісі қойылады, мысалы #aa69cc. Бұл жағдайда жағдай маңызды емес, сондықтан #F0F0F0 немесе #f0f0f0 деп жазуға рұқсат етіледі.

HTML тілінде қолданылатын әдеттегі түс осылай көрінеді.

Мұнда веб-беттің өң түсі #FA8E47 болып орнатылған. Санның алдындағы # хэш таңбасы оның он алтылық екенін білдіреді. Алғашқы екі сан (FA) түстің қызыл құрамдас бөлігін, үшіншіден төртіншіге дейінгі сандар (8E) жасыл компонентті, ал соңғы екі цифр (47) көк құрамдас бөлігін анықтайды. Соңғы нәтиже осы түс болады.

Ф.А.

+

8E

+

47

=

FA8E47

Үш түстің әрқайсысы - қызыл, жасыл және көк - 00-ден FF-ге дейінгі мәндерді қабылдай алады, нәтижесінде барлығы 256 реңк болады. Осылайша, түстердің жалпы саны 256x256x256 = 16 777 216 комбинация болуы мүмкін. Қызыл, жасыл және көк компоненттерге негізделген түс үлгісі RGB (қызыл, жасыл, көк; қызыл, жасыл, көк) деп аталады. Бұл модель аддитивті (қосу - қосудан), онда барлық үш компоненттің қосылуы ақ түсті құрайды.

Он алтылық түстерді шарлауды жеңілдету үшін кейбір ережелерді ескеріңіз.

• Түс құрамдастарының мәндері бірдей болса (мысалы: #D6D6D6), нәтиже сұр реңк болады. Сан неғұрлым жоғары болса, түс соғұрлым ашық болады, мәндері #000000 (қара) мен #FFFFFF (ақ) аралығында болады.
• Ашық қызыл түс қызыл құрамдас максималды (FF) жасалса және қалған құрамдас бөліктер нөлге қойылса, қалыптасады. #FF0000 мәні бар түс ең қызыл мүмкін қызыл реңк болып табылады. Жасыл (#00FF00) және көк (#0000FF) үшін де солай.
• Сары (#FFFF00) қызыл мен жасылды араластыру арқылы жасалады. Бұл негізгі түстерді (қызыл, жасыл, көк) және қосымша немесе қосымша түстерді ұсынатын түсті дөңгелекте анық көрінеді (6.1-сурет). Оларға сары, көгілдір және күлгін (қызыл деп те аталады) жатады. Жалпы, кез келген түсті оған жақын түстерді араластыру арқылы алуға болады. Осылайша, көгілдір (#00FFFF) көк пен жасылды біріктіру арқылы алынады.

Күріш. 6.1. Түс дөңгелегі

Он алтылық мәндерге негізделген түстерді эмпирикалық түрде таңдаудың қажеті жоқ. Бұл үшін әртүрлі түсті модельдермен жұмыс істей алатын графикалық редактор қолайлы, мысалы, Adobe Photoshop. Суретте. 6.2-суретте осы бағдарламада түс таңдау терезесі көрсетілген, нәтижесінде ағымдағы түстің он алтылық мәні сызықпен сызылған; Сіз оны кодқа көшіріп, қоюға болады.

Күріш. 6.2. Photoshop бағдарламасында түстерді таңдауға арналған терезе

Веб түстері

Монитордың түс көрсету сапасын 8-битке (256 түс) орнатсаңыз, бір түсті әртүрлі шолғыштарда басқаша көрсетуге болады. Бұл браузер өз палитрасымен жұмыс істегенде және оның палитрасында жоқ түсті көрсете алмаған кезде графиканың көрсетілу тәсіліне байланысты. Бұл жағдайда түс басқа, оған жақын, берілгенге еліктейтін түстердің пикселдерінің тіркесімімен ауыстырылады. Түрлі браузерлерде түс бірдей болып қалуын қамтамасыз ету үшін веб-түстер деп аталатын палитра енгізілді. Веб түстері - әрбір құрамдас қызыл, жасыл және көк алты мәннің біріне орнатылған түстер - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Бұл компоненттің он алтылық мәні жақшада көрсетілген. Барлық мүмкін комбинациялардан түстердің жалпы саны 6x6x6 - 216 түсті береді. Мысал веб түсі - #33FF66.

Веб түсінің басты ерекшелігі - ол барлық браузерлерде бірдей көрінеді. Қазіргі уақытта веб-түстердің өзектілігі мониторлардың сапасының жақсаруына және олардың мүмкіндіктерінің кеңеюіне байланысты өте аз.

Аты бойынша түстер

Сандар жинағын есте сақтамау үшін оның орнына жиі қолданылатын түстердің атауларын пайдалануға болады. Кестеде 6.3 танымал түс атауларының атауларын көрсетеді.

Кесте 6.3. Кейбір түстердің атаулары

Түс атауы	Түс	Сипаттама	Оналтылық мән
қара		Қара	#000000
көк		Көк	#0000FF
фуксия		Ашық күлгін	#FF00FF
сұр		Қою сұр	#808080
жасыл		Жасыл	#008000
әк		Ашық жасыл	#00FF00
қызыл қызыл		Қою қызыл	#800000
теңіз флоты		Қою көк	#000080
зәйтүн		Зәйтүн	#808000
күлгін		Қою күлгін	#800080
қызыл		Қызыл	#FF0000
күміс		Ашық сұр	#C0C0C0
көкшіл		Көк-жасыл	#008080
ақ		Ақ	#FFFFFF
сары		Сары	#FFFF00

Түсті оның аты бойынша немесе он алтылық сандарды пайдалану арқылы көрсеткеніңіз маңызды емес. Бұл әдістер әсер ету жағынан бірдей. 6.1-мысал веб-беттің өңін және мәтін түстерін орнату жолын көрсетеді.

6.1-мысал. Фон және мәтін түсі

Мысал мәтін

Бұл мысалда фон түсі тегтің bgcolor атрибуты арқылы орнатылады , және мәтін түсі мәтін төлсипаты арқылы. Әртүрлілік үшін мәтін төлсипаты он алтылық санға орнатылады, ал bgcolor төлсипаты сақталған teal кілт сөзіне орнатылады.

Түсті анықтау үшін 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

CSS түсінбейді). Сондықтан болашақ веб-шеберге жай ғана оқу керек Түсті өзгертуге мүмкіндік беретін HTML құралдары,мысалы, сайттың мақсатты аудиториясының назарын аударатын жарқын және түрлі-түсті электрондық пошта ақпараттық бюллетеньдерін жасау үшін.

Бұл пост өте ұзақ, бірақ одан HTML көмегімен түстермен жұмыс істеудің барлық техникалық мүмкіндіктері туралы біле аласыз. Жазуды мына сұрақты түсінуден бастаймыз: неге HTML бетінің белгілі бір элементтерін түспен бөлектеу керек? Содан кейін біз арнайы кодтардың көмегімен HTML-де түстерді орнатуға мүмкіндік беретін RGB моделі туралы айтатын боламыз (жол бойы ондық түс кодтары мен он алтылық HTML түс мәндерін қарастырамыз). Сондай-ақ осы посттан сіз түстер палитрасы туралы біле аласыз, сонымен қатар HTML-де палитра неге жоқ екенін түсінесіз. Және бұл жарияланымның соңында болады фон түсін, мәтінді және сілтемелерді өзгерту мысалдары.

HTML тілінде түстерді пайдалану

Веб-сайт беттері суреттерсіз қызықсыз және қызықсыз болар еді, өйткені біз бұрын және егжей-тегжейлі айтқанбыз. Бірақ суреттердің бір маңызды кемшілігі бар: әрбір сурет қосымша және сәйкесінше хостингке қосымша жүктеме.

Мен WordPress блогын жобалау үшін бір суретті пайдаланбағанымды атап өткім келеді; Дәл солай Бүгін біз HTML тіліндегі түстер туралы сөйлесетін боламыз. HTML тіліндегі түстер әртүрлі мақсаттарда пайдаланылады, мысалы, белгілі бір элементтерді бір немесе басқа түспен бөлектеу арқылы веб-сайт макеттерін жасай аламыз.

Түсті пайдалана отырып, біз келушілердің назарын сайттың белгілі бір мәтініне немесе блогына аудара аламыз. Пайдаланушы түсінетіндей түсті пайдалану арқылы да анықталатынын ескеріңіз: ол қай сілтемені басқанын, қайсысына әлі кірмегенін және қазір қай HTML парағында екенін.

Сақ болыңыз HTML құжаттарын жобалау үшін түстерді пайдалану, барлық түстер бір-бірімен үйлеспейді және әрбір түс веб-сайтқа келушілерге ұнамайды. Бірақ сіз веб-дизайнерлерден осы нәзіктіктер туралы сұрағаныңыз жөн, бұл мақала сізге HTML беті элементтерінің түсін басқаруға мүмкіндік беретін техникалық мүмкіндіктерді түсінуге көмектеседі.

Бірақ дизайн мазмұннан бөлек болуы керек екенін ұмытпау керек, сондықтан HTML беттеріндегі түсті өңдеу үшін CSS-ті қолданған дұрыс, бірақ бұл туралы басқа постта айтатын боламыз. Енді көреміз Сайт беттеріндегі түстерді басқаруға арналған HTML-де қандай құралдар бар?.

IT индустриясында түстермен манипуляциялау үшін көптеген түсті модельдер бар. Ең көп қолданылатын түс көрсету моделі RGB моделі болып табылады. Біз осы жерде осы модельдің кейбір мүмкіндіктері туралы айтатын боламыз және RGB-ге толығырақ кіріспе үшін жеке басылым болады. Төменде IT-да қолданылатын түс үлгілерінің тізімін таба аласыз (тек HTML және CSS емес):

1. RGB үлгісі. Бұл модель өте кең таралған және HTML элементтерінің түсін өңдеудің ең ыңғайлы және кең таралған әдістерінің бірі болып табылады.
2. RGBA үлгісі. Бұл модель RGB үлгісіне өте ұқсас, бірақ түс үшін альфа арнасын қамтиды. RGBA моделінің ерекшелігі - ол реттеуге мүмкіндік береді HTML элементінің түсі ғана емес, сонымен қатар оның мөлдірлігіальфа арнасының болуына байланысты. RGBA үлгісі CSS3 жүйесіне қосылды және оны ескі браузерлер қолдамайды.
3. HSL үлгісі. HSL моделінің ерекшелігі - біз түсті оның параметрлері арқылы орнатамыз: реңк, қарқындылық және ашықтық. Бұл модельді түсіну RGB үлгісіне қарағанда біршама қиынырақ.
4. HSLA үлгісі. Бұл модель HSL үлгісіне өте ұқсас, бірақ RGBA үлгісі сияқты, ол альфа түсті арнамен жұмыс істеуге мүмкіндік береді, сондықтан HSLA көмегімен біз беттегі HTML элементінің түсін ғана емес, оның мөлдірлігін де орната аламыз. .
5. HSV (HSB) үлгісі. Бұл модельді HSL үлгісімен шатастырмау керек. Алғашқы төрт үлгіні HTML немесе CSS-де веб-беттерді жобалау үшін пайдалануға болатынын ескеріңіз, бірақ HSV үлгісі мүмкін емес. HSV 1978 жылы Pixar негізін қалаушылардың бірі әзірлеген және HSL-ге өте ұқсас.
6. 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 атрибуттарын пайдалану арқылы біз элементтердің түсін басқара аламыз:

1. HTML төлсипатының түсі. Бұл атрибут HTML элементінің ішіндегі мәтін түсін өзгертуге мүмкіндік береді. Атрибут мәндерді HTML түс атаулары және он алтылық және ондық белгілердегі RGB үлгі кодтары түрінде қабылдай алады. Түс төлсипаты белгілі бір HTML элементтерінің ішіндегі мәтін түсін өзгертуге мүмкіндік беретін бірегей HTML атрибуты болып табылады.
2. HTML мәтіндік атрибуты. Бұл атрибут бірегей тег атрибуты болып табылады . Тег тегтермен бірге Және пішін. Естеріңізде болса, контейнердің ішінде элементтер орналастырылады, содан кейін шолғыш көру аймағында көрсетеді. Мәтін атрибуты көрсетуге мүмкіндік береді Бүкіл HTML беті үшін әдепкі мәтін түсі.
3. HTML атрибуты bgcolor. Ол сондай-ақ бірегей HTML атрибуты болып табылады және кейбір HTML элементтерінің өң түсін өзгертуге мүмкіндік береді.
4. HTML атрибуты vlink. Бұл төлсипат бірегей және тек тегке қолданылады пайдаланушы кірген сілтеменің түсін өзгерту үшін.
5. HTML атрибуты alink. Бұл төлсипат те бірегей және тек тегке қолданылады . alink төлсипаты белсенді HTML сілтемесінің түсін өзгертеді.
6. HTML сілтеме атрибуты. Сілтеме атрибуты тек тегпен бірге қолданылады және пайдаланушы әлі кірмеген HTML бет сілтемелерінің түсін өзгертуге қызмет етеді.

Назар аударыңыз: HTML элементтерінің түсін өзгерту үшін атрибуттарды пайдалану ұсынылмайды, өйткені веб-бет дизайнын оның мазмұнынан бөлуге мүмкіндік беретін каскадты стиль кестелері бар.

HTML тіліндегі ондық түс кодтарын пайдалану

Сонымен, біз 0-ден 255-ке дейінгі нөмірленген сызбалар бар арнайы сызғыштың көмегімен прожектордың жарықтығын орнатуға болатындығы туралы айттық. Енді бұл HTML элементтерінің түсін өзгертуге қалай көмектесетінін көрейік. Мәселе мынада, біз HTML элементіндегі мәтіннің түсін немесе HTML тіліндегі фондық түсін ондық кодты пайдаланып келесідей өзгерте аламыз:

Мысалдағыдай негізгі контейнер сипатталған HTML құжатын жасасаңыз, мынаны көресіз:

1. HTML құжатының фондық түсі енді жасыл: bgcolor=”rgb (0,255,0)”.
2. HTML бетінің мәтін түсі көк түске боялады: text=”rgb (0,0,255)”.
3. Пайдаланушы кірмеген сілтеменің HTML түсі ақ болады: link=”rgb (255,255,255)”.
4. Ашық тұрған сілтеменің түстері қара болады: alink=”rgb (0,0,0)”.
5. Ал бұрын кірген 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 тіліндегі қаріп түсін өзгерту. туралы