Спеціальні символи – це технічні знаки, які не представлені на клавіатурі та закодовані через кодування ЮНІКОД чи іншої метамови. Спецсимволи розділені на групи: математичні, грецька абетка, ISO 8859-1 та інші. Навіщо вони необхідні і як читати далі в статті.

Застосування спецсимволів під час написання документів

Вживання здійснюється для таких цілей:

1. Надання статті завершеності та естетичності. Особливі знаки допомагають швидше зрозуміти розмірні величини або прочитати історичну назву латинською або грецькою мовою.
2. Деякі елементи забезпечують правильну розмітку документа. Наприклад, "" і "" відрізняються, перші передаються стандартними засобами, інші через спецсимволи.
3. Верстка документів математичної спрямованості неспроможна уникнути знань основних груп елементів.

Основні знаки

Матеріал дозволить знайти спеціальні символи у відповідному кодуванні для швидкого вставлення тексту.

Зовнішній вигляд	Позначення	HTML-код	CSS-код
☃	Сніговик	☃	\2603
☦	Православний хрест	☦	\2626
⚓	Якір	⚓	\2693
✆	Знак телефону	✆	\2706
☎	Телефон	☎	\260E
☕	Гарячі напої	☕	\2615
✎	Олівець, спрямований вправо-вниз	✎	\270E
✏	Олівець	✏	\270F
✐	Олівець, спрямований вправо-вгору	✐	\2710
✑	Незафарбоване вістря пера	✑	\2711
✒	Зафарбоване вістря пера	✒	\2712
⚜	Геральдична лілія	⚜	\269C
⛑	Шолом із білим хрестом	⛑	\26D1
⚝	Накреслена біла зірка	⚝	\269D
❄	Сніжинка	❄	\2744
❤	Зафарбоване жирне серце	❤	\2764
❅	Затиснута трилисниками сніжинка	❅	\2745
❆	Жирна гострокутна сніжинка	❆	\2746
★	Зафарбована зірка	★	\2605
☆	Незафарбована зірка	☆	\2606
✪	Незафарбована зірка у зафарбованому колі	✪	\272A
✫	Зафарбована зірка з незабарвленим колом всередині.	✫	\272B
✯	Зірка, що обертається	✯	\272F
❉	Зірочка з кулястими закінченнями	❉	\2749
❋	Жирна восьмикінцева краплеподібна зірочка-пропелер	❋	\274B
✲	Зірочка з незафарбованим центром	✲	\2732
☀	Зафарбоване сонце з променями	☀	\2600
☁	Хмари	☁	\2601
☂	Парасолька	☂	\2602
☑	Галочка у квадраті	☑	\2611
☒	Хрестик у квадраті	☒	\2612
☹	Похмурий смайлик	☹	\2639
☺	Усміхнений смайлик	☺	\263A
☻	Зафарбований усміхнений смайлик	☻	\263B
☭	Серп і молот	☭	\262D
⚑	Зафарбований прапор	⚑	\2691
⚐	Незафарбований прапор	⚐	\2690
☰	Триграма	☰	\2630
✿	Зафарбована квітка	✿	\273f
❀	Незафарбована квітка	❀	\2740
✾	Квітка з шістьма пелюстками	✾	\273E
❁	Зафарбована обведена квітка	❁	\2741
❂	Квітка з крапок	❂	\2742
✉	Конверт	✉	\2709
❦	Серце у вигляді квітки	❦	\2766
❶	Номер 1	❶	\2776
❷	Номер 2	❷	\2777
❸	Номер 3	❸	\2778
❹	Номер 4	❹	\2779
❺	Номер 5	❺	\277A
❻	Номер 6	❻	\277B
❼	Номер 7	❼	\277C
❽	Номер 8	❽	\277D
➒	Номер 9	➒	\2792
➓	Номер 10	➓	\2793
✖	Жирний знак множення	✖	\2716
✘	Жирний хрестик	✘	\2718
✔	Жирна позначка галочкою	✔	\2714
✚	Жирний хрест	✚	\271A
⚛	Символ атома	⚛	\269B
♺	Символ переробки	♺	\267A
❑	Незафарбований квадрат із правою нижньою тінню	❑	\2751
❒	Незафарбований квадрат із правою верхньою тінню	❒	\2752
◈	Діамант в оправі	◈	\25C8
◐	Коло з лівою зафарбованою половиною	◐	\25D0
◑	Коло із зафарбованою правою половиною	◑	\25D1
⁂	Три зірочки	⁂	\2042

Розділові знаки

