CSS დამწყებთათვის
სასწავლო მასალა
1. შესავალი CSS-ში
კეთილი იყოს თქვენი მობრძანება კურსში 'CSS დამწყებთათვის'. ამ გაკვეთილში ჩვენ განვიხილავთ, თუ რა არის CSS, რატომ არის ის აუცილებელი ვებ-დეველოპმენტში და როგორ შეგვიძლია მისი ჩვენს პროექტებთან დაკავშირება.
რა არის CSS?
CSS ნიშნავს Cascading Style Sheets (კასკადური სტილების ფურცლები). თუ HTML-ს შევადარებთ სახლის მშენებლობას, სადაც HTML არის აგურები და კარკასი, CSS არის საღებავი, ინტერიერის დიზაინი და ავეჯი. CSS-ის გარეშე ვებ-გვერდები იქნებოდა მხოლოდ უბრალო, უფერული ტექსტები.
CSS არის სტილის ენა, რომელიც განსაზღვრავს HTML დოკუმენტის ვიზუალურ მხარეს: ფერებს, შრიფტებს, განლაგებასა და ანიმაციებს.
CSS-ის ძირითადი ფუნქციები
- ვიზუალიზაცია: ფერების, ფონების და ჩრდილების დამატება.
- განლაგება (Layout): ელემენტების ზუსტი განლაგება ეკრანზე (Flexbox, Grid).
- ადაპტირება: ვებ-გვერდის მორგება სხვადასხვა ზომის ეკრანებზე (Responsive Design).
CSS-ის დაკავშირების გზები
არსებობს სამი ძირითადი გზა, რათა დავუკავშიროთ CSS HTML ფაილს:
1. Inline CSS (ხაზში)
სტილი იწერება პირდაპირ HTML თეგში style ატრიბუტის გამოყენებით. ეს მეთოდი არ არის რეკომენდებული დიდი პროექტებისთვის.
<p style='color: blue; font-size: 20px;'>ეს არის inline სტილი</p>2. Internal CSS (შიდა)
სტილი იწერება <style> თეგში, რომელიც თავსდება <head> სექციაში.
<head>
<style>
body { background-color: lightgray; }
</style>
</head>3. External CSS (გარე)
ეს არის ყველაზე პროფესიონალური მეთოდი. სტილები ინახება ცალკე .css ფაილში და უკავშირდება HTML-ს <link> თეგის მეშვეობით.
<head>
<link rel='stylesheet' href='style.css'>
</head>მეთოდების შედარება
| მეთოდი | უპირატესობა | ნაკლი |
|---|---|---|
| Inline | სწრაფი ტესტირება | კოდის გამეორება, რთული მართვა |
| Internal | მარტივია ერთ გვერდზე | არ ვრცელდება სხვა გვერდებზე |
| External | საუკეთესო პრაქტიკა | საჭიროებს დამატებით ფაილს |
სასარგებლო რესურსები
დამატებითი ინფორმაციისთვის და დეტალური დოკუმენტაციისთვის ეწვიეთ შემდეგ ბმულებს: