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

მოკლედ, რა არის CSS სინამდვილეში?

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

p {
  color: red;
}

გამოცადეთ: ჩასვით CSS-ის ეს სამი ხაზი ახალ ფაილში ტექსტის რედაქტორით და შეინახეთ სახელით style.css თქვენს styles-ს საქაღალდეში.

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

  1. გახსენით თქვენი index.html ფაილი და ჩასვით შემდეგი ხაზი სადმე head-ელემენტში (ანუ <head> და </head> ჭდეებს შორის):
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  2. შეინახეთ index.html და ჩატვირთეთ ბრაუზერში. წესით უნდა იხილოთ რაღაც ამის მსგავსი:

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.თუ თქვენი პარაგრაფის ტექსტი ახლა უკვე წითელია, გილოცავთ! თქვენ უკვე დაწერეთ თქვენი პირველი CSS წარმატებით.

CSS-ის წესის აგებულება

მოდი განვიხილოთ ზემოთ დაწერილი CSS უფრო დაწვრილებით:

CSS p declaration color red

მთლიან აგებულებას უწოდებენ წესების კრებულს (rule set) (შემოკლებით „წესს“). მისი თითოეული შემადგენლის სახელები კი შემდეგია:

შემრჩევი
იგივე სელექტორი (selector), არის HTML-ელემენტის სახელი, წესის დასაწყისში. მისი საშუალებით ხდება ელემენტ(ებ)ის შერჩევა სტილის მისანიჭებლად (მოცემულ შემთხვევაში, <p> ელემენტების). სხვა ელემენტის გასაფორმებლად, უბრალოდ უნდა შეიცვალოს შემრჩევი.
განაცხადი
იგივე დეკლარაცია (declaration), არის ცალკეული წესი, როგორიცაა color: red; მიუთითებს, თუ ელემენტის რომელი თვისება უნდა შეიცვალოს.
თვისება
არის საშუალება, რომლითაც შეიძლება HTML-ის გაფორმება. (მოცემულ შემთხვევაში color არის <p> ელემენტის თვისება, რომელიც ფერს განსაზღვრავს.) CSS-ში ირჩევთ, თუ რომელ თვისებაზე იმოქმედებს მოცემული წესი.
თვისების მნიშვნელობა
თვისების მარჯვნივ, ორწერტილის შემდეგ იწერება მნიშვნელობა, რომლითაც ხდება გაფორმების არჩევა უამრავი შესაძლებლობიდან, მოცემული თვისებისთვის (ბევრი color-მნიშვნელობა არსებობს გარდა red-ისა).

გაითვალისწინეთ სინტაქსის სხვა მნიშვნელოვანი ნაწილები:

  • მთლიანი წესი (გარდა შემრჩევისა) უნდა მოთავსდეს ფიგურულ ფრჩხილში ({}).
  • თითოეულ განაცხადში, ორწერტილით (:) გამოიყოფა თვისება მისი მნიშვნელობისგან.
  • წესების კრებულში, თითოეული განაცხადის ბოლოს უნდა დაიწეროს წერტილ-მძიმე (;) მომდევნო განაცხადისგან გამოსაყოფად.

თვისების მრავალი მნიშვნელობის ერთბაშად ჩასასწორებლად, საჭიროა მათი გამოყოფა წერტილ-მძიმით, ამგვარად:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

მრავალი ელემენტის შერჩევა

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

p, li, h1 {
  color: red;
}

სხვადასხვა სახის შემრჩევები

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

შემრჩევის სახელი რას ირჩევს მაგალითი
ელემენტის შემრჩევი (ზოგჯერ უწოდებენ ჭდის ან სახეობის შემრჩევს) HTML-ის ყველა ელემენტი შესაბამისი სახის. p-ით აირჩევა ყველა <p>
ID-ის შემრჩევი ელემენტი, შესაბამისი ID-ით. ცალკეულ HTML-გვერდზე, მოცემული ID-ით, მხოლოდ ერთი ელემენტის გამოყენებაა დაშვებული (და რასაკვირველია, თითოეულ ელემენტზე, მხოლოდ თითო ID). #my-id-ით აირჩევა <p id="my-id"> ან <a id="my-id">
კლასის შემრჩევი ელემენტ(ებ)ი შესაბამისი კლასით მოცემულ გვერდზე. კლასი შეიძლება რამდენიმე ელემეტს ჰქონდეს ერთი და იგივე და თითო ელემენტს რამდენიმე. .my-class-ით აირჩევა <p class="my-class"> და <a class="my-class"> ერთდროულად
თვისების შემრჩევი ელემენტ(ებ)ი შესაბამისი თვისებით, მოცემულ გვერდზე. img[src]-ით აირჩევა <img src="myimage.png"> მაგრამ არა <img>
ფსევდოკლასის შემრჩევი შესაბამისი ელემენტ(ებ)ი, მაგრამ მხოლოდ შესაბამის პირობებში (მაგალითად, მაჩვენებლის მიტანისას). a:hover-ით აირჩევა <a>, მაგრამ მხოლოდ თაგვის მაჩვენებლის გადატარებისას.

