CSS

1 📘 CSS შესავალი

CSS (Cascading Style Sheets) არის ენა, რომლითაც HTML დოკუმენტს ვაძლევთ გარეგნობას — ფერებს, განლაგებას, შრიფტებს, ანიმაციებს. HTML არის სტრუქტურა (ჩონჩხი), CSS კი დიზაინი (გარეგნობა).

რა არის CSS

CSS ნიშნავს Cascading Style Sheets (კასკადური სტილების ცხრილები). ის აღწერს, თუ როგორ უნდა გამოჩნდეს HTML ელემენტები ეკრანზე. ერთი CSS ფაილით შესაძლებელია ასობით გვერდის გარეგნობის ერთდროულად მართვა.

სიტყვა „კასკადური" ნიშნავს, რომ რამდენიმე წესის შეჯახებისას მოქმედებს პრიორიტეტის წესები (specificity), რომელიც განსაზღვრავს რომელი სტილი გაიმარჯვებს.

მაგალითები

პირველი CSS წესი

შეცვალე ფერი და ზომა — მარჯვნივ მაშინვე დაინახავ შედეგს.

HTML

<h1>გამარჯობა CSS!</h1>
<p>ეს არის ჩვეულებრივი პარაგრაფი.</p>

CSS

h1 {
  color: #2563eb;
  font-size: 32px;
}
p {
  color: gray;
}

👁 შედეგი (Live Preview)

💡 რჩევა: HTML = სტრუქტურა, CSS = დიზაინი, JavaScript = ქცევა. ეს სამი ერთად ქმნის ვებ-გვერდს.

რატომ CSS?

რატომ გამოიყენება CSS

CSS-მდე გარეგნობას უშუალოდ HTML-ში წერდნენ (მაგ. <font> ტეგით), რაც ქმნიდა გაუმართავ, განმეორებად კოდს. CSS-მა გამოაცალკევა შინაარსი დიზაინისგან:

ერთი ცვლილება — ასობით გვერდზე ვრცელდება;
კოდი უფრო სუფთა და მცირე ხდება;
გვერდი უფრო სწრაფად იტვირთება (ქეშირებადი ფაილი);
მარტივდება responsive (მობილური) დიზაინი.

✓ საუკეთესო პრაქტიკა

სტილი ყოველთვის ცალკე .css ფაილში გაიტანე, არა HTML-ში.
ერთი წყარო ჭეშმარიტებისთვის — ფერები და ზომები ცვლადებში შეინახე.

Inline CSS

Inline CSS იწერება პირდაპირ ელემენტის style ატრიბუტში. ის მოქმედებს მხოლოდ ამ ერთ ელემენტზე და აქვს ყველაზე მაღალი პრიორიტეტი (გარდა !important-ისა).

სინტაქსი

Syntax

<p style="color:red;">ტექსტი</p>

მაგალითები

Inline სტილი

სტილი პირდაპირ ელემენტზე.

HTML

<p style="color: white; background: #2563eb; padding: 10px;">
  Inline CSS პარაგრაფი
</p>

CSS

/* Inline CSS-ს არ სჭირდება აქ წესი —
   სტილი პირდაპირ HTML-შია */

👁 შედეგი (Live Preview)

💡 რჩევა: Inline CSS გამოიყენე მხოლოდ გამონაკლის შემთხვევებში (მაგ. ელფოსტის HTML-ში ან სწრაფ ტესტში).

✗ ხშირი შეცდომები

Inline-ის ჭარბი გამოყენება — კოდი ხდება გაუმართავი და განმეორებადი.
Inline ძნელად გადაფარვადია — ხშირად იძულებული ხდები !important გამოიყენო.

Internal CSS

Internal (ან embedded) CSS იწერება HTML დოკუმენტის <head>-ში, <style> ტეგის შიგნით. მოქმედებს მთელ ამ ერთ გვერდზე.

სინტაქსი

Syntax

<head>
  <style>
    p { color: blue; }
  </style>
</head>

მაგალითები

Internal style ბლოკი

ერთი გვერდისთვის განკუთვნილი სტილი.

HTML

<button class="btn">ღილაკი</button>

CSS

.btn {
  background: #16a34a;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
}

👁 შედეგი (Live Preview)

💡 რჩევა: Internal CSS კარგია მცირე, ერთგვერდიანი პროექტებისთვის ან ექსპერიმენტებისთვის.

External CSS

chrome all firefox all safari all edge all

External CSS ცალკე .css ფაილში ინახება და HTML-ში <link> ტეგით ერთვის. ეს არის რეკომენდებული მეთოდი — ერთი ფაილი მრავალ გვერდს ემსახურება და ბრაუზერი მას ქეშირებს.

სინტაქსი

Syntax

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

მაგალითები

External ფაილის ჩართვა

HTML-ში link ტეგი, სტილი კი style.css-ში.

HTML

<!-- index.html -->
<link rel="stylesheet" href="style.css">
<h1>External CSS</h1>

CSS

/* style.css ფაილში: */
h1 {
  color: #7c3aed;
  text-align: center;
  font-family: sans-serif;
}

👁 შედეგი (Live Preview)

✓ საუკეთესო პრაქტიკა

ყოველთვის ამჯობინე External CSS — სუფთა კოდი და ქეშირება.
<link> განათავსე <head>-ში, რომ სტილი ადრე ჩაიტვირთოს.

2 🎯 სელექტორები

სელექტორი განსაზღვრავს, რომელ HTML ელემენტებზე გავრცელდეს სტილი. ეს არის CSS-ის გული — სანამ ვერ შეარჩევ ელემენტს, ვერ მისცემ მას სტილს.

* (universal)

უნივერსალური სელექტორი

ვარსკვლავი * ირჩევს ყველა ელემენტს გვერდზე. ხშირად გამოიყენება „reset"-ისთვის, რომ ბრაუზერის ნაგულისხმევი margin/padding მოიხსნას.

სინტაქსი

Syntax

* { margin: 0; padding: 0; box-sizing: border-box; }

მაგალითები

Universal reset

ყველა ელემენტს ვუყენებთ border-box-ს.

HTML

<div class="card">ყუთი</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
}
.card {
  padding: 20px;
  background: #fde68a;
  border: 2px solid #f59e0b;
}

👁 შედეგი (Live Preview)

✗ ხშირი შეცდომები

*-ის ჭარბი გამოყენება დიდ გვერდებზე ოდნავ ანელებს რენდერს.

div, p, h1 ...

ელემენტის (tag) სელექტორი

ირჩევს ყველა მითითებული ტიპის ელემენტს მათი ტეგის სახელით. მაგ. p შეარჩევს ყველა პარაგრაფს.

სინტაქსი

Syntax

p { color: navy; }

მაგალითები

ყველა პარაგრაფი

HTML

<p>პირველი</p>
<p>მეორე</p>
<span>ეს span-ია</span>

CSS

p {
  color: #dc2626;
  font-weight: bold;
}

👁 შედეგი (Live Preview)

.class

კლასის სელექტორი

წერტილით . დაწყებული სელექტორი ირჩევს ელემენტებს, რომელთა class ატრიბუტში წერია ეს სახელი. ერთი კლასი მრავალ ელემენტზე გამოიყენება — ეს არის ყველაზე გავრცელებული სელექტორი.

სინტაქსი

Syntax

.intro { font-size: 18px; }

მაგალითები

კლასი მრავალ ელემენტზე

HTML

<p class="highlight">მნიშვნელოვანი</p>
<p>ჩვეულებრივი</p>
<span class="highlight">ესეც</span>

CSS

.highlight {
  background: #fef08a;
  padding: 4px 8px;
  border-radius: 4px;
}

👁 შედეგი (Live Preview)

✓ საუკეთესო პრაქტიკა

კლასებს დაარქვი მნიშვნელობის მიხედვით (.btn-primary), არა გარეგნობის (.red).
ერთ ელემენტს რამდენიმე კლასის მინიჭება შეიძლება: class="btn btn-large".

#id

ID სელექტორი

ჰეშით # დაწყებული სელექტორი ირჩევს ელემენტს მისი id ატრიბუტით. ID უნიკალურია — ერთ გვერდზე ერთი id მხოლოდ ერთხელ უნდა გვხვდებოდეს. specificity-ში ID კლასზე ძლიერია.

სინტაქსი

Syntax

#header { background: black; }

მაგალითები

ID-ით შერჩევა

HTML

<div id="hero">Hero სექცია</div>

CSS

#hero {
  background: #1e293b;
  color: white;
  padding: 30px;
  text-align: center;
}

👁 შედეგი (Live Preview)

✗ ხშირი შეცდომები

ერთი და იმავე id-ს გამოყენება მრავალ ელემენტზე (დაუშვებელია).
ID-ების სტილისთვის გამოყენება — სჯობს კლასები, რადგან ID-ს მაღალი specificity ართულებს გადაფარვას.

[attr], [attr="val"]

ატრიბუტის სელექტორები

ირჩევს ელემენტებს მათი ატრიბუტის (ან მისი მნიშვნელობის) მიხედვით. ძალიან მძლავრია ფორმებისა და ბმულების სტილისთვის.

სინტაქსი

Syntax

input[type="text"] { border: 1px solid gray; }

მნიშვნელობები

მნიშვნელობა	აღწერა
`[attr]`	აქვს ეს ატრიბუტი
`[attr="val"]`	ატრიბუტი ზუსტად ამ მნიშვნელობით
`[attr^="val"]`	მნიშვნელობა იწყება „val"-ით
`[attr$="val"]`	მნიშვნელობა მთავრდება „val"-ით
`[attr*="val"]`	მნიშვნელობა შეიცავს „val"-ს
`[attr~="val"]`	სიტყვების სიაში არის „val"

მაგალითები

სხვადასხვა input ტიპი

HTML

<input type="text" placeholder="ტექსტი">
<input type="password" placeholder="პაროლი">

CSS

input[type="text"] {
  border: 2px solid #2563eb;
}
input[type="password"] {
  border: 2px solid #dc2626;
}

👁 შედეგი (Live Preview)

გარე ბმულების მონიშვნა

HTML

<a href="https://example.com">გარე</a><br>
<a href="/page">შიდა</a>

CSS

a[href^="https"]::after {
  content: " 🔗";
}

👁 შედეგი (Live Preview)

div p, div>p, div+p, div~p

Combinators — კავშირები

Combinator-ები ელემენტებს შორის ურთიერთობით შერჩევას ახდენენ.

მნიშვნელობები

მნიშვნელობა	აღწერა
`div p`	Descendant: ყველა p, რომელიც div-ის შიგნითაა (ნებისმიერ სიღრმეზე)
`div > p`	Child: მხოლოდ უშუალო შვილი p
`div + p`	Adjacent: პირველი p უშუალოდ div-ის შემდეგ
`div ~ p`	General sibling: ყველა p div-ის შემდეგ იმავე დონეზე

მაგალითები

Child vs Descendant

HTML

<div class="box">
  <p>პირდაპირი შვილი</p>
  <section><p>შვილიშვილი</p></section>
</div>

CSS

.box > p {
  color: green;     /* მხოლოდ პირდაპირი */
  font-weight: bold;
}
.box p {
  font-style: italic; /* ყველა შიგნით */
}

👁 შედეგი (Live Preview)

💡 რჩევა: > (child) უფრო ზუსტი და სწრაფია, ვიდრე space (descendant). გამოიყენე როცა მხოლოდ პირდაპირი შვილი გჭირდება.

:hover, :focus, :nth-child()...

Pseudo-classes — ფსევდოკლასები

ფსევდოკლასი (ერთი ორწერტილით :) ირჩევს ელემენტს მისი მდგომარეობის ან პოზიციის მიხედვით — მაგ. როცა მასზე მაუსია, ან როცა ის მშობლის პირველი შვილია.

მნიშვნელობები

მნიშვნელობა	აღწერა
`:hover`	როცა მაუსი ელემენტზეა
`:focus`	როცა ელემენტს ფოკუსი აქვს (მაგ. input)
`:active`	დაჭერის მომენტში
`:first-child`	მშობლის პირველი შვილი
`:last-child`	მშობლის ბოლო შვილი
`:nth-child(n)`	n-ე შვილი (მაგ. 2n — ლუწები, odd — კენტები)
`:not(sel)`	ყველა, გარდა მითითებულისა
`:checked`	მონიშნული checkbox/radio

მაგალითები

:hover ღილაკი

გადაატარე მაუსი ღილაკზე preview-ში.

HTML

<button class="b">გადამატარე მაუსი</button>

CSS

.b {
  padding: 12px 24px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  transition: 0.3s;
}
.b:hover {
  background: #1e40af;
  transform: scale(1.05);
}

👁 შედეგი (Live Preview)

:nth-child — ზებრა ცხრილი

HTML

<ul>
  <li>ერთი</li><li>ორი</li>
  <li>სამი</li><li>ოთხი</li>
</ul>

CSS

li:nth-child(odd) {
  background: #e0e7ff;
}
li {
  list-style: none;
  padding: 8px;
}

👁 შედეგი (Live Preview)

💡 რჩევა: :nth-child(2n) = ლუწი, :nth-child(2n+1) ან odd = კენტი, :nth-child(3) = ზუსტად მესამე.

::before, ::after, ::first-letter

Pseudo-elements — ფსევდოელემენტები

ფსევდოელემენტი (ორმაგი ორწერტილით ::) ქმნის ან აფორმებს ელემენტის ნაწილს — მაგ. პირველ ასოს, ან ვირტუალურ შინაარსს ელემენტამდე/შემდეგ.

მნიშვნელობები

მნიშვნელობა	აღწერა
`::before`	ვირტუალური შინაარსი ელემენტის დასაწყისში (საჭიროა `content`)
`::after`	ვირტუალური შინაარსი ელემენტის ბოლოს
`::first-letter`	ტექსტის პირველი ასო
`::first-line`	ტექსტის პირველი ხაზი
`::selection`	მონიშნული (selected) ტექსტი

მაგალითები

::before / ::after

HTML

<p class="quote">ციტატა</p>

CSS

