Використання кольорів

Матеріал з ТерноВікі

(відмінності між версіями)
Перейти до: навігація, пошук
 
Рядок 641: Рядок 641:
Якщо в якійсь клітинці потрібно задати певний колір фону, задавайте його ось так: <code>style="background-color: ''колір'';"</code> (див. [http://uk.wikipedia.org/wiki/%D0%92%D1%96%D0%BA%D1%96%D0%BF%D0%B5%D0%B4%D1%96%D1%8F:%D0%91%D0%B0%D1%80%D0%B2%D0%B8 таблицю кольорів]). Рекомендується використовувати цю можливість '' тільки '' якщо необхідний саме конкретний колір, а не просто логічне виділення частини клітинок.
Якщо в якійсь клітинці потрібно задати певний колір фону, задавайте його ось так: <code>style="background-color: ''колір'';"</code> (див. [http://uk.wikipedia.org/wiki/%D0%92%D1%96%D0%BA%D1%96%D0%BF%D0%B5%D0%B4%D1%96%D1%8F:%D0%91%D0%B0%D1%80%D0%B2%D0%B8 таблицю кольорів]). Рекомендується використовувати цю можливість '' тільки '' якщо необхідний саме конкретний колір, а не просто логічне виділення частини клітинок.
-
[[Категорія: ТерноВікі]]
 
-
[[Категорія: ІППОВікі]]
 
-
[[Категорія: Методист]]
 
[[Категорія: Методична скарбничка]]
[[Категорія: Методична скарбничка]]

Поточна версія на 17:08, 26 квітня 2018

Зміст

Використання кольорів

Для збереження одноманітності сторінок, кольори у Вікіпедії слід використовувати розумно. Яскраві кольори в статтях повинні використовуватися тільки як виняток, коли це доцільно. Більш різноманітне розфарбування допускається у вікіпроектах та порталах. На власній сторінці користувачі нічим не обмежені у творчих експериментах

Для фарбування в MediaWiki, як і в HTML, служить атрибут style. Шматки тексту, колір яких потрібно змінити, включають у теги, наприклад для окремих букв або слів або для абзаців. В атрибуті style колір визначається властивостями CSS color:#RRGGBB; для кольору тексту або для кольору фону. «#RRGGBB» означає шістнадцятковий код кольору: частка червоного (RR) може лежати в діапазоні від 00 до FF (це відповідає десятковому числу 255), також як і частки зеленого (GG) і синього кольору (BB). Таким чином, палітра доступних кольорів налічує 166 = 16 777 216 найменувань. Замість кодування «#RRGGBB» можна використовувати наведені нижче назви кольорів (без «#»).

Що потрібно Вікітекст Результат
Кольоровий текст <span style="color:#ff0000">Текст</span> Текст
Кольорові абзаци <div style="color:red">абзац</div>
абзац
Фон для одного або декількох слів <span style="background-color:yellow">приклад</span> приклад
Фон абзацу <div style="background-color:yellow">абзац</div>
абзац
Фон елементу таблиці style="background-color:#FEDBCA;"|текст текст
Альтернативний варіант bgcolor="#FEDBCA"|текст текст
Взяття у рамку <div style="border-style:solid; border-color:Red;">текст у кольоровій рамці</div>
текст у кольоровій рамці
Екстремальний варіант style="background-color:#FEDBCA;"|<div style="border-style:solid; border-color:Red; color:red; background-color:yellow">все включено</div>
все включено

Таблиця кольорів

white (255 255 255) #FFFFFF gray91 (232 232 232) #E8E8E8 gray81 (207 207 207) #CFCFCF grey51 (130 130 130) #828282
Snow1 (255 250 250) #FFFAFA Snow2 (238 233 233) #EEE9E9 Snow3 (205 201 201) #CDC9C9 Snow4 (139 137 137) #8B8989
Seashell1 (255 245 238) #FFF5EE Seashell2 (238 229 222) #EEE5DE Seashell3 (205 197 191) #CDC5BF Seashell4 (139 134 130) #8B8682
AntiqueWhite1 (255 239 219) #FFEFDB AntiqueWhite2 (238 223 204) #EEDFCC AntiqueWhite3 (205 192 176) #CDC0B0 AntiqueWhite4 (139 131 120) #8B8378
Bisque1 (255 228 196) #FFE4C4 Bisque2 (238 213 183) #EED5B7 Bisque3 (205 183 158) #CDB79E Bisque4 (139 125 107) #8B7D6B
PeachPuff1 (255 218 185) #FFDAB9 PeachPuff2 (238 203 173) #EECBAD PeachPuff3 (205 175 149) #CDAF95 PeachPuff4 (139 119 101) #8B7765
NavajoWhite1 (255 222 173) #FFDEAD NavajoWhite2 (238 207 161) #EECFA1 NavajoWhite3 (205 179 139) #CDB38B NavajoWhite4 (139 121 94) #8B795E
LemonChiffon1 (255 250 205) #FFFACD LemonChiffon2 (238 233 191) #EEE9BF LemonChiffon3 (205 201 165) #CDC9A5 LemonChiffon4 (139 137 112) #8B8970
Cornsilk1 (255 248 220) #FFF8DC Cornsilk2 (238 232 205) #EEE8CD Cornsilk3 (205 200 177) #CDC8B1 Cornsilk4 (139 136 120) #8B8878
Ivory1 (255 255 240) #FFFFF0 Ivory2 (238 238 224) #EEEEE0 Ivory3 (205 205 193) #CDCDC1 Ivory4 (139 139 131) #8B8B83
Honeydew1 (240 255 240) #F0FFF0 Honeydew2 (224 238 224) #E0EEE0 Honeydew3 (193 205 193) #C1CDC1 Honeydew4 (131 139 131) #838B83
LavenderBlush1 (255 240 245) #FFF0F5 LavenderBlush2 (238 224 229) #EEE0E5 LavenderBlush3 (205 193 197) #CDC1C5 LavenderBlush4 (139 131 134) #8B8386
MistyRose1 (255 228 225) #FFE4E1 MistyRose2 (238 213 210) #EED5D2 MistyRose3 (205 183 181) #CDB7B5 MistyRose4 (139 125 123) #8B7D7B
Azure1 (240 255 255) #F0FFFF Azure2 (224 238 238) #E0EEEE Azure3 (193 205 205) #C1CDCD Azure4 (131 139 139) #838B8B
SlateBlue1 (131 111 255) #836FFF SlateBlue2 (122 103 238) #7A67EE SlateBlue3 (105 89 205) #6959CD SlateBlue4 (71 60 139 ) #473C8B
RoyalBlue1 (72 118 255) #4876FF RoyalBlue2 (67 110 238) #436EEE RoyalBlue3 (58 95 205) #3A5FCD RoyalBlue4 (39 64 139) #27408B
Blue1 (0 0 255) #0000FF Blue2 (0 0 238) #0000EE Blue3 (0 0 205) #0000CD Blue4 (0 0 139) #00008B
DodgerBlue1 (30 144 255) #1E90FF DodgerBlue2 (28 134 238) #1C86EE DodgerBlue3 (24 116 205) #1874CD DodgerBlue4 (16 78 139 ) #104E8B
SteelBlue1 (99 184 255) #63B8FF SteelBlue2 (92 172 238) #5CACEE SteelBlue3 (79 148 205) #4F94CD SteelBlue4 (54 100 139) #36648B
DeepSkyBlue1 (0 191 255) #00BFFF DeepSkyBlue2 (0 178 238) #00B2EE DeepSkyBlue3 (0 154 205) #009ACD DeepSkyBlue4 (0 104 139 ) #00688B
SkyBlue1 (135 206 255) #87CEFF SkyBlue2 (126 192 238) #7EC0EE SkyBlue3 (108 166 205) #6CA6CD SkyBlue4 (74 112 139 ) #4A708B
LightSkyBlue1 (176 226 255) #B0E2FF LightSkyBlue2 (164 211 238) #A4D3EE LightSkyBlue3 (141 182 205) #8DB6CD LightSkyBlue4 (96 123 139) #607B8B
SlateGray1 (198 226 255) #C6E2FF SlateGray2 (185 211 238) #B9D3EE SlateGray3 (159 182 205) #9FB6CD SlateGray4 (108 123 139) #6C7B8B
LightSteelBlue1 (202 225 255) #CAE1FF LightSteelBlue2 (188 210 238) #BCD2EE LightSteelBlue3 (162 181 205) #A2B5CD LightSteelBlue4 (110 123 139) #6E7B8B
LightBlue1 (191 239 255) #BFEFFF LightBlue2 (178 223 238) #B2DFEE LightBlue3 (154 192 205) #9AC0CD LightBlue4 (104 131 139) #68838B
LightCyan1 (224 255 255) #E0FFFF LightCyan2 (209 238 238) #D1EEEE LightCyan3 (180 205 205) #B4CDCD LightCyan4 (122 139 139) #7A8B8B
PaleTurquoise1 (187 255 255) #BBFFFF PaleTurquoise2 (174 238 238) #AEEEEE PaleTurquoise3 (150 205 205) #96CDCD PaleTurquoise4 (102 139 139) #668B8B
CadetBlue1 (152 245 255) #98F5FF CadetBlue2 (142 229 238) #8EE5EE CadetBlue3 (122 197 205) #7AC5CD CadetBlue4 (83 134 139) #53868B
Turquoise1 (0 245 255) #00F5FF Turquoise2 (0 229 238) #00E5EE Turquoise3 ( 0 197 205) #00C5CD Turquoise4 (0 134 139 ) #00868B
Cyan1 (0 255 255) #00FFFF Cyan2 (0 238 238) #00EEEE Cyan3 (0 205 205) #00CDCD Cyan4 (0 139 139) #008B8B
DarkSlateGray1 (151 255 255) #97FFFF DarkSlateGray2 (141 238 238) #8DEEEE DarkSlateGray3 (121 205 205) #79CDCD DarkSlateGray4 (82 139 139) #528B8B
Aquamarine1 (127 255 212) #7FFFD4 Aquamarine2 (118 238 198) #76EEC6 Aquamarine3 (102 205 170) #66CDAA Aquamarine4 (69 139 116) #458B74
DarkSeaGreen1 (193 255 193) #C1FFC1 DarkSeaGreen2 (180 238 180) #B4EEB4 DarkSeaGreen3 (155 205 155) #9BCD9B DarkSeaGreen4 (105 139 105) #698B69
SeaGreen1 (84 255 159) #54FF9F SeaGreen2 (78 238 148) #4EEE94 SeaGreen3 (67 205 128) #43CD80 SeaGreen4 (46 139 87) #2E8B57
PaleGreen1 (154 255 154) #9AFF9A PaleGreen2 (144 238 144) #90EE90 PaleGreen3 (124 205 124) #7CCD7C PaleGreen4 (84 139 84) #548B54
SpringGreen1 (0 255 127) #00FF7F SpringGreen2 (0 238 118) #00EE76 SpringGreen3 (0 205 102) #00CD66 SpringGreen4 (0 139 69) #008B45
Green1 (0 255 0) #00FF00 Green2 (0 238 0) #00EE00 Green3 (0 205 0) #00CD00 Green4 (0 139 0) #008B00
Chartreuse1 (127 255 0) #7FFF00 Chartreuse2 (118 238 0) #76EE00 Chartreuse3 (102 205 0) #66CD00 Chartreuse4 (69 139 0) #458B00
OliveDrab1 (192 255 62) #C0FF3E OliveDrab2 (179 238 58) #B3EE3A OliveDrab3 (154 205 50) #9ACD32 OliveDrab4 (105 139 34) #698B22
DarkOliveGreen1 (202 255 112) #CAFF70 DarkOliveGreen2 (188 238 104) #BCEE68 DarkOliveGreen3 (162 205 90) #A2CD5A DarkOliveGreen4 (110 139 61) #6E8B3D
Khaki1 (255 246 143) #FFF68F Khaki2 (238 230 133) #EEE685 Khaki3 (205 198 115) #CDC673 Khaki4 (139 134 78) #8B864E
LightGoldenrod1 (255 236 139) #FFEC8B LightGoldenrod2 (238 220 130) #EEDC82 LightGoldenrod3 (205 190 112) #CDBE70 LightGoldenrod4 (139 129 76) #8B814C
LightYellow1 (255 255 224) #FFFFE0 LightYellow2 (238 238 209) #EEEED1 LightYellow3 (205 205 180) #CDCDB4 LightYellow4 (139 139 122) #8B8B7A
Yellow1 (255 255 0) #FFFF00 Yellow2 (238 238 0) #EEEE00 Yellow3 (205 205 0) #CDCD00 Yellow4 (139 139 0) #8B8B00
Gold1 (255 215 0) #FFD700 Gold2 (238 201 0) #EEC900 Gold3 (205 173 0) #CDAD00 Gold4 (139 117 0) #8B7500
Goldenrod1 (255 193 37) #FFC125 Goldenrod2 (238 180 34) #EEB422 Goldenrod3 (205 155 29) #CD9B1D Goldenrod4 (139 105 20) #8B6914
DarkGoldenrod1 (255 185 15) #FFB90F DarkGoldenrod2 (238 173 14) #EEAD0E DarkGoldenrod3 (205 149 12) #CD950C DarkGoldenrod4 (139 101 8) #8B6508
RosyBrown1 (255 193 193) #FFC1C1 RosyBrown2 (238 180 180) #EEB4B4 RosyBrown3 (205 155 155) #CD9B9B RosyBrown4 (139 105 105) #8B6969
IndianRed1 (255 106 106) #FF6A6A IndianRed2 (238 99 99) #EE6363 IndianRed3 (205 85 85) #CD5555 IndianRed4 (139 58 58) #8B3A3A
Sienna1 (255 130 71) #FF8247 Sienna2 (238 121 66) #EE7942 Sienna3 (205 104 57) #CD6839 Sienna4 (139 71 38) #8B4726
Burlywood1 (255 211 155) #FFD39B Burlywood2 (238 197 145) #EEC591 Burlywood3 (205 170 125) #CDAA7D Burlywood4 (139 115 85) #8B7355
Wheat1 (255 231 186) #FFE7BA Wheat2 (238 216 174) #EED8AE Wheat3 (205 186 150) #CDBA96 Wheat4 (139 126 102) #8B7E66
Tan1 (255 165 79) #FFA54F Tan2 (238 154 73) #EE9A49 Tan3 (205 133 63) #CD853F Tan4 (139 90 43) #8B5A2B
Chocolate1 (255 127 36) #FF7F24 Chocolate2 (238 118 33) #EE7621 Chocolate3 (205 102 29) #CD661D Chocolate4 (139 69 19) #8B4513
Firebrick1 (255 48 48) #FF3030 Firebrick2 (238 44 44) #EE2C2C Firebrick3 (205 38 38) #CD2626 Firebrick4 (139 26 26) #8B1A1A
Brown1 (255 64 64) #FF4040 Brown2 (238 59 59) #EE3B3B Brown3 (205 51 51) #CD3333 Brown4 (139 35 35) #8B2323
Salmon1 (255 140 105) #FF8C69 Salmon2 (238 130 98) #EE8262 Salmon3 (205 112 84) #CD7054 Salmon4 (139 76 57) #8B4C39
LightSalmon1 (255 160 122) #FFA07A LightSalmon2 (238 149 114) #EE9572 LightSalmon3 (205 129 98) #CD8162 LightSalmon4 (139 87 66) #8B5742
Orange1 (255 165 0) #FFA500 Orange2 (238 154 0) #EE9A00 Orange3 (205 133 0) #CD8500 Orange4 (139 90 0) #8B5A00
DarkOrange1 (255 127 0) #FF7F00 DarkOrange2 (238 118 0) #EE7600 DarkOrange3 (205 102 0) #CD6600 DarkOrange4 (139 69 0) #8B4500
Coral1 (255 114 86) #FF7256 Coral2 (238 106 80) #EE6A50 Coral3 (205 91 69) #CD5B45 Coral4 (139 62 47) #8B3E2F
Tomato1 (255 99 71) #FF6347 Tomato2 (238 92 66) #EE5C42 Tomato3 (205 79 57) #CD4F39 Tomato4 (139 54 38) #8B3626
OrangeRed1 (255 69 0) #FF4500 OrangeRed2 (238 64 0) #EE4000 OrangeRed3 (205 55 0) #CD3700 OrangeRed4 (139 37 0) #8B2500
Red1 (255 0 0) #FF0000 Red2 (238 0 0) #EE0000 Red3 (205 0 0) #CD0000 Red4 (139 0 0) #8B0000
DeepPink1 (255 20 147) #FF1493 DeepPink2 (238 18 137) #EE1289 DeepPink3 (205 16 118) #CD1076 DeepPink4 (139 10 80) #8B0A50
HotPink1 (255 110 180) #FF6EB4 HotPink2 (238 106 167) #EE6AA7 HotPink3 (205 96 144) #CD6090 HotPink4 (139 58 98) #8B3A62
Pink1 (255 181 197) #FFB5C5 Pink2 (238 169 184) #EEA9B8 Pink3 (205 145 158) #CD919E Pink4 (139 99 108) #8B636C
LightPink1 (255 174 185) #FFAEB9 LightPink2 (238 162 173) #EEA2AD LightPink3 (205 140 149) #CD8C95 LightPink4 (139 95 101) #8B5F65
PaleVioletRed1 (255 130 171) #FF82AB PaleVioletRed2 (238 121 159) #EE799F PaleVioletRed3 (205 104 137) #CD6889 PaleVioletRed4 (139 71 93) #8B475D
Maroon1 (255 52 179) #FF34B3 Maroon2 (238 48 167) #EE30A7 Maroon3 (205 41 144) #CD2990 Maroon4 (139 28 98) #8B1C62
VioletRed1 (255 62 150) #FF3E96 VioletRed2 (238 58 140) #EE3A8C VioletRed3 (205 50 120) #CD3278 VioletRed4 (139 34 82) #8B2252
Magenta1 (255 0 255) #FF00FF Magenta2 (238 0 238) #EE00EE Magenta3 (205 0 205) #CD00CD Magenta4 (139 0 139) #8B008B
Orchid1 (255 131 250) #FF83FA Orchid2 (238 122 233) #EE7AE9 Orchid3 (205 105 201) #CD69C9 Orchid4 (139 71 137) #8B4789
Plum1 (255 187 255) #FFBBFF Plum2 (238 174 238) #EEAEEE Plum3 (205 150 205) #CD96CD Plum4 (139 102 139) #8B668B
MediumOrchid1 (224 102 255) #E066FF MediumOrchid2 (209 95 238) #D15FEE MediumOrchid3 (180 82 205) #B452CD MediumOrchid4 (122 55 139) #7A378B
DarkOrchid1 (191 62 255) #BF3EFF DarkOrchid2 (178 58 238) #B23AEE DarkOrchid3 (154 50 205) #9A32CD DarkOrchid4 (104 34 139) #68228B
Purple1 (155 48 255) #9B30FF Purple2 (145 44 238) #912CEE Purple3 (125 38 205) #7D26CD Purple4 (85 26 139) #551A8B
MediumPurple1 (171 130 255) #AB82FF MediumPurple2 (159 121 238) #9F79EE MediumPurple3 (137 104 205) #8968CD MediumPurple4 (93 71 139) #5D478B
Thistle1 (255 225 255) #FFE1FF Thistle2 (238 210 238) #EED2EE Thistle3 (205 181 205) #CDB5CD Thistle4 (139 123 139) #8B7B8B
WhiteSmoke (245 245 245) #F5F5F5 Gainsboro (220 220 220) #DCDCDC LightGrey (211 211 211) #D3D3D3 Silver (192 192 192) #C0C0C0
grey71 (181 181 181) #B5B5B5 DarkGrey ( 169 169 169) #A9A9A9 gray61 (156 156 156) #9C9C9C grey41 (105 105 105) #696969
grey31 (79 79 79) #4F4F4F grey21 (54 54 54) #363636 grey11 (28 28 28) #1C1C1C black (0 0 0) #000000

Використання кольорів у таблицях

Нижче наведено складніші приклади, що демонструють додаткові опції доступні для опису таблиць. Ви можете поекспериментувати з цими установками та подивитись, який ефект вони матимуть. Не всі із цих опцій придатні у всіх випадках, тільки тому що Ви можете додати кольоровий фон не означає що це завжди є хорошою ідеєю. Намагайтесь робити Ваші таблиці достатньо простими — інші користувачі редагуватимуть їх також!

Кольоровий текст

Текст, що знаходиться в таблиці, можна зробити кольоровим. З цією метою застосовуються ті ж теги, що і в HTML:

  • для окремого слова — <font color="#ABCDEF">Текст</font>;
  • для довгого тексту — <div style="color:#ABCDEF">Текст, текст.</div>,

де «ABCDEF» — індекс кольору. Для "розфарбування" тексту пишуть так:

Вихідний код 

{| border=1
          |Клітинка 1*1
          |Кольорове <font color="#FF00FF">одне</font> слово.
          |Клітинка 3*1
          |-
          |Клітинка 1*2
          |Клітинка 2*2
          |<div style="color:#33CC66">Кольоровий весь рядок.</div>
          |-
          |Клітинка 1*3
          |Клітинка 2*3
          |Клітинка 3*3
          |}

Як він виглядає

Клітинка 1*1 Кольорове одне слово. Клітинка 3*1
Клітинка 1*2 Клітинка 2*2
Кольоровий весь рядок.
Клітинка 1*3 Клітинка 2*3 Клітинка 3*3

Колір клітинки

Зробити кольорову клітинку можна за допомогою атрибуту «bgcolor=#ABCDEF», де «ABCDEF» — індекс кольору.

Пишеться 

{| border=1
          |Клітинка 1*1
          |bgcolor=#FFCC00|Клітинка 2*1
          |Клітинка 3*1
          |-
          |Клітинка 1*2
          |Клітинка 2*2
          |Клітинка 3*2
          |-
          |bgcolor=#CCFF00|Клітинка 1*3
          |Клітинка 2*3
          |Клітинка 3*3
          |}

Як він виглядає

Клітинка 1*1 Клітинка 2*1 Клітинка 3*1
Клітинка 1*2 Клітинка 2*2 Клітинка 3*2
Клітинка 1*3 Клітинка 2*3 Клітинка 3*3

Фоновий колір таблиці

Щоб зробити кольоровим фон всієї таблиці, слід вписати атрибут «bgcolor=#ABCDEF» в перший рядок таблиці, де ставитися і атрибут рамки:

Пишеться 

{| border=1 bgcolor=#66FFFF
          |Клітинка 1*1
          |Клітинка 2*1
          |Клітинка 3*1
          |-
          |Клітинка 1*2
          |Клітинка 2*2
          |Клітинка 3*2
          |-
          |Клітинка 1*3
          |Клітинка 2*3
          |Клітинка 3*3
          |}

Як він виглядає

Клітинка 1*1 Клітинка 2*1 Клітинка 3*1
Клітинка 1*2 Клітинка 2*2 Клітинка 3*2
Клітинка 1*3 Клітинка 2*3 Клітинка 3*3

Класи оформлення клітинок

заголовок звичайна клітинка
highlight
bright
shadow
dark

Також в Вікіпедії є два класи підсвічування та два типи затінення окремих клітинок, при цьому класи підсвічування надають різні кольори заголовних «!» і звичайних «|» клітинок.

Ці класи можна додавати до рядка для підсвічування відразу всіх клітинок рядка. 

|- class="bright"
| ...
| ...

Або до окремо взятої клітинки; якщо потрібно просто скасувати колір, заданий в рядку, використовуйте клас transparent. 

|-
|class="bright"| ...
|class="highlight"| ...

Наприклад:

         
|-class="dark"     |class="highlight"
|-class="bright"   |class="transparent"  

Для заголовків рекомендується використовувати підсвічування highlight, за необхідності виділити більш важливий заголовок — bright. Якщо є необхідність знизити важливість заголовка, можна використовувати затінення.

Для виділення груп звичайних клітинок рекомендується використовувати затінення (спочатку shadow, за необхідності — dark). Если нужно выделить одну-две ячейки, можно использовать подсветку.

Якщо в якійсь клітинці потрібно задати певний колір фону, задавайте його ось так: style="background-color: колір;" (див. таблицю кольорів). Рекомендується використовувати цю можливість тільки якщо необхідний саме конкретний колір, а не просто логічне виділення частини клітинок.

Отримано з http://wiki.ippo.edu.te.ua/index.php/%D0%92%D0%B8%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D0%B0%D0%BD%D0%BD%D1%8F_%D0%BA%D0%BE%D0%BB%D1%8C%D0%BE%D1%80%D1%96%D0%B2
Особисті інструменти