კიდევ უამრავი სახის შემრჩევი არსებობს, სრული ჩამონათვალის სანახავად, იხილეთ შემრჩევების სახელმძღვანელო.

შრიფტები და ტექსტი

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

  1. თავდაპირველად, დაბრუნდით წინ და მონახეთ Google-ის შრიფტებიდან ამოღებული კოდი, რომელიც ცალკე გაქვთ შენახული. დაამატეთ <link>-ელემენტი სადმე index.html-ის head-ში (ისევ, <head> და </head> ჭდეებს შორის). დაახლოებით ასე უნდა გამოიყურებოდეს:
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    ეს კოდი თქვენს გვერდს დაუკავშირებს სტილის ცხრილს, რომელიც ჩატვირთავს Open Sans-ის შრიფტების ოჯახს ვებგვერდზე და საშუალებას იძლევა, თქვენს HTML ელემენტებთან გამოყენების, საკუთარ სტილის ცხრილთან.
  2. შემდეგ, წაშალეთ არსებული წესი თქვენი style.css ფაილიდან. ეს უბრალოდ საცდელად იყო, წითელი ფერი არაა კარგი აღსაქმელი ტექსტის წასაკითხად.
  3. დაამატეთ შემდეგი ხაზები მის ადგილას, ჩაანაცვლეთ შესაბამისი font-family-ის ხაზით, რომელიც Google-ის შრიფტებიდან აიღეთ (font-family აღნიშნავსნიშნავს შრიფტებს, რომელთა გამოყენებაც გსურთ ტექსტში). ეს წესი განსაზღვრავს შრიფტს გლობალურად და შრიფტის ზომას მთელ გვერდზე (ვინაიდან <html> არის ზედა ელემენტი, მთლიან გვერდზე და ყველა ელემენტი მის შიგნით, მისგან იღებს მემკვიდრეობითობით font-size და font-family სტილს):
    html {
      font-size: 10px; /* px ნიშნავს 'pixels': ძირითადი შრიფტის ზომა ახლა უკვე 10 pixels სიმაღლის იქნება */
      font-family: 'Open Sans', sans-serif; /* აქ უნდა იყოს დანარჩენი კოდი, Google-ის შრიფტების გვერდიდან */
    }

    გაითვალისწინეთ: CSS-დოკუმენტში, ყველაფერი რაც მოთავსებულია /* და  */ ნიშნებს შორის, წარმოადგენს CSS-ის შენიშვნას (კომენტარს), რომელსაც ბრაუზერი უგულებელყოფს კოდის დამუშავებისას. იგი უბრალოდ გამოსადეგია საჭირო საკითხების აღსანიშნავად, კოდის წერისას და გარჩევისას.

  4. ახლა, ჩვენ ვუთითებთ შრიფტის ზომებს ტექსტის შემცველი ელემენტებისთვის HTML-ის body-ში (როგორიცაა <h1>, <li> და <p>). ასევე, ტექსტს ვასწორებთ შუაში სათაურისთვის და ვაყენებთ ხაზების დაშორებას შიგთავსის უკეთ აღსაქმელად:
    h1 {
      font-size: 60px;
      text-align: center;
    }
    
    p, li {
      font-size: 16px;    
      line-height: 2;
      letter-spacing: 1px;
    }

შეგიძლიათ თავადვე შეარჩიოთ px მნიშვნელობები სურვილისამებრ, იერსახის მოსარგებად, თუმცა ზოგადად, დაახლოებით ასეთი რამე უნდა მიიღოთ:

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

ბლოკები, ყველაფერი ეხება ბლოკებს

ყველაზე მნიშვნელოვანი რამ, რასაც შენიშნავთ CSS-ის წერისას არის ის, რომ ყველაფერი ბლოკებზე მოქმედებს — ზომის მითითება, ფერის, მდებარეობის და ა.შ. HTML-ის ელემენტების უმეტესობა თქვენს გვერდზე, შეიძლება წარმოდგინდეს ერთმანეთზე დაწყობილი ბლოკების სახით.