Зовнішній вигляд	Позначення	HTML-код	CSS-код
<	Знак «менше ніж» (початок тега)	<	\003C
>	Знак «більше ніж» (кінець тега)	>	\003E
«	Ліва подвійна кутова дужка	«	\00AB
»	Права подвійна кутова дужка	»	\00BB
‹	Ліва кутова одиночна лапка	‹	\2039
›	Права кутова одиночна лапка	›	\203A
«	Подвійна лапка	"	\0022
′	Одиночний штрих	′	\2032
″	Подвійний штрих	″	\2033
‘	Ліва одиночна лапка	‘	\2018
’	Права одиночна лапка	’	\2019
‚	Нижня одиночна лапка	‚	\201A
“	Ліва подвійна лапка	“	\201C
”	Права подвійна лапка	”	\201D
„	Нижня подвійна лапка	„	\201E
❜	Жирна одинарна верхня кома	❜	\275C
❛	Жирна одинарна повернена верхня кома	❛	\275B
&	Амперсанд	&	\0026
‘	Апостроф (одинарна лапка)	"	\0027
§	Параграф	§	\00A7
©	Знак copyright		\00A9
¬	Знак заперечення	¬	\00AC
®	Знак зареєстрованої торгової марки	®	\00AE
¯	Знак довготи над голосним	¯	\00AF
°	Градус	°	\00B0
±	Плюс мінус	±	\00B1
¹	Верхній індекс "1"	¹	\00B9
²	Верхній індекс "2"	²	\00B2
³	Верхній індекс "3"	³	\00B3
¼	Одна чверть	¼	\00BC
½	Одна друга	½	\00BD
¾	Три чверті	¾	\00BE
´	Знак наголосу	´	\00B4
µ	Мікро	µ	\00B5
¶	Знак абзацу	¶	\00B6
·	Знак множення	·	\00B7
¿	Перевернутий знак питання	¿	\00BF
ƒ	Флорин знак	ƒ	\0192
™	Знак торгової марки	™	\2122
	Маркер списку	.	\2022
