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 - width და height თვისებები განსაზღვრავენ ელემენტის  სიმაღლეს  და სიგანეს


width და heigth თვისებების მნიშვნელობები შეიძლება იყოს:


  • auto - ნაგულისხმევი  HTML ელემენტის ბრაუზერში განსაზღვრული  მნიშვნელობა 
  • რიცხვითი - განსაზღვრული როგორც (px,cm)
  • % - პროცენტული განსაზღვრა, ზომა გამოითვლება მშობელი ელემენტის ზომებიდან
  • initial - აბრუნებს ნაგულისხმევ მნიშვნელობაზე
  • inherit - მემკვიდრეობით იღებს მნიშვნელობას მშობელი ელემენტიდან


მაგალითი:

width: 450px;
height: 450px;


გაითვალისწინეთ რომ  თუ ელემენტს აქვს ფიქსირებული ზომა (width), ხოლო მომხმარებლის მოწყობლობის მონიტორი არის მასზე ნაკლები  ელემენტი გავა კონტენტიდან , რაც გამოიწვევს ვებ გვერდის ვიზუალური მხარის არევას


მაქსიმალური და მინიმალური სიგანის შეზღუდვა max-width & min-width


როდესაც გვინდა რომ ელემენტს ქონდეს ფიქსირებული სიგანე მაგრამ არ გაცდეს გარკვეულ ზომებს ამისათვის არსებობს max-width თვისება 

მაგალითი:


css:
.container{
      width: 450px;
    max-width: 100%;
}


html:
<div class="container">
  <h1>კონტენტი</h1>
</div>


განმარტება:

სტანდარტულ შემთხვევაში container ელემენტის სიგანე იქნება 450px მაგრამ არაუმეტეს მშობელი ელემენტის ზომის 100%, ანუ თუ მისი მშობელი ელემენტის არის body ტეგი და   მოწყობილობის სიგანე ნაკლებია 450px მაშინ  container  ზომა გახდება ეკრანის ზომის შესაბამისი,  მისი საწყისი სიგანე კი გაბათილდება

min-width თვისება განსსაზღვრავს ელემენტის მინიმალურ სიგანეს


თანამედროვე დიზაინში ხშირად ელემენტები დინამიურად იცვლიან ზომას , არის სიტუაციები რომ

გვჭირდება ელემენტის შემცირება ისე რომ არ დაპატარავდეს შეზღუდულ ზომამდე  


მაგალითი:

css:
.container{
      width: 100%;
    min-width:150px;
}


html:
<div class="container">
  <h1>კონტენტი</h1>
</div>

განმარტება:

სიგანეში container  ტეგი  არის მშობელი ელემენტის ზომის , მაგრამ თუ მშობელი ელემენტის ზომა ჩამოცდება 150px
მაშინ  container   ელემენტის ზომა გახდება ფიქსირებული 150px