CSS სახელმძღვანელო

CSS - დამწყებებისთვის

CSS - მიმოხილვა CSS - სინტაქსი CSS - სელექტორები CSS - შემოტანა CSS - ტექსტური თვისებები CSS - კომენტარი CSS - ფონები CSS - საზღვრები CSS - სიმაღლე და სიგანე CSS - ფონტის შემოტანა CSS - შიდა დაშორება (PADDING) CSS - გარე დაშორება (MARGIN) CSS - სიები CSS - ბმულები CSS - DISPLAY CSS - პოზიციები CSS - Z-INDEX CSS - OVERFLOW CSS - Opacity CSS - ერთეულები CSS - !important

CSS - სელექტორები

CSS - კომბინატორები CSS - ფსევდო კლასები CSS - ფსევდო ელემენტები CSS - ატრიბუტი სელექტორი

CSS - FLEXBOX

FLEXBOX - მიმოხილვა FLEXBOX - კონტეინერი FLEXBOX - ელემენტები

CSS - Responsive

Responsive - მიმოხილვა Responsive - პრინციპები @media - ქუერები

CSS - საშუალო დონე

CSS - ფილტრები CSS - object-fit CSS - გრადაციები CSS - ფონის თვისებები CSS - შუქჩრდილები CSS - 2D/3D ტრანსფორმაციები CSS - გადასვლები CSS - კურსორის თვისებები CSS - ანიმაციები

CSS - კომპონენტები

CSS - სანავიგაციო მენიუ (NAVBAR) CSS - ფორმა CSS - ღილაკები CSS - ბარათი (card) CSS - CHECKBOX & RADIO

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


  • გარე ფაილიდან (External)
  • მიმდინარე HTML ფაილში (Internal)
  • HTML  ელემენტის შეგნით (Inline)  


CSS შემოტანა გარე ფაილიდან (External) მეთოდი


აღნიშნული მეთოდი გულისხმობს HTML დოკუმენტში გარე CSS ფაილის დაკავშირებას, ვქმნით ფაილს .css გაფართოებით ,  შემდეგ HTML <head> ტეგის შიგნით შემოგვაქვს დოკუმენტში 

მაგალითი:

<link rel="stylesheet" href="style.css">

href - ატრიბუტის მნიშვნელობა არის ჩვენს მიერ შექმნილი  style.css ფაილის მდებარეობა და დასახელება

rel - ატრიბუტის მნიშვნელობა განსაზღვრავს ფაილის ტიპს



CSS შემოტანა შიდა ფაილიდან (Internal) მეთოდი

HTML დოკუმენტში <head> ტეგებს შორის ვხსნით <style> ელემენტს რომლის შორისაც იწერება CSS კოდი

მაგალითი:

<!DOCTYPE html>
<html lang="ka">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>დოკუმენტი</title>
    <style>
        h1{
            color: black;
        }
    </style>
</head>
<body>
    <h1>სათაური</h1>
</body>
</html>

აღნიშნული მეთოდი მუშაობს მხოლოდ იმ დოკუმენტში რომელშიც არის <style> ელემენტი მოთავსებული 


CSS შემოტანა  ელემენტში (Inline) მეთოდი

 Inline სტილი უნიკალურია თითეული ელემენტისთვის რადგან სწორედ საკუთარ style ატრიბუტში ხდება CSS თვისებების მინიჭება

მაგალითი:

 <h1 style="color: blue;">სათაური</h1>


Inline - მეთოდი გამოიყენება მხოლოდ სპეციფიური საჭიროების დროს , არ გამოიყენოთ ის სტანდარტული დეველოპმენდის პროცესში!


სელექტორების უპირატესობა

პრაქტიკაში შესაძლოა ერთსა და იმავე HTML ელემენტზე სხვადასხვა CSS სელექტორი ახდენდეს გავლენას

მაგალითად:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color: black;
        }
        #colored{
            color: green;
        }
    </style>
</head>
<body>
    <h1 id="colored" style="color: blue;">სათაური</h1>
</body>
</html>

როგორც მაგალითზე ვხედავთ h1 ტეგზე სამი სელექტორი ახდენს გავლენას, tag , id და inline css აქედან უპირატესი არის   inline css

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