a big stack of boxes or crates sat on top of one another

არ იქნება გასაკვირი, თუ ვიტყვით, რომ CSS-ის განლაგება ეფუძნება ბლოკურ მოდელს. თითოეულ ბლოკს, რომელიც გვერდზეა განთავსებული გააჩნია შემდეგი თვისებები:

  • padding — შიდა დაშორება, რომელიც გარშემო აკრავს შიგთავსს (მაგ., პარაგრაფის ტექსტს).
  • border — ჩარჩო, არშია ზოლის სახით, რომელიც შემოსაზღვრავს შიდა დაშორებას.
  • margin — მინდორი, გარე დაშორება.

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

ამ განყოფილებაში, აგრეთვე გამოყენებულია:

  • width (სიგანე ელემენტის).
  • background-color, ფერი ელემენტის, მისი შიგთავსისა და შიდა დაშორების უკან.
  • color, ფერი ელემენტის შიგთავსის (ჩვეულებრივ ტექსტის).
  • text-shadow: უთითებს დაცემულ ჩრდილს, ელემენტის ტექსტისთვის.
  • display: უთითებს ელემენტის გამოსახვის რეჟიმს (ჯერჯერობით, შეგიძლიათ არ მიაქციოთ ყურადღება).

ასე რომ, მოდი კიდევ დავამატოთ CSS-კოდი ჩვენს გვერდს! ეს ახალი წესები, ჩასვით გვერდის ბოლოში და ნუ მოგერიდებათ მნიშვნელობების შეცვლა, მიღებული შედეგების გამოსაცდელად.

გვერდის ფერის შეცვლა

html {
  background-color: #00539F;
}

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

ძირითდი შიგთავსის განლაგება

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

ახლა კი შევეხოთ <body> ელემენტს. აქ კიდევ რამდენიმე განაცხადია, მოდი მივყვეთ რიგრიგობით:

  • width: 600px; — ეს აიძულებს body-ელემენტს, რომ მუდამ ჰქონდეს 600 პიქსელის სიგანე.
  • margin: 0 auto; — როდესაც უთითებთ ორ მნიშვნელობას ისეთ თვისებებს, როგორიცაა margin ან padding, პირველი მნიშვნელობა მოქმედებს ელემენტის ზედა და ქვედა მხარეებზე (ამ შემთხვევაში 0 ეთითება), ხოლო მეორე მნიშვნელობა, მოქმედებს ელემენტის მარცხენა და მარჯვენა მხარეებზე (მოცემულ შემთხვევაში მითითებულია auto, რომელიც ხელმისაწვდომ სივრცეს თარაზულად, თანაბრად ანაწილებს მარცხნივ და მარჯვნივ). რასაკვირველია, შეგიძლიათ სამი ან ოთხივე მნიშვნელობა სათითაოდ მიუთითოთ, ვრცლად იხილავთ აქ.
  • background-color: #FF9500; — როგორც აღვნიშნეთ, ეს განსაზღვრავს ელემენტის ფონის ფერს. ამ შემთხვევაში გამოყენებულია მოწითალო სტაფილოსფერი, <html> ელემენტის მუქი ლურჯი ფონისგან გამოსარჩევად, თუმცა, შეგიძლიათ თავადაც მოსინჯოთ სასურველი ფერები.
  • padding: 0 20px 20px 20px; — აქ გვაქვს შიდა დაშორება მითითებული, რომ ცოტა ადგილი იყოს დატოვებული ტექსტის გარშემო. ამ შემთხვევაში, ზედა დაშორება მოცილებულია, ხოლო მარცხნივ, მარჯვნივ და ქვმოთ დატოვებულია 20 პიქსელი. მოცემული მნიშვნელობები ენიჭება შემდეგი თანმიმდევრობით: ზედა, მარჯვენა, ქვედა და მარცხენა, საათის ისრის მიმართულებით. როგორც margin-ის შემთხვევაში, აქაც შეგიძლიათ გამოიყენოთ მხოლოდ ერთი, ორი ან სამი მნიშვნელობა, უფრო მოკლე ჩანაწერისთვის, დაშორების სინტაქსის შესაბამისად.
  • border: 5px solid black; — ეს უბრალოდ უთითებს 5 პიქსელის სიგანის, უწყვეტ შავ ჩარჩოს, შიგთავსის ოთხივე მხარეს.

სათაურის გაფორმება და მდებარეობის განსაზღვრა

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

