რა არის CSS?

კასკადური სტილები (Cascading Style Sheets) — სტილის ენა, რომელიც გამოიყენება დოკუმენტის წარმოდგენის აღწერისთვის, რომელიც დაწერილია მარკაფის ენაზე (HTML, XHTML, SVG, XML).

CSS-ის ძირითადი ფუნქციები:

წარმოდგენის გამოყოფა შიგთავსიდან: საშუალებას აძლევს შეცვალოს ვებგვერდის გარეგნობა მისი სტრუქტურის შეცვლის გარეშე.
ელემენტების სტილიზაცია: მართვა ფერებით, ფონტებით, ზომებით, შუალედებით, საზღვრებით და სხვა ვიზუალური თვისებებით.
რეაგირებადი დიზაინის შექმნა: Media Queries-ის დახმარებით შეიძლება გამოიყენოს სხვადასხვა სტილები მომხმარებლის მოწყობილობის მახასიათებლებზე (ეკრანის გაფართოება, მიმართულება და ა.შ.) დამოკიდებული.
ანიმაციები და გადასვლები: ვიზუალური ეფექტების შექმნა ინტერკტივობისა და მომხმარებლის გამოცდილების გასაუმჯობესებლად.
მოწყობის მართვა: ელემენტების განლაგება გვერდზე სხვადასხვა ტექნიკების გამოყენებით (Flexbox, Grid, float და ა.შ.).

CSS-ის წესების სტრუქტურა:

/* სელექტორი */
h1 {
  /* განცხადებები */
  color: blue; /* თვისება: მნიშვნელობა; */
  font-size: 24px;
}

CSS-ის დაკავშირების ძირითადი მეთოდები HTML დოკუმენტთან:

გარე ფაილი (<link>): ყველაზე გავრცელებული და რეკომენდებული მეთოდი. სტილები ინახება ცალკეულ .css ფაილში:
```
<link rel="stylesheet" href="styles.css">
```
<style> ტეგის შიგნით: სტილები პირდაპირ განსაზღვრულია HTML დოკუმენტში, ჩვეულებრივ <head> ნაწილში. მოსახერხებელია მცირე სტილებისთვის ან სწრაფი ტესტებისთვის.
```
<style>
  p {
    line-height: 1.5;
  }
</style>
```
Inline სტილები (style ატრიბუტი): სტილები ვრცელდება კონკრეტულ HTML ელემენტზე style ატრიბუტის გამოყენებით. აქვს მაღალი პრიორიტეტი, მაგრამ სირთულეს იწვევს შენარჩუნებაში და გაფართოებაში.
```
<div style="border: 1px solid black;">
  ეს არის inline სტილით div.
</div>
```

კასკადურობა განსაზღვრავს, როგორ გამოიყენებს ბრაუზერი სტილებს, როდესაც არსებობს რამდენიმე წესები, რომლებიც იბრძვიან ერთ ელემენტზე. განიხილება:

სელექტორების პრიორიტეტი: უფრო სპეციფიკური სელექტორები აქვთ უფრო მაღალი პრიორიტეტი.
სწრაფი წესის მიმდევრობა: შემდგომი წესები გადაფარავს ადრეულ წესებს იგივე პრიორიტეტით.
მნიშვნელოვნება (!important): წესს, რომელიც აღნიშნულია !important-ით, აქვს უმაღლესი პრიორიტეტი (უნდა გამოიყენოს ფრთხილად).
სტილების წყარო: ავტორის სტილები უფრო მაღალი პრიორიტეტი აქვს, ვიდრე მომხმარებლის ან ბრაუზერის დეფოლტ სტილები.