CSS სრული პროფესიონალური კურსი

CSS რა არის?

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

Selectors (ელემენტების არჩევა)

Selectors ირჩევენ HTML ელემენტებს სტილის მისანიჭებლად.

/* ელემენტი */
p { color: red; }

/* კლასი */
.button { background: blue; }

/* აიდი */
#header { font-size: 20px; }

/* კომბინაცია */
div#main.content { padding:10px; }

/* შვილობილი */
ul li { margin:5px; }

/* ყველა ელემენტი */
* { box-sizing:border-box; }

Box Model

თითოეული ელემენტი შედგება:

Content – შიგთავსი
Padding – შიგა სივრცე
Border – საზღვარი
Margin – გარე სივრცე

div {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  margin: 5px;
  box-sizing: border-box; /* padding და border არ აფუჭებს width */
}

Text Properties

ტექსტის კონტროლი:

color: #333;             /* ტექსტის ფერი */
font-size: 16px;         /* ზომა */
font-weight: bold;       /* სისქე */
font-style: italic;      /* სტილი */
line-height: 1.5;        /* ხაზებს შორის */
letter-spacing: 1px;     /* ასოების დაშორება */
text-align: center;      /* განლაგება */
text-transform: uppercase; /* ასოების გარდაქმნა */
text-decoration: underline; /* ხაზის დამატება */

Background & Colors

ფერები და ფონები:

background-color: #f5f5f5;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0.8; /* გამჭვირვალობა */
color: #2c3e50; /* ტექსტის ფერი */

Borders & Radius

საზღვრები და კუთხეები:

border: 2px solid black;
border-top: 3px dashed red;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
outline: 2px dotted blue; /* მხოლოდ ფოკუსისთვის */

Flexbox

ელემენტების მოქნილი განლაგება:

.container {
  display: flex;
  justify-content: space-between; /* ჰორიზონტალური განლაგება */
  align-items: center;           /* ვერტიკალური განლაგება */
  flex-wrap: wrap;               /* გადატანა საჭიროების შემთხვევაში */
}

.item { flex: 1; } /* თითოეული ელემენტი თანაბარი ზომით */

Grid

ჭადრაკული, structured layout:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.grid-item {
  background: #eee;
  padding: 10px;
}

Positioning & Z-index

ელემენტების პოზიციონირება:

position: static | relative | absolute | fixed | sticky;
top: 10px; left: 20px;
z-index: 10; /* გვერდის ელემენტების stack წესი */

Overflow & Visibility

შიგთავსის ხილვადობა:

overflow: visible | hidden | scroll | auto;
visibility: visible | hidden;

Transitions & Animations

CSS მოძრაობა:

transition: all 0.3s ease;
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
.element { animation: fadeIn 2s forwards; }

Pseudo-classes & Pseudo-elements

სპეციალური selectors:

a:hover { color: red; }
input:focus { border-color: blue; }
p::first-letter { font-size: 2em; }
p::before { content: "► "; }
p::after { content: "✓"; }
li:nth-child(odd) { background: #eee; }

Responsive Design & Media Queries

ეკრანის ზომის მიხედვით სტილის შეცვლა:

@media (max-width: 768px) {
  .container { flex-direction: column; }
  .grid { grid-template-columns: 1fr; }
}