ალბათ შენიშნავდით, უშნო სიცარიელეს შიგთავსსა და სათაურს შორის. ეს იმიტომ, რომ ბრაუზერებში აისახება <h1>-ელემენტის (ასევე სხვებისაც) ნაგულისხმევი გაფორმება, მაშინაც კი, როცა საერთოდ არ უთითებთ არანაირ CSS-ს! შეიძლება ეს უაზრობად მოგეჩვენოთ, მაგრამ გათვლილია იმისთვის, რომ გვერდს სტილის გარეშეც ჰქონდეს იერსახე, კითხვის გასაადვილებლად. ამ სიცარიელის მოსაშორებლად, ნაგულისხმევი გაფორმება უნდა ჩავანაცვლოთ margin: 0;.კოდით.

შემდეგ, ვაყენებთ სათაურის ზედა და ქვედა შიდა დაშორებებს 20 პიქსელზე და სათაურის ტექსტის ფერს, html-ის ფონის ფერის შესაბამისად.

კიდევ ერთი აღსანიშნავი თვისება, რომელიც გამოვიყენეთ არის text-shadow, იგი აძლევს დაცემული ჩრდილის ეფექტს ელემენტის შიგთავსის ტექსტს. მას გააჩნია ოთხი მნიშვნელობა:

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

ამ შემთხვევაშიც, სასურველია თავად მოსინჯოთ სასურველი მნიშვნელობები და ნახოთ რა გამოგივათ!

სურათის შუაში გასწორება

img {
  display: block;
  margin: 0 auto;
}

ბოლოს, განვათავსოთ სურათი შუაში, რომ უკეთ გამოიყურებოდეს. შეგვიძლია კვლავ გამოვიყენოთ margin: 0 auto ხერხი, რაც მთლიან შიგთავსზე გავაკეთეთ, მაგრამ კიდევ სხვა რამეც იქნება საჭირო. <body>-ელემენტი იყო ბლოკური, რაც ნიშნავს რომ იკავებდა მთლიან სივრცეს გვერდზე, შესაბამისად შეგვეძლო მინდვრებისა და სხვა დაშორებების მითითება. სურათები კი არის ხაზოვანი ელემენტები, რომლებიც მხოლოდ იმ ადგილს იკავებს, სადაც განთავსებულია. ასე რომ, მინდვრებისა და დაშორებების მისათითებლად, პირველ რიგში, სურათს უნდა მივანიჭოთ ბლოკური ელემენტის თვისებები, შემდეგი განაცხადით: display: block;.

გაითვალისწინეთ: ზემოთ არსებული მითითებები გულისხმობს იმ შემთხვევას, როცა თქვენ მიერ გამოყენებული სურათი არ აღემატება მთლიანი შიგთავსის სიგანეს (600 პიქსელს). თუ სურათი უფრო დიდია, იგი გასცდება შიგთავსის საზღვრებს და დაარღვევს გვერდის განლაგებას. ამის გამოსასწორებლად, ან უნდა 1) შეამციროთ სურათის ზომები გრაფიკული რედაქტორით, ან უნდა 2) შეამციროთ სურათის ზომა CSS-ში <img> ელემენტზე width თვისების მეშვეობით, ნაკლები მნიშვნელობის მითითებით (მაგ., 400 px;).

შენიშვნა: არა უშავს, თუ ჯერ კარგად ვერ ჩაწვდით display: block; განაცხადის არსს და სხვაობას, ბლოკურ/ხაზოვან ელემენტებს შორის. ამას უკეთ გაეცნობით CSS-ის სიღრმისეულად შესწავლისას. ვრცლად, display-ის სხვა ხელმისაწვდომი მნიშვნელობების შესახებ, შეგიძლიათ იხილოთ ცნობარის გვერდი.

შეჯამება

თუ ყველა მითითებას მიჰყევით მოცემულ სტატიაში, უნდა მიგეღოთ ქვემოთ გამოსახული გვერდის მსგავსი რამ (შეგიძლიათ იხილოთ აქედანაც):

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

რამე დაბრკოლებას თუ გადააწყდით, ნებისმიერ დროს შეგიძლიათ შეადაროთ თქვენი ნამუშევარი ჩვენი მაგალითის სრულ კოდს GitHub-ზე.

აქ, ჩვენ მხოლოდ მცირედით და ზედაპირულად შევეხეთ CSS-ს. უფრო ღრმად და საფუძვლიანად ასათვისებლად, იხილეთ CSS-ის შესწავლის თემა.

 

მოცემულ მოდულში

 

დოკუმენტების ჭდეები და წვლილის შემტანები

ამ გვერდის შექმნაში, წვლილის შემტანები: G12r, mdnwebdocs-bot
ბოლო განახლების ავტორი: G12r,