ეს როგორ მუშაობს

ONLINE - კურსები - CSS

გაკვეთილი 2. ეს როგორ მუშაობს

    CSS -ის ჩართვა  HTML-ში ოთხ ნაირადაა შესაძლებელი:
  1. მხოლოდ ლინკი HTML-ში, თავად CSS კი ცალკე ფაილში (ამ წესს მეტ უპირატესობას ანიჭებენ):
 <link rel="stylesheet" type="text/css" href="style.css">
  1. CSS-ის ჩართვის კიდევ ერთი წესია, ცალკე ფაილში განთავსება:
 <style type="text/css" media="all">@import "style.css";</style>
  1. უშუალოდ HTML-დოკუმენტში:
<style type="text/css">

  body {
  color:green;
  }
</style>
  1. უშუალოდ ელემენტში:
 <p style="font-size: 18px; color: blue;">Этот абзац мы хотим отделить от основного текста</p>
ყველასტილი, ლინკების ჩათვლით .CSS-ფაილზე, ბოლო ხერხის გარდა, ჩაიწერება ტეგებს შორის <HEAD></HEAD>. მაგალითი მოყვანილია  სურათზე № 3.CSS-ის სინტაქსზე მომდევნო გაკვეთილში ვისაუბრებთ, ახლა კი ეს ყველაფერი მოვსინჯოთ მაგალითებზე. HTML -ში საიტის ფონს ფერი შემდეგ ნაირად მიენიჭება:
<body bgcolor="#FF0000">
CSS -ში იგივეს განხორციელება ხდება ასე

body {background-color: #FF0000;}
რაშია CSS-ის უპირატესობა? როდესაც ამას ვაკეთებთ HTML-ში, ფერის კოდის ჩასმა მოგიწევთ საიტის ყველა გვერდზე. და თუ ასეთი გვერდები ასობითაა? მაშინ როცა  CSS-ის დახმარებით ფერის კოდი ჩაიწერება ერთხელ  ფაილში, რომელიც საიტის ყველა გვერდისთვის იმუშავებს. ჩვეულებრივ ასეთ ფაილს უწოდებენ STYLE.CSS.  ამას გარდა არსებობს ისეთი CSS-ფაილები რომლებიც კონკრეტულად მხოლოდ საიტის თითო გვერდისთვის მუშაობს, განსაზღვრავს სტილებს მაგალითად საიტის ცალკეული განყოფილებებისათვის. მაგალიტად, აი როგორ არის მოწყობილი, სტილების ცხრილები საიტისთვის FREEADVICE.RU:

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

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