.quote::before { content: "« "; color: #999; }
.quote::after  { content: " »"; color: #999; }
.quote { font-style: italic; }

👁 შედეგი (Live Preview)

::first-letter drop cap

HTML

<p class="article">პირველი ასო დიდია, როგორც წიგნებში.</p>

CSS

.article::first-letter {
  font-size: 3em;
  font-weight: bold;
  color: #7c3aed;
  float: left;
  margin-right: 6px;
}

👁 შედეგი (Live Preview)

✗ ხშირი შეცდომები

::before/::after არ მუშაობს content თვისების გარეშე (თუნდაც content: "").
ფსევდოელემენტებზე ორმაგი :: სწორია; ერთი : ძველი სინტაქსია.

3 ✍️ CSS სინტაქსი

CSS წესი (rule) შედგება სელექტორისა და დეკლარაციების ბლოკისგან. თითოეული დეკლარაცია არის property: value; წყვილი.

selector { prop: value; }

წესის სტრუქტურა (Rule)

CSS წესი: selector ირჩევს ელემენტს, ფიგურულ ფრჩხილებში { } კი დეკლარაციებია. დეკლარაცია = property (თვისება) + ორწერტილი + value (მნიშვნელობა) + წერტილმძიმე.

სინტაქსი

Syntax

selector {
  property: value;
  property: value;
}

მაგალითები

ანატომია

HTML

<h2>სათაური</h2>

CSS

h2 {              /* სელექტორი */
  color: teal;    /* property: value; */
  font-size: 28px;
}

👁 შედეგი (Live Preview)

/* comment */

კომენტარები

კომენტარი CSS-ში იწერება /* ... */-ში და ბრაუზერი მას უგულებელყოფს. გამოიყენება კოდის ასახსნელად ან ნაწილის დროებით გასათიშად.

სინტაქსი

Syntax

/* ეს კომენტარია */

მაგალითები

კომენტარის გამოყენება

HTML

<p>ტექსტი</p>

CSS

/* ძირითადი ფერი */
p { color: #333; }
/* p { color: red; }  <- გათიშულია */

👁 შედეგი (Live Preview)

💡 რჩევა: CSS-ში ერთხაზიანი // კომენტარი არ არსებობს — მხოლოდ /* */.

px, em, rem, %, vw, vh

ერთეულები (Units)

ზომები CSS-ში ერთეულებით იზომება. არსებობს აბსოლუტური (px) და ფარდობითი (em, rem, %, vw/vh) ერთეულები. ფარდობითი ერთეულები responsive დიზაინისთვისაა საუკეთესო.

მნიშვნელობები

მნიშვნელობა	აღწერა
`px`	პიქსელი — აბსოლუტური, ფიქსირებული ზომა
`em`	მშობლის font-size-ის მიმართ ფარდობითი
`rem`	root (`html`) font-size-ის მიმართ ფარდობითი
`%`	მშობელი ელემენტის ზომის პროცენტი
`vw / vh`	ეკრანის სიგანის/სიმაღლის 1% (viewport)
`fr`	Grid-ში თავისუფალი ადგილის წილი

მაგალითები

rem vs px

HTML

<p class="a">rem ზომა</p>
<p class="b">px ზომა</p>

CSS

html { font-size: 16px; }
.a { font-size: 1.5rem; } /* = 24px */
.b { font-size: 24px; }

👁 შედეგი (Live Preview)

✓ საუკეთესო პრაქტიკა

შრიფტებისთვის გამოიყენე rem — accessibility-ისთვის უკეთესია (მომხმარებლის ზუმს ემორჩილება).
vh/vw კარგია hero სექციებისთვის და სრულეკრანიანი ბლოკებისთვის.

4 🎨 ფერები

CSS-ში ფერის მითითება შესაძლებელია სახელით, HEX, RGB(A) ან HSL(A) ფორმატით. გამჭვირვალობას (alpha) RGBA და HSLA უმატებენ.

#rrggbb

HEX ფერები

HEX (თექვსმეტობითი) ფერი იწერება #-ით და 6 (ან 3) სიმბოლოთი: წითელი-მწვანე-ლურჯი. #ff0000 = წითელი. შემოკლებული #f00 იგივეა.

სინტაქსი

Syntax

color: #2563eb;

მაგალითები

HEX პალიტრა

HTML

<div class="sw a"></div><div class="sw b"></div><div class="sw c"></div>

CSS

.sw { display:inline-block; width:60px; height:60px; }
.a { background: #ef4444; }
.b { background: #22c55e; }
.c { background: #3b82f6; }

👁 შედეგი (Live Preview)

💡 რჩევა: 8-ნიშნა HEX (#3b82f6cc) ბოლო ორი სიმბოლოთი alpha-ს (გამჭვირვალობას) განსაზღვრავს.

rgb() / rgba()

RGB & RGBA

rgb(r,g,b) ფერს განსაზღვრავს 0–255 მნიშვნელობებით. rgba() მე-4 პარამეტრად ამატებს alpha-ს (0 = გამჭვირვალე, 1 = გაუმჭვირი).

სინტაქსი

Syntax

color: rgb(37, 99, 235);
background: rgba(0, 0, 0, 0.5);

მაგალითები

გამჭვირვალე ფონი (rgba)

HTML

<div class="overlay">ნახევრად გამჭვირვალე</div>

CSS

.overlay {
  background: rgba(124, 58, 237, 0.4);
  padding: 30px;
  color: #111;
}

👁 შედეგი (Live Preview)

hsl() / hsla()

HSL & HSLA

hsl(hue, saturation, lightness): hue — ფერის კუთხე 0–360° (0=წითელი, 120=მწვანე, 240=ლურჯი), saturation — ნაჯერობა %, lightness — სიკაშკაშე %. HSL ინტუიციურია ფერის ვარიაციების შესაქმნელად.

სინტაქსი

Syntax

color: hsl(217, 91%, 60%);
background: hsla(217, 91%, 60%, 0.3);

მაგალითები

ერთი hue, სხვადასხვა სიკაშკაშე

HTML

<div class="sw s1"></div><div class="sw s2"></div><div class="sw s3"></div>

CSS

.sw { display:inline-block; width:60px; height:60px; }
.s1 { background: hsl(260, 80%, 75%); }
.s2 { background: hsl(260, 80%, 55%); }
.s3 { background: hsl(260, 80%, 35%); }

👁 შედეგი (Live Preview)

💡 რჩევა: HSL-ით თემის ფერების მართვა მარტივია — საკმარისია lightness შეცვალო ღია/მუქი ვარიანტისთვის.

5 🖼️ Backgrounds

ფონის თვისებები აკონტროლებენ ელემენტის უკანა პლანს — ფერს, სურათს, მის ზომას, პოზიციასა და გამეორებას.

background-color

აყენებს ელემენტის ფონის ფერს. იღებს ნებისმიერ ფერის ფორმატს (HEX, RGB, HSL, სახელი).

სინტაქსი

Syntax

background-color: #f3f4f6;

მაგალითები

ფონის ფერი

HTML

<div class="b">ფერადი ფონი</div>

CSS

.b {
  background-color: #0ea5e9;
  color: white;
  padding: 24px;
}

👁 შედეგი (Live Preview)

background-image

აყენებს ფონურ სურათს ან გრადიენტს. გრადიენტები (linear-gradient, radial-gradient) ფაქტობრივად სურათებად ითვლება.

სინტაქსი

Syntax

background-image: url("photo.jpg");
background-image: linear-gradient(to right, #f00, #00f);

მაგალითები

ლინეარული გრადიენტი

HTML

<div class="g">გრადიენტი</div>

CSS

.g {
  background-image: linear-gradient(135deg, #6366f1, #ec4899);
  color: white;
  padding: 40px;
  text-align: center;
}

👁 შედეგი (Live Preview)

💡 რჩევა: რამდენიმე ფონის დადება მძიმით შეიძლება: background-image: url(a.png), linear-gradient(...);

background-size

აკონტროლებს ფონური სურათის ზომას. cover ავსებს მთელ ფართობს (შესაძლოა მოიჭრას), contain კი მთლიანად აჩვენებს სურათს.

მნიშვნელობები

მნიშვნელობა	აღწერა
`cover`	ფარავს მთელ კონტეინერს, პროპორცია ნარჩუნდება
`contain`	სრულად ჩანს სურათი კონტეინერში
`auto`	სურათის ნამდვილი ზომა
`100% 100%`	ზუსტი ზომა (შესაძლოა დამახინჯდეს)

მაგალითები

cover

HTML

<div class="hero">Hero</div>

CSS

.hero {
  height: 120px;
  background-image: linear-gradient(45deg,#22d3ee,#3b82f6);
  background-size: cover;
  color:#fff; display:flex; align-items:center; justify-content:center;
}

👁 შედეგი (Live Preview)

background-position

განსაზღვრავს ფონური სურათის საწყის პოზიციას. შეიძლება საკვანძო სიტყვებით (center, top right) ან ერთეულებით.

სინტაქსი

Syntax

background-position: center center;

მნიშვნელობები

მნიშვნელობა	აღწერა
`center`	ცენტრში
`top / bottom / left / right`	კიდეებზე
`50% 25%`	პროცენტული პოზიცია

background-repeat

აკონტროლებს, მეორდება თუ არა ფონური სურათი. ნაგულისხმევად repeat (იმეორებს ორივე ღერძზე).

მნიშვნელობები

მნიშვნელობა	აღწერა
`repeat`	მეორდება ორივე მიმართულებით (default)
`no-repeat`	არ მეორდება
`repeat-x`	მხოლოდ ჰორიზონტალურად
`repeat-y`	მხოლოდ ვერტიკალურად

💡 რჩევა: shorthand background ერთ ხაზში აერთიანებს ყველაფერს: background: #fff url(x.png) no-repeat center/cover;

6 🔤 Typography

ტექსტური თვისებები აკონტროლებენ შრიფტს, ზომას, წონას, სტრიქონებს შორის მანძილს და ტექსტის გასწორებას. კარგი ტიპოგრაფია = წაკითხვადი გვერდი.

font-family

განსაზღვრავს შრიფტს. მიეთითება „stack" — რამდენიმე შრიფტი მძიმით; ბრაუზერი იყენებს პირველ ხელმისაწვდომს. ბოლოს ყოველთვის ზოგად ოჯახს ვწერთ (serif, sans-serif).

სინტაქსი

Syntax

font-family: "Helvetica", Arial, sans-serif;

მაგალითები

შრიფტის სტეკი

HTML

<p class="s">sans-serif</p><p class="m">monospace</p>

CSS

.s { font-family: Arial, sans-serif; }
.m { font-family: "Courier New", monospace; }

👁 შედეგი (Live Preview)

💡 რჩევა: ქართულისთვის გამოიყენე ვებ-შრიფტი (მაგ. BPG Nino), რომელიც კარგად ფარავს ქართულ სიმბოლოებს.

font-size

ტექსტის ზომა. რეკომენდებულია rem ერთეული (accessibility-ისთვის). სხეულისთვის ტიპურია 16px.

სინტაქსი

Syntax

font-size: 1rem; /* = 16px */

მაგალითები

სხვადასხვა ზომა

HTML

<p class="sm">პატარა</p><p class="lg">დიდი</p>

CSS

.sm { font-size: 0.85rem; }
.lg { font-size: 2rem; }

👁 შედეგი (Live Preview)

font-weight

ტექსტის სისქე. რიცხვითი მნიშვნელობები 100–900, ან საკვანძო სიტყვები normal (400) / bold (700).

მნიშვნელობები

მნიშვნელობა	აღწერა
`400 / normal`	ჩვეულებრივი
`700 / bold`	გამუქებული
`100–900`	წვრილი → ძალიან მსხვილი

მაგალითები

წონები

HTML

<p class="t">წვრილი</p><p class="b">მსხვილი</p>

CSS

.t { font-weight: 300; }
.b { font-weight: 800; }

👁 შედეგი (Live Preview)

font-style

აყენებს დახრილ (italic) ან ნორმალურ ტექსტს.

მნიშვნელობები

მნიშვნელობა	აღწერა
`normal`	ჩვეულებრივი
`italic`	დახრილი
`oblique`	ხელოვნურად დახრილი

line-height

სტრიქონებს შორის ვერტიკალური მანძილი. ერთეულის გარეშე რიცხვი (მაგ. 1.6) ფარდობითია font-size-ის მიმართ — ეს რეკომენდებულია.

სინტაქსი

Syntax

line-height: 1.6;

მაგალითები

წაკითხვადი ტექსტი

HTML

<p class="p">გრძელი ტექსტი, რომელიც რამდენიმე ხაზად იშლება და კარგად იკითხება მეტი line-height-ის წყალობით.</p>

CSS

.p { line-height: 1.8; max-width: 300px; }

👁 შედეგი (Live Preview)

💡 რჩევა: ძირითადი ტექსტისთვის 1.5–1.7 line-height საუკეთესოა წაკითხვადობისთვის.

letter-spacing

ასოებს შორის მანძილი. დადებითი — აშორებს, უარყოფითი — აახლოებს. კარგია სათაურებისთვის.

სინტაქსი

Syntax

letter-spacing: 2px;

მაგალითები

გაშლილი სათაური

HTML

<h3 class="h">SPACED</h3>

CSS

.h { letter-spacing: 6px; text-transform: uppercase; }

👁 შედეგი (Live Preview)

text-align

ტექსტის ჰორიზონტალური გასწორება ბლოკის შიგნით.

მნიშვნელობები

მნიშვნელობა	აღწერა
`left`	მარცხნივ (default)
`right`	მარჯვნივ
`center`	ცენტრში
`justify`	ორივე კიდეზე გასწორება

მაგალითები

გასწორება

HTML

<p class="c">ცენტრში</p><p class="r">მარჯვნივ</p>

CSS

.c { text-align: center; }
.r { text-align: right; }

👁 შედეგი (Live Preview)

text-transform

ცვლის ასოების რეგისტრს ვიზუალურად (ლათინურისთვის). uppercase, lowercase, capitalize.

მნიშვნელობები

მნიშვნელობა	აღწერა
`uppercase`	მთავრული
`lowercase`	პატარა
`capitalize`	ყოველი სიტყვა დიდი ასოთი
`none`	უცვლელი

text-decoration

ხაზები ტექსტზე: ქვედახაზი, ზედახაზი, გადახაზვა. ხშირად გამოიყენება ბმულების ქვედახაზის მოსახსნელად.

სინტაქსი

Syntax

text-decoration: underline;
text-decoration: none;

მაგალითები

ბმულის ქვედახაზი

HTML

<a href="#" class="link">ბმული ქვედახაზის გარეშე</a>

CSS

.link { text-decoration: none; color: #2563eb; }
.link:hover { text-decoration: underline; }

👁 შედეგი (Live Preview)

7 📦 Box Model

ყველა HTML ელემენტი არის ოთხკუთხედი (box). Box Model აღწერს ამ ყუთის ფენებს: content (შინაარსი) → padding (შიდა შუალედი) → border (ჩარჩო) → margin (გარე შუალედი). ეს ერთ-ერთი ყველაზე მნიშვნელოვანი კონცეფციაა CSS-ში.

content · padding · border · margin

Box Model — ვიზუალური დიაგრამა

ქვემოთ მოცემული ინტერაქტიული დიაგრამით აწიე ცოცხალი სლაიდერები და დაინახე, როგორ ცვლის თითოეული ფენა ელემენტის ზომას.

📦 ინტერაქტიული Box Model დიაგრამა

Margin 20px Border 10px Padding 20px Content 120px

margin

border

padding

content

💡 რჩევა: სრული ხილული სიგანე = margin + border + padding + content (თუ box-sizing: content-box).

padding

ელემენტის შიდა შუალედი — content-სა და border-ს შორის. ფონის ფერი padding-ზეც ვრცელდება.

სინტაქსი

Syntax

padding: 10px;            /* ყველა მხარეს */
padding: 10px 20px;       /* ვერტ. ჰორიზ. */
padding: 5px 10px 15px 20px; /* top right bottom left */

მნიშვნელობები

მნიშვნელობა	აღწერა
`padding`	4 მხარე ერთად
`padding-top/right/bottom/left`	ცალკეული მხარე

მაგალითები

padding ცვლილება

HTML

<div class="card">აწიე padding</div>

CSS

.card {
  padding: 24px;
  background: #ddd6fe;
  border: 2px solid #7c3aed;
}

👁 შედეგი (Live Preview)

✗ ხშირი შეცდომები

padding-ის margin-თან აღრევა — padding ჩარჩოს შიგნითაა, margin გარეთ.

margin

ელემენტის გარე შუალედი — სხვა ელემენტებთან მანძილი. margin: auto ჰორიზონტალურად ცენტრავს ბლოკ-ელემენტს.

სინტაქსი

Syntax

margin: 0 auto;     /* ჰორიზონტალური ცენტრირება */
margin: 16px;

მნიშვნელობები

მნიშვნელობა	აღწერა
`auto`	ავტომატური — ცენტრირებისთვის
`0 / 16px / ...`	ფიქსირებული მანძილი
`უარყოფითი (-10px)`	ელემენტების დაახლოება/გადაფარვა

მაგალითები

margin auto ცენტრირება

HTML

<div class="box">ცენტრში</div>

CSS

.box {
  width: 150px;
  margin: 0 auto;
  background: #bfdbfe;
  padding: 16px;
  text-align: center;
}

👁 შედეგი (Live Preview)

💡 რჩევა: ვერტიკალური margin-ები „იშლება" (margin collapse) — ორი მეზობელი ბლოკის margin-დან დიდი იმარჯვებს, არ ჯამდება.

border

ელემენტის ჩარჩო. shorthand: border: სისქე სტილი ფერი. border-radius ამრგვალებს კუთხეებს.

სინტაქსი

Syntax

border: 2px solid #333;
border-radius: 8px;

მნიშვნელობები

მნიშვნელობა	აღწერა
`solid`	მთლიანი ხაზი
`dashed`	წყვეტილი
`dotted`	წერტილოვანი
`none`	ჩარჩოს გარეშე

მაგალითები

ჩარჩო და მომრგვალება

HTML

<div class="b1">solid</div><div class="b2">dashed</div>

CSS

.b1 { border: 3px solid #16a34a; padding:10px; border-radius:10px; margin-bottom:8px;}
.b2 { border: 2px dashed #dc2626; padding:10px; }

👁 შედეგი (Live Preview)

box-sizing

განსაზღვრავს, padding და border ემატება თუ არა მითითებულ width-ს. border-box ჩასვამს მათ width-ის შიგნით — გაცილებით პროგნოზირებადია.

მნიშვნელობები

მნიშვნელობა	აღწერა
`content-box`	default — width მხოლოდ content (padding/border ემატება)
`border-box`	width მოიცავს padding-ს და border-ს (რეკომენდებული)

მაგალითები

content-box vs border-box

HTML

<div class="cb">content-box</div>
<div class="bb">border-box</div>

CSS

.cb, .bb { width:200px; padding:20px; border:4px solid #333; background:#fcd34d; margin-bottom:8px;}
.cb { box-sizing: content-box; } /* რეალური სიგანე 248px */
.bb { box-sizing: border-box; }  /* რეალური სიგანე 200px */

👁 შედეგი (Live Preview)

✓ საუკეთესო პრაქტიკა

პროექტის დასაწყისში დაამატე *, *::before, *::after { box-sizing: border-box; }

8 📐 Dimensions

ზომის თვისებები განსაზღვრავენ ელემენტის სიგანესა და სიმაღლეს, აგრეთვე მათ მინიმალურ/მაქსიმალურ ზღვრებს — რაც responsive დიზაინისთვის გადამწყვეტია.

width / height

width & height

ელემენტის სიგანე და სიმაღლე. შეიძლება px, %, vw/vh ან auto. ბლოკ-ელემენტებს ნაგულისხმევად width: auto აქვთ (მთელ ხელმისაწვდომ სიგანეს იკავებენ).

სინტაქსი

Syntax

width: 300px;
height: 200px;

მაგალითები

ფიქსირებული ზომა

HTML

<div class="box">300×80</div>

CSS

.box {
  width: 300px;
  height: 80px;
  background: #a7f3d0;
  display:flex; align-items:center; justify-content:center;
}

👁 შედეგი (Live Preview)

min-width, max-width ...

min/max-width & min/max-height

ზღუდავს ელემენტის ზომას. max-width ერთ-ერთი ყველაზე სასარგებლო responsive ხელსაწყოა — ელემენტი არ გასცდება მითითებულ ზღვარს, მაგრამ პატარა ეკრანზე შემცირდება.

მნიშვნელობები

მნიშვნელობა	აღწერა
`min-width`	მინიმალური სიგანე — ამაზე ნაკლები არ იქნება
`max-width`	მაქსიმალური სიგანე — ამაზე მეტი არ იქნება
`min-height / max-height`	იგივე სიმაღლისთვის

მაგალითები

responsive max-width

შეამცირე preview-ს სიგანე — ბლოკი ადაპტირდება.

HTML

<div class="resp">max-width: 100%; width:400px</div>

CSS

.resp {
  width: 400px;
  max-width: 100%;
  background: #fbcfe8;
  padding: 20px;
}

👁 შედეგი (Live Preview)

💡 რჩევა: კონტენტის კონტეინერისთვის ტიპურია max-width: 1200px; margin: 0 auto; — ცენტრში მოქცეული, მაგრამ responsive.

9 🧱 Display

display განსაზღვრავს, როგორ იქცევა ელემენტი განლაგებაში — იკავებს თუ არა მთელ ხაზს, თანაარსებობს თუ არა გვერდიგვერდ, ან საერთოდ ჩანს თუ არა.

block

display: block

ბლოკ-ელემენტი იკავებს მთელ ხელმისაწვდომ სიგანეს და ახალ ხაზზე იწყება (მაგ. div, p, h1). შეიძლება მიეცეს width/height.

მაგალითები

ბლოკები ერთმანეთის ქვემოთ

HTML

<span class="b">A</span><span class="b">B</span>

CSS

.b { display:block; background:#93c5fd; margin:4px; padding:8px; }

👁 შედეგი (Live Preview)

inline

display: inline

Inline ელემენტი ტექსტის ნაკადშია, გვერდიგვერდ ლაგდება და არ ემორჩილება width/height-ს (მაგ. span, a). ვერტიკალური margin/padding ვიზუალურად ნაკლებად მოქმედებს.

მაგალითები

Inline ერთ ხაზზე

HTML

<span class="i">A</span><span class="i">B</span><span class="i">C</span>

CSS

.i { display:inline; background:#fca5a5; padding:4px; }

👁 შედეგი (Live Preview)

inline-block

display: inline-block

აერთიანებს ორივეს: ლაგდება გვერდიგვერდ (როგორც inline), მაგრამ ემორჩილება width/height-ს და ყველა margin/padding-ს (როგორც block).

მაგალითები

გვერდიგვერდ ყუთები

HTML

<span class="ib">1</span><span class="ib">2</span>

CSS

.ib { display:inline-block; width:60px; height:60px; background:#86efac; margin:4px; text-align:center; }

👁 შედეგი (Live Preview)

none

display: none

ელემენტი მთლიანად ქრება და ადგილს არ იკავებს. განსხვავდება visibility: hidden-ისგან, რომელიც მალავს, მაგრამ ადგილს ინარჩუნებს.

💡 რჩევა: JavaScript-ით ელემენტის გამოჩენა/დამალვა ხშირად display: none ⇄ block გადართვით ხდება.

contents modern

chrome 65+ firefox 63+ safari 11.1+ edge 79+

display: contents

ელემენტის საკუთარი ყუთი ქრება, მაგრამ მისი შვილები რჩებიან — თითქოს მშობელი არ არსებობს. სასარგებლოა flex/grid-ში ზედმეტი wrapper-ის „გასაუჩინარებლად".

10 📍 Positioning

position განსაზღვრავს, როგორ თავსდება ელემენტი გვერდზე და როგორ რეაგირებს top/right/bottom/left თვისებებზე. ქვემოთ ცოცხალი ვიზუალით ნახავ სხვაობას.

static · relative · absolute · fixed · sticky

Position — ინტერაქტიული ვიზუალი

აირჩიე position და აწიე top/left — დაინახე, როგორ მოძრაობს „target" სხვა ელემენტებთან მიმართებაში.

📍 Positioning ვიზუალი

position top 10px left 10px

სხვა ელემენტი

target

სხვა ელემენტი

static

position: static

ნაგულისხმევი მნიშვნელობა. ელემენტი ნორმალურ ნაკადშია და top/left მასზე არ მოქმედებს.

relative

position: relative

ელემენტი რჩება ნაკადში, მაგრამ top/right/bottom/left-ით ინაცვლებს საკუთარი ნორმალური ადგილიდან. ასევე ხდება „წერტილი" absolute შვილებისთვის.

მაგალითები

relative წანაცვლება

HTML

<div class="r">15px ქვემოთ/მარჯვნივ</div>

CSS

.r { position: relative; top:15px; left:15px; background:#fde68a; padding:10px; }

👁 შედეგი (Live Preview)

absolute

position: absolute

ელემენტი ამოდის ნაკადიდან და თავსდება უახლოეს position: relative/absolute/fixed მქონე წინაპართან მიმართებაში (თუ ასეთი არ არის — <body>-სთან).

მაგალითები

badge კუთხეში

HTML

<div class="wrap">კონტეინერი
  <span class="badge">NEW</span>
</div>

CSS

.wrap { position: relative; height:80px; background:#e2e8f0; padding:10px; }
.badge { position:absolute; top:8px; right:8px; background:#ef4444; color:#fff; padding:2px 8px; border-radius:6px; }

👁 შედეგი (Live Preview)

✗ ხშირი შეცდომები

absolute ელემენტი „გაფრინდა" — დაგავიწყდა მშობელზე position: relative.

fixed

position: fixed

ელემენტი მიმაგრებულია viewport-ზე (ეკრანზე) და სქროლისას ადგილზე რჩება. იდეალურია მუდმივი header-ის ან „ზემოთ ასვლის" ღილაკისთვის.

💡 რჩევა: fixed header-ისთვის სხეულს დაუტოვე ზედა padding, რომ კონტენტი არ დაიფაროს.

sticky modern

position: sticky

ჰიბრიდი: ელემენტი ნორმალურია, სანამ სქროლი არ მიაღწევს მის ზღვარს, შემდეგ „ეკვრის" (fixed-ივით). სასარგებლოა sticky sidebar-ისა და სათაურებისთვის.

სინტაქსი

Syntax

position: sticky;
top: 0;

მაგალითები

sticky სათაური

HTML

<div class="scroll">
  <div class="st">📌 Sticky</div>
  <p>ჩამოასქროლე...</p><p>...</p><p>...</p><p>...</p>
</div>

CSS

.scroll { height:120px; overflow:auto; border:1px solid #ccc; }
.st { position:sticky; top:0; background:#2563eb; color:#fff; padding:8px; }

👁 შედეგი (Live Preview)

💡 რჩევა: sticky-ს აუცილებლად სჭირდება top (ან სხვა მხარე) მითითება, თორემ არ იმუშავებს.

11 🔧 Flexbox

Flexbox არის ერთგანზომილებიანი განლაგების სისტემა (ხაზის ან სვეტის გასწვრივ). იდეალურია ელემენტების გასწორების, განაწილებისა და ცენტრირებისთვის. ქვემოთ ცოცხალი დიაგრამით ექსპერიმენტი ჩაატარე.

display: flex

კონცეფცია: Main & Cross Axis

როცა კონტეინერს ვაძლევთ display: flex, მისი პირდაპირი შვილები ხდებიან flex-items. ორი ღერძი არსებობს:

Main Axis — ძირითადი ღერძი (flex-direction-ით განისაზღვრება);
Cross Axis — მართობული ღერძი.

justify-content ალაგებს main ღერძზე, align-items — cross ღერძზე.

🔧 ინტერაქტიული Flexbox დიაგრამა

flex-direction justify-content align-items flex-wrap

1

2

3

4

5

display: flex;

💡 რჩევა: ცენტრში მოქცევის ულამაზესი ხერხი: display:flex; justify-content:center; align-items:center;

justify-content

ალაგებს flex-items-ს main ღერძზე (ჰორიზონტალურად, თუ direction: row).

მნიშვნელობები

მნიშვნელობა	აღწერა
`flex-start`	დასაწყისში (default)
`center`	ცენტრში
`flex-end`	ბოლოში
`space-between`	კიდეებზე, შუაში თანაბარი შუალედი
`space-around`	ყველას ირგვლივ თანაბარი შუალედი
`space-evenly`	ყველა შუალედი იდენტური

მაგალითები

space-between

HTML

<div class="f"><div class="i">1</div><div class="i">2</div><div class="i">3</div></div>

CSS

.f { display:flex; justify-content:space-between; background:#e0e7ff; padding:8px; }
.i { background:#6366f1; color:#fff; padding:10px 16px; border-radius:6px; }

👁 შედეგი (Live Preview)

align-items

ალაგებს flex-items-ს cross ღერძზე (ვერტიკალურად, თუ direction: row).

მნიშვნელობები

მნიშვნელობა	აღწერა
`stretch`	ავსებს სიმაღლეს (default)
`flex-start`	ზემოთ
`center`	ცენტრში (ვერტიკალურად)
`flex-end`	ქვემოთ
`baseline`	ტექსტის ბაზისურ ხაზზე

მაგალითები

center ვერტიკალურად

HTML

<div class="f"><div class="i">A</div><div class="i big">B</div></div>

CSS

.f { display:flex; align-items:center; height:100px; background:#dcfce7; }
.i { background:#16a34a; color:#fff; padding:10px; margin:4px; }
.big { padding:24px; }

👁 შედეგი (Live Preview)

align-content

როცა items რამდენიმე ხაზადაა (wrap), ალაგებს ხაზებს cross ღერძზე. მოქმედებს მხოლოდ რამდენიმე ხაზის არსებობისას.

მნიშვნელობები

მნიშვნელობა	აღწერა
`flex-start / center / flex-end`	ხაზების პოზიცია
`space-between / space-around`	ხაზებს შორის შუალედი

flex-direction

განსაზღვრავს main ღერძის მიმართულებას — items ლაგდება ხაზად თუ სვეტად.

მნიშვნელობები

მნიშვნელობა	აღწერა
`row`	ჰორიზონტალურად (default)
`row-reverse`	ჰორიზონტალურად, შებრუნებული
`column`	ვერტიკალურად
`column-reverse`	ვერტიკალურად, შებრუნებული

მაგალითები

column

HTML

<div class="f"><div class="i">1</div><div class="i">2</div></div>

CSS

.f { display:flex; flex-direction:column; }
.i { background:#f59e0b; color:#fff; padding:8px; margin:2px; }

👁 შედეგი (Live Preview)

flex-wrap

განსაზღვრავს, გადადის თუ არა items ახალ ხაზზე, როცა ადგილი არ ჰყოფნით. nowrap (default) აჭყლეტს ერთ ხაზში.

მნიშვნელობები

მნიშვნელობა	აღწერა
`nowrap`	ერთ ხაზში (default)
`wrap`	გადადის ახალ ხაზზე
`wrap-reverse`	ახალ ხაზზე, შებრუნებული

💡 რჩევა: flex-flow: row wrap; არის flex-direction + flex-wrap-ის shorthand.

gap modern

chrome 84+ firefox 63+ safari 14.1+ edge 84+

gap (flex)

flex-items-ს შორის შუალედი — margin-ის გარეშე. სუფთა და თანამედროვე გზა.

სინტაქსი

Syntax

gap: 16px;
gap: 10px 20px; /* row gap, column gap */

მაგალითები

gap flex-ში

HTML

<div class="f"><div class="i">1</div><div class="i">2</div><div class="i">3</div></div>

CSS

.f { display:flex; gap:16px; }
.i { background:#0ea5e9; color:#fff; padding:12px; }

👁 შედეგი (Live Preview)

flex: grow shrink basis

flex-grow, flex-shrink, flex-basis

აკონტროლებენ თითოეული item-ის ზრდას/შემცირებას:

flex-grow — როგორ იყოს თავისუფალი ადგილი განაწილებული (0 = არ იზრდება);
flex-shrink — როგორ შემცირდეს ადგილის უქონლობისას;
flex-basis — საწყისი ზომა.

shorthand: flex: 1; = flex: 1 1 0.

სინტაქსი

Syntax

flex: 1;            /* თანაბრად გაიზარდოს */
flex: 0 0 200px;    /* ფიქსირებული 200px */

მაგალითები

flex: 1 — თანაბარი სვეტები

HTML

<div class="f"><div class="i">flex:1</div><div class="i two">flex:2</div></div>

CSS

.f { display:flex; gap:8px; }
.i { flex:1; background:#8b5cf6; color:#fff; padding:14px; text-align:center; }
.two { flex:2; }

👁 შედეგი (Live Preview)

💡 რჩევა: sidebar + content განლაგებისთვის: sidebar-ს flex: 0 0 250px;, content-ს flex: 1;.

12 🟦 CSS Grid

Grid არის ორგანზომილებიანი განლაგების სისტემა (სტრიქონები და სვეტები ერთდროულად). იდეალურია მთლიანი გვერდის სტრუქტურისა და რთული ბადეებისთვის. ცოცხალი დიაგრამით ააწყვე ბადე.

display: grid

Grid — ინტერაქტიული სქემა

display: grid კონტეინერს აქცევს ბადედ. grid-template-columns/rows განსაზღვრავს სვეტებსა და სტრიქონებს. ქვემოთ შეცვალე რაოდენობა და gap.

🟦 ინტერაქტიული Grid დიაგრამა

columns 3 rows 2 gap 10px

💡 რჩევა: 1fr = თავისუფალი ადგილის ერთი წილი. repeat(3, 1fr) = 3 თანაბარი სვეტი.

grid-template-columns

grid-template-columns / rows

განსაზღვრავს სვეტების (ან სტრიქონების) რაოდენობასა და ზომას. იყენებს px, %, fr, auto, repeat(), minmax().

სინტაქსი

Syntax

grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 200px 1fr;

მაგალითები

3 სვეტი

HTML

<div class="g"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

CSS

.g { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.g div { background:#3b82f6; color:#fff; padding:16px; text-align:center; }

👁 შედეგი (Live Preview)

responsive auto-fit

შეცვალე preview-ს სიგანე — სვეტები თავად ადაპტირდება.

HTML

<div class="g"><div>A</div><div>B</div><div>C</div><div>D</div></div>

CSS

.g { display:grid; grid-template-columns: repeat(auto-fit, minmax(80px,1fr)); gap:8px; }
.g div { background:#10b981; color:#fff; padding:16px; text-align:center; }

👁 შედეგი (Live Preview)

grid-column / grid-row

grid-column & grid-row

განსაზღვრავს, რამდენ უჯრას მოიცავს ელემენტი. grid-column: 1 / 3 = 1-ლი ხაზიდან მე-3-მდე (ანუ 2 სვეტი).

სინტაქსი

Syntax

grid-column: 1 / 3;   /* span 2 columns */
grid-row: 1 / 2;
grid-column: span 2;

მაგალითები

span 2

HTML

<div class="g"><div class="wide">დიდი</div><div>2</div><div>3</div></div>

CSS

.g { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.g div { background:#a855f7; color:#fff; padding:14px; text-align:center; }
.wide { grid-column: span 2; }

👁 შედეგი (Live Preview)

grid-area

grid-area & grid-template-areas

საშუალებას იძლევა ბადის უბნებს სახელები დაარქვა და ვიზუალურად „დახატო" განლაგება. ულამაზესია გვერდის სტრუქტურისთვის (header/sidebar/main/footer).

სინტაქსი

Syntax

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";
.header { grid-area: header; }

მაგალითები

გვერდის layout

HTML

<div class="page">
  <div class="h">header</div>
  <div class="s">sidebar</div>
  <div class="m">main</div>
</div>

CSS

.page { display:grid; gap:6px;
  grid-template-columns: 80px 1fr;
  grid-template-areas: "h h" "s m"; }
.h { grid-area:h; background:#1e293b; }
.s { grid-area:s; background:#475569; }
.m { grid-area:m; background:#94a3b8; }
.page div { color:#fff; padding:12px; text-align:center; }

👁 შედეგი (Live Preview)

gap

gap (grid)

ბადის უჯრებს შორის შუალედი. gap: 20px ან ცალკე row-gap/column-gap.

სინტაქსი

Syntax

gap: 20px;
gap: 10px 30px; /* row column */

13 📋 Lists

სიის თვისებები აკონტროლებენ მარკერებს (წერტილი, ნომერი) და მათ სტილს. ხშირად ნავიგაციის მენიუები <ul>-ით კეთდება და მარკერები იშლება.

list-style

shorthand: list-style: type position image. ყველაზე ხშირად list-style: none გამოიყენება მარკერების მოსახსნელად (მენიუებში).

მნიშვნელობები

მნიშვნელობა	აღწერა
`disc / circle / square`	მარკერის ფორმა (ul)
`decimal / lower-roman`	ნუმერაცია (ol)
`none`	მარკერის გარეშე
`inside / outside`	მარკერის პოზიცია

მაგალითები

მენიუ მარკერების გარეშე

HTML

<ul class="menu"><li>მთავარი</li><li>ჩვენ შესახებ</li><li>კონტაქტი</li></ul>

CSS

.menu { list-style: none; padding:0; display:flex; gap:16px; }
.menu li { background:#e0f2fe; padding:8px 14px; border-radius:6px; }

👁 შედეგი (Live Preview)

14 🧮 Tables

ცხრილის თვისებები აკონტროლებენ ჩარჩოების გაერთიანებას და სვეტების სიგანის ალგორითმს, რაც წაკითხვად, ლამაზ ცხრილს ქმნის.

border-collapse

განსაზღვრავს, უჯრების ჩარჩოები გაერთიანდეს ერთ ხაზად (collapse) თუ ცალკე დარჩეს (separate). თითქმის ყოველთვის collapse გვინდა.

მნიშვნელობები

მნიშვნელობა	აღწერა
`collapse`	ჩარჩოები ერთიანდება ერთ ხაზში
`separate`	ცალკეული ჩარჩოები (default)

მაგალითები

სუფთა ცხრილი

HTML

<table><tr><th>სახელი</th><th>ასაკი</th></tr><tr><td>ნინო</td><td>21</td></tr></table>

CSS

table { border-collapse: collapse; width:100%; }
th, td { border:1px solid #cbd5e1; padding:8px; }
th { background:#f1f5f9; }

👁 შედეგი (Live Preview)

table-layout

აკონტროლებს სვეტების სიგანის ალგორითმს. fixed სწრაფია და სვეტებს თანაბრად/მითითებულად ანაწილებს; auto შინაარსს ერგება.

მნიშვნელობები

მნიშვნელობა	აღწერა
`auto`	სიგანე შინაარსს ერგება (default)
`fixed`	ფიქსირებული, სწრაფი რენდერი

💡 რჩევა: დიდი ცხრილებისთვის table-layout: fixed; width: 100%; მნიშვნელოვნად აჩქარებს რენდერს.

15 📝 Forms

ფორმის ელემენტებს ბრაუზერი ნაგულისხმევ სტილს აძლევს, რაც ხშირად არ ერგება დიზაინს. აქ ვისწავლით input, select, textarea და button-ის ლამაზ გაფორმებას.

input

input სტილი

input-ის გასაფორმებლად ვცვლით border, padding, border-radius და :focus მდგომარეობას. outline-ს ჯობს არ მოვხსნათ accessibility-ისთვის — შევცვალოთ.

მაგალითები

სტილიზებული input

დააკლიკე input-ს preview-ში :focus ეფექტისთვის.

HTML

<input type="text" placeholder="შეიყვანე სახელი">

CSS

input {
  padding: 10px 14px;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
}
input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}

👁 შედეგი (Live Preview)

✓ საუკეთესო პრაქტიკა

focus-ის ვიზუალი აუცილებლად დატოვე — ხელს უწყობს კლავიატურით ნავიგაციას.

select, textarea

select & textarea

textarea-ს ხშირად ვუყენებთ resize: vertical-ს, რომ მხოლოდ ვერტიკალურად გაიწელოს. select ნაწილობრივ სტილდება (ისარი ბრაუზერზეა დამოკიდებული).

მაგალითები

textarea

HTML

<textarea placeholder="კომენტარი"></textarea>

CSS

textarea {
  width:100%; padding:10px; border-radius:8px;
  border:2px solid #cbd5e1; resize: vertical; min-height:70px;
}

👁 შედეგი (Live Preview)

button

button სტილი

ღილაკი ერთ-ერთი ყველაზე მნიშვნელოვანი UI ელემენტია. ვხსნით ნაგულისხმევ ჩარჩოს, ვუმატებთ ფერს, cursor: pointer-ს, :hover და transition ეფექტებს.

მაგალითები

პრაიმარი ღილაკი

HTML

<button class="btn">გაგზავნა</button>

CSS

.btn {
  background:#2563eb; color:#fff; border:none;
  padding:12px 24px; border-radius:8px; font-size:15px;
  cursor:pointer; transition:.2s;
}
.btn:hover { background:#1d4ed8; transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

👁 შედეგი (Live Preview)

✓ საუკეთესო პრაქტიკა

ღილაკს ყოველთვის მიეცი cursor: pointer და ხილული :hover/:focus მდგომარეობა.

16 📱 Responsive Design

Responsive დიზაინი ნიშნავს, რომ გვერდი ლამაზად გამოიყურება ნებისმიერ ეკრანზე — მობილურზე, ტაბლეტზე, კომპიუტერზე. ამის გული არის Media Queries.

viewport meta

Viewport meta tag

Responsive-ის წინაპირობა. ამ ტეგის გარეშე მობილური ბრაუზერი გვერდს „ამცირებს", თითქოს დესკტოპია. ის HTML-ში, <head>-ში იწერება.

სინტაქსი

Syntax

<meta name="viewport" content="width=device-width, initial-scale=1.0">

💡 რჩევა: ეს ტეგი ყველა responsive გვერდის სავალდებულო ნაწილია — დაამატე ყოველთვის.

@media

@media — Media Queries

Media Query საშუალებას იძლევა სტილი მხოლოდ გარკვეულ პირობებში (მაგ. ეკრანის სიგანე) გავრცელდეს. ეს არის responsive-ის ძირითადი ინსტრუმენტი.

სინტაქსი

Syntax

@media (max-width: 768px) {
  .menu { flex-direction: column; }
}

მნიშვნელობები

მნიშვნელობა	აღწერა
`max-width: 768px`	ეკრანი ≤ 768px (მობილური/ტაბლეტი)
`min-width: 1024px`	ეკრანი ≥ 1024px (დესკტოპი)
`orientation: landscape`	თარაზული ორიენტაცია
`prefers-color-scheme: dark`	მომხმარებლის მუქი თემა

მაგალითები

ფერი იცვლება ეკრანის სიგანით

შეცვალე preview-ს სიგანე ~500px-ზე ქვემოთ — ფონი შეიცვლება.

HTML

<div class="box">შეცვალე სიგანე</div>

CSS

.box { padding:30px; background:#22c55e; color:#fff; text-align:center; }
@media (max-width: 500px) {
  .box { background:#ef4444; }
}

👁 შედეგი (Live Preview)

breakpoints

Breakpoints (Mobile/Tablet/Desktop)

Breakpoint-ები არის ეკრანის ზომები, სადაც განლაგება იცვლება. გავრცელებული მიდგომაა Mobile First — ჯერ მობილური სტილი, შემდეგ min-width-ით დიდი ეკრანებისთვის დამატებები.

მნიშვნელობები

მნიშვნელობა	აღწერა
`~480px`	Mobile (ტელეფონი)
`~768px`	Tablet (ტაბლეტი)
`~1024px`	Desktop (ლეპტოპი)
`~1280px+`	Large Desktop

მაგალითები

Mobile First grid

HTML

<div class="grid"><div>1</div><div>2</div><div>3</div></div>

CSS

.grid { display:grid; gap:8px; grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
.grid div { background:#6366f1; color:#fff; padding:16px; text-align:center; }

👁 შედეგი (Live Preview)

✓ საუკეთესო პრაქტიკა

დაიწყე Mobile First-ით — უფრო მარტივი და სწრაფია.
Breakpoint-ები შინაარსს მიუსადაგე, არა კონკრეტული მოწყობილობის ზომას.

17 🎬 Animations

CSS-ით ელემენტებს ვამოძრავებთ სამი ძირითადი ხელსაწყოთი: transition (გლუვი გადასვლა), transform (ფორმის ცვლა) და @keyframes + animation (რთული ანიმაცია).

transition

აძლევს თვისების ცვლილებას გლუვ გადასვლას დროში. shorthand: transition: property duration timing delay.

სინტაქსი

Syntax

transition: all 0.3s ease;
transition: background 0.2s, transform 0.2s;

მაგალითები

გლუვი hover

გადაატარე მაუსი ყუთზე.

HTML

<div class="box">hover</div>

CSS

.box {
  width:100px; height:100px; background:#0ea5e9;
  transition: all 0.4s ease;
}
.box:hover {
  background:#f43f5e;
  border-radius:50%;
  transform: rotate(45deg);
}

👁 შედეგი (Live Preview)

✗ ხშირი შეცდომები

transition იწერება საწყის (არა :hover) მდგომარეობაზე, თორემ უკან დაბრუნება მკვეთრი იქნება.

transform

ცვლის ელემენტის გეომეტრიას ნაკადის დარღვევის გარეშე: გადაადგილება, ბრუნვა, მასშტაბირება, დახრა. ძალიან ეფექტურია (GPU-ზე მუშაობს).

მნიშვნელობები

მნიშვნელობა	აღწერა
`translate(x, y)`	გადაადგილება
`rotate(deg)`	ბრუნვა გრადუსებში
`scale(n)`	მასშტაბი (1 = საწყისი)
`skew(deg)`	დახრა

მაგალითები

scale + rotate

გადაატარე მაუსი.

HTML

<div class="b">card</div>

CSS

.b { width:120px; height:70px; background:#8b5cf6; color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:.3s; }
.b:hover { transform: scale(1.2) rotate(-5deg); }

👁 შედეგი (Live Preview)

💡 რჩევა: ცენტრში მოქცევის ძველი ხერხი: position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);

@keyframes / animation

@keyframes & animation

@keyframes-ით ვაღწერთ ანიმაციის ეტაპებს (0%–100%), animation-ით კი ვრთავთ ელემენტზე. იძლევა ციკლურ, ავტომატურ მოძრაობას.

სინტაქსი

Syntax

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}
.ball { animation: bounce 1s infinite; }

მაგალითები

მხტუნავი ბურთი

HTML

<div class="ball"></div>

CSS

@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-30px); }
}
.ball {
  width:40px; height:40px; border-radius:50%;
  background:#f59e0b; margin:30px auto;
  animation: bounce 0.8s infinite ease-in-out;
}

👁 შედეგი (Live Preview)

💡 რჩევა: animation shorthand: animation: name duration timing delay iteration direction;

18 🔣 CSS Variables

CSS Custom Properties (ცვლადები) საშუალებას იძლევა მნიშვნელობა ერთხელ განსაზღვრო და მრავალგან გამოიყენო. თემების მართვისა და კოდის თანმიმდევრულობისთვის შეუცვლელია.

:root { --var } modern

chrome 49+ firefox 31+ safari 9.1+ edge 15+

:root და --variable

ცვლადი იწყება ---ით და ჩვეულებრივ :root-ში (გლობალურად) განისაზღვრება. :root არის დოკუმენტის ფესვი (html), ოღონდ მაღალი specificity-ით.

სინტაქსი

Syntax

:root {
  --primary-color: #2563eb;
  --gap: 16px;
}

var(--name)

var() — ცვლადის გამოყენება

var() კითხულობს ცვლადის მნიშვნელობას. შესაძლებელია fallback-ის მითითება: var(--x, blue). ცვლადები „მემკვიდრეობითია" და JavaScript-ითაც იცვლება.

მაგალითები

ცვლადებით სტილი

HTML

<button class="btn">A</button><button class="btn alt">B</button>

CSS

:root {
  --brand: #2563eb;
  --radius: 10px;
}
.btn {
  background: var(--brand);
  border-radius: var(--radius);
  color:#fff; border:none; padding:10px 18px;
}
.alt { --brand: #16a34a; } /* ცვლადის გადაფარვა */

👁 შედეგი (Live Preview)

💡 რჩევა: JavaScript-ით: el.style.setProperty('--brand', '#f00') — ცოცხალი თემის ცვლა.

🌍 რეალური გამოყენება

თემების (light/dark) გადართვა ცვლადებით: :root-ში განსაზღვრე ფერები, [data-theme="dark"]-ში გადააფარე — სწორედ ასეა აწყობილი ეს გვერდის თემის გადამრთველი.

19 🚀 Modern CSS

თანამედროვე CSS ფუნქციები, რომლებიც კოდს ამარტივებენ და responsive დიზაინს ბუნებრივს ხდიან — clamp(), min(), max(), aspect-ratio, object-fit, container queries და logical properties.

clamp() / min() / max() modern

chrome 79+ firefox 75+ safari 13.1+ edge 79+

clamp(), min(), max()

მათემატიკური ფუნქციები responsive ზომებისთვის. clamp(min, ideal, max) მნიშვნელობას ზღვრებში ამწყვდევს — იდეალურია fluid typography-ისთვის media query-ების გარეშე.

სინტაქსი

Syntax

font-size: clamp(1rem, 2.5vw, 2rem);
width: min(90%, 1200px);

მაგალითები

Fluid სათაური

შეცვალე preview-ს სიგანე — ზომა გლუვად იცვლება.

HTML

<h1 class="t">Fluid Title</h1>

CSS

.t { font-size: clamp(1.2rem, 5vw, 3rem); color:#7c3aed; }

👁 შედეგი (Live Preview)

💡 რჩევა: width: min(90%, 1200px) = მაქს. 1200px, მაგრამ პატარა ეკრანზე 90%. ერთ ხაზში responsive!

aspect-ratio modern

chrome 88+ firefox 89+ safari 15+ edge 88+

ინარჩუნებს ელემენტის სიგანე/სიმაღლის თანაფარდობას. იდეალურია ვიდეოებისთვის, სურათებისთვის, ბარათებისთვის — padding-hack-ს ჩაანაცვლებს.

სინტაქსი

Syntax

aspect-ratio: 16 / 9;

მაგალითები

16:9 ბლოკი

HTML

<div class="v">16 / 9</div>

CSS

.v {
  aspect-ratio: 16 / 9;
  width: 200px;
  background:#0f766e; color:#fff;
  display:flex; align-items:center; justify-content:center;
}

👁 შედეგი (Live Preview)

object-fit modern

chrome 32+ firefox 36+ safari 10+ edge 79+

აკონტროლებს, როგორ მოერგოს <img> ან <video> თავის ყუთს. cover ავსებს ფართობს პროპორციის შენარჩუნებით — ფოტოების grid-ისთვის შეუცვლელია.

მნიშვნელობები

მნიშვნელობა	აღწერა
`cover`	ავსებს ყუთს, ნაწილი შეიძლება მოიჭრას
`contain`	მთლიანად ჩანს, შესაძლოა დარჩეს ცარიელი ადგილი
`fill`	ავსებს ყუთს, შესაძლოა დამახინჯდეს (default)

💡 რჩევა: img { width:100%; height:200px; object-fit:cover; } — სხვადასხვა ზომის ფოტო ერთნაირ ბადეში.

@container modern

chrome 105+ firefox 110+ safari 16+ edge 105+

Container Queries

media query-ისგან განსხვავებით, რომელიც ეკრანის ზომას უყურებს, container query მშობელი კონტეინერის ზომას უყურებს. ეს კომპონენტებს ნამდვილად მრავალჯერ გამოყენებადს ხდის.

სინტაქსი

Syntax

.card-wrap { container-type: inline-size; }
@container (min-width: 400px) {
  .card { display: flex; }
}

💡 რჩევა: Container queries idealურია „card" კომპონენტებისთვის, რომლებიც სხვადასხვა სიგანის სვეტებში თავსდება.

margin-inline, padding-block... modern

chrome 87+ firefox 66+ safari 14.1+ edge 87+

Logical Properties

ფიზიკური (left/right/top/bottom) ნაცვლად ლოგიკური მიმართულებები (inline/block, start/end), რომლებიც ტექსტის მიმართულებას (LTR/RTL) ერგებიან. მრავალენოვანი საიტებისთვის მნიშვნელოვანია.

სინტაქსი

Syntax

margin-inline: auto;     /* მარცხ.+მარჯვ. */
padding-block: 20px;     /* ზედა+ქვედა */
inset: 0;                /* top/right/bottom/left */

💡 რჩევა: margin-inline: auto; = ჰორიზონტალური ცენტრირება, RTL-შიც სწორად მუშაობს.

20 🏛️ CSS Architecture

როცა პროექტი იზრდება, CSS-ის ორგანიზება კრიტიკული ხდება. აქ შევეხებით საწყის წარმოდგენას BEM-ზე, utility კლასებსა და მრავალჯერ გამოყენებად კომპონენტებზე.

Block__Element--Modifier

BEM მეთოდოლოგია

BEM (Block, Element, Modifier) არის კლასების დასახელების სისტემა, რომელიც კოდს კითხვადსა და პროგნოზირებადს ხდის: .block, .block__element, .block--modifier.

სინტაქსი

Syntax

.card { }
.card__title { }
.card__button { }
.card--featured { }

მაგალითები

BEM ბარათი

HTML

<div class="card card--hot">
  <h3 class="card__title">სათაური</h3>
</div>

CSS

.card { border:1px solid #ddd; padding:16px; border-radius:8px; }
.card__title { margin:0; color:#333; }
.card--hot { border-color:#ef4444; background:#fef2f2; }

👁 შედეგი (Live Preview)

✓ საუკეთესო პრაქტიკა

Block = დამოუკიდებელი კომპონენტი, Element = მისი ნაწილი, Modifier = ვარიაცია.
არ გააკეთო ღრმად ჩალაგებული სელექტორები — BEM ბრტყელ სტრუქტურას უჭერს მხარს.

utility classes

Utility Classes

პატარა, ერთ-დანიშნულებიანი კლასები (.mt-2, .text-center, .flex), რომელთა კომბინაციით HTML-შივე ააწყობ დიზაინს. ეს არის Tailwind CSS-ის მიდგომა.

მაგალითები

Utility კომბინაცია

HTML

<div class="flex center pad bg">utility-first</div>

CSS

.flex { display:flex; }
.center { justify-content:center; align-items:center; }
.pad { padding:20px; }
.bg { background:#dbeafe; color:#1e3a8a; }

👁 შედეგი (Live Preview)

💡 რჩევა: Utility კლასები სწრაფ პროტოტიპირებას უწყობენ ხელს, BEM კი — დიდ, სტრუქტურირებულ კომპონენტებს. ხშირად ერთად გამოიყენება.

reusable components

Reusable Components

მრავალჯერ გამოყენებადი კომპონენტი (ღილაკი, ბარათი, მოდალი) თვითკმარია — მისი სტილი დამოკიდებული არ არის გარე კონტექსტზე. ცვლადებთან ერთად ეს თანმიმდევრულ დიზაინ-სისტემას ქმნის.

✓ საუკეთესო პრაქტიკა

კომპონენტს ფერები/ზომები ცვლადებიდან მიეცი — ერთ ადგილას ცვლი თემას.
თავიდან აიცილე ფიქსირებული width — კომპონენტი მშობელს უნდა მოერგოს.

21 ♿ Accessibility

წვდომადობა (a11y) ნიშნავს, რომ საიტი ყველასთვის გამოსადეგია — მათ შორის კლავიატურით მომუშავე და მხედველობადაქვეითებული მომხმარებლებისთვის. CSS აქ დიდ როლს თამაშობს.

:focus / :focus-visible

Focus states

ფოკუსის ვიზუალური მაჩვენებელი აუცილებელია კლავიატურით ნავიგაციისთვის. არასოდეს წაშალო outline ჩანაცვლების გარეშე. :focus-visible აჩვენებს ფოკუსს მხოლოდ კლავიატურისას.

სინტაქსი

Syntax

button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

მაგალითები

ხილული ფოკუსი

Tab-ით გადაიარე ღილაკებზე preview-ში.

HTML

<button class="b">ერთი</button> <button class="b">ორი</button>

CSS

.b { padding:10px 16px; border:none; border-radius:6px; background:#e2e8f0; }
.b:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

👁 შედეგი (Live Preview)

✗ ხშირი შეცდომები

outline: none ჩანაცვლების გარეშე — კლავიატურის მომხმარებელი იკარგება გვერდზე.

@media (prefers-reduced-motion) modern

prefers-reduced-motion

ზოგ მომხმარებელს ანიმაცია უქმნის დისკომფორტს (vestibular დარღვევები). ამ media query-ით შეგვიძლია ანიმაცია გამოვრთოთ მათთვის.

სინტაქსი

Syntax

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

💡 რჩევა: ეს მცირე ბლოკი დიდ სხვაობას ქმნის წვდომადობაში — დაამატე ყველა პროექტს.

22 ⚡ Performance

CSS-ის ოპტიმიზაცია აჩქარებს გვერდის ჩატვირთვასა და რენდერს. აქ შევეხებით render-blocking-ს და საუკეთესო პრაქტიკას.

render-blocking

Render-blocking CSS

ბრაუზერი ვერ აჩვენებს გვერდს, სანამ CSS არ ჩაიტვირთება — CSS არის „render-blocking" რესურსი. ამიტომ მნიშვნელოვანია CSS-ის ზომა და ჩატვირთვის ოპტიმიზაცია.

✓ საუკეთესო პრაქტიკა

მნიშვნელოვანი (critical) CSS ჩასვი <head>-ში inline-ად, დანარჩენი — ცალკე ფაილში.
გამოუყენებელი CSS წაშალე (dead code).
პროდაქშენში CSS minify-გააკეთე (ზედმეტი ცარიელი ადგილის მოშორება).

best practices

ოპტიმიზაციის წესები

რამდენიმე პრაქტიკული წესი სწრაფი CSS-ისთვის.

✓ საუკეთესო პრაქტიკა

ანიმაციისთვის გამოიყენე transform და opacity — ისინი GPU-ზე მუშაობენ და არ იწვევენ reflow-ს.
თავი აარიდე ღრმად ჩალაგებულ და ზედმეტად რთულ სელექტორებს.
ნუ გადააჭარბებ box-shadow/filter-ს დიდ ფართობებზე — ძვირია რენდერში.
გამოიყენე will-change ფრთხილად, მხოლოდ ნამდვილად ანიმირებად ელემენტებზე.

✗ ხშირი შეცდომები

ანიმაცია width/height/top/left-ით — იწვევს layout reflow-ს და „ხტუნავს".

23 🌐 Browser Compatibility

სხვადასხვა ბრაუზერი CSS-ს ოდნავ განსხვავებულად უჭერს მხარს. აქ შევეხებით vendor prefix-ებსა და თანამედროვე მხარდაჭერის სტრატეგიას.

-webkit-, -moz-, -ms-

Vendor Prefixes

ექსპერიმენტული თვისებებისთვის ბრაუზერები იყენებდნენ პრეფიქსებს: -webkit- (Chrome/Safari), -moz- (Firefox), -ms- (ძველი Edge/IE). დღეს უმეტესობა აღარ საჭიროებს, მაგრამ ზოგი (მაგ. -webkit-background-clip) ისევ აქტუალურია.

სინტაქსი

Syntax

.box {
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

💡 რჩევა: პრეფიქსების ხელით წერა აღარ გჭირდება — Autoprefixer (PostCSS) ამას ავტომატურად აკეთებს build-ზე.

@supports modern

chrome 28+ firefox 22+ safari 9+ edge 12+

@supports & თანამედროვე მხარდაჭერა

@supports ამოწმებს, ბრაუზერი იცნობს თუ არა კონკრეტულ თვისებას, და შესაბამის სტილს გამოიყენებს — ე.წ. progressive enhancement.

სინტაქსი

Syntax

@supports (display: grid) {
  .layout { display: grid; }
}

✓ საუკეთესო პრაქტიკა

ააგე საბაზისო გამოცდილება ყველა ბრაუზერისთვის, შემდეგ @supports-ით დაამატე თანამედროვე გაუმჯობესებები.
შეამოწმე მხარდაჭერა caniuse.com-ზე ახალი თვისების გამოყენებამდე.

CSS — სრული ქართულენოვანი გზამკვლევი

1 📘 CSS შესავალი

მაგალითები

პირველი CSS წესი

დაკავშირებული თემები:

✓ საუკეთესო პრაქტიკა

დაკავშირებული თემები:

სინტაქსი

მაგალითები

Inline სტილი

✗ ხშირი შეცდომები

დაკავშირებული თემები:

სინტაქსი

მაგალითები

Internal style ბლოკი

დაკავშირებული თემები:

სინტაქსი

მაგალითები

External ფაილის ჩართვა

✓ საუკეთესო პრაქტიკა

დაკავშირებული თემები:

2 🎯 სელექტორები

სინტაქსი

მაგალითები

Universal reset

✗ ხშირი შეცდომები

დაკავშირებული თემები:

სინტაქსი

მაგალითები

ყველა პარაგრაფი

დაკავშირებული თემები:

სინტაქსი

მაგალითები

კლასი მრავალ ელემენტზე

✓ საუკეთესო პრაქტიკა

დაკავშირებული თემები:

სინტაქსი

მაგალითები

ID-ით შერჩევა

✗ ხშირი შეცდომები

დაკავშირებული თემები:

სინტაქსი

მნიშვნელობები

მაგალითები

სხვადასხვა input ტიპი

გარე ბმულების მონიშვნა

დაკავშირებული თემები:

მნიშვნელობები

მაგალითები

Child vs Descendant

დაკავშირებული თემები:

მნიშვნელობები

მაგალითები

:hover ღილაკი

:nth-child — ზებრა ცხრილი

დაკავშირებული თემები:

მნიშვნელობები

მაგალითები

::before / ::after

::first-letter drop cap

✗ ხშირი შეცდომები

დაკავშირებული თემები:

3 ✍️ CSS სინტაქსი

სინტაქსი

მაგალითები

ანატომია

დაკავშირებული თემები:

სინტაქსი

მაგალითები

კომენტარის გამოყენება

დაკავშირებული თემები:

მნიშვნელობები

მაგალითები

rem vs px

✓ საუკეთესო პრაქტიკა

დაკავშირებული თემები:

4 🎨 ფერები

სინტაქსი

მაგალითები

HEX პალიტრა