CSS ფაილის მიერთება

რას ისწავლი

• როგორ მიუერთო CSS ფაილი HTML გვერდს <link> ელემენტით
• რატომ ჯობს ერთი საერთო ფაილი სტილის ყოველ გვერდზე ცალკე წერას
• როგორ გამოიყურება პირველი, მარტივი CSS წესები

ჩონჩხს ტანსაცმელი სჭირდება

მთელი ამ კურსის განმავლობაში ვამბობდით: „ფერი, ზომა, დაშორება CSS-ის საქმეა“. ახლა დროა, პირველად შევხედოთ, როგორ უერთდება CSS HTML-ს. CSS-ს დაწვრილებით ცალკე კურსში ისწავლი; აქ მთავარია კავშირი.

CSS შეიძლება სამ ადგილას დაიწეროს, მაგრამ საიტისთვის ყველაზე სწორი გზა ცალკე ფაილია, მაგალითად css/style.css. HTML მას <head>-ში <link> ელემენტით უერთდება:

<head>
  <meta charset="utf-8">
  <title>ნინოს საიტი</title>
  <link rel="stylesheet" href="css/style.css">
</head>

• rel="stylesheet" ამბობს, რა კავშირია ამ ფაილთან: „სტილის ფაილი“.
• href ამბობს, სად არის ის: ჩვეულებრივი ფარდობითი მისამართი, ისევე როგორც ბმულებში.

<link> ცარიელი ელემენტია: დამხურავი ტეგი არ აქვს.

რატომ ცალკე ფაილი

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

კიდევ ერთი უპირატესობა სიჩქარეა. ბრაუზერი style.css-ს ერთხელ ჩამოტვირთავს და ინახავს: შემდეგ გვერდებზე ის უკვე მზადაა და აღარ იტვირთება. ამას ქეშირება (caching) ჰქვია.

ქვესაქაღალდის გვერდებზე მისამართი ცვლება: hobby/chess.html-იდან ის იქნება ../css/style.css.

სხვა ორი გზა

ამ კურსის მაგალითებში ხშირად ხედავდი <style> ბლოკს: ესეც CSS-ია, ოღონდ პირდაპირ HTML ფაილში ჩაწერილი. ის მოსახერხებელია ერთი გვერდისთვის ან სწრაფი ექსპერიმენტისთვის. მესამე გზაა style ატრიბუტი ერთ ელემენტზე: <p style="color: red">. ის ყველაზე ნაკლებად მოქნილია და მხოლოდ გამონაკლის შემთხვევებში გამოიყენება. საიტისთვის: ცალკე ფაილი.

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

CSS ფაილი წესებისგან შედგება. ყოველი წესი ამბობს: „ამ ელემენტებს მიეცი ეს თვისებები“:

body {
  font-family: sans-serif;
  background: #f4f6ff;
  color: #222;
}

h1 {
  color: #3d5afe;
}

• body და h1 სელექტორებია: რომელ ელემენტებს ეხება წესი.
• ფიგურულ ფრჩხილებში თვისებებია: სახელი, ორწერტილი, მნიშვნელობა, წერტილ-მძიმე.

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

სცადე თავად

ეს რედაქტორი ერთ ფაილთან მუშაობს და შენს css/style.css-ს ვერ ნახავს, ამიტომ აქ იგივე წესები <style> ბლოკშია. შეცვალე ფერები: #3d5afe სხვა ფერის კოდით ან სიტყვით, მაგალითად tomato ან seagreen.

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

• <link> <body>-ში. სტილის ფაილი <head>-ში მიერთდება.
• rel-ის დავიწყება. <link href="style.css"> rel="stylesheet"-ის გარეშე არ იმუშავებს.
• არასწორი გზა. სტილი არ ჩანს? შეამოწმე href: ქვესაქაღალდიდან ../css/style.css. DevTools-ის Network ჩანართში 404 შეცდომა იმას ნიშნავს, რომ ფაილი ვერ მოიძებნა.

<!DOCTYPE html>
<html lang="ka">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ჭადრაკი — ნინოს საიტი</title>
    <link rel="stylesheet" href="../css/style.css">
  </head>
  <body>
    <h1>ჭადრაკი</h1>
  </body>
</html>

მინი-ქვიზი

შეჯამება

• CSS ფაილი <head>-ში მიუერთდება: <link rel="stylesheet" href="css/style.css">.
• ერთი საერთო ფაილი ყველა გვერდისთვის: ერთი ცვლილება ყველგან მოქმედებს, ბრაუზერი კი მას ქეშავს.
• <style> ბლოკი ერთი გვერდისთვის ან ექსპერიმენტისთვის, style ატრიბუტი გამონაკლისისთვის.
• CSS წესი: სელექტორი და ფიგურულ ფრჩხილებში თვისებები.