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 - პოზიციები განსაზღვრავენ ელემენტის პოზიციონირებას 5 მნიშნელობაში ესენია:

static
relative
fixed
absolute
sticky

ელემენტებს რომლებსაც მინიჭებული აქვთ პოზიცია , იმართებიათ თვისებებით

left: მნიშნელობა

top:ნიშნელობა

right:მნიშნელობა

bottom:მნიშნელობა

static პოზიცია

სტატიკური პოზიცია ნაგულისხმევია ყოველი HTML ელემენტისთვის, მასზე არ მოქმედებს თვისებები (left,top,right,bottom)

მაგალითი:

   .container{
        position: static;
   }

relative პოზიცია

relative ელემენტი , განლაგებულია სტანდარტული პოზიციით, მისი გადაადგილება არ ახდენს

გავლენას სხვა ელემენტის მდებარეობაზე

მაგალითი:

   .container{
      position: relative;
      left: 25px;
    }

absolute პოზიცია

absolute ელემენტი , განლაგებულია უახლოესი მშობელი ელემენტის საზღვართან, თუ absolute ელემენტს აქვს განლაგების თვისება (left,top,right,bottom) მისი პოზიციონერება ხდება უახლოეს მშობელ relative თვისების მქონე ელემენტთან, თუ არ ყავს ასეთი მაშინ body ელემენტის მიმართ

მაგალითი:

   .container{
      position: absolute;
      left: 25px;
    }

fixed პოზიცია

fixed პოზიციის მქონე ელემენტი პოზიციონირებს დოკუმენტის ხედვის არეში, მარტივად რომ ვთქვათ მონიტორის საზღვრებში , ის არის ყოველთვის ერთ წერტილში ფიქსირებული და დაყვება სქროლს

მაგალითი:

   .container{
      position: absolute;
      left: 25px;
      bottom: 25px;
    }

sticky პოზიცია

sticky პოზიცია განისაზღვრება მომხმარებლის მონიტორის მდებარეობის მიხედვით, იგი წარმოადგენს relative და fixed ელემენტის ერთგვარ კომბინაციას , როდესაც ელემენტი მოექცევა მომხმარებლის მონიტორის ზედა ნაწილში მაშინ ის გადაიქცევა fixed ელემენტად და გაყვება სქროლს, ის იმოძრავებს მშობელი ელემენტის ქვედა საზღვრამდე

მაგალითი:

   .container{
      position: sticky;
      top: 25px;
    }

sticky პოზიციის ასამუშავებლად აუცილებლად უნდა მიუთითოთ left,top,right,bottom თვისებებიდან ერთ-ერთი