ისწავლე

შესავალი CSS-ში

რა არის CSS?

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

CSS-ის სინტაქსი

CSS არის წესებზე დაფუძნებული სტილების ენა. ეს გულისხმობს იმას, რომ ჩვენ განვსაზღვრავთ წესებს, რა ელემენტთა ჯგუფი როგორ უნდა გამოიყურებოდეს. მაგალითად, ჩვენ შეიძლება გვინდოდეს, რომ ჩვენი ვებსაიტის სათაური იყოს ლურჯი და 40 პიქსელის ზომის:

CSS
h1 {
  color: red;
  font-size: 40px;
}

განვიხილოთ ამ ნიმუშში რა ხდება:

  • პირველი სტრიქონიდან განვსაზღვრავთ ე.წ სელექტორს, სადაც ვამბობთ რომ წესები გავრცელდეს ჩვენ მიერ არჩეული h1 ელემენტისთვის.
  • სელექტორს მოყვება ფიგურული ფრჩხილები {}.
  • ფიგურულ ფრჩხილებს შორის ცალკეულ სტრიქონებზე გვაქვს დეკლარაციები. დეკლარაცია შედგება თვისებისა და მნიშვნელობის წყვილებისგან, რომლებიც ორწერტილით (:) გამოიყოფა. მაგალითად, პირველი დეკლარაციის თვისებაა color, რომლის მნიშვნელობაცაა red. ამით განვსაზღვრავთ, რომ ტექსტის ფერი იყოს წითელი.
  • ელემენტებს გააჩნიათ მთელი რიგი თვისებები, რომლებიც კონკრეტულ მნიშვნელობებზე შეგვიძლია დავაყენოთ. მათ შორისაა font-size, რომლითაც ფონტის ზომას ვაყენებთ 40 პიქსელზე 40px. px ამ მნიშვნელობაში არის ათვლის/საზომი ერთეული (unit).

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

CSS-ის შემოტანა დოკუმენტში

დოკუმენტში CSS-ის შემოტანის რამდენიმე გზა არსებობს.

ყველაზე მარტივი და პირდაპირი არის მისი HTML დოკუმენტშივე შემოტანა <style> თეგებში:

HTML
<!doctype html>
<html lang="ka-GE">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>ჩემი ვებ გვერდი</title>
  </head>
  <style>
    h1 {
      color: red;
      font-size: 40px;
    }
  </style>
  <body>
    <h1>CSS-ის გარეშე რა გვეშველებოდა?</h1>
    <p>კასკადური სტილთა ფურცლები (Cascading Style Sheets), იგივე CSS, არის ენა, რომელიც პასუხისმგებელია ვებსაიტის ელემენტების გარეგნობასა და განლაგებაზე</p>
  </body>
</html>

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

CSS
h1 {
  color: red;
  font-size: 40px;
}

შემდეგ index.html-ში [<head>] ელემენტში შემოვიტანოთ [<link>] ელემენტი, რომლითად დოკუმენტში სტილის ფაილების დაკავშირება შეგვიძლია:

HTML
<!doctype html>
<html lang="ka-GE">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <!-- აკავშირებს სტილების ფაილს დოკუმენტთან -->
    <link rel="stylesheet" src="style.css" />
    <title>ჩემი ვებ გვერდი</title>
  </head>
  <body>
    <h1>CSS-ის გარეშე რა გვეშველებოდა?</h1>
    <p>კასკადური სტილთა ფურცლები (Cascading Style Sheets), იგივე CSS, არის ენა, რომელიც პასუხისმგებელია ვებსაიტის ელემენტების გარეგნობასა და განლაგებაზე</p>
  </body>
</html>

rel ატრიბუტში იწერება რა ტიპის რესურსს ვაკავშირებთ, ხოლო src-ში ამ რესურსის მისამართი.

სტილების გაწერა შესაძლებელია ინლაინ, ანუ უშუალოდ ელემენტებზე style ატრიბუტის გამოყენებით:

HTML
<h1 style="color: red; font-size: 40px">CSS-ის გარეშე რა გვეშველებოდა?</h1>

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

გასტილვა id-ითა და class-ით

ზემოთ მოცემულ ნიმუშში, ჩვენ სელექტორებად ვიყენებთ უშუალოდ ელემენტების სახელს, რაც იმას ნიშნავს, რომ სტილები გავრცელდება აბსოლუტურად ყველა ამ სახელის მქონე ელემენტზე. არის შემთხვევები, როცა ჩვენ ერთი და იმავა ელემენტებში ზოგის გასტილვა გვინდა და ზოგის -- არა. მაშინ ჩვენ გვჭირდება, რომ სახელის მაგივრად რაიმე სხვა ნიშნით განვასხვავოთ ან დავაჯგუფოთ ელემენტები.

