Назария

Услубҳои CSS

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

HTML мегӯяд, ки дар саҳифа чӣ ҳаст: сарлавҳа, сархат, рӯйхат. Аммо чӣ тавр менамояд — рангҳо, ҳарфҳо, фосилаҳо, ҷойгиршавӣ — инро CSS (Cascading Style Sheets, «ҷадвалҳои каскадии услубҳо») тавсиф мекунад. Ҳамон як HTML бо CSS-и гуногун метавонад чун сайти ҷиддии бонк ё чун бозии рангоранг намояд.

Қоидаи CSS

CSS аз қоидаҳо иборат аст. Ҳар қоида:

p {
  color: blue;
  font-size: 20px;
}

p — интихобгар: ба кадом унсурҳо татбиқ кардан (дар ин ҷо — ба ҳамаи сархатҳо);
дар қавсҳои фигурӣ — эълонҳо;
color — хусусият (чиро иваз мекунем), blue — қимат (ба чӣ);
байни хусусият ва қимат — ду нуқта, дар охир — нуқтавергул.

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

Се роҳи пайваст кардани CSS

1. Атрибути style — мустақиман дар тег:

<p style="color: red;">Сархати сурх</p>

Барои озмоиш қулай, аммо барои сайт бад: услуб ба як унсур баста аст ва онро дубора истифода бурдан мумкин нест.

2. Теги <style> — дар <head>-и саҳифа (дар муҳаррири тарафи рост дар ҳар ҷо навиштан мумкин):

<style>
  h1 { color: purple; }
</style>
<h1>Сарлавҳаи бунафш</h1>

3. Файли алоҳида — дар сайтҳои ҳақиқӣ ҳамин тавр мекунанд:

<head>
  <link rel="stylesheet" href="style.css">
</head>

Дар файли style.css — танҳо қоидаҳои CSS, бе тегҳо. Як файли услубҳо ба ҳамаи саҳифаҳои сайт пайваст мешавад: рангро дар як ҷо иваз кардӣ — он дар ҳама ҷо иваз шуд.

Хусусиятҳои зарурӣ барои оғоз

h1 {
  color: white;            /* ранги матн */
  background: navy;        /* замина */
  font-size: 32px;         /* андозаи ҳарф */
  font-family: Arial, sans-serif; /* ҳарф */
  text-align: center;      /* баробаркунии матн */
}

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

Шарҳҳо дар CSS байни /* ва */ навишта мешаванд.

Каскад: кӣ ғолиб мешавад

Агар ду қоида як чизро диҳанд, чӣ мешавад?

p { color: red; }
p { color: green; }

Натиҷа: сархатҳо сабз. Дар шароити баробар қоидае ғолиб мешавад, ки дертар навишта шудааст. Ин ҳамон «каскад» аст — қоидаҳо гӯё аз боло ба поён мерезанд, поёниҳо болоиҳоро мепӯшонанд.

Услуб аз атрибути style="…" аз қоидаҳои <style> қавитар аст. Дар бораи қуввати интихобгарҳо — дар мавзӯи оянда.

Мерос

Бисёр хусусиятҳои матн (color, font-family, font-size) мерос гирифта мешаванд: агар онҳоро ба волид диҳӣ, фарзандон ҳамон қиматро мегиранд.

body {
  color: #333;
  font-family: Georgia, serif;
}

Натиҷа: тамоми матни саҳифа — хокистарии торик бо ҳарфи нӯгдор, гарчанде барои p, h1, li қоида нанавиштем.

Ҳама чиз мерос гирифта намешавад: замина, ҳошияҳо, фосилаҳо дар ҳар унсур аз худи он аст. Баъзе унсурҳо услубҳои пешфарзи худро доранд — истинод кабуд, сарлавҳаҳо ғафс. Онҳоро маҷбур кардан мумкин аст, ки қимати волидро гиранд: color: inherit;.

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

Браузер HTML-ро мехонад ва дарахти унсурҳоро месозад, баъд CSS-ро мехонад. Барои ҳар унсур ҳамаи қоидаҳои мувофиқро ҷамъ мекунад, барои ҳар хусусият ғолибро интихоб мекунад (каскад), қиматҳои меросиро мегузорад — ва услуби ниҳоӣ-ро мегирад. Онро дидан мумкин: тугмаи рости муш → «Санҷиши код» → ҷадвалчаи «Computed». Масъалаҳои ин курс маҳз услуби ниҳоиро месанҷанд.

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

;-ро фаромӯш карданд. color: red font-size: 20px; — браузер ҳеҷ кадоми хусусиятҳоро намефаҳмад.
Ду нуқта ба ҷои қавси фигурӣ ё баръакс. p: { … } ё p { color = red } — нодуруст.
Фосила дар қимат. font-size: 20 px; кор намекунад — адад ва воҳид якҷоя навишта мешаванд: 20px.
Хатои имлоӣ дар хусусият. colour, backround — браузер хомӯшона нодида мегирад. Агар услуб татбиқ нашуд, имлоро санҷ.
Қоидаҳои CSS дар .html бе <style>. h1 { … }-и бараҳна дар HTML танҳо матн дар саҳифа мешавад.

Ёддошт

Код	Чӣ кор мекунад
`интихобгар { хусусият: қимат; }`	қоидаи CSS
`style="…"`	услуб дар як унсур
`<style>…</style>`	услубҳо дар саҳифа
`<link rel="stylesheet" href="style.css">`	файли алоҳидаи услубҳо
`color`, `background`	ранги матн, замина
`font-size`, `font-family`, `text-align`	андоза, ҳарф, баробаркунӣ
`/* … */`	шарҳ
дертар навишта шуд — қавитар	каскад
`inherit`	қиматро аз волид гирифтан