…	Багатокрапка	…	\2026
‾	Надкреслення	‾	\203E
–	Середнє тире	-	\2013
-	Довге тире	—	\2014
‰	Проміле	‰	\2030
}	Права фігурна дужка	}	\007D
{	Ліва фігурна дужка	{	\007B
=	Знак рівності	=	\003D
≠	Знак нерівності	≠	\2260
≅	Конгруентність (геометрична рівність)	≅	\2245
≈	Майже одно	≈	\2248
≤	Менше ніж чи одно	≤	\2264
≥	Більш ніж чи одно	≥	\2265
∠	Кут	∠	\2220
⊥	Перпендикулярно (кнопка догори)	⊥	\22A5
√	Квадратний корінь	√	\221A
∑	N-ічне підсумовування	∑	\2211
∫	Інтеграл	∫	\222B
※	Знак виноски	※	\203B
÷	Знак поділу	÷	\00F7
∞	Знак нескінченності	∞	\221E
@	Символ собака	@	\0040
[	Ліва квадратна дужка	[	\005B
]	Права квадратна дужка	]	\005D

Стрілки

Зовнішній вигляд	Позначення	HTML-код	CSS-код
←	Стрілка вліво	←	\2190
	Стрілка вгору		\2191
→	Стрілка праворуч	→	\2192
↓	Стрілка вниз	↓	\2193
↔	Стрілка вліво-вправо	↔	\2194
↵	Стрілка вниз та вліво – знак повернення каретки	↵	\21B5
⇐	Подвійна стрілка вліво	⇐	\21D0
⇑	Подвійна стрілка вгору	⇑	\21D1
⇒	Подвійна стрілка праворуч	⇒	\21D2
⇓	Подвійна стрілка вниз	⇓	\21D3
⇔	Подвійна стрілка вліво-вправо	⇔	\21D4
➠	Летяча стріла	➠	\27A0
➤	Наконечник стріли	➤	\27A4
➥	Вигнута стріла, що вказує вниз і праворуч	➥	\27A5
➦	Вигнута стріла, що вказує вгору та вправо	➦	\27A6
➳	Стріла праворуч	➳	\27B3
↺		↺	\21BA
↻	Кругла стрілка з наконечником проти годинникової стрілки	↻	\21BB
⇧	Товста порожня стрілка вгору	⇧	\21E7
↩	Стрілка ліворуч з гачком	↩	\21A9
➫	Нахилена вниз об'ємна стрілка	➫	\27AB
⬇	Зафарбована стрілка вниз	⬇	\2B07
⬆	Зафарбована стрілка вгору	⬆	\2B06

Карткові масті, знаки зодіаку та значки валют

Зовнішній вигляд	Позначення	HTML-код	CSS-код
♠	«Піки»	♠	\2660
♣	«Трефи»	♣	\2663
	«Черви»		\2665
♦	«Бубни»	♦	\2666
♡	Контур «Черви»	♡	\2661
♢	Контур «Бубни»	♢	\2662
♤	Контур «Піки»	♤	\2664
♧	Контур «Трефи»	♧	\2667
¢	Цент	¢	\FFE0
£	Фунт стерлінгів	£	\FFE1
₽	Російський рубль	₽	\20BD
¥	Єна чи юань	¥	\00A5
€	Євро	€	\20AC
$	Долар	$	\0024
₴	Знак гривні	₴	\20B4
₹	Індійська рупія	₹	\20B9
圓	Китайський юань	圓	\5713
₸	Казахстанський тенге	₸	\20B8
♈	Овен	♈	\2648
♉	Телець	♉	\2649
♊	Близнюки	♊	\264A
♋	Рак	♋	\264B
♌	Лев	♌	\264C
♍	Діва	♍	\264D
♎	Терези	♎	\264E
♏	Скорпіон	♏	\264F
♐	Стрілець	♐	\2650
♑	Козеріг	♑	\2651
♒	Водолій	♒	\2652
♓	Риби	♓	\2653

Грецька абетка

Літера	малі		великі
	символ	html-код	символ	html-код
альфа	α	α	Α	Α
бета	β	β	Β	Β
гамма	γ	γ	Γ	Γ
дельта	δ	δ	Δ	Δ
епсілон	ε	ε	Ε	Ε
діта	ζ	ζ	Ζ	Ζ
ця	η	η	Η	Η
тіта	θ	θ	Θ	Θ
йота	ι	ι	Ι	Ι
каппа	κ	κ	Κ	Κ
лямбда	λ	λ	Λ	Λ
мю	μ	μ	Μ	Μ
ню	ν	ν	Ν	Ν
кси	ξ	ξ	Ξ	Ξ
омікрон	ο	ο	Ο	Ο
пі	π	π	Π	Π
ро	ρ	ρ	Ρ	Ρ
сигма	σ	σ	Σ	Σ
остаточна сигма	ς	ς
тау	τ	τ	Τ	Τ
іпсилон	υ	υ	Υ	Υ
фі	φ	φ	Φ	Φ
хі	χ	χ	Χ	Χ
пси	ψ	ψ	Ψ	Ψ
омега	ω	ω	Ω	Ω

Як вживати на практиці

Незалежно від CMS, додавання статті виконується за допомогою візуального редактора та HTML версії. Усі спеціальні символи в кодуванні можна вставити лише у другому випадку. Щоб правильно скористатися інструментами, рекомендується взяти на замітку таблиці, де показаний код і зовнішнє уявлення.

Звертаємо увагу, якщо вставити знак у візуальному поданні статті, то HTML відбудеться перетворення елемента у відповідний код. При врученні інформації враховуйте регістр, який впливає на кінцевий результат.

Спецсимволи HTML - це спеціальні мовні конструкції, які посилаються на символи з набору символів, які використовуються у текстових файлах. У таблиці наведено список зарезервованих та спеціальних символів, які не можуть бути додані у вихідний код HTML-документа за допомогою клавіатури:

• символи, які неможливо ввести за допомогою клавіатури (наприклад, символ копірайту)
• символи призначені для розмітки (наприклад, знак більше або менше)

Такі символи додаються за допомогою коду чи імені.

Символ	Числовий код	Ім'я символу	Опис
"	"	"	знак лапки
"	"	"	апостроф
&	&	&	амперсанд
<		<	знак менший
>	>	>	знак більше
			нерозривний пробіл (Нерозривний пробіл - це пробіл, що відображається всередині рядка як звичайний пробіл, але не дозволяє програмам відображення та друку розірвати рядок у цьому місці.)
¡	¡	¡	перевернутий знак оклику
¢	¢	¢	цент
£	£	£	фунт
¤	¤	¤	валюти
¥	¥	¥	ієн
¦	¦	¦	зламана вертикальна риса
§	§	§	секція
¨	¨	¨	інтервал (кирилиця)
	©		знак копірайту
ª	ª	ª	жіночий порядковий показник
«	«	«	французькі лапки (ялинки) - ліва
¬	¬	¬	заперечення-вираження
®	®	®	зареєстрована торгова марка
¯	¯	¯	макрон інтервал
°	°	°	градус
±	±	±	плюс чи мінус
²	²	²	верхній індекс 2
³	³	³	верхній індекс 3
´	´	´	гострий інтервал
µ	µ	µ	мікро
¶	¶	¶	параграф
·	·	·	середня точка
¸	¸	¸	інтервал седилю
¹	¹	¹	верхній індекс 1
º	º	º	чоловічий порядковий показник
»	»	»	французькі лапки (ялинки) - права
¼	¼	¼	1/4 частина
½	½	½	1/2 частина
¾	¾	¾	3/4 частини
¿	¿	¿	перевернутий знак питання
×	×	×	множення
÷	÷	÷	поділ
́	́		наголос
Œ	Œ	Œ	лігатура велика OE
œ	œ	œ	рядкова лігатура oe
Š	Š	Š	S з короною
š	š	š	мала S з короною
Ÿ	Ÿ	Ÿ	велика Y з діадемою
ƒ	ƒ	ƒ	f з гаком
ˆ	ˆ	ˆ	дикріатичний акцент
˜	˜	˜	маленька тільда
–	–	-	тире
—	—	—	довге тире
‘	‘	‘	ліва одиночна лапка
’	’	’	права одиночна лапка
‚	‚	‚	нижня одиночна лапка
“	“	“	ліві подвійні лапки
”	”	”	праві подвійні лапки
„	„	„	нижні подвійні лапки
†	†	†	кинджал
‡	‡	‡	подвійний кинжал
		.	куля
…	…	…	горизонтальна крапка
‰	‰	‰	проміле (тисячні частки)
′	′	′	хвилини
″	″	″	секунди
‹	‹	‹	одиночна ліва кутова лапка
›	›	›	одиночна права кутова лапка
‾	‾	‾	підкреслення
€	€	€	євро
™	™ або	™	торгова марка
←	←	←	стрілка вліво
			стрілка вгору
→	→	→	стрілка вправо
↓	↓	↓	стрілка вниз
↔	↔	↔	двостороння стрілка
↵	↵	↵	стрілка повернення каретки
⌈	⌈	⌈	лівий верхній кут
⌉	⌉	⌉	правий верхнійкут
⌊	⌊	⌊	лівий нижній кут
⌋	⌋	⌋	правий нижній кут
◊	◊	◊	ромб
♠	♠	♠	піки
♣	♣	♣	хрести
			черв'яки
♦	♦	♦	бубі

Математичні символи, що підтримуються в HTML

Символ	Числовий код	Ім'я символу	Опис
∀	∀	∀	для будь-яких, для всіх
∂	∂	∂	частина
∃	∃	∃	існує
∅	∅	∅	порожня безліч
∇	∇	∇	оператор Гамільтона ("набла")
∈	∈	∈	належить безлічі
∉	∉	∉	не належить множині
∋	∋	∋	або
∏	∏	∏	твір
∑	∑	∑	сума
−	−	−	мінус
∗	∗	∗	множення або оператор поєднаний до
×	×	×	знак множення
√	√	√	квадратний корінь
∝	∝	∝	пропорційність
∞	∞	∞	нескінченність
⋮	⋮		кратність
∠	∠	∠	кут
∧	∧	∧	і
∨	∨	∨	або
∩	∩	∩	перетин
∪	∪	∪	об'єднання
∫	∫	∫	інтеграл
∴	∴	∴	тому
∼	∼	∼	подібно
≅	≅	≅	порівняно
≈	≈	≈	приблизно одно
≠	≠	≠	не дорівнює
≡	≡	≡	ідентично
≤	≤	≤	менше або дорівнює
⩽	⩽ ⩽	⩽ ⩽	менше або дорівнює
≥	≥	≥	більше або дорівнює
⩾	⩾ ⩾	⩾ ⩾	більше або дорівнює
⊂	⊂	⊂	підмножина
⊃	⊃	⊃	надмножин
⊄	⊄	⊄	не підмножина
⊆	⊆	⊆	підмножина
⊇	⊇	⊇	надмножина
⊕	⊕	⊕	пряма сума
⊗	⊗	⊗	тензерний твір
⊥	⊥	⊥	перпендикуляр
⋅	⋅	⋅	оператор точка

Грецька та коптська алфавіти

Символ	Числовий код	Шістнадцятковий код	Ім'я символу
Ͱ	Ͱ	Ͱ
ͱ	ͱ	ͱ
Ͳ	Ͳ	Ͳ
ͳ	ͳ	ͳ
ʹ	ʹ	ʹ
͵	͵	͵
Ͷ	Ͷ	Ͷ
ͷ	ͷ	ͷ
ͺ	ͺ	ͺ
ͻ	ͻ	ͻ
ͼ	ͼ	ͼ
ͽ	ͽ	ͽ
;	;	;
΄	΄	΄
΅	΅	΅
Ά	Ά	Ά
·	·	·
Έ	Έ	Έ
Ή	Ή	Ή
Ί	Ί	Ί
Ό	Ό	Ό
Ύ	Ύ	Ύ
Ώ	Ώ	Ώ
ΐ	ΐ	ΐ
Α	Α	Α	Α
Β	Β	Β	Β
Γ	Γ	Γ	Γ
Δ	Δ	Δ	Δ
Ε	Ε	Ε	Ε
Ζ	Ζ	Ζ	Ζ
Η	Η	Η	Η
Θ	Θ	Θ	Θ
Ι	Ι	Ι	Ι
Κ	Κ	Κ	Κ
Λ	Λ	Λ	Λ
Μ	Μ	Μ	Μ
Ν	Ν	Ν	Ν
Ξ	Ξ	Ξ	Ξ
Ο	Ο	Ο	Ο
Π	Π	Π	Π
Ρ	Ρ	Ρ	Ρ
Σ	Σ	Σ	Σ
Τ	Τ	Τ	Τ
Υ	Υ	Υ	Υ
Φ	Φ	Φ	Φ
Χ	Χ	Χ	Χ
Ψ	Ψ	Ψ	Ψ
Ω	Ω	Ω	Ω
Ϊ	Ϊ	Ϊ
Ϋ	Ϋ	Ϋ
ά	ά	ά
έ	έ	έ
ή	ή	ή
ί	ί	ί
ΰ	ΰ	ΰ
α	α	α	α
β	β	β	β
γ	γ	γ	γ
δ	δ	δ	δ
ε	ε	ε	ε
ζ	ζ	ζ	ζ
η	η	η	η
θ	θ	θ	θ
ι	ι	ι	ι
κ	κ	κ	κ
λ	λ	λ	λ
μ	μ	μ	μ
ν	ν	ν	ν
ξ	ξ	ξ	ξ
ο	ο	ο	ο
π	π	π	π
ρ	ρ	ρ	ρ
ς	ς	ς	ς
σ	σ	σ	σ
τ	τ	τ	τ
υ	υ	υ	υ
φ	φ	φ	φ
χ	χ	χ	χ
ψ	ψ	ψ	ψ
ω	ω	ω	ω
ϊ	ϊ	ϊ
ϋ	ϋ	ϋ
ό	ό	ό
ύ	ύ	ύ
ώ	ώ	ώ
Ϗ	Ϗ	Ϗ
ϐ	ϐ	ϐ
ϑ	ϑ	ϑ	ϑ
ϒ	ϒ	ϒ	ϒ
ϓ	ϓ	ϓ
ϔ	ϔ	ϔ
ϕ	ϕ	ϕ	ϕ
ϖ	ϖ	ϖ	ϖ
ϗ	ϗ	ϗ
Ϙ	Ϙ	Ϙ
ϙ	ϙ	ϙ
Ϛ	Ϛ	Ϛ
ϛ	ϛ	ϛ
Ϝ	Ϝ	Ϝ	Ϝ
ϝ	ϝ	ϝ	ϝ
Ϟ	Ϟ	Ϟ
ϟ	ϟ	ϟ
Ϡ	Ϡ	Ϡ
ϡ	ϡ	ϡ
Ϣ	Ϣ	Ϣ
ϣ	ϣ	ϣ
Ϥ	Ϥ	Ϥ
ϥ	ϥ	ϥ
Ϧ	Ϧ	Ϧ
ϧ	ϧ	ϧ
Ϩ	Ϩ	Ϩ
ϩ	ϩ	ϩ
Ϫ	Ϫ	Ϫ
ϫ	ϫ	ϫ
Ϭ	Ϭ	Ϭ
ϭ	ϭ	ϭ
Ϯ	Ϯ	Ϯ
ϯ	ϯ	ϯ
ϰ	ϰ	ϰ	ϰ
ϱ	ϱ	ϱ	ϱ
ϲ	ϲ	ϲ
ϳ	ϳ	ϳ
ϴ	ϴ	ϴ
ϵ	ϵ	ϵ	ϵ
϶	϶	϶	϶
Ϸ	Ϸ	Ϸ
ϸ	ϸ	ϸ
Ϲ	Ϲ	Ϲ
Ϻ	Ϻ	Ϻ
ϻ	ϻ	ϻ
ϼ	ϼ	ϼ
Ͻ	Ͻ	Ͻ
Ͼ	Ͼ	Ͼ
Ͽ	Ͽ	Ͽ

Навіщо потрібні спецсимволи та як ними користуватися

Припустимо, ви вирішили описати який-небудь тег на вашій сторінці, але оскільки браузер використовує символи< и >як початок і кінець тега, застосування їх усередині вмісту вашого HTML-коду може призвести до проблем. Але HTML дає вам легкий спосіб визначати ці та інші спеціальні символи за допомогою простих абревіатур, які називаються посиланнями на символи.

Розглянемо як це працює. Для кожного символу, який вважається спеціальним або який ви хочете використовувати на своїй веб-сторінці, але який неможливо надрукувати у вашому редакторі (наприклад, символ авторського права), ви знаходите абревіатуру та друкуєте її в HTML-коді замість потрібного символу. Наприклад, для символу ">" абревіатура - > , а для символу "<" - < .

Допустимо, ви хотіли надрукувати «Елемент дуже важливий» на своїй сторінці. Натомість вам доведеться скористатися посиланнями на потрібні вам символи для коректного відображення запису, і в результаті ваш запис у коді повинен виглядати так:

Елемент дуже важливий

Спробувати »

Ще один спеціальний символ, про який вам потрібно знати – символ & (амперсанд). Якщо ви хочете, щоб він відображався на HTML-сторінці, використовуйте посилання & замість символу &.

Сьогодні ви дізнаєтесь як зробити чекбокс на HTMLі додати йому CSSстилів для кращої сумісності із дизайном сайту.

Демонстрація

Чекбокс на HTML

Створимо блок із чотирма чекбоксами, перший буде відзначений – із галочкою. Кожен чекбокс буде поміщений у тег label, всередині якого поле для введення тексту та елементу span, який має бути стилізувати.

Один

Два

Три

Чотири

Тег labelслужить контейнером для кожного чекбокса, для наочності я тимчасово поставив червону рамку тегу label. Коли мало досвіду, це хороший спосіб побачити межі будь-якого тега, щоб не діяти наосліп.

CSS для чекбокс

Рядковий тег label, замінимо на блоковий (Display: block)щоб чекбокси, встали один під одним, user-select: none- Забороняє користувачеві виділяти елемент.

Container (
display: block;
user-select: none;
}

Цей код ховає дефолтні стилі браузерні для чекбокса. Ми робимо елемент повністю прозорим за рахунок opacity, widthі heightз нульовим значенням і їх місці, задаємо кастомні стилі для чекбокса.

Container input (
opacity: 0;
height: 0;
width: 0;
}

Створюємо кастомні чекбокси. Змінюємо розміри та колір фону.

Checkmark (
height: 23px;
width: 22px;
background-color: #eec321;
}

При наведенні курсору, робимо колір тла трохи темнішим.

Container:hover input ~ .checkmark (
background-color: #ccc678;
}

Для зазначеного чекбоксу задаємо інший колір для фону.

Container input:checked ~ .checkmark (
background-color: #2196f3;
}

Ховаємо галочку для не зазначених чекбоксів, застосувавши псевдоелемент after.

Checkmark:after (
content: "";
position: absolute;
display: none;
}

Робимо видиму галочку, тільки для зазначених чекбоксів.

Container input:checked ~ .checkmark:after (
display: block;
}

Малюємо та стилізуємо галочку. Галочку ми малюємо на чистому CSS. Зобразимо прямокутник з білою рамкою, у двох сторін прямокутника, рамки немає (нульова ширина), виходить прямокутний кут, ми повертаємо його на 45 градусів і виходить галочка.

Машинописний текст складається з друкованих знаків – графічних символів.
Графічні символи - це символи, що мають у тексті видиме відображення.
Усі графічні символи зібрані у наборі єдиної універсальної системи Юнікод.
Вставити графічний символ Юнікод у html-документ
- головне та єдине призначення для цієї таблиці.

Вставити символ у html-документ можна одним із способів:

1. скопіювати зображення символу із вікна браузера у вікно свого візуального html-редактора
2. скопіювати html-код символу безпосередньо в код html-документа

Вгамовуємо, що це два різні способи:

1. вставляти візуальне у візуальне
2. вставляти код у код.

Шрифт для символу, його розмір і колір HTML можна задати кодом, виду:
КОД_СІМВОЛА
де,
Arial - шрифт,
10px - розмір шрифту в пікселях,
#ff0000 - код кольору шрифту (червоний)

Наприклад:
☎ - розмір шрифту символу 30px,
☎ - розмір шрифту символу 30px, колір - червоний
☎ - розмір шрифту символу 20px,
☎ – розмір шрифту символу 10px.
Прим. Рекомендовані шрифти для вставки спецсимволів - Arial, Verdana та Tahoma. Ці шрифти коректно відображають символи Юнікод і самі, у свою чергу, коректно підтримуються веб-додатками.

1. «Символ»
   (видиме відображення символу)
   З цієї графи можна скопіювати зображення символу та вставити його у вікно текстового html-редактора. Символ скопіюється з розміром шрифту 20px. Після завершення копіювання може знадобитися індивідуальне припасування розміру шрифту безпосередньо для скопійованого знака.
2. «Найменування»
   (тільки для важливих чи незрозумілих символів)
   Пояснення призначення символу, його сфера застосування, приклади...
3. «Мнемоніка»
   Мнемоніка - це буквена конструкція виду", що позначає буквений код символу в HTML. Вставляється безпосередньо в html-код html-документа. ) свого символу і службовий знак (&), який служить сигналом до прочитання коду для браузера і не відображається на екрані монітора.

   Мнемоніка (грец.) - Мистецтво запам'ятовувати що-небудь. Мнемотехніка застосовується для полегшення сприйняття інформації, що важко запам'ятовується, коли об'єкт запам'ятовування приводиться в асоціативний стан з чим-небудь.

4. «Код»
   Код - числовий десятковий код символу HTML, виду &. Вставляється безпосередньо в HTML-код HTML-документа. Числовий десятковий код складається з числа, що позначає порядковий номер символу в системі Юнікод і кількох службових знаків (& і #), які є сигналом до прочитання коду для браузера і не відображаються на екрані монітора. Числовий десятковий код має широке поширення та застосування, завдяки своїй універсальності та простоті сприйняття.

Символи керування в HTML (XHTML)

Символи керування в HTML (XHTML) – це службові символи HTML-мови, які використовуються при HTML-верстці веб-сторінки. Ці символи повинні підтримувати будь-який браузер, оскільки без них неможливе правильне відображення HTML-тексту. Символи керування не відображаються в тексті і, при прямому введенні з клавіатури - інтерпретуються браузером як розділові знаки, що закликають до виконання будь-якої дії при відображенні сторінки на екрані.

Дозволяється використовувати символи управління у звичайних текстах, де вони символізують загальнолюдські поняття та трактуються браузером як звичайні друкарські знаки. У разі використання службових символів у HTML-текстах потрібно вводити не значення самого символу, саме його HTML-код. Бо, повторюю - інакше браузер сприйматиме службовий символ, як заклик до дії і не коректно відображатиме HTML-текст на екрані монітора.

Символи керування та їх HTML-код знають і розуміють всі браузери без винятку, чого не можна сказати, на жаль - про інші знаки, які можуть відображатися некоректно в різних браузерах або, що ще гірше, - не відображатися зовсім.

Синтаксис та пунктуація

	пропуск довжини N (звичайний пропуск)
	пробіл довжини M (довга пробіл)
-	м'яке перенесення (недрукований знак)			-	­
‑	дефіс				– ‑
-	тире довжини N (звичайне тире)			-	–
—	тире довжини M (довге тире)			—	—
.	крапка				.
,	кома				,
…	багатокрапка			…	…
:	двокрапка				:
;	крапка з комою				;
!	знак оклику				! ǃ
?	знак запитання				?
@	«собачка»				@
*	«зірочка»				*
#	«решітка»				#
‘	одиночна верхня ліва лапка			‘	‘ ‘
’	одиночна верхня права лапка			’	’ ’
‚	одиночна нижня права лапка			‚	‚ ‚
“	подвійна верхня ліва лапка			“	“ “
”	подвійна верхня права лапка			”	” ”
„	подвійна нижня права лапка			&bdquo	„ „
«	подвійна ліва кутова лапка (рус)			«	«
»	подвійна права кутова лапка (рус)			»	»
́	знак наголосу, приклад: Вася́				́
"	апостроф, приклад: Вас"я				"
´	акут, приклад: Вася			´	´
¶	абзац (недрукований знак)			¶	¶
§	параграф			§	§
ˆ	акцент (перевернута пташка)			ˆ	ˆ ˆ
˜	мала тільда			˜	˜ ˜
¦	вертикальний пунктир			¦	¦
(	кругла дужка вліво				(
)	кругла дужка праворуч				)
〈	кутова дужка вліво			〈	〈
〉	кутова дужка вправо			〉	〉
‹	кутова дужка вліво, варіант			‹	‹
›	кутова дужка вправо, варіант			›	›
[	квадратна дужка вліво				[
]	квадратна дужка праворуч				]
/	слеш (slash) - символ косої межі				/
\	зворотний слеш (backslash)				\
⁄	коса дробова риса (знак поділу)			⁄	⁄
ǀ	вертикальна риса				ǀ
ǁ	подвійна вертикальна характеристика				ǁ
‾	накреслення, приклад: Вася‾вася			‾	‾
¯	macron, приклад: Вася?вася			¯	¯

Товарні знаки та валюта

+	плюс			+	+
−	мінус			−	- −
=	одно				=
±	плюс мінус			±	±
×	знак множення			×	×
÷	знак розподілу			÷	÷
⋅	оператор «точка» (середина рядка)			⋅	· ⋅
∗	оператор «зірочка» (середина рядка)			∗	∗
∼	оператор «Тільда»			∼	∼
.	маркер списку (середина рядка)			.	•
¹	верхній індекс "1"			¹	¹
²	верхній індекс "2"			²	²
³	верхній індекс "3"			³	³
Надрядковий та підрядковий індекс у HTML (XHTML) можна вставити за допомогою тегів і відповідно: ЧИСЛО Надрядковий індекс→ ЧИСЛО Надрядковий індекс ЧИСЛО Підрядковий індекс→ ЧИСЛО Підрядковий індекс
½	дріб «одна друга»			½	½
⅓	дріб «одна третина»				⅓
¼	дріб «одна четверта»			¼	¼
¾	дріб «три чверті»			¾	¾
№	знак номера				№
%	відсоток				%
‰	проміле			‰	‰ ‰
°	градуси			°	°
′	штрих (хвилини, фути)			′	′
″	подвійний штрих (секунди, дюйми) Приклад 1: 30° 25′ 12″ Приклад 2: 25′ 12 ″			″	″
µ	мікро			µ	µ
π	Пі			π	π
ƒ	знак функції (Не плутати з «інтеграл»)			ƒ	ƒ ƒ
∫	інтеграл			∫	∫
∅	перекреслений нуль, порожня множина (Не плутати з «діаметр»)			∅	∅
⌀	діаметр (не плутати з перекресленою латинською «про»)				⌀
ø	латинська "o" діагонально перекреслена			ø	ø
Ø	латинська заголовна "O" діагонально перекреслена			Ø	Ø
∏	знак твору			∏	∏
∑	знак підсумовування			∑	∑
√	радикал (квадратний корінь або корінь ступеня x)			√	√
∝	пропорційно			∝	∝
∞	нескінченність			∞	∞
∠	кут			∠	∠
⊥	ортогонально (перпендикулярно)			⊥	⊥
∴	знак «відтак»			∴	∴
≅	приблизно одно			≅	≅
≈	майже одно			≈	≈
≠	не дорівнює			≠	≠
≡	ідентично			≡	≡
≤	менше або дорівнює			≤	≤
≥	більше або дорівнює			≥	≥
∧	логічне І			∧	∧
∨	логічне АБО			∨	∨
⊕	знак «плюс у колі» (Пряма сума)			⊕	⊕
⊗	знак «множення у колі» (Векторний твір, стріла від спостерігача)			⊗	⊗
ʘ	точка у колі (Стріла на спостерігача)				ʘ

				✵ ✵

Символ галочка не представлений на клавіатурі, але за допомогою спеціальних комбінацій його можна легко додати у повідомлення, пост або текстовий документ.

Розглянемо докладніше, як це можна зробити.

Види галочок + використання

Значок галочка (пташка, галка) – це спеціальний значок, який часто використовується для опису підтвердження чогось.

Може зустрічатися в оформленні перерахувань чи підкреслень думки. Прочитавши наступні інструкції, знайти та використовувати символ ви зможете самостійно.

Найпростіший варіант – це копіювання об'єкта із цієї статті. Існує кілька видів значок:

Якщо вам знадобилася галка для використання в одному реченні або фразі, просто скопіюйте елемент, що сподобався, за допомогою його виділення та поєднання клавіш CTRL і C на клавіатурі.

Щоб набрати пташку на клавіатурі самостійно, необхідно використовувати кодування Unicode. Наберіть букву U та + . Потім потрібно набрати код піктограми.

Цифрові позначення для різних видів галочок бувають такими: 2713 (звичайний знак), 2714 (напівжирний шрифт), 2705 (галочка у квадраті виділена), 2611 (у квадраті звичайна).

Якщо комбінація U +2713 або інша не перетворюється автоматично на галочку, швидше за все, у документі не налаштовано автоматичне розпізнавання символів Юнікоду або ви вводите код неправильно.

У текст одразу перетворюватиметься на потрібний знак, тому ви можете сміливо набирати його в повідомленнях та різних постах.

Значок у MS Word

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

Піктограма галочки може знадобитися в процесі оформлення списку завдань, перерахування.

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

Все можна зробити набагато простіше. Щоб поставити галку у Ворді, виконайте наступні кроки.

• Відкрийте документ у програмі будь-якої версії. Залежно від року випуску програмного забезпечення розташування потрібних вкладок може відрізнятися;
• Клацніть на розділ «Вставка»;
• У правій частині панелі інструментів знайдіть пункт «Символ» та натисніть на нього;
• У вікні, що випадає, клікніть на «Інші символи».

• У спливаючому вікні ви можете знайти галочку, скориставшись одним із двох способів. Виберіть набір «Dingbats» і в запропонованому списку натисніть на потрібний елемент або в нижній частині віконця введіть код елемента в Юнікод (шістнадцяткова). Наприклад, 2714. Ворд автоматично знайде об'єкт, який вам потрібний. Клацніть на нього та підтвердіть дію, натиснувши на «ОК» .

Рис.3 – спеціальні символи у Ворді

Після додавання галочки до тіла документа ви зможете застосувати до неї будь-яке форматування: змінити колір, шрифт, тип заголовка та інші опції.