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

CSS - საზღვრების გამოყენებით შეგიძლიათ მიუთითოთ ელემენტის სასაზღვრო სტილი, სიგანე და ფერი


CSS - საზღვრის სტილები 



თვისება border-style განსაზღვრავს საზღვრის ვიზუალს


border-style ხშირად გამოყენებადი მნიშვნელობები :


  • dotted- საზღვრარი შედგება წერტილებისგან 
  • dashed-  საზღვარი შედგება გაწყვეტილი ხაზებისგან
  • solid-   საზღვარი შედგება  უწყვეტი ზოლისგან
  • double- საზღარი არის ორმაგი და დუბრულებული
  • none-  საზღვარი არ გააჩნია


მაგალითი:

border-style: solid;



თვისება border-width განსაზღვრავს საზღვრის სისქეს პიქსელებში

მაგალითი:

border-width: 2px;

თვისება border-color განსაზღვრავს საზღვრის ფერს

მაგალითი:

border-color: black;


ამ სამი თვისების გაერთიანება ერთ border თვისებასშიც შეგვიძლია

მაგალითი:

border: 1px solid black;


1px - აღნიშნავს border-width   თვისებას,

solid -  აღნიშნავს border-style თვისებას,

black - აღნიშნავს border-color თვისებას



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

border-left: 1px solid black;





border-radius საზღვრის რადიუსი ელემენტის  ( კუთხეების მომრგვალება )


border-radius: 7px;


border-radius _ზე ერთი გადაცემული მნიშვნელობა ნიშნავს რომ ელემენტის ოთხივე კუთხე იქნება 7px მომრგვალებული


თუ გვინდა რომელიმე კონკრეტული კუთხის მომრგვალება ვიყენებთ თვისებებს:


border-top-left-radius:7px; // ზედა მარცხენა კუთხის მომრგვალება
border-bottom-left-radius:4px; // ქვედა მარცხენა კუთხის მომრგვალება
border-bottom-right-radius: 6px; // ქვედა მარჯვენა კუთხის მომრგვალება
border-top-left-radius: 2px; // ზედა მარცხენა კუთხის მომრგვალება