Назария

Рангҳо ва ҳарфҳо

Ин барои чӣ лозим аст

Ранг ва ҳарф — аввалин чизе, ки одам дар сайт мебинад. Аз рӯи онҳо брендро мешиносанд (YouTube-и сурх, Spotify-и сабз), аз онҳо вобаста аст, ки матнро хондан осон аст ё не. Типографияи хуб (ороиши матн) ноаён аст: хондан танҳо гуворо аст. Бад — дар як дақиқа хаста мекунад.

Рангро чӣ тавр навиштан

Як рангро бо роҳҳои гуногун навиштан мумкин:

h1 { color: red; }                 /* бо ном: red, blue, gold, tomato… (тақрибан 140 ном) */
h1 { color: #ff0000; }             /* HEX: рамзи шонздаҳӣ */
h1 { color: #f00; }                /* HEX-и кӯтоҳ: ҳар рақам дучанд мешавад */
h1 { color: rgb(255, 0, 0); }      /* RGB: сурх, сабз, кабуд аз 0 то 255 */
h1 { color: rgba(255, 0, 0, 0.5); } /* RGB + шаффофият аз 0 то 1 */
h1 { color: hsl(0, 100%, 50%); }   /* HSL: тобиш, сершавӣ, равшанӣ */

Натиҷа: ҳамаи шаш сатр ранги сурх медиҳанд; панҷум — сурхи нимшаффоф.

HEX-ро чӣ тавр хондан. #RRGGBB — се ҷуфт рақам: чӣ қадар нури сурх, сабз ва кабуд. Рақамҳо шонздаҳӣ мебошанд: 0…9, баъд a…f (f = 15). 00 — сифр, ff — ҳадди аксар (255).

HEX	Ранг
`#000000`	сиёҳ (ҳама хомӯш)
`#ffffff`	сафед (ҳама дар ҳадди аксар)
`#ff0000`	сурх
`#00ff00`	сабз
`#0000ff`	кабуд
`#808080`	хокистарӣ (ҳама баробар, нисф)

Рамзи рангро одатан аз дизайн ё аз «пипетка»-и муҳаррири графикӣ мегиранд.

Замина

body { background-color: #f5f5f5; }
.hero { background: linear-gradient(to right, purple, orange); }

Натиҷа: саҳифаи хокистарии равшан; блоки .hero бо гузариши ҳамвор аз бунафш ба норанҷӣ.

background — хусусияти «умумӣ»: дар он ҳам ранг, ҳам градиент, ҳам расм додан мумкин (background: url(bg.jpg);).

Шаффофият

Дар rgba адади чорум — канали алфа: 1 — ношаффоф, 0 — пурра шаффоф.

.overlay { background: rgba(0, 0, 0, 0.5); }

Натиҷа: торикии нимшаффоф — аз байни он чизи поёнӣ намоён аст.

Инчунин хусусияти opacity: 0.5; ҳаст — аммо он тамоми унсурро якҷоя бо матн шаффоф мекунад, rgba бошад — танҳо он рангеро, ки дар он нишон дода шудааст.

Ҳарфҳо

body {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;   /* 400 — оддӣ, 700 — ғафс */
  font-style: italic; /* курсив */
  line-height: 1.5;   /* фосилаи байни сатрҳо */
}

font-family — рӯйхати ҳарфҳо бо вергул. Браузер аввалинеро мегирад, ки дар компютер ҳаст. Охирин оила-ро менависанд: serif (нӯгдор), sans-serif (бе нӯг), monospace (якхелапаҳно). Номи аз якчанд калима иборат — дар нохунак.
font-weight — ғафсӣ бо адад аз 100 то 900 ё калимаи bold.
line-height: 1.5 — масофаи байни сатрҳо 1,5 баробар аз андозаи ҳарф зиёд. Барои матни асосӣ 1.4–1.7 қулай аст.

Ороиши матн

h2 {
  text-align: center;          /* left, right, center, justify */
  text-transform: uppercase;   /* ҲАМА КАЛОН; lowercase; capitalize */
  letter-spacing: 2px;         /* масофаи байни ҳарфҳо */
  text-decoration: underline;  /* underline, line-through, none */
}

Натиҷа: сарлавҳа дар марказ, бо ҳарфҳои калон, ҳарфҳо каме дуртар ва зерхатдор.

text-decoration: none-ро аксар вақт ба истинодҳо мегузоранд, то зерхатро нест кунанд, ва ҳангоми овардани муш (a:hover) онро бармегардонанд.

Дар дохил чӣ тавр кор мекунад

Экран аз пикселҳо иборат аст, ҳар пиксел — се лампочка: сурх, сабз ва кабуд. Ҳар формати рангро браузер ба се адади 0–255 табдил медиҳад. Бинобар ин дар абзорҳои барномасоз (ва дар санҷиши масъалаҳо) ранги #ff0000 чун rgb(255, 0, 0) нишон дода мешавад.

Бо ҳарфҳо чунин аст: агар ҳарфи рӯйхат дар компютер набошад, браузер хомӯшона навбатиро мегирад. Бинобар ин рӯйхат ҳамеша бо оилаи умумӣ анҷом меёбад — чизи монанд ҳамеша ёфт мешавад.

Хатоҳои маъмул

HEX бе панҷара. color: ff0000; кор намекунад. #ff0000 лозим аст.
Ҳарфи эҳтиётӣ нест. font-family: "Roboto"; — касоне, ки Roboto надоранд, ҳарфи пешфарзро мебинанд. , sans-serif илова кун.
Матни хокистарии равшан дар заминаи сафед. Зебо, аммо хондан ғайриимкон. Матн бояд аз замина хеле фарқ кунад.
line-height: 16px ба ҷои адад. Бо пиксел фосила бо ҳарф якҷоя калон намешавад. Адад бе воҳид навис: 1.5.
opacity ба ҷои rgba. Заминаи нимшаффоф мехостӣ — аммо матн ҳам шаффоф шуд.

Ёддошт

Хусусият / навишт	Чӣ кор мекунад
`red`, `#ff0000`, `#f00`, `rgb(255,0,0)`	ҳамон як сурх
`rgba(0,0,0,0.5)`	ранг бо шаффофият
`background`	замина: ранг, градиент, расм
`opacity`	шаффофияти тамоми унсур
`font-family: …, sans-serif`	ҳарф бо вариантҳои эҳтиётӣ
`font-size`, `font-weight`, `font-style`	андоза, ғафсӣ, курсив
`line-height: 1.5`	фосилаи байни сатрҳо
`text-align`, `text-transform`	баробаркунӣ, ҳарфҳои калон/хурд
`letter-spacing`, `text-decoration`	фосилаи ҳарфҳо, зерхат