id ატრიბუტით გასტილვა

id არის ატრიბუტი, რომლითაც ჩვენ შეგვიძლია ელემენტებს მივანიჭოთ უნიკალური იდენტიფიკატორები. აუცილებელია, რომ ერთი ელემენტის id არ ემთხვეოდეს სხვას, თორემ ამ ატრიბუტის გამოყენებას აზრი არ ექნება!

ვთქვათ, დოკუმენტში გვაქვს რამდენიმე პარაგრაფი, მაგრამ მხოლოდ ერთის გასტილვა გვინდა:

HTML
<h1>ისწავლეთ ვებ დეველოპმენტი</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, quos?</p>
<p id="special">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, quos?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, quos?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, quos?</p>

CSS-ში ახლა შეგვიძლია special აიდის მქონე ელემენტი გავსტილოთ. აიდის სელექტორი იწყება # სიმბოლოთო.

CSS
h1 {
  color: red;
  font-size: 40px;
}

#special {
  color: blue;
}

class ატრიბუტით გასტილვა

class ატრიბუტით შეგვიძლია დავაჯგუფოთ ელემენტები. ვთქვათ ბოლო სამი პარაგრაფი გვინდა, რომ იყოს სხვა ფერის. მაშინ ამ ელემენტებს მივანიჭოთ რაიმე კლასი:

HTML
<h1>ისწავლეთ ვებ დეველოპმენტი</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, quos?</p>
<p class="colored" id="special">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, quos?</p>
<p class="colored">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, quos?</p>
<p class="colored">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, quos?</p>

სტილებში კლასის სელექტორი გამოვიყენოთ, რომელიც . სიმბოლოთი იწყება:

CSS
h1 {
  color: red;
  font-size: 40px;
}

#special {
  color: blue;
}

.colored {
  color: purple;
}

აქ საინტერესო რაღაც მოხდება, თუ შედეგს ვნახავთ ბრაუზერში: ყველა colored კლასის მქონე ელემენტი არის იისფერი, გარდა იმ ელემენტისა, რომელსაც ასევე აქვს id მნიშვნელობით special. იგი დარჩა ლურჯი! რატომ?

სპეციფიკურობა

CSS-ში არსებობს სპეციფიკურობის კანონი, რომლის მიხედვითაც კონკრეტულ სელექტორებს უფრო მეტი პრიორიტეტი ენიჭებათ. წინა მაგალითში special აიდის მქონე ელემენტზე კონფლიქტში მოდის color თვისება #special და .colored სელექტორების მიხედვით. თუ ბრაუზერის შედეგს დავაკვირდებით, ვნახავთ რომ ელემენტი იქნება ლურჯი, რადგან აიდის სელექტორი მიიჩნევა როგორც უფრო სპეციფიკური (რადგან ელემენტის უნიკალური აღმწერია, კლასისგან განსხვავებით) და მაშასადამე უფრო პრიორიტეტული.

ჩვენ მიერ განხილული სამი სელექტორის იერარქია არის შემდეგნაირი ყველაზე სპეციფიკურიდან ნაკლებად სპეციფიკურამდე:

  1. აიდი
  2. კლასი
  3. ელემენტის სახელი

თუ სპეციფიკურობა ერთი და იგივეა, მაშინ ბოლოს დაწერილი წესი შევა ძალაში:

CSS
h1 {
  color: red;
}

h1 {
  color: blue;
}

h1 {
  color: green;
}

რადგან უკანასკნელი წესი ელემენტს აძლევს მწვანე ფერს, ის სწორედ ამ ფერის იქნება.

შეჯამება

ამ თავში მიმოვიხილეთ ყველა ის ძირითადი პრინციპი, რაც საჭიროა ჩვენი ვებსაიტის გასტილვისთვის. ახლა ჩვენ ვიცით, როგორ უნდა შემოვიყანოთ სტილები ჩვენს პროექტში, როგორ გავსტილოთ ელემენტი მათი სახელის, კლასის ან აიდის გამოყენებით და როგორ მუშაობს სპეციფიკურობის პრინციპი, სადაც პრიორიტეტი კონკრეტულ სელექტორებს უფრო ენიჭებათ, ვიდრე